@7365admin1/layer-common 1.10.7 → 1.10.8

package/components/ManageChecklistMain.vue

@@ -17,11 +17,9 @@
         </v-col>
       </v-row>
       <TableHygiene
-        ref="tableHygieneRef"
         :title="'Cleaner Checklist'"
         :headers="headers"
         :items="items"
-        :selected="selectedItems"
         :item-value="'unit'"
         v-model:page="page"
         :pages="pages"
@@ -29,13 +27,112 @@
         :loading="loading"
         :no-data-text="`No checklist found`"
         :show-header="true"
-        :can-manage-schedule-tasks="!isScheduleClosed && canManageScheduleTasks"
-        :can-add-remarks="!isScheduleClosed && canAddRemarks"
         @refresh="getUnitCleanerChecklistRefresh"
-        @update:selected="selectedItems = $event"
-        @action-click="handleActionClick"
-        @request-completion-dialog="openCompletionDialog"
-      />
+      >
+        <!-- Status icon driven by local activeActions state -->
+        <template #item-prepend="{ item, group }">
+          <v-icon
+            size="20"
+            :color="
+              activeActions[getKey(item, group.set)] === 'approve'
+                ? 'success'
+                : activeActions[getKey(item, group.set)] === 'reject'
+                ? 'error'
+                : 'grey-lighten-2'
+            "
+          >
+            {{
+              activeActions[getKey(item, group.set)] === "approve"
+                ? "mdi-check-circle"
+                : activeActions[getKey(item, group.set)] === "reject"
+                ? "mdi-close-circle"
+                : "mdi-circle-outline"
+            }}
+          </v-icon>
+        </template>
+
+        <!-- Item name with strike-through when approved -->
+        <template #item-content="{ item, group }">
+          <v-row no-gutters>
+            <v-col cols="12">
+              <span
+                class="text-body-2 font-weight-medium"
+                :class="
+                  activeActions[getKey(item, group.set)] === 'approve'
+                    ? 'text-decoration-line-through text-medium-emphasis'
+                    : ''
+                "
+              >
+                {{ item.name }}
+              </span>
+            </v-col>
+            <v-col v-if="item.timestamp" cols="12">
+              <v-row no-gutters align="center" class="mt-1">
+                <v-col
+                  cols="auto"
+                  class="d-flex align-center ga-1 text-caption text-medium-emphasis pa-0"
+                >
+                  <v-icon size="11">mdi-clock-outline</v-icon>
+                  {{ formatTimestamp(item.timestamp) }}
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-row>
+        </template>
+
+        <!-- Approve / Reject action buttons -->
+        <template #item-append="{ item, group }">
+          <v-row
+            v-if="!isScheduleClosed && canManageScheduleTasks"
+            no-gutters
+            align="center"
+          >
+            <v-col cols="auto">
+              <v-btn
+                icon="mdi-close"
+                size="small"
+                :variant="
+                  activeActions[getKey(item, group.set)] === 'reject'
+                    ? 'flat'
+                    : 'text'
+                "
+                color="error"
+                @click.stop="handleItemActionClick(item, group.set, 'reject')"
+              />
+            </v-col>
+            <v-col cols="auto">
+              <v-btn
+                icon="mdi-check"
+                size="small"
+                :variant="
+                  activeActions[getKey(item, group.set)] === 'approve'
+                    ? 'flat'
+                    : 'text'
+                "
+                color="success"
+                :loading="!!loadingActions[getKey(item, group.set)]"
+                :disabled="!!loadingActions[getKey(item, group.set)]"
+                @click.stop="handleItemActionClick(item, group.set, 'approve')"
+              />
+            </v-col>
+          </v-row>
+        </template>
+        <template #group-header-append="{ group }">
+          <v-btn
+            v-if="group.attachments && group.attachments.length > 0"
+            size="x-small"
+            variant="tonal"
+            color="primary"
+            class="text-none"
+            prepend-icon="mdi-paperclip"
+            @click.stop="openAttachmentDialog(group.set, group.attachments)"
+          >
+            {{ group.attachments.length }} attachment{{
+              group.attachments.length > 1 ? "s" : ""
+            }}
+          </v-btn>
+        </template>
+      </TableHygiene>
     </v-col>
   </v-row>
 
@@ -99,12 +196,90 @@
     </v-card>
   </v-dialog>
 
+  <v-dialog v-model="showAttachmentDialog" max-width="700" scrollable>
+    <v-card>
+      <v-card-title class="d-flex align-center pa-4">
+        <span class="text-h6 font-weight-bold">
+          Set {{ attachmentDialogSetNum }} — Attachments
+        </span>
+        <v-spacer />
+        <v-btn
+          icon="mdi-close"
+          variant="text"
+          size="small"
+          @click="showAttachmentDialog = false"
+        />
+      </v-card-title>
+
+      <v-divider />
+
+      <v-card-text class="pa-4">
+        <v-row>
+          <v-col
+            v-for="(id, index) in attachmentDialogIds"
+            :key="index"
+            cols="6"
+            sm="4"
+          >
+            <v-sheet
+              rounded="lg"
+              class="overflow-hidden"
+              style="aspect-ratio: 1"
+            >
+              <v-img
+                :src="getFileUrl(id)"
+                aspect-ratio="1"
+                cover
+                class="rounded-lg"
+                @click="openFullImage(getFileUrl(id))"
+                style="cursor: zoom-in"
+              >
+                <template v-slot:placeholder>
+                  <v-row
+                    class="fill-height ma-0"
+                    align="center"
+                    justify="center"
+                  >
+                    <v-progress-circular indeterminate color="grey-lighten-4" />
+                  </v-row>
+                </template>
+                <template v-slot:error>
+                  <v-row
+                    class="fill-height ma-0"
+                    align="center"
+                    justify="center"
+                  >
+                    <v-icon icon="mdi-image-broken" size="40" color="grey" />
+                  </v-row>
+                </template>
+              </v-img>
+            </v-sheet>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+
+  <v-dialog v-model="showLightbox" max-width="900">
+    <v-card>
+      <v-card-actions class="pa-2 justify-end">
+        <v-btn icon="mdi-close" variant="text" @click="showLightbox = false" />
+      </v-card-actions>
+      <v-card-text class="pa-2 pt-0">
+        <v-img :src="lightboxSrc" contain max-height="80vh" />
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+
   <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
 </template>
 
 <script setup lang="ts">
 import { useCleaningSchedulePermission } from "../composables/useCleaningSchedulePermission";
 import useCleaningSchedules from "../composables/useCleaningSchedules";
+import useCustomerSite from "../composables/useCustomerSite";
+import useFile from "../composables/useFile";
+import useUtils from "../composables/useUtils";
 
 const props = defineProps({
   orgId: { type: String, default: "" },
@@ -120,8 +295,13 @@ const { back } = useUtils();
 const { canAddRemarks, canManageScheduleTasks } =
   useCleaningSchedulePermission();
 
-const selectedScheduleStatus = useState<string>('selectedScheduleStatus', () => '')
-const isScheduleClosed = computed(() => selectedScheduleStatus.value.toLowerCase() === 'closed')
+const selectedScheduleStatus = useState<string>(
+  "selectedScheduleStatus",
+  () => ""
+);
+const isScheduleClosed = computed(
+  () => selectedScheduleStatus.value.toLowerCase() === "closed"
+);
 
 const page = ref<number>(1);
 const pages = ref<number>(0);
@@ -135,10 +315,94 @@ const messageColor = ref<string>("");
 const categories = ref<
   Array<{ title: string; value: string; subtitle: string }>
 >([]);
-const tableHygieneRef = ref<any>(null);
-
 const headers = [{ title: "Name", value: "name" }];
 
+// ── Action state (approve / reject per item key) ───────────────────────────
+const activeActions = reactive<Record<string, "approve" | "reject">>({});
+const persistedActions = reactive<Record<string, "approve" | "reject">>({});
+const loadingActions = reactive<Record<string, boolean>>({});
+const completedSets = ref<Set<number>>(new Set());
+const lastApprovedKey = ref<string | null>(null);
+
+function getKey(item: any, set?: number): string {
+  return `${item.unit}_${set ?? ""}`;
+}
+
+function isSetFullyApproved(setNumber: number): boolean {
+  const group = items.value.find((g: any) => g.set === setNumber);
+  if (!group) return false;
+  return (group.units || []).every(
+    (unit: any) => activeActions[getKey(unit, setNumber)] === "approve"
+  );
+}
+
+function getNewApprovedItemsForSet(
+  setNumber: number
+): Array<{ key: string; item: any; action: "approve" }> {
+  const group = items.value.find((g: any) => g.set === setNumber);
+  if (!group) return [];
+  return (group.units || [])
+    .filter((unit: any) => {
+      const key = getKey(unit, setNumber);
+      return activeActions[key] === "approve" && !(key in persistedActions);
+    })
+    .map((unit: any) => ({
+      key: getKey(unit, setNumber),
+      item: { ...unit, set: setNumber },
+      action: "approve" as const,
+    }));
+}
+
+function revertSetApprovals(setNumber: number): void {
+  const group = items.value.find((g: any) => g.set === setNumber);
+  if (group) {
+    (group.units || []).forEach((unit: any) => {
+      const key = getKey(unit, setNumber);
+      if (!(key in persistedActions)) {
+        delete activeActions[key];
+      }
+    });
+  }
+  completedSets.value.delete(setNumber);
+}
+
+function stopLoadingAction(key: string): void {
+  delete loadingActions[key];
+}
+
+// ── Attachment dialog ──────────────────────────────────────────────────────
+const showAttachmentDialog = ref(false);
+const attachmentDialogSetNum = ref<number | undefined>(undefined);
+const attachmentDialogIds = ref<string[]>([]);
+const showLightbox = ref(false);
+const lightboxSrc = ref("");
+
+const { getFileUrl } = useFile();
+
+function openAttachmentDialog(setNumber: number, attachments: string[]) {
+  attachmentDialogSetNum.value = setNumber;
+  attachmentDialogIds.value = attachments;
+  showAttachmentDialog.value = true;
+}
+
+function openFullImage(src: string) {
+  lightboxSrc.value = src;
+  showLightbox.value = true;
+}
+
+function formatTimestamp(ts: string): string {
+  if (!ts) return "";
+  const date = new Date(ts);
+  return date.toLocaleString("en-SG", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: true,
+  });
+}
+
 const { data: getCategoriesReq } = await useLazyAsyncData(
   "get-categories-for-work-order",
   () => getBySiteAsServiceProvider(props.site)
@@ -176,11 +440,12 @@ const {
 );
 
 watchEffect(() => {
-  if (getCategoriesReq.value) {
-    categories.value = getCategoriesReq.value.map((i: any) => ({
-      title: i.nature.replace(/_/g, " "),
-      subtitle: i.title,
-      value: i._id.org,
+  const data = getCategoriesReq.value as any;
+  if (data) {
+    categories.value = (data.categories ?? data).map((cat: any) => ({
+      title: cat.name,
+      value: cat.id,
+      subtitle: cat.description || "",
     }));
   }
 });
@@ -211,6 +476,35 @@ watchEffect(() => {
   selectedItems.value = completed;
 });
 
+watch(
+  items,
+  (newItems) => {
+    if (!Array.isArray(newItems)) return;
+
+    Object.keys(persistedActions).forEach(
+      (key) => delete persistedActions[key]
+    );
+
+    newItems.forEach((group: any) => {
+      const set = group.set;
+      (group.units || []).forEach((unit: any) => {
+        const key = getKey(unit, set);
+        if ((unit as any).approve === true) {
+          activeActions[key] = "approve";
+          persistedActions[key] = "approve";
+        } else if ((unit as any).reject === true) {
+          activeActions[key] = "reject";
+          persistedActions[key] = "reject";
+        }
+      });
+    });
+
+    completedSets.value.clear();
+    Object.keys(loadingActions).forEach((k) => delete loadingActions[k]);
+  },
+  { immediate: true }
+);
+
 function showMessage(msg: string, color: string = "error"): void {
   message.value = msg;
   messageColor.value = color;
@@ -231,9 +525,9 @@ function closeModal(): void {
   showCompletionModal.value = false;
   resetModalData();
 
-  // Notify TableHygiene to revert approval states
-  if (setNumber !== undefined && tableHygieneRef.value) {
-    tableHygieneRef.value.revertSetApprovals(setNumber);
+  // Revert optimistic approval state for this set
+  if (setNumber !== undefined) {
+    revertSetApprovals(setNumber);
   }
 }
 
@@ -252,7 +546,10 @@ function openCompletionDialog({
   lastApprovedKey: string | null;
 }): void {
   if (isScheduleClosed.value) {
-    showMessage("This schedule is closed. No actions can be performed.", "error");
+    showMessage(
+      "This schedule is closed. No actions can be performed.",
+      "error"
+    );
     return;
   }
 
@@ -294,26 +591,73 @@ async function submitModal(): Promise<void> {
   closeModal();
 }
 
-async function handleActionClick(data: {
-  item: TFlattenedUnitItem;
-  action: "approve" | "reject";
-}): Promise<void> {
+async function handleItemActionClick(
+  item: TUnitChecklistItem,
+  set: number | undefined,
+  action: "approve" | "reject"
+): Promise<void> {
   if (isScheduleClosed.value) {
-    showMessage("This schedule is closed. No actions can be performed.", "error");
+    showMessage(
+      "This schedule is closed. No actions can be performed.",
+      "error"
+    );
     return;
   }
 
-  const { item, action } = data;
-
-  if (!item?.unit || item?.set === undefined) {
+  if (!item?.unit || set === undefined) {
     showMessage("Invalid unit or set", "error");
     return;
   }
 
+  const key = getKey(item, set);
+  const isPersisted = key in persistedActions;
+
+  // Toggle off optimistic state if clicking the same un-persisted action
+  if (activeActions[key] === action && !isPersisted) {
+    delete activeActions[key];
+    return;
+  }
+
+  activeActions[key] = action;
+
+  if (action === "reject") {
+    await _callUpdateUnitChecklist(item, set, action);
+    return;
+  }
+
+  // Approve: check if this completes the entire set
+  lastApprovedKey.value = key;
+
+  if (isSetFullyApproved(set) && !completedSets.value.has(set)) {
+    const newApprovedItems = getNewApprovedItemsForSet(set);
+    if (newApprovedItems.length > 0) {
+      completedSets.value.add(set);
+      openCompletionDialog({
+        setNumber: set,
+        approvedItems: newApprovedItems,
+        lastApprovedKey: lastApprovedKey.value,
+      });
+      return;
+    }
+  }
+
+  // Single item approve (does not complete the set yet)
+  if (!isPersisted) {
+    delete activeActions[key];
+    loadingActions[key] = true;
+  }
+
+  await _callUpdateUnitChecklist(item, set, action);
+}
+
+async function _callUpdateUnitChecklist(
+  item: TUnitChecklistItem,
+  set: number,
+  action: "approve" | "reject"
+): Promise<void> {
   const isApproved = selectedItems.value.some(
-    (s) => s.unit === item.unit && s.set === item.set
+    (s) => s.unit === item.unit && s.set === set
   );
-
   if (isApproved && action === "approve") {
     showMessage("Unit already approved", "info");
     return;
@@ -322,23 +666,17 @@ async function handleActionClick(data: {
   submitting.value = true;
 
   try {
-    const checklistId = props.scheduleAreaId;
-    const unitId = item.unit;
-    const setNumber = item.set;
-
     const response = await updateUnitChecklist(
-      checklistId,
-      unitId,
-      setNumber,
+      props.scheduleAreaId,
+      item.unit,
+      set,
       action
     );
-
     showMessage(
       response?.message ||
         `Unit ${action === "approve" ? "approved" : "rejected"} successfully`,
       "success"
     );
-
     await getUnitCleanerChecklistRefresh();
   } catch (error: any) {
     console.error("Error updating unit checklist:", error);
@@ -349,7 +687,7 @@ async function handleActionClick(data: {
   } finally {
     submitting.value = false;
     if (action === "approve") {
-      tableHygieneRef.value?.stopLoadingAction(`${item.unit}_${item.set}`);
+      stopLoadingAction(getKey(item, set));
     }
   }
 }