Added new modules and updated existing logic

2026-02-24 13:32:01 +01:00
parent 2a4b4ed5fe
commit ad734273ce
694 changed files with 27935 additions and 610 deletions
--- a/4.6/src/components/assignment-drawer/assignment-drawer.js
+++ b/4.6/src/components/assignment-drawer/assignment-drawer.js
@@ -0,0 +1,114 @@
+/**
+ * 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 }} &bull; {{ 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>
+  `
+};