141 lines
4.9 KiB
JavaScript
141 lines
4.9 KiB
JavaScript
window.Sidebar = {
|
|
props: ['selectedCell'],
|
|
emits: ['update-cell', 'close'],
|
|
setup(props, { emit }) {
|
|
const { ref, watch } = Vue;
|
|
|
|
const shiftType = ref(null);
|
|
const startTime = ref('');
|
|
const endTime = ref('');
|
|
const notes = ref('');
|
|
const selectedGroups = ref([]);
|
|
|
|
const shiftOptions = [
|
|
'Morning Shift (08:00-16:00)',
|
|
'Afternoon Shift (12:00-20:00)',
|
|
'Night Shift (20:00-04:00)',
|
|
'Training',
|
|
'Absence'
|
|
];
|
|
|
|
const groupOptions = [
|
|
'Molecular App',
|
|
'EOD Morning',
|
|
'EOD Afternoon',
|
|
'Special Project'
|
|
];
|
|
|
|
watch(() => props.selectedCell, (newVal) => {
|
|
if (newVal) {
|
|
shiftType.value = null;
|
|
startTime.value = '08:00';
|
|
endTime.value = '16:00';
|
|
notes.value = '';
|
|
selectedGroups.value = [];
|
|
}
|
|
});
|
|
|
|
const save = () => {
|
|
emit('update-cell', {
|
|
shiftType: shiftType.value,
|
|
time: \`\${startTime.value} - \${endTime.value}\`,
|
|
notes: notes.value,
|
|
groups: selectedGroups.value
|
|
});
|
|
emit('close');
|
|
};
|
|
|
|
return {
|
|
shiftType,
|
|
startTime,
|
|
endTime,
|
|
notes,
|
|
selectedGroups,
|
|
shiftOptions,
|
|
groupOptions,
|
|
save
|
|
};
|
|
},
|
|
template: `
|
|
<div class="column full-height bg-white">
|
|
<q-toolbar class="bg-white text-grey-9 border-bottom">
|
|
<q-btn flat round dense icon="close" @click="$emit('close')"></q-btn>
|
|
<q-toolbar-title class="text-subtitle1">
|
|
Edit Shift
|
|
</q-toolbar-title>
|
|
<q-btn flat round dense icon="check" color="primary" @click="save"></q-btn>
|
|
</q-toolbar>
|
|
|
|
<div class="col q-pa-md scroll" v-if="selectedCell">
|
|
<div class="text-subtitle2 q-mb-xs text-grey-7">
|
|
{{ selectedCell.day.dayName }}, {{ selectedCell.day.dayNum }}
|
|
</div>
|
|
<div class="text-h6 q-mb-md">{{ selectedCell.agent.name }}</div>
|
|
|
|
<q-separator class="q-mb-md"></q-separator>
|
|
|
|
<q-select
|
|
outlined
|
|
dense
|
|
v-model="shiftType"
|
|
:options="shiftOptions"
|
|
label="Shift Type"
|
|
class="q-mb-md"
|
|
></q-select>
|
|
|
|
<div class="row q-gutter-sm q-mb-md">
|
|
<q-input outlined dense v-model="startTime" label="Start" class="col" mask="time" :rules="['time']">
|
|
<template v-slot:append>
|
|
<q-icon name="access_time" class="cursor-pointer">
|
|
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
|
|
<q-time v-model="startTime"></q-time>
|
|
</q-popup-proxy>
|
|
</q-icon>
|
|
</template>
|
|
</q-input>
|
|
<q-input outlined dense v-model="endTime" label="End" class="col" mask="time" :rules="['time']">
|
|
<template v-slot:append>
|
|
<q-icon name="access_time" class="cursor-pointer">
|
|
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
|
|
<q-time v-model="endTime"></q-time>
|
|
</q-popup-proxy>
|
|
</q-icon>
|
|
</template>
|
|
</q-input>
|
|
</div>
|
|
|
|
<q-select
|
|
outlined
|
|
dense
|
|
v-model="selectedGroups"
|
|
:options="groupOptions"
|
|
label="ExNet Groups"
|
|
multiple
|
|
use-chips
|
|
stack-label
|
|
class="q-mb-md"
|
|
></q-select>
|
|
|
|
<q-input
|
|
outlined
|
|
v-model="notes"
|
|
label="Notes / Activities"
|
|
type="textarea"
|
|
rows="3"
|
|
class="q-mb-md"
|
|
></q-input>
|
|
|
|
<q-banner class="bg-blue-1 text-blue-10 rounded-borders" v-if="shiftType">
|
|
<template v-slot:avatar>
|
|
<q-icon name="info" color="blue" />
|
|
</template>
|
|
Shift complies with daily rest rules.
|
|
</q-banner>
|
|
</div>
|
|
<div v-else class="col flex flex-center text-grey-5">
|
|
Select a cell to edit
|
|
</div>
|
|
</div>
|
|
`
|
|
};
|