52 lines
3.8 KiB
JavaScript
52 lines
3.8 KiB
JavaScript
import { computed } from 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js';
|
|
import { usePlannerState } from '../../services/planner-state-service.js';
|
|
import { SHIFTS } from '../../services/data-constants.js';
|
|
|
|
export default {
|
|
name: 'PlannerEditDrawer',
|
|
props: {
|
|
modelValue: Boolean,
|
|
mode: String,
|
|
},
|
|
emits: ['update:modelValue'],
|
|
setup(props, { emit }) {
|
|
const { state, methods } = usePlannerState();
|
|
|
|
const currentAssignmentLabel = computed(() => {
|
|
if (state.pendingShift) return state.pendingShift.label;
|
|
if (!state.selectedAgent || !state.selectedDate) return null;
|
|
const a = methods.getAssignment(state.selectedAgent.id, state.selectedDate);
|
|
return a ? a.label : null;
|
|
});
|
|
|
|
const saveAssignment = () => {
|
|
methods.saveAssignment();
|
|
emit('update:modelValue', false);
|
|
};
|
|
|
|
const setPendingShift = (shift) => {
|
|
state.pendingShift = shift;
|
|
};
|
|
|
|
return {
|
|
state,
|
|
shifts: SHIFTS,
|
|
currentAssignmentLabel,
|
|
saveAssignment,
|
|
setPendingShift,
|
|
formatDateForId: methods.formatDateForId,
|
|
closeDrawer: () => emit('update:modelValue', false),
|
|
};
|
|
},
|
|
template: `
|
|
<q-drawer :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)" side="right" bordered :width="380" overlay elevated>
|
|
<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">{{ mode === 'assignment' ? 'Edit Assignment' : 'Agent Details' }}</q-toolbar-title><q-btn flat round dense icon="close" color="grey-5" @click="closeDrawer"></q-btn></q-toolbar>
|
|
<q-scroll-area class="col q-pa-lg">
|
|
<div v-if="state.selectedAgent" class="row items-center q-mb-xl"><q-avatar size="64px" class="shadow-1"><img :src="state.selectedAgent.avatar"></q-avatar><div class="q-ml-md"><div class="text-h6 text-weight-bold">{{ state.selectedAgent.name }}</div><div class="text-caption text-grey-7">{{ state.selectedAgent.dept }} • {{ state.selectedAgent.role }}</div><div class="text-caption text-indigo-8 text-weight-bold q-mt-xs"><q-icon name="public" size="xs" class="q-mr-xs"></q-icon> {{ state.selectedAgent.hubName }}</div></div></div>
|
|
<template v-if="mode === 'assignment' && state.selectedDate"><div class="q-mb-lg q-pa-md bg-blue-grey-1 rounded-borders border"><div class="row items-center justify-between no-wrap"><div><div class="text-overline text-blue-grey-4">Shift Date</div><div class="text-subtitle1 text-weight-bold text-blue-grey-9">{{ state.selectedDate.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' }) }}</div></div><q-icon name="event" color="blue-grey-2" size="sm"></q-icon></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-weight-bold q-mb-sm text-grey-7">Cell Identifier</div><div class="bg-grey-1 q-pa-sm rounded-borders border text-[10px] text-grey-6 font-mono break-all">#cell-{{state.selectedAgent.id}}-{{formatDateForId(state.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="closeDrawer"></q-btn><q-btn unelevated rounded color="indigo-10" label="Save Assignment" class="col" @click="saveAssignment"></q-btn></div>
|
|
</div>
|
|
</q-drawer>`
|
|
}; |