@7365admin1/layer-common 1.9.0 → 1.10.1

package/components/TableHygiene.vue

@@ -0,0 +1,617 @@
+<template>
+  <v-row no-gutters>
+    <!-- Top Actions -->
+    <v-col cols="12" class="mb-2" v-if="canCreate || $slots.actions">
+      <v-row no-gutters>
+        <slot name="actions">
+          <v-btn
+            v-if="canCreate"
+            class="text-none"
+            rounded="pill"
+            variant="tonal"
+            size="large"
+            @click="emits('create')"
+          >
+            {{ createLabel }}
+          </v-btn>
+        </slot>
+      </v-row>
+    </v-col>
+
+    <!-- List Card -->
+    <v-col cols="12">
+      <v-card
+        width="100%"
+        variant="outlined"
+        border="thin"
+        rounded="lg"
+        :loading="loading"
+      >
+        <!-- Toolbar -->
+        <v-toolbar
+          density="compact"
+          color="grey-lighten-4"
+          :extension-height="extensionHeight"
+        >
+          <template #prepend>
+            <v-btn fab icon density="comfortable" @click="emits('refresh')">
+              <v-icon>mdi-refresh</v-icon>
+            </v-btn>
+            <slot name="prepend-additional" />
+          </template>
+
+          <v-toolbar-title v-if="title" class="text-subtitle-1 font-weight-medium">
+            {{ title }}
+          </v-toolbar-title>
+
+          <template #append>
+            <v-row no-gutters justify="end" align="center">
+              <span class="mr-2 text-caption text-fontgray">
+                {{ pageRange }}
+              </span>
+              <local-pagination
+                v-model="internalPage"
+                :length="pages"
+                @update:value="emits('update:page', internalPage)"
+              />
+            </v-row>
+          </template>
+
+          <template v-if="$slots.extension" #extension>
+            <slot name="extension" />
+          </template>
+        </v-toolbar>
+
+        <v-divider />
+
+        <!-- List Items -->
+        <v-list
+          :style="`max-height: calc(100vh - (${offset}px)); overflow-y: auto;`"
+        >
+          <v-list-item
+            v-if="groupedItems.length === 0"
+            class="py-6 text-center text-medium-emphasis"
+          >
+            {{ noDataText }}
+          </v-list-item>
+
+          <template
+            v-for="(group, groupIndex) in groupedItems"
+            :key="`group-${groupIndex}`"
+          >
+            <div
+              v-if="group.set !== undefined"
+              class="d-flex align-center justify-space-between px-4 py-1 text-caption text-medium-emphasis"
+              style="min-height: 32px"
+            >
+              <span>Set {{ group.set }}</span>
+              <div class="d-flex align-center ga-2">
+                <span v-if="group.completedByName">
+                  Completed by: {{ group.completedByName }}
+                </span>
+                <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)
+                  "
+                >
+                  View Attachment ({{ group.attachments.length }})
+                </v-btn>
+              </div>
+            </div>
+
+            <v-list-item
+              v-for="item in group.items"
+              :key="item[itemValue]"
+              class="py-3"
+              :class="
+                isItemSelected(item, group.set)
+                  ? ['bg-grey-lighten-4', 'rounded']
+                  : []
+              "
+            >
+              <slot name="list-item" :item="item">
+                <v-list-item-title v-if="headers[0]">
+                  {{ getItemValue(item, headers[0].value) }}
+                </v-list-item-title>
+
+                <v-list-item-subtitle
+                  v-if="headers[1]"
+                  class="mb-1 text-high-emphasis opacity-100"
+                >
+                  {{ getItemValue(item, headers[1].value) || "N/A" }}
+                </v-list-item-subtitle>
+
+                <v-list-item-subtitle
+                  v-if="headers[2]"
+                  class="text-high-emphasis"
+                >
+                  {{ getItemValue(item, headers[2].value) || "N/A" }}
+                </v-list-item-subtitle>
+              </slot>
+
+              <template v-slot:append>
+                <slot
+                  name="list-item-append"
+                  :item="item"
+                  :isSelected="isItemSelected(item, group.set)"
+                >
+                  <v-list-item-action class="d-flex flex-row ga-2">
+                    <template v-if="canManageScheduleTasks">
+                      <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-btn
+                        icon="mdi-check"
+                        size="small"
+                        :variant="
+                          activeActions[getKey(item, group.set)] === 'approve'
+                            ? 'flat'
+                            : 'text'
+                        "
+                        color="success"
+                        @click.stop="
+                          handleActionClick(item, group.set, 'approve')
+                        "
+                      />
+                    </template>
+                  </v-list-item-action>
+                </slot>
+              </template>
+            </v-list-item>
+          </template>
+        </v-list>
+
+        <slot name="footer" />
+      </v-card>
+    </v-col>
+  </v-row>
+
+  <!-- Attachment Preview 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 {{ 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>
+
+  <!-- Full Image Lightbox -->
+  <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>
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  noDataText: {
+    type: String,
+    default: "No data available",
+  },
+  headers: {
+    type: Array as PropType<Array<Record<string, any>>>,
+    required: true,
+  },
+  items: {
+    type: Array as PropType<Array<Record<string, any>>>,
+    default: () => [],
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  canCreate: {
+    type: Boolean,
+    default: false,
+  },
+  createLabel: {
+    type: String,
+    default: "Add",
+  },
+  itemValue: {
+    type: String,
+    default: "_id",
+  },
+  itemsPerPage: {
+    type: Number,
+    default: 20,
+  },
+  page: {
+    type: Number,
+    default: 1,
+  },
+  pages: {
+    type: Number,
+    default: 0,
+  },
+  pageRange: {
+    type: String,
+    default: "-- - -- of --",
+  },
+  showHeader: {
+    type: Boolean,
+    default: false,
+  },
+  canManageScheduleTasks: {
+    type: Boolean,
+    default: true,
+  },
+  canAddRemarks: {
+    type: Boolean,
+    default: true,
+  },
+  extensionHeight: {
+    type: Number,
+    default: 50,
+  },
+  offset: {
+    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 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);
+      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;
+    });
+
+    return {
+      set: item.set,
+      completedByName: item.completedByName ?? null,
+      attachments:
+        (item.attachment as string[] | undefined) ??
+        (item.attachments as string[] | undefined) ??
+        [],
+      items: sortedUnits,
+    };
+  });
+});
+
+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 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;
+}
+
+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>