115 lines
4.1 KiB
JavaScript
115 lines
4.1 KiB
JavaScript
/**
|
|
* assignment-drawer.js
|
|
* =====================
|
|
* Right overlay drawer: agent profile, shift assignment buttons,
|
|
* save / cancel actions.
|
|
*/
|
|
|
|
import {
|
|
rightDrawer,
|
|
editMode,
|
|
selectedAgent,
|
|
selectedDate,
|
|
pendingShift,
|
|
formatDateForId
|
|
} from '../../services/planner-state.js';
|
|
|
|
import {
|
|
SHIFTS,
|
|
getAssignment,
|
|
assignments,
|
|
saveAssignment as doSave
|
|
} from '../../services/data-service.js';
|
|
|
|
export default {
|
|
name: 'AssignmentDrawer',
|
|
setup() {
|
|
const currentAssignmentLabel = Vue.computed(() => {
|
|
if (pendingShift.value) return pendingShift.value.label;
|
|
if (!selectedAgent.value || !selectedDate.value) return null;
|
|
const a = getAssignment(selectedAgent.value.id, selectedDate.value);
|
|
return a ? a.label : null;
|
|
});
|
|
|
|
const setPendingShift = (shift) => { pendingShift.value = shift; };
|
|
|
|
const saveAssignment = () => {
|
|
doSave(selectedAgent, selectedDate, pendingShift, rightDrawer);
|
|
};
|
|
|
|
return {
|
|
rightDrawer,
|
|
editMode,
|
|
selectedAgent,
|
|
selectedDate,
|
|
pendingShift,
|
|
formatDateForId,
|
|
shifts: SHIFTS,
|
|
currentAssignmentLabel,
|
|
setPendingShift,
|
|
saveAssignment
|
|
};
|
|
},
|
|
template: `
|
|
<q-drawer v-model="rightDrawer" side="right" bordered :width="380" overlay>
|
|
<div class="column full-height bg-white">
|
|
<q-toolbar class="bg-white border-b q-px-md" style="height: 64px">
|
|
<q-toolbar-title class="text-subtitle1 text-weight-bold">
|
|
{{ editMode === 'assignment' ? 'Edit Assignment' : 'Agent Details' }}
|
|
</q-toolbar-title>
|
|
<q-btn flat round dense icon="close" color="grey-5" @click="rightDrawer = false"></q-btn>
|
|
</q-toolbar>
|
|
|
|
<q-scroll-area class="col q-pa-lg">
|
|
<div v-if="selectedAgent" class="row items-center q-mb-xl">
|
|
<q-avatar size="64px"><img :src="selectedAgent.avatar"></q-avatar>
|
|
<div class="q-ml-md">
|
|
<div class="text-h6 text-weight-bold">{{ selectedAgent.name }}</div>
|
|
<div class="text-caption text-grey-7">{{ selectedAgent.dept }} • {{ selectedAgent.role }}</div>
|
|
<div class="text-caption text-grey-7 text-weight-bold q-mt-xs">
|
|
{{ selectedAgent.hubName }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<template v-if="editMode === 'assignment' && selectedDate">
|
|
<div class="q-mb-lg">
|
|
<div class="text-overline text-grey-5">Shift Date</div>
|
|
<div class="text-subtitle1 text-weight-bold text-grey-9">
|
|
{{ selectedDate.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' }) }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-weight-bold q-mb-md">Standard Shifts</div>
|
|
<div class="row q-col-gutter-sm q-mb-xl">
|
|
<div v-for="s in shifts" :key="s.id" class="col-6">
|
|
<q-btn :color="s.color"
|
|
:unelevated="currentAssignmentLabel === s.label"
|
|
:outline="currentAssignmentLabel !== s.label"
|
|
rounded dense no-caps :label="s.label"
|
|
class="full-width q-py-sm"
|
|
@click="setPendingShift(s)"></q-btn>
|
|
</div>
|
|
<div class="col-12">
|
|
<q-btn outline rounded dense color="red-4" label="Clear Assignment"
|
|
class="full-width q-mt-sm" icon="delete_outline"
|
|
@click="setPendingShift(null)"></q-btn>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-overline text-grey-5 q-mb-xs">Cell Identifier</div>
|
|
<div class="text-caption text-grey-5 font-mono break-all">
|
|
#cell-{{selectedAgent.id}}-{{formatDateForId(selectedDate)}}
|
|
</div>
|
|
</template>
|
|
</q-scroll-area>
|
|
|
|
<div class="q-pa-lg border-t row q-gutter-md bg-grey-1">
|
|
<q-btn flat rounded label="Cancel" class="col" @click="rightDrawer = false"></q-btn>
|
|
<q-btn unelevated rounded color="grey-9" label="Save Assignment" class="col" @click="saveAssignment"></q-btn>
|
|
</div>
|
|
</div>
|
|
</q-drawer>
|
|
`
|
|
};
|