@7365admin1/layer-common 1.10.6 → 1.10.8

package/components/TableHygiene.vue

@@ -95,45 +95,43 @@
                     Set {{ group.set }}
                   </span>
                   <v-chip
-                    v-if="group.completedByName && isGroupComplete(group)"
+                    v-if="group.isScheduleTask"
                     size="x-small"
-                    color="success"
+                    color="info"
                     variant="tonal"
-                    prepend-icon="mdi-check-circle-outline"
+                    prepend-icon="mdi-calendar-clock"
                     class="text-none"
                   >
-                    Completed · {{ group.completedByName }}
-                  </v-chip>
-                  <v-chip
-                    v-else-if="
-                      group.completedByName && isGroupInProgress(group)
-                    "
-                    size="x-small"
-                    color="warning"
-                    variant="tonal"
-                    prepend-icon="mdi-progress-clock"
-                    class="text-none"
-                  >
-                    Ongoing · {{ group.completedByName }}
+                    Schedule Task
                   </v-chip>
+                  <slot name="group-header-chips" :group="group">
+                    <v-chip
+                      v-if="group.completedByName && isGroupComplete(group)"
+                      size="x-small"
+                      color="success"
+                      variant="tonal"
+                      prepend-icon="mdi-check-circle-outline"
+                      class="text-none"
+                    >
+                      Completed · {{ group.completedByName }}
+                    </v-chip>
+                    <v-chip
+                      v-else-if="
+                        group.completedByName && isGroupInProgress(group)
+                      "
+                      size="x-small"
+                      color="warning"
+                      variant="tonal"
+                      prepend-icon="mdi-progress-clock"
+                      class="text-none"
+                    >
+                      Ongoing · {{ group.completedByName }}
+                    </v-chip>
+                  </slot>
                 </v-col>
                 <v-spacer />
                 <v-col cols="auto">
-                  <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>
+                  <slot name="group-header-append" :group="group" />
                 </v-col>
               </v-row>
             </v-sheet>
@@ -141,45 +139,20 @@
             <v-sheet
               v-for="item in group.items"
               :key="item[itemValue]"
-              :color="
-                isItemSelected(item, group.set) ? 'grey-lighten-4' : 'white'
-              "
+              color="white"
               border="b"
             >
               <v-row no-gutters align="center" class="px-4 py-2">
                 <v-col cols="auto" class="mr-3">
-                  <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>
+                  <slot name="item-prepend" :item="item" :group="group" />
                 </v-col>
+
                 <v-col>
-                  <slot name="list-item" :item="item">
-                    <v-row no-gutters align-center>
+                  <slot name="item-content" :item="item" :group="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'
-                              : ''
-                          "
-                        >
-                          {{ getItemValue(item, headers[0].value) }}
+                        <span class="text-body-2 font-weight-medium">
+                          {{ getItemValue(item, headers[0]?.value) }}
                         </span>
                       </v-col>
                       <v-col
@@ -229,48 +202,7 @@
                 </v-col>
 
                 <v-col cols="auto">
-                  <slot
-                    name="list-item-append"
-                    :item="item"
-                    :isSelected="isItemSelected(item, group.set)"
-                  >
-                    <v-row
-                      v-if="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="
-                            handleActionClick(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"
-                          @click.stop="
-                            handleActionClick(item, group.set, 'approve')
-                          "
-                        />
-                      </v-col>
-                    </v-row>
-                  </slot>
+                  <slot name="item-append" :item="item" :group="group" />
                 </v-col>
               </v-row>
             </v-sheet>
@@ -281,81 +213,6 @@
       </v-card>
     </v-col>
   </v-row>
-
-  <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 {{ attachmentDialogSet }} — 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>
 </template>
 
 <script lang="ts" setup>
@@ -414,14 +271,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  canManageScheduleTasks: {
-    type: Boolean,
-    default: true,
-  },
-  canAddRemarks: {
-    type: Boolean,
-    default: true,
-  },
   extensionHeight: {
     type: Number,
     default: 50,
@@ -430,73 +279,33 @@ const props = defineProps({
     type: Number,
     default: 200,
   },
-  selected: {
-    type: Array as PropType<any[]>,
-    default: () => [],
-  },
 });
 
-const emits = defineEmits([
-  "create",
-  "refresh",
-  "update:page",
-  "row-click",
-  "update:selected",
-  "action-click",
-  "request-completion-dialog",
-]);
-
-defineExpose({
-  revertSetApprovals,
-});
+const emits = defineEmits(["create", "refresh", "update:page"]);
 
 const internalPage = ref(props.page);
-const selected = shallowRef<any[]>(props.selected);
-const activeActions = reactive<Record<string, "approve" | "reject">>({});
-const persistedActions = reactive<Record<string, "approve" | "reject">>({});
-const completedSets = ref<Set<number>>(new Set());
 const itemOrderMap = new Map<string, number>();
 
-const showAttachmentDialog = ref(false);
-const attachmentDialogSet = ref<number | undefined>(undefined);
-const attachmentDialogIds = ref<string[]>([]);
-const showLightbox = ref(false);
-const lightboxSrc = ref("");
-
-const { getFileUrl } = useFile();
-
-function openAttachmentDialog(setNumber: number, attachments: string[]) {
-  attachmentDialogSet.value = setNumber;
-  attachmentDialogIds.value = attachments;
-  showAttachmentDialog.value = true;
-}
-
-function openFullImage(src: string) {
-  lightboxSrc.value = src;
-  showLightbox.value = true;
-}
-
 const groupedItems = computed(() => {
   return props.items.map((item: any) => {
     const units = item.units || [item];
 
-    units.forEach((unit: any, index: number) => {
-      const key = getKey(unit, item.set);
+    units.forEach((unit: any) => {
+      const key = `${unit[props.itemValue]}_${item.set}`;
       if (!itemOrderMap.has(key)) {
         itemOrderMap.set(key, itemOrderMap.size);
       }
     });
 
     const sortedUnits = [...units].sort((a: any, b: any) => {
-      const keyA = getKey(a, item.set);
-      const keyB = getKey(b, item.set);
-      const orderA = itemOrderMap.get(keyA) ?? 0;
-      const orderB = itemOrderMap.get(keyB) ?? 0;
-      return orderA - orderB;
+      const keyA = `${a[props.itemValue]}_${item.set}`;
+      const keyB = `${b[props.itemValue]}_${item.set}`;
+      return (itemOrderMap.get(keyA) ?? 0) - (itemOrderMap.get(keyB) ?? 0);
     });
 
     return {
       set: item.set,
+      isScheduleTask: item.isScheduleTask ?? false,
       completedByName: item.completedByName ?? null,
       attachments:
         (item.attachment as string[] | undefined) ??
@@ -507,27 +316,6 @@ const groupedItems = computed(() => {
   });
 });
 
-const totalItemsCount = computed(() => {
-  return groupedItems.value.reduce((acc, group) => acc + group.items.length, 0);
-});
-
-const approvedItemsCount = computed(() => {
-  return Object.values(activeActions).filter((action) => action === "approve")
-    .length;
-});
-
-const hasRejectedItems = computed(() => {
-  return Object.values(activeActions).some((action) => action === "reject");
-});
-
-const allItemsApproved = computed(() => {
-  return (
-    totalItemsCount.value > 0 &&
-    approvedItemsCount.value === totalItemsCount.value &&
-    !hasRejectedItems.value
-  );
-});
-
 function formatTimestamp(ts: string): string {
   if (!ts) return "";
   const date = new Date(ts);
@@ -556,187 +344,16 @@ function isGroupInProgress(group: { items: any[] }): boolean {
   );
 }
 
-function isSetFullyApproved(setNumber: number): boolean {
-  const group = groupedItems.value.find((g) => g.set === setNumber);
-  if (!group) return false;
-
-  return group.items.every((item: any) => {
-    const key = getKey(item, setNumber);
-    return activeActions[key] === "approve";
-  });
-}
-
-function getNewApprovedItemsForSet(
-  setNumber: number
-): Array<{ key: string; item: any; action: "approve" }> {
-  const group = groupedItems.value.find((g) => g.set === setNumber);
-  if (!group) return [];
-
-  const approvedItems: Array<{ key: string; item: any; action: "approve" }> =
-    [];
-
-  group.items.forEach((item: any) => {
-    const key = getKey(item, setNumber);
-    if (activeActions[key] === "approve" && !(key in persistedActions)) {
-      approvedItems.push({
-        key,
-        item: { ...item, set: setNumber },
-        action: "approve",
-      });
-    }
-  });
-
-  return approvedItems;
+function getItemValue(item: any, key: string): string {
+  if (!key) return "";
+  return key.split(".").reduce((obj: any, k: string) => obj?.[k], item) ?? "";
 }
 
-const lastApprovedKey = ref<string | null>(null);
-
 watch(
   () => props.page,
   (val) => {
     internalPage.value = val;
-
     itemOrderMap.clear();
   }
 );
-
-watch(
-  () => props.selected,
-  (val) => {
-    selected.value = val;
-  }
-);
-
-watch(selected, (val) => {
-  emits("update:selected", val);
-});
-
-watch(
-  () => props.items,
-  (items) => {
-    if (!items || !Array.isArray(items)) return;
-
-    Object.keys(persistedActions).forEach(
-      (key) => delete persistedActions[key]
-    );
-
-    items.forEach((group: any) => {
-      const set = group.set;
-      const units = group.units || [];
-
-      units.forEach((unit: any) => {
-        const key = getKey(unit, set);
-        if (unit.approve === true) {
-          activeActions[key] = "approve";
-          persistedActions[key] = "approve";
-        } else if (unit.reject === true) {
-          activeActions[key] = "reject";
-          persistedActions[key] = "reject";
-        }
-      });
-    });
-  },
-  { immediate: true }
-);
-
-function getKey(item: any, set?: number): string {
-  return `${item[props.itemValue]}_${set ?? ""}`;
-}
-
-function getItemValue(item: any, key: string): string {
-  if (!key) return "";
-  return key.split(".").reduce((obj, k) => obj?.[k], item) ?? "";
-}
-
-function isItemSelected(item: any, set?: number): boolean {
-  if (!Array.isArray(selected.value) || selected.value.length === 0) {
-    return false;
-  }
-
-  if (typeof selected.value[0] === "object" && "unit" in selected.value[0]) {
-    return selected.value.some(
-      (s: any) => s.unit === item[props.itemValue] && s.set === set
-    );
-  }
-
-  return selected.value.includes(item[props.itemValue]);
-}
-
-function handleActionClick(
-  item: any,
-  set: number | undefined,
-  action: "approve" | "reject"
-): void {
-  const key = getKey(item, set);
-
-  const isPersisted = key in persistedActions;
-
-  if (activeActions[key] === action && !isPersisted) {
-    delete activeActions[key];
-    return;
-  }
-
-  activeActions[key] = action;
-
-  if (action === "reject") {
-    console.debug("TableHygiene: emitting action-click", {
-      item: { ...item, set },
-      action,
-    });
-    emits("action-click", { item: { ...item, set }, action });
-  }
-
-  if (action === "approve") {
-    lastApprovedKey.value = key;
-
-    if (
-      set !== undefined &&
-      isSetFullyApproved(set) &&
-      !completedSets.value.has(set)
-    ) {
-      const newApprovedItems = getNewApprovedItemsForSet(set);
-
-      if (newApprovedItems.length > 0) {
-        // Mark this set as completed
-        completedSets.value.add(set);
-
-        // Emit request to open completion dialog
-        emits("request-completion-dialog", {
-          setNumber: set,
-          approvedItems: newApprovedItems,
-          lastApprovedKey: lastApprovedKey.value,
-        });
-        return;
-      }
-    }
-    console.debug("TableHygiene: emitting action-click (approve immediate)", {
-      item: { ...item, set },
-      action,
-    });
-    emits("action-click", { item: { ...item, set }, action });
-  }
-}
-
-function revertSetApprovals(setNumber: number): void {
-  const group = groupedItems.value.find((g) => g.set === setNumber);
-  if (group) {
-    group.items.forEach((item: any) => {
-      const key = getKey(item, setNumber);
-
-      if (!(key in persistedActions)) {
-        delete activeActions[key];
-      }
-    });
-  }
-
-  completedSets.value.delete(setNumber);
-}
-
-watch(
-  () => props.items,
-  () => {
-    completedSets.value.clear();
-  },
-  { deep: true }
-);
 </script>

package/components/UnitPersonCard.vue

@@ -0,0 +1,123 @@
+<template>
+  <v-card-text>
+    <v-row>
+      <v-col cols="12" md="4" class="mt-2">
+        <InputLabel class="font-weight-bold" title="Name" />
+        <v-text-field :model-value="person.name" density="compact" :readonly="readOnly"
+          :class="{ 'no-pointer': readOnly }" />
+      </v-col>
+
+      <v-col cols="12" md="4" class="mt-2">
+        <InputLabel class="font-weight-bold" title="Email Address" />
+        <v-text-field :model-value="person.email" density="compact" :readonly="readOnly"
+          :class="{ 'no-pointer': readOnly }" />
+      </v-col>
+
+      <v-col cols="12" md="4" class="mt-2">
+        <InputLabel class="font-weight-bold" title="NRIC" />
+        <v-text-field :model-value="person.nric" density="compact" :readonly="readOnly"
+          :class="{ 'no-pointer': readOnly }" />
+      </v-col>
+
+      <v-col cols="12" md="4" class="mt-2">
+        <InputLabel class="font-weight-bold" title="Mobile Number" />
+        <v-text-field :model-value="person.contact" density="compact" :readonly="readOnly"
+          :class="{ 'no-pointer': readOnly }" />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12" md="4" class="mt-2">
+        <InputLabel class="font-weight-bold" title="Other Documents and Files" :viewMode="readOnly" />
+
+        <p v-if="!person.files?.length" class="text-blue-darken-2 font-weight-thin text-caption ml-2 mt-5">
+          **No documents to display**
+        </p>
+        <v-list v-else dense nav class="mt-2">
+          <v-list-item v-for="file in person.files" :key="file.id" class="text-blue-darken-2"
+            :href="getFileUrl(file.id)" target="_blank">
+            <v-list-item-content>
+              <v-list-item-title class="d-flex align-center">
+                <span>
+                  <v-icon size="18" class="mr-1">mdi-file-document-outline</v-icon>
+                </span>
+                <span> {{ file.name }}</span>
+              </v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>
+
+      </v-col>
+
+      <v-col cols="0" md="4"></v-col>
+      <v-col v-if="prop.showOwnerOption" cols="12" md="4">
+        <v-checkbox :model-value="person.isOwner" readonly hide-details density="compact" @click="handleClick">
+          <template #label>
+            <span class="font-weight-bold text-subtitle-2 ml-2">Is Owner?</span>
+          </template>
+        </v-checkbox>
+
+        <span class="d-flex text-caption text-gray-5 ml-7">As owner, you will be receiving emails and updates
+                related to this unit.</span>
+      </v-col>
+    </v-row>
+
+    <v-dialog v-model="dialog.showPrompt" persistent width="540">
+      <DialogReusablePrompt :loading="loadingOwnerProcessing"
+        :prompt-title="`Are you sure want to ${person.isOwner ? 'remove' : 'add'} (${person.name}) as owner ?`"
+        @proceed="handleApprove(person)" @close="dialog.showPrompt = false" />
+    </v-dialog>
+  </v-card-text>
+</template>
+
+<script setup lang="ts">
+import useFile from '../composables/useFile';
+
+const prop = defineProps({
+  person: {
+    type: Object as PropType<TPeople>,
+    required: true,
+  },
+  readOnly: {
+    type: Boolean,
+    default: false,
+  },
+  showOwnerOption: {
+    type: Boolean,
+    default: false,
+  },
+  loadingOwnerProcessing: {
+    type: Boolean,
+    default: false,
+  }
+})
+
+const { getFileUrl } = useFile()
+
+const emit = defineEmits(['update:owner'])
+
+
+const dialog = reactive({
+  showPrompt: false,
+})
+
+
+
+
+
+const handleApprove = (person: TPeople) => {
+  dialog.showPrompt = false;
+  emit('update:owner', { person, isOwner: !person.isOwner })
+}
+
+const handleClick = () => {
+  dialog.showPrompt = true;
+}
+
+</script>
+
+<style lang="scss" scoped>
+.no-pointer {
+  pointer-events: none;
+}
+</style>