@7365admin1/layer-common 3.0.26 → 3.0.28

package/components/EntryPassInformation.vue

@@ -59,21 +59,39 @@
           No printer is configured in the settings. QR Pass may not print.
         </v-alert>
         <template v-else>
-          <div class="d-flex align-center justify-space-between mt-3">
-            <InputLabel title="Quantity" />
-            <span v-if="availableCount !== null" class="text-caption text-grey">
-              {{ availableCount }} available
-            </span>
-            <v-progress-circular v-else-if="cardsLoading" size="14" width="2" indeterminate color="grey" />
+          <!-- Generating / loading state -->
+          <div v-if="generating || cardsLoading" class="d-flex align-center ga-2 mt-3 text-caption text-grey-darken-1">
+            <v-progress-circular size="14" width="2" indeterminate color="grey" />
+            <span>{{ generating ? 'Generating QR passes...' : 'Checking availability...' }}</span>
           </div>
-          <v-text-field
-            v-model.number="quantity"
-            type="number"
-            density="comfortable"
-            :min="1"
-            :max="availableCount ?? undefined"
-            hide-details
-          />
+          <!-- 0 available after all loading -->
+          <v-alert
+            v-else-if="availableCount === 0"
+            type="warning"
+            variant="tonal"
+            density="compact"
+            class="mt-3"
+            icon="mdi-information-outline"
+          >
+            No QR passes available. Add at least 1 non-physical card to this unit in Access Management to enable auto-generation.
+          </v-alert>
+          <!-- Normal: quantity input -->
+          <template v-else>
+            <div class="d-flex align-center justify-space-between mt-3">
+              <InputLabel title="Quantity" />
+              <span v-if="availableCount !== null" class="text-caption text-grey">
+                {{ availableCount }} available
+              </span>
+            </div>
+            <v-text-field
+              v-model.number="quantity"
+              type="number"
+              density="comfortable"
+              :min="1"
+              :max="availableCount ?? undefined"
+              hide-details
+            />
+          </template>
         </template>
       </template>
 
@@ -83,7 +101,7 @@
           <InputLabel title="Select Cards" />
           <v-select
             v-model="selectedCards"
-            :items="cardItems"
+            :items="filteredCardItems"
             :loading="cardsLoading"
             item-title="cardNo"
             item-value="_id"
@@ -265,9 +283,13 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  excludedCardIds: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
 });
 
-const emit = defineEmits(["update:modelValue", "update:quantity", "update:cards"]);
+const emit = defineEmits(["update:modelValue", "update:quantity", "update:cards", "update:availableQrCount"]);
 
 const { getAvailableContractorCards, generateQrVms } = useAccessManagement();
 
@@ -309,12 +331,19 @@ function showSnackbar(text: string, color = "error") {
 
 // ─── Card fetching ────────────────────────────────────────────────
 const cardItems = ref<any[]>([]);
+const filteredCardItems = computed(() =>
+  props.excludedCardIds.length
+    ? cardItems.value.filter((c) => !props.excludedCardIds.includes(c._id))
+    : cardItems.value
+);
 const cardsLoading = ref(false);
+const generating = ref(false);
 const availableCount = ref<number | null>(null);
 
 async function fetchCards(type: "NFC" | "QRCODE" = "NFC") {
   if (!props.siteId || !props.unitId) return;
   cardsLoading.value = true;
+  if (type === "QRCODE") emit("update:availableQrCount", null);
   try {
     const res = await getAvailableContractorCards({
       type,
@@ -324,7 +353,9 @@ async function fetchCards(type: "NFC" | "QRCODE" = "NFC") {
     cardItems.value = res?.data?.[0]?.items ?? [];
     availableCount.value = (res?.data?.[2] as any)?.count ?? cardItems.value.length;
 
-    if (type === "QRCODE" && props.settings?.data?._id && availableCount.value !== null && availableCount.value < 50) {
+    if (type === "QRCODE" && props.settings?.data?._id && availableCount.value !== null && availableCount.value > 0 && availableCount.value < 50) {
+      cardsLoading.value = false;
+      generating.value = true;
       await generateQrVms({
         site: props.settings.data.site,
         unitId: props.unitId,
@@ -338,14 +369,20 @@ async function fetchCards(type: "NFC" | "QRCODE" = "NFC") {
       });
       cardItems.value = refreshed?.data?.[0]?.items ?? [];
       availableCount.value = (refreshed?.data?.[2] as any)?.count ?? cardItems.value.length;
+      generating.value = false;
     }
+
+    if (type === "QRCODE") emit("update:availableQrCount", availableCount.value);
   } catch (err: any) {
     const msg = err?.data?.message ?? err?.message ?? String(err);
     showSnackbar(`Entry pass service error: ${msg}`);
     availableCount.value = null;
     cardItems.value = [];
+    generating.value = false;
+    if (type === "QRCODE") emit("update:availableQrCount", null);
   } finally {
     cardsLoading.value = false;
+    generating.value = false;
   }
 }
 
@@ -500,6 +537,7 @@ watch(
       fetchCards("QRCODE");
     } else {
       availableCount.value = null;
+      emit("update:availableQrCount", null);
       isBarcodeScanningActive.value = false;
       barcodeBuffer.value = "";
       if (barcodeTimeout.value) clearTimeout(barcodeTimeout.value);

package/components/HidReaderForm.vue

@@ -17,18 +17,16 @@
           class="mb-3"
         />
 
-        <template v-if="mode === 'add'">
-          <div class="field-label">Base URL / IP address <span>*</span></div>
-          <v-text-field
-            v-model="draft.baseUrl"
-            aria-label="Base URL / IP address"
-            placeholder="http://192.168.x.x."
-            variant="outlined"
-            density="compact"
-            hide-details="auto"
-            class="mb-3"
-          />
-        </template>
+        <div class="field-label">Base URL / IP address <span>*</span></div>
+        <v-text-field
+          v-model="draft.baseUrl"
+          aria-label="Base URL / IP address"
+          placeholder="https://your domain URL"
+          variant="outlined"
+          density="compact"
+          hide-details="auto"
+          class="mb-3"
+        />
 
         <div class="field-label">Device ID <span>*</span></div>
         <v-text-field
@@ -175,10 +173,6 @@ function submit() {
     status: monitorEnabled.value ? "active" : "inactive",
   };
 
-  if (props.mode === "edit") {
-    delete payload.baseUrl;
-  }
-
   emit("submit", payload);
 }
 </script>

package/components/MemberInformation.vue

@@ -77,6 +77,22 @@
               </v-autocomplete>
             </v-col>
 
+            <v-col v-if="props.unitId" cols="12">
+              <EntryPassInformation
+                v-model="memberPassType"
+                v-model:quantity="memberPassQuantity"
+                v-model:cards="memberPassCards"
+                :settings="props.settings"
+                :loading="props.settingsLoading"
+                :site-id="props.site"
+                :unit-id="props.unitId"
+                :visitor-type="props.type"
+                :hid-qr-code-enabled="props.hidQrCodeEnabled"
+                :hid-qr-printer-configured="props.hidQrPrinterConfigured"
+                :excluded-card-ids="props.selectedNfcCards.map((c) => c._id)"
+              />
+            </v-col>
+
             <v-col cols="12">
               <InputLabel
                 class="text-capitalize"
@@ -164,6 +180,30 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  settings: {
+    type: Object as PropType<Record<string, any> | null>,
+    default: null,
+  },
+  settingsLoading: {
+    type: Boolean,
+    default: false,
+  },
+  unitId: {
+    type: String as PropType<string | null>,
+    default: null,
+  },
+  hidQrCodeEnabled: {
+    type: Boolean,
+    default: false,
+  },
+  hidQrPrinterConfigured: {
+    type: Boolean,
+    default: false,
+  },
+  selectedNfcCards: {
+    type: Array as PropType<{ _id: string; cardNo: string }[]>,
+    default: () => [],
+  },
 });
 
 const { requiredRule } = useUtils();
@@ -201,6 +241,9 @@ const dialog = reactive({
 });
 
 const selectedPass = ref<string>("");
+const memberPassType = ref<string | null>(null);
+const memberPassQuantity = ref<number | null>(1);
+const memberPassCards = ref<{ _id: string; cardNo: string }[]>([]);
 
 const members = defineModel<TMemberInfo[]>({ required: true, default: [] });
 const committedMembers = ref<TMemberInfo[]>([]);
@@ -303,12 +346,27 @@ watch(scannedPassValue, (newVal) => {
   showMessage("Scanned pass not available", "error");
 });
 
+function resetAccessCard() {
+  memberPassType.value = null;
+  memberPassQuantity.value = 1;
+  memberPassCards.value = [];
+}
+
 function handleClearForm() {
   formRef.value?.reset();
+  resetAccessCard();
 }
 
 async function handleAddMember() {
-  committedMembers.value.push({ ...memberForm });
+  committedMembers.value.push({
+    ...memberForm,
+    ...(memberPassType.value ? {
+      passType: memberPassType.value,
+      passQuantity: memberPassQuantity.value,
+      passCards: memberPassCards.value,
+    } : {}),
+  } as any);
+  resetAccessCard();
   handleClearForm();
 }