@7365admin1/layer-common 1.10.3 → 1.10.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 1.10.5
+
+### Patch Changes
+
+- eaec446: Update changes for March 6, 2024
+
+## 1.10.4
+
+### Patch Changes
+
+- a78dff9: Update Layer-common Changes for March 4, 2026
+
 ## 1.10.3
 
 ### Patch Changes

package/components/AccessCardDeleteDialog.vue

@@ -0,0 +1,109 @@
+<template>
+  <v-dialog :model-value="modelValue" width="450" persistent>
+    <v-card width="100%">
+      <v-toolbar density="compact" class="pl-4">
+        <span class="font-weight-medium text-h5">Delete Card</span>
+      </v-toolbar>
+
+      <v-card-text>
+        <p class="text-subtitle-2 text-center mb-4">
+          Are you sure you want to delete this card? This action cannot be
+          undone.
+        </p>
+
+        <v-form v-model="validForm" :disabled="loading">
+          <InputLabel class="text-capitalize font-weight-bold" title="Remarks" required />
+          <v-textarea
+            v-model="remarks"
+            placeholder="Enter remarks..."
+            persistent-placeholder
+            rows="3"
+            auto-grow
+            hide-details="auto"
+            :rules="[requiredRule]"
+          />
+        </v-form>
+
+        <v-row v-if="error" no-gutters justify="center" class="mt-3">
+          <span class="text-caption text-error text-center">{{ error }}</span>
+        </v-row>
+      </v-card-text>
+
+      <v-toolbar density="compact">
+        <v-row no-gutters>
+          <v-col cols="6">
+            <v-btn
+              tile
+              block
+              size="48"
+              variant="text"
+              class="text-none"
+              :disabled="loading"
+              @click="handleClose"
+            >
+              Close
+            </v-btn>
+          </v-col>
+          <v-col cols="6">
+            <v-btn
+              tile
+              block
+              size="48"
+              color="black"
+              variant="flat"
+              class="text-none"
+              :loading="loading"
+              :disabled="!validForm || loading"
+              @click="handleConfirm"
+            >
+              Delete Card
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-toolbar>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  error: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+  confirm: [remarks: string];
+}>();
+
+const { requiredRule } = useUtils();
+
+const validForm = ref(false);
+const remarks = ref("");
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val) remarks.value = "";
+  }
+);
+
+function handleClose() {
+  emit("update:modelValue", false);
+}
+
+function handleConfirm() {
+  if (!validForm.value) return;
+  emit("confirm", remarks.value.trim());
+}
+</script>

package/components/AccessCardHistoryDialog.vue

@@ -0,0 +1,133 @@
+<template>
+  <v-dialog :model-value="modelValue" width="480" persistent>
+    <v-card width="100%">
+      <v-toolbar density="compact" color="black">
+        <v-toolbar-title class="text-subtitle-1 font-weight-medium">
+          Card History — {{ card?.cardNo ?? "N/A" }}
+        </v-toolbar-title>
+        <v-btn icon @click="emit('update:modelValue', false)">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </v-toolbar>
+
+      <v-card-text style="max-height: 70vh; overflow-y: auto" class="pa-4">
+        <div v-if="pending" class="d-flex justify-center align-center py-8">
+          <v-progress-circular indeterminate color="black" />
+        </div>
+
+        <div v-else-if="!history.length" class="text-center text-grey py-8">
+          No history available.
+        </div>
+
+        <v-timeline v-else side="end" density="compact" truncate-line="both">
+          <v-timeline-item
+            v-for="(item, index) in history"
+            :key="index"
+            :dot-color="actionColor(item.action)"
+            size="small"
+          >
+            <template #icon>
+              <v-icon size="14" color="white">{{ actionIcon(item.action) }}</v-icon>
+            </template>
+
+            <div class="mb-4">
+              <div class="d-flex align-center ga-2 mb-1">
+                <v-chip
+                  :color="actionColor(item.action)"
+                  variant="flat"
+                  size="x-small"
+                  class="text-capitalize font-weight-medium"
+                >
+                  {{ actionLabel(item.action) }}
+                </v-chip>
+              </div>
+              <div class="text-body-2">{{ item.performedBy?.name ?? "N/A" }}</div>
+              <div class="text-caption text-grey">{{ formatDate(item.date) }}</div>
+            </div>
+          </v-timeline-item>
+        </v-timeline>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  card: {
+    type: Object as PropType<Record<string, any> | null>,
+    default: null,
+  },
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+}>();
+
+const { getCardHistory } = useAccessManagement();
+
+const history = ref<Record<string, any>[]>([]);
+const pending = ref(false);
+
+watch(
+  () => props.modelValue,
+  async (val) => {
+    if (val && props.card?._id) {
+      pending.value = true;
+      try {
+        const data = await getCardHistory(props.card._id);
+        history.value = Array.isArray(data) ? data : [];
+      } finally {
+        pending.value = false;
+      }
+    } else {
+      history.value = [];
+    }
+  }
+);
+
+function actionLabel(action: string) {
+  const map: Record<string, string> = {
+    available: "Created",
+    assign: "Assigned",
+    replace: "Replaced",
+    deleted: "Deleted",
+  };
+  return map[action] ?? action;
+}
+
+function actionColor(action: string) {
+  const map: Record<string, string> = {
+    available: "success",
+    assign: "primary",
+    replace: "orange",
+    deleted: "error",
+  };
+  return map[action] ?? "grey";
+}
+
+function actionIcon(action: string) {
+  const map: Record<string, string> = {
+    available: "mdi-plus",
+    assign: "mdi-account-check",
+    replace: "mdi-swap-horizontal",
+    deleted: "mdi-delete",
+  };
+  return map[action] ?? "mdi-circle-small";
+}
+
+function formatDate(date: string) {
+  if (!date) return "N/A";
+  return new Intl.DateTimeFormat("en-GB", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: true,
+  }).format(new Date(date));
+}
+</script>

package/components/AccessCardPreviewDialog.vue

@@ -0,0 +1,308 @@
+<template>
+  <AccessCardHistoryDialog
+    v-model="historyDialog"
+    :card="selectedCardInUnit"
+  />
+
+  <v-dialog :model-value="modelValue" width="450" persistent>
+    <v-card width="100%">
+      <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
+        <v-row no-gutters class="mb-4">
+          <v-col cols="12">
+            <strong>Building:</strong> {{ unit?.block?.name ?? "N/A" }}
+          </v-col>
+          <v-col cols="12">
+            <strong>Level:</strong> {{ unit?.level?.level ?? "N/A" }}
+          </v-col>
+          <v-col cols="12">
+            <strong>Unit:</strong> {{ unit?.name ?? "N/A" }}
+          </v-col>
+
+          <!-- Available Physical -->
+          <v-col cols="12" class="mt-3">
+            <strong>Available Physical</strong>
+            <div v-if="unit?.available?.physical?.length" class="mt-1">
+              <v-chip
+                v-for="card in unit.available.physical"
+                :key="card._id"
+                size="small"
+                class="mr-1 mb-1"
+                :color="selectedCardInUnit?._id === card._id ? 'primary' : undefined"
+                :variant="selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'"
+                style="cursor: pointer"
+                @click="toggleCard(card)"
+              >
+                {{ card.cardNo }}
+              </v-chip>
+            </div>
+            <span v-else class="text-caption text-grey ml-1">None</span>
+          </v-col>
+
+          <!-- Available Non-Physical -->
+          <v-col cols="12" class="mt-2">
+            <strong>Available Non-Physical</strong>
+            <div v-if="unit?.available?.non_physical?.length" class="mt-1">
+              <v-chip
+                v-for="card in unit.available.non_physical"
+                :key="card._id"
+                size="small"
+                class="mr-1 mb-1"
+                :color="selectedCardInUnit?._id === card._id ? 'primary' : undefined"
+                :variant="selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'"
+                style="cursor: pointer"
+                @click="toggleCard(card)"
+              >
+                {{ card.cardNo }}
+              </v-chip>
+            </div>
+            <span v-else class="text-caption text-grey ml-1">None</span>
+          </v-col>
+
+          <!-- Assigned Physical -->
+          <v-col cols="12" class="mt-2">
+            <strong>Assigned Physical</strong>
+            <div v-if="unit?.assigned?.physical?.length" class="mt-1">
+              <v-chip
+                v-for="card in unit.assigned.physical"
+                :key="card._id"
+                size="small"
+                class="mr-1 mb-1"
+                :color="selectedCardInUnit?._id === card._id ? 'primary' : undefined"
+                :variant="selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'"
+                style="cursor: pointer"
+                @click="toggleCard(card)"
+              >
+                {{ card.cardNo }}
+              </v-chip>
+            </div>
+            <span v-else class="text-caption text-grey ml-1">None</span>
+          </v-col>
+
+          <!-- Assigned Non-Physical -->
+          <v-col cols="12" class="mt-2">
+            <strong>Assigned Non-Physical</strong>
+            <div v-if="unit?.assigned?.non_physical?.length" class="mt-1">
+              <v-chip
+                v-for="card in unit.assigned.non_physical"
+                :key="card._id"
+                size="small"
+                class="mr-1 mb-1"
+                :color="selectedCardInUnit?._id === card._id ? 'primary' : undefined"
+                :variant="selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'"
+                style="cursor: pointer"
+                @click="toggleCard(card)"
+              >
+                {{ card.cardNo }}
+              </v-chip>
+            </div>
+            <span v-else class="text-caption text-grey ml-1">None</span>
+          </v-col>
+
+          <!-- Replaced Physical -->
+          <v-col cols="12" class="mt-2">
+            <strong>Replaced Physical</strong>
+            <div v-if="unit?.replaced?.physical?.length" class="mt-1">
+              <v-chip
+                v-for="card in unit.replaced.physical"
+                :key="card._id"
+                size="small"
+                class="mr-1 mb-1"
+                :color="selectedCardInUnit?._id === card._id ? 'orange' : 'orange'"
+                :variant="selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'"
+                style="cursor: pointer"
+                @click="toggleCard(card)"
+              >
+                {{ card.cardNo }}
+              </v-chip>
+            </div>
+            <span v-else class="text-caption text-grey ml-1">None</span>
+          </v-col>
+
+          <!-- Replaced Non-Physical -->
+          <v-col cols="12" class="mt-2">
+            <strong>Replaced Non-Physical</strong>
+            <div v-if="unit?.replaced?.non_physical?.length" class="mt-1">
+              <v-chip
+                v-for="card in unit.replaced.non_physical"
+                :key="card._id"
+                size="small"
+                class="mr-1 mb-1"
+                :color="selectedCardInUnit?._id === card._id ? 'orange' : 'orange'"
+                :variant="selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'"
+                style="cursor: pointer"
+                @click="toggleCard(card)"
+              >
+                {{ card.cardNo }}
+              </v-chip>
+            </div>
+            <span v-else class="text-caption text-grey ml-1">None</span>
+          </v-col>
+
+          <!-- Deleted Physical -->
+          <v-col cols="12" class="mt-2">
+            <strong>Deleted Physical</strong>
+            <div v-if="unit?.deleted?.physical?.length" class="mt-1">
+              <v-chip
+                v-for="card in unit.deleted.physical"
+                :key="card._id"
+                size="small"
+                class="mr-1 mb-1"
+                :color="selectedCardInUnit?._id === card._id ? 'red' : 'red'"
+                :variant="selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'"
+                style="cursor: pointer"
+                @click="toggleCard(card)"
+              >
+                {{ card.cardNo }}
+              </v-chip>
+            </div>
+            <span v-else class="text-caption text-grey ml-1">None</span>
+          </v-col>
+
+          <!-- Deleted Non-Physical -->
+          <v-col cols="12" class="mt-2">
+            <strong>Deleted Non-Physical</strong>
+            <div v-if="unit?.deleted?.non_physical?.length" class="mt-1">
+              <v-chip
+                v-for="card in unit.deleted.non_physical"
+                :key="card._id"
+                size="small"
+                class="mr-1 mb-1"
+                :color="selectedCardInUnit?._id === card._id ? 'red' : 'red'"
+                :variant="selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'"
+                style="cursor: pointer"
+                @click="toggleCard(card)"
+              >
+                {{ card.cardNo }}
+              </v-chip>
+            </div>
+            <span v-else class="text-caption text-grey ml-1">None</span>
+          </v-col>
+        </v-row>
+      </v-card-text>
+
+      <v-toolbar class="pa-0" density="compact">
+        <v-row no-gutters>
+          <v-col cols="6" class="pa-0">
+            <v-btn
+              block
+              variant="text"
+              class="text-none"
+              size="large"
+              height="48"
+              @click="emit('update:modelValue', false)"
+            >
+              Close
+            </v-btn>
+          </v-col>
+          <v-col cols="6" class="pa-0" v-if="canUpdate">
+            <v-menu>
+              <template #activator="{ props }">
+                <v-btn
+                  block
+                  variant="flat"
+                  color="black"
+                  class="text-none"
+                  height="48"
+                  v-bind="props"
+                  tile
+                >
+                  More actions
+                </v-btn>
+              </template>
+              <v-list class="pa-0">
+                <v-list-item
+                  :disabled="!isSelectedCardAssignedPhysical"
+                  @click="emit('replace')"
+                  v-if="canReplaceAccessCard && isSelectedCardAssignedPhysical"
+                >
+                  <v-list-item-title class="text-subtitle-2">
+                    Replace Card
+                  </v-list-item-title>
+                </v-list-item>
+                <v-list-item :disabled="!isSelectedCardPhysical" @click="historyDialog = true">
+                  <v-list-item-title class="text-subtitle-2 cursor-pointer">
+                    Card History
+                  </v-list-item-title>
+                </v-list-item>
+                <v-list-item
+                  @click="emit('delete')"
+                  class="text-red"
+                  :disabled="!isSelectedCardDeletable"
+                  v-if="canDeleteAccessCard"
+                >
+                  <v-list-item-title class="text-subtitle-2">
+                    Delete Card
+                  </v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </v-col>
+        </v-row>
+      </v-toolbar>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  unit: {
+    type: Object as PropType<Record<string, any>>,
+    default: () => ({}),
+  },
+  selectedCardInUnit: {
+    type: Object as PropType<Record<string, any> | null>,
+    default: null,
+  },
+  canUpdate: {
+    type: Boolean,
+    default: true,
+  },
+  canReplaceAccessCard: {
+    type: Boolean,
+    default: true,
+  },
+  canDeleteAccessCard: {
+    type: Boolean,
+    default: true,
+  },
+  isSelectedCardAssignedPhysical: {
+    type: Boolean,
+    default: false,
+  },
+  isSelectedCardPhysical: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+  "update:selectedCardInUnit": [value: Record<string, any> | null];
+  replace: [];
+  delete: [];
+}>();
+
+const historyDialog = ref(false);
+
+const isSelectedCardDeletable = computed(() => {
+  if (!props.selectedCardInUnit?._id) return false;
+  const id = props.selectedCardInUnit._id;
+  return [
+    ...(props.unit?.available?.physical ?? []),
+    ...(props.unit?.available?.non_physical ?? []),
+    ...(props.unit?.assigned?.physical ?? []),
+    ...(props.unit?.assigned?.non_physical ?? []),
+  ].some((c) => c._id === id);
+});
+
+function toggleCard(card: Record<string, any>) {
+  emit(
+    "update:selectedCardInUnit",
+    props.selectedCardInUnit?._id === card._id ? null : card
+  );
+}
+</script>