@7365admin1/layer-common 1.10.0 → 1.10.2

package/components/AccessManagement.vue

@@ -2,16 +2,28 @@
   <v-row no-gutters>
     <v-col cols="12" class="mb-2">
       <v-row no-gutters align="center" justify="space-between">
-        <v-btn
-          class="text-none"
-          rounded="pill"
-          variant="tonal"
-          size="large"
-          @click="setCard()"
-          v-if="canCreate && canCreateAccessCard"
-        >
-          Add Access Card
-        </v-btn>
+        <v-row no-gutters class="ga-2">
+          <v-btn
+            class="text-none"
+            rounded="pill"
+            variant="tonal"
+            size="large"
+            @click="setCard()"
+            v-if="canCreate && canCreateAccessCard"
+          >
+            Add Access Card
+          </v-btn>
+          <v-btn
+            class="text-none"
+            rounded="pill"
+            variant="tonal"
+            size="large"
+            @click="assignDialog = true"
+            v-if="canCreate && canAssignAccessCard"
+          >
+            Assign to Unit
+          </v-btn>
+        </v-row>
 
         <v-text-field
           v-model="searchText"
@@ -25,6 +37,11 @@
         />
       </v-row>
     </v-col>
+    <!-- Available Card Stats -->
+    <v-col cols="12" class="mb-2">
+      <AccessCardAvailableStats ref="statsRef" :site-id="siteId" />
+    </v-col>
+
     <v-col cols="12">
       <v-card
         width="100%"
@@ -71,16 +88,17 @@
       <AccessCardAddForm
         @cancel="createDialog = false"
         @success="successCreate()"
+        @error="(msg) => showMessage(msg, 'error')"
       />
     </v-dialog>
 
-    <!-- Edit Dialog -->
-    <v-dialog v-model="editDialog" width="650" persistent>
-      <AccessCardAddForm
-        mode="edit"
-        @cancel="editDialog = false"
-        @success="successUpdate()"
-        :card="selectedCard"
+    <!-- Assign to Unit Dialog -->
+    <v-dialog v-model="assignDialog" width="650" persistent>
+      <AccessCardAssignToUnitForm
+        :site-id="siteId"
+        @cancel="assignDialog = false"
+        @success="successAssign()"
+        @error="(msg: any) => showMessage(msg, 'error')"
       />
     </v-dialog>
 
@@ -90,21 +108,130 @@
         <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>Card:</strong> {{ selectedCard?.cardNumber ?? "N/A" }}
+              <strong>Unit:</strong> {{ selectedCard?.name ?? "N/A" }}
             </v-col>
             <v-col cols="12">
-              <strong>Access Type:</strong>
-              {{ selectedCard?.accessCardType ?? "N/A" }}
+              <strong>Block:</strong> {{ selectedCard?.block?.name ?? "N/A" }}
             </v-col>
             <v-col cols="12">
-              <strong>Unit:</strong>
-              {{ selectedCard?.unit || "N/A" }}
+              <strong>Level:</strong> {{ selectedCard?.level?.level ?? "N/A" }}
             </v-col>
-            <v-col cols="12">
-              <strong>Assign:</strong> {{ selectedCard?.assign || "N/A" }}
+
+            <!-- Available Physical -->
+            <v-col cols="12" class="mt-3">
+              <strong>Available Physical</strong>
+              <div
+                v-if="selectedCard?.available?.physical?.length"
+                class="mt-1"
+              >
+                <v-chip
+                  v-for="card in selectedCard.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="
+                    selectedCardInUnit =
+                      selectedCardInUnit?._id === card._id ? null : card
+                  "
+                >
+                  {{ card.cardNo }}
+                </v-chip>
+              </div>
+              <span v-else class="text-caption text-grey ml-1">None</span>
             </v-col>
-            <v-col cols="12">
-              <strong>Status:</strong> {{ selectedCard?.status ?? "N/A" }}
+
+            <!-- Available Non-Physical -->
+            <v-col cols="12" class="mt-2">
+              <strong>Available Non-Physical</strong>
+              <div
+                v-if="selectedCard?.available?.non_physical?.length"
+                class="mt-1"
+              >
+                <v-chip
+                  v-for="card in selectedCard.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="
+                    selectedCardInUnit =
+                      selectedCardInUnit?._id === card._id ? null : 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="selectedCard?.assigned?.physical?.length" class="mt-1">
+                <v-chip
+                  v-for="card in selectedCard.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="
+                    selectedCardInUnit =
+                      selectedCardInUnit?._id === card._id ? null : 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="selectedCard?.assigned?.non_physical?.length"
+                class="mt-1"
+              >
+                <v-chip
+                  v-for="card in selectedCard.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="
+                    selectedCardInUnit =
+                      selectedCardInUnit?._id === card._id ? null : 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
         >
@@ -139,14 +266,10 @@
                 </template>
                 <v-list class="pa-0">
                   <v-list-item
-                    @click="openEditDialog()"
-                    v-if="canUpdateAccessCard"
+                    :disabled="selectedCardInUnit === null"
+                    @click="openReplaceDialog()"
+                    v-if="canReplaceAccessCard"
                   >
-                    <v-list-item-title class="text-subtitle-2">
-                      Edit Card
-                    </v-list-item-title>
-                  </v-list-item>
-                  <v-list-item @click="openReplaceDialog()" v-if="canReplaceAccessCard">
                     <v-list-item-title class="text-subtitle-2">
                       Replace Card
                     </v-list-item-title>
@@ -154,6 +277,7 @@
                   <v-list-item
                     @click="openDeleteDialog()"
                     class="text-red"
+                    :disabled="selectedCardInUnit === null"
                     v-if="canDeleteAccessCard"
                   >
                     <v-list-item-title class="text-subtitle-2">
@@ -238,18 +362,38 @@ const props = defineProps({
     type: Array as PropType<Array<Record<string, any>>>,
     default: () => [
       {
-        title: "Card",
-        value: "cardNumber",
+        title: "Unit",
+        value: "name",
       },
       {
-        title: "Unit",
-        value: "unit",
+        title: "Block",
+        value: "block.name",
       },
       {
-        title: "Assign",
-        value: "assign",
+        title: "Level",
+        value: "level.level",
       },
-      { title: "Action", value: "action-table" },
+      {
+        title: "Avail. (P)",
+        value: "cardCounts.available.physical",
+      },
+      {
+        title: "Avail. (NP)",
+        value: "cardCounts.available.non_physical",
+      },
+      {
+        title: "Asgn. (P)",
+        value: "cardCounts.assigned.physical",
+      },
+      {
+        title: "Asgn. (NP)",
+        value: "cardCounts.assigned.non_physical",
+      },
+      {
+        title: "Total",
+        value: "totalCardCount",
+      },
+      // { title: "Action", value: "action-table" },
     ],
   },
   canCreate: {
@@ -268,15 +412,15 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  canUpdateAccessCard: {
+  canDeleteAccessCard: {
     type: Boolean,
     default: true,
   },
-  canDeleteAccessCard: {
+  canReplaceAccessCard: {
     type: Boolean,
     default: true,
   },
-  canReplaceAccessCard: {
+  canAssignAccessCard: {
     type: Boolean,
     default: true,
   },
@@ -293,39 +437,31 @@ const messageColor = ref("");
 
 const items = ref<Array<Record<string, any>>>([]);
 const createDialog = ref(false);
-const editDialog = ref(false);
+const assignDialog = ref(false);
 const previewDialog = ref(false);
 const deleteLoading = ref(false);
 const confirmDialog = ref(false);
 const searchText = ref("");
 const replaceDialog = ref(false);
 
-const selectedCard = ref<TCard>({
-  _id: "",
-  name: "",
-  accessCardType: "",
-  // visitorType: "",
-  type: "",
-  cardNumber: "",
-  startDate: "",
-  endDate: "",
-  door: "",
-  accessGroup: [],
-  cardType: "",
-  pinNo: "",
-  useAsLiftCard: false,
-  liftAccessLevel: "",
-  isActivate: true,
-  isAntiPassBack: false,
-  status: "",
-  org: "",
-  site: "",
-  unit: "",
-  assign: "",
-});
+const route = useRoute();
+//@TODO
+const siteId = computed(() => route.params.site as string);
+// const siteId = computed(() => "66ab2f1381856008f1887971" as string);
+const orgId = computed(() => route.params.org as string);
+
+const selectedCard = ref<Record<string, any>>({});
+const selectedCardInUnit = ref<Record<string, any> | null>(null);
 const selectedCardId = ref<string | null>(null);
 
-const { getAll: _getAllCards, deleteById: _deleteCard } = useCard();
+watch(previewDialog, (val) => {
+  if (!val) selectedCardInUnit.value = null;
+});
+
+const { deleteById: _deleteCard } = useCard();
+const { getUserTypeAccessCards } = useAccessManagement();
+
+const statsRef = ref<{ refresh: () => void } | null>(null);
 
 const {
   data: getCardReq,
@@ -334,10 +470,12 @@ const {
 } = useLazyAsyncData(
   "get-all-cards",
   () =>
-    _getAllCards({
+    getUserTypeAccessCards({
       page: page.value,
       search: searchText.value,
-      // search: headerSearch.value,
+      organization: orgId.value,
+      site: siteId.value,
+      userType: "Visitor/Resident",
     }),
   {
     watch: [page, searchText],
@@ -347,19 +485,16 @@ const {
 const loading = computed(() => getAllReqStatus.value === "pending");
 
 watchEffect(() => {
-  if (getCardReq.value) {
-    items.value = getCardReq.value.items;
-    pages.value = getCardReq.value.pages;
-    pageRange.value = getCardReq.value.pageRange;
+  if (getCardReq.value?.data) {
+    items.value = getCardReq.value.data.items;
+    pages.value = getCardReq.value.data.pages;
+    pageRange.value = getCardReq.value.data.pageRange;
   }
 });
 
 function setCard({ mode = "create", dialog = true, data = {} as TCard } = {}) {
   if (mode === "create") {
     createDialog.value = dialog;
-  } else if (mode === "edit") {
-    editDialog.value = dialog;
-    selectedCard.value = data;
   } else if (mode === "preview") {
     previewDialog.value = dialog;
     selectedCard.value = data;
@@ -369,14 +504,15 @@ function setCard({ mode = "create", dialog = true, data = {} as TCard } = {}) {
 function successCreate() {
   createDialog.value = false;
   getCards();
+  statsRef.value?.refresh();
   showMessage("Card created successfully!", "success");
 }
 
-function successUpdate() {
-  editDialog.value = false;
-  previewDialog.value = false;
+function successAssign() {
+  assignDialog.value = false;
   getCards();
-  showMessage("Card updated successfully!", "success");
+  statsRef.value?.refresh();
+  showMessage("Access card assigned successfully!", "success");
 }
 
 function showMessage(msg: string, color: string) {
@@ -390,10 +526,6 @@ function tableRowClickHandler(_: any, data: any) {
   previewDialog.value = true;
 }
 
-function openEditDialog() {
-  editDialog.value = true;
-}
-
 function openDeleteDialog() {
   confirmDialog.value = true;
   message.value = "";
@@ -408,6 +540,7 @@ async function handleDeleteCard() {
   try {
     await _deleteCard(selectedCard.value._id ?? "");
     await getCards();
+    statsRef.value?.refresh();
     selectedCardId.value = null;
     confirmDialog.value = false;
     previewDialog.value = false;

package/components/AddSupplyForm.vue

@@ -0,0 +1,165 @@
+<template>
+  <v-dialog v-model="showDialog" max-width="450">
+    <v-card>
+      <v-toolbar>
+        <v-row no-gutters class="fill-height px-6" align="center">
+          <span class="font-weight-bold text-h6 text-capitalize">
+            {{ prop.mode === "edit" ? "Edit Supply" : "Add New Supply" }}
+          </span>
+        </v-row>
+      </v-toolbar>
+
+      <v-card-text class="pa-4">
+        <v-form ref="formRef" v-model="valid">
+          <v-row no-gutters class="pa-0">
+            <v-col cols="12" class="pa-0 mb-2">
+              <InputLabel for="name" title="Name" required class="mb-1" />
+              <v-text-field
+                v-model="nameModel"
+                :rules="[requiredRule]"
+                density="comfortable"
+                variant="outlined"
+                placeholder="Enter supply name"
+                hide-details="auto"
+                class="mb-0"
+              />
+            </v-col>
+
+            <v-col cols="12" class="pa-0 mb-0">
+              <InputLabel
+                for="unitOfMeasurement"
+                title="Unit of Measurement"
+                required
+                class="mb-1"
+              />
+              <v-select
+                v-model="unitOfMeasurementModel"
+                :items="unitOfMeasurementOptions"
+                :rules="[requiredRule]"
+                density="comfortable"
+                variant="outlined"
+                placeholder="Select unitOfMeasurement"
+                hide-details="auto"
+                class="mb-0"
+              />
+            </v-col>
+          </v-row>
+        </v-form>
+      </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"
+              @click="close"
+              height="48"
+            >
+              Cancel
+            </v-btn>
+          </v-col>
+
+          <v-col cols="6" class="pa-0">
+            <v-btn
+              block
+              variant="flat"
+              color="black"
+              class="text-none font-weight-bold rounded-0"
+              height="48"
+              :loading="submitting"
+              @click="submit"
+            >
+              {{ prop.mode === "edit" ? "Save" : "Create" }}
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-toolbar>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+const nameModel = defineModel("name", { type: String, default: "" });
+const unitOfMeasurementModel = defineModel("unitOfMeasurement", {
+  type: String,
+  default: "",
+});
+const showDialog = defineModel({ type: Boolean, default: false });
+
+const prop = defineProps({
+  mode: {
+    type: String,
+    default: "add",
+  },
+  supplyData: {
+    type: Object,
+    default: null,
+  },
+});
+
+const emit = defineEmits(["saved", "close"]);
+
+const formRef = ref<any>(null);
+const valid = ref(false);
+const submitting = ref(false);
+
+const { requiredRule } = useUtils();
+
+const unitOfMeasurementOptions = [
+  "Pieces",
+  "Boxes",
+  "Bottles",
+  "Liters",
+  "Kilograms",
+  "Grams",
+  "Rolls",
+  "Packs",
+  "Sets",
+  "Units",
+];
+
+watchEffect(() => {
+  nameModel.value = prop.supplyData?.name || "";
+  unitOfMeasurementModel.value = prop.supplyData?.unitOfMeasurement || "";
+});
+
+function close() {
+  showDialog.value = false;
+  emit("close");
+}
+
+async function submit() {
+  const form = formRef.value as any;
+  let ok = valid.value;
+  if (form && typeof form.validate === "function") {
+    const result = await form.validate();
+    ok = result.valid;
+  }
+
+  if (!ok) return;
+
+  submitting.value = true;
+  try {
+    await new Promise((r) => setTimeout(r, 500));
+
+    emit("saved", {
+      name: nameModel.value,
+
+      unitOfMeasurement: unitOfMeasurementModel.value,
+    });
+
+    nameModel.value = "";
+    unitOfMeasurementModel.value = "";
+
+    showDialog.value = false;
+    emit("close");
+  } catch (e) {
+    console.error("Error submitting form:", e);
+  } finally {
+    submitting.value = false;
+  }
+}
+</script>