@7365admin1/layer-common 3.2.2-staging.79 → 3.2.2-staging.80

package/components/PassInformation.vue

@@ -8,8 +8,8 @@
           :height="40"
           text="Scan QR Code"
           class="text-capitalize"
-          disabled
           prepend-icon="mdi-qrcode"
+          @click="handleScanQRCode"
         />
         <v-autocomplete
           v-model="selectedPass"
@@ -88,6 +88,11 @@
       </v-card-text>
     </v-card>
   </v-row>
+  <visitor-pass-key-q-r-scanner
+    :dialog="dialog.scanQRCode"
+    v-model:scannedValue="scannedValue"
+    @close-dialog="dialog.scanQRCode = false"
+  />
   <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
 </template>
 
@@ -95,46 +100,36 @@
 import type { PropType } from "vue";
 import type { ValidationRule } from "vuetify/lib/types.mjs";
 import usePassKey from "../composables/usePassKey";
-import useKey from "../composables/useKey";
-import { string } from "zod/v4";
+import { errorConverter } from "../utils/data";
+import VisitorPassKeyQRScanner from "./VisitorPassKeyQRScanner.vue";
 
-const props = defineProps({
-  passRules: {
-    type: Array as PropType<ValidationRule[]>,
-    default: [],
-  },
-  countRules: {
-    type: Array as PropType<ValidationRule[]>,
-    default: [],
-  },
-  site: {
-    type: String,
-    required: true,
-  },
-  type: {
-    type: String as PropType<TVisitorType>,
-    required: true,
-  },
-  contractorType: {
-    type: String,
-    default: "",
-  },
-  passKeys: {
-    type: Array,
-    default: [],
-  },
-  hideKeys: {
-    type: Boolean,
-    default: false,
-  },
-  clearable: {
-    type: Boolean,
-    default: false,
-  },
+type PassInformationProps = {
+  passRules?: ValidationRule[];
+  countRules?: ValidationRule[];
+  site: string;
+  type: TVisitorType;
+  contractorType?: string;
+  passKeys?: unknown[];
+  hideKeys?: boolean;
+  clearable?: boolean;
+  pass?: TPassKeyPayload[];
+  keys?: TPassKeyPayload[];
+};
+
+const props = withDefaults(defineProps<PassInformationProps>(), {
+  passRules: [],
+  countRules: [],
+  contractorType: "",
+  passKeys: [],
+  hideKeys: false,
+  clearable: false,
+  pass: [],
+  keys: [],
 });
 
-const pass = defineModel<TPassKeyPayload[]>("pass", { default: [] });
-const keys = defineModel<TPassKeyPayload[]>("keys", { default: [] });
+const emit = defineEmits(["update:pass", "update:keys"]);
+const pass = ref<TPassKeyPayload[]>(props.pass);
+const keys = ref<TPassKeyPayload[]>(props.keys);
 const selectedPass = ref<string>("");
 const selectedKeys = ref<string[]>([]);
 const passInput = ref("");
@@ -144,6 +139,11 @@ const keyItems = ref<any[]>([]);
 const selectedType = ref<"qr-pass" | "nfc-card">();
 const count = ref(1);
 
+const dialog = reactive({
+  scanQRCode: false,
+});
+const scannedValue = ref("");
+
 const { getPassKeysByPageSearch } = usePassKey();
 
 const typeItems = [
@@ -179,6 +179,23 @@ function showMessage(msg: string, color: string) {
   messageSnackbar.value = true;
 }
 
+function getItemLabel(item: any) {
+  return (item?.prefixAndName ?? item?.raw?.prefixAndName ?? "")
+    .toString()
+    .trim();
+}
+
+function handleScanQRCode() {
+  scannedValue.value = "";
+  dialog.scanQRCode = true;
+  if (passItems.value.length === 0) {
+    fetchPasses();
+  }
+  if (!props.hideKeys && keyItems.value.length === 0) {
+    fetchKeys();
+  }
+}
+
 const isPassListLoading = ref(false);
 
 async function fetchPasses() {
@@ -207,7 +224,7 @@ const isKeyListLoading = ref(false);
 async function fetchKeys() {
   isKeyListLoading.value = true;
   try {
-    const keys: any = await getPassKeysByPageSearch({
+    const result: any = await getPassKeysByPageSearch({
       page: 1,
       sites: [props.site],
       limit: 10000,
@@ -223,7 +240,7 @@ async function fetchKeys() {
       return false;
     });
 
-    const filteredArray = keys.items.filter((item: any) => {
+    const filteredArray = result.items.filter((item: any) => {
       if (Array.isArray(props?.passKeys) && props.passKeys.length) {
         return !props.passKeys.includes(item._id);
       }
@@ -231,18 +248,60 @@ async function fetchKeys() {
     });
     keyItems.value = [...previouslySelectedKeys, ...filteredArray];
   } catch (error) {
-    showMessage(errorConverter(error as string), "error");
+    showMessage(errorConverter(error), "error");
   } finally {
     isKeyListLoading.value = false;
   }
 }
 
 watch(selectedPass, (newVal) => {
-  pass.value = [{ keyId: newVal }];
+  const updated = newVal ? [{ keyId: newVal }] : [];
+  pass.value = updated;
+  emit("update:pass", updated);
 });
 
 watch(selectedKeys, (newVal) => {
-  keys.value = newVal.map((key) => ({ keyId: key }));
+  const updated = newVal.map((key) => ({ keyId: key }));
+  keys.value = updated;
+  emit("update:keys", updated);
+});
+
+watch(scannedValue, async (newValue) => {
+  if (!newValue) return;
+
+  const scanned = String(newValue).trim();
+  if (!scanned) return;
+
+  if (passItems.value.length === 0) {
+    await fetchPasses();
+  }
+  if (!props.hideKeys && keyItems.value.length === 0) {
+    await fetchKeys();
+  }
+
+  const matchedPass = passItems.value.find((item) => {
+    return getItemLabel(item).toLowerCase() === scanned.toLowerCase();
+  });
+
+  if (matchedPass && matchedPass._id) {
+    selectedPass.value = matchedPass._id;
+    return;
+  }
+
+  if (!props.hideKeys) {
+    const matchedKey = keyItems.value.find((item) => {
+      return getItemLabel(item).toLowerCase() === scanned.toLowerCase();
+    });
+
+    if (matchedKey && matchedKey._id) {
+      if (!selectedKeys.value.includes(matchedKey._id)) {
+        selectedKeys.value = [...selectedKeys.value, matchedKey._id];
+      }
+      return;
+    }
+  }
+
+  showMessage(`Scanned pass or key "${scanned}" not found`, "error");
 });
 
 //prevent negative value;
@@ -254,10 +313,10 @@ watch(count, (newCount) => {
 
 onMounted(() => {
   if (pass.value.length > 0) {
-    selectedPass.value = pass.value[0].keyId;
+    selectedPass.value = pass.value[0]?.keyId ?? "";
   }
   if (keys.value.length > 0) {
-    selectedKeys.value = keys.value.map((k) => k.keyId);
+    selectedKeys.value = keys.value.map((k) => k.keyId ?? "");
   }
 });
 </script>

package/components/ScanVisitorQRCode.vue

@@ -60,7 +60,9 @@ const props = defineProps({
 
 const { standardFormatDate } = useUtils();
 
-const { validateVisitorQrCode } = useVisitor();
+const { validateVisitorQrCode, getVisitors } = useVisitor();
+
+const { getPassKeysByPageSearch } = usePassKey();
 
 const emits = defineEmits([
   "closeDialog",
@@ -97,8 +99,6 @@ const handleScanVisitorQRCode = async () => {
         showNotFoundMessage.value = false;
         // Automatically navigate to the scanned URL if it's a valid link
         if (isValidUrl(qrCodeMessage)) {
-          console.log("QR Code value", qrCodeMessage);
-          console.log("Last _id", qrCodeMessage.split("/").pop());
           // get the last _id in the url
           const id = qrCodeMessage.split("/").pop();
           // check if it's a valid mongodb _id
@@ -108,7 +108,6 @@ const handleScanVisitorQRCode = async () => {
               props.site as string,
               id as string
             );
-            console.log("validateVisitorQrCode", response);
             if (response.errorMessage) {
               showNotFoundMessage.value = true;
               errorMessage.value =
@@ -122,9 +121,38 @@ const handleScanVisitorQRCode = async () => {
               emits("openVisitorDataFromScannedQrCodeDialog", response);
             }
           } else {
-            showNotFoundMessage.value = true;
-            errorMessage.value = "Invalid mongodb _id.";
-            showMessage(errorMessage.value, "error");
+            const result: any = await getPassKeysByPageSearch({
+              sites: [props.site as string],
+              search: qrCodeMessage,
+            });
+
+            if (result.items?.length < 1) {
+              showMessage(`Pass or Key ${qrCodeMessage} not found.`, "error");
+              return;
+            }
+
+            const data: any = await getVisitors({
+              site: props.site as string,
+              passOrKey: {
+                keyId: result.items[0]._id,
+                type: result.items[0].passType == "pass-key" ? "key" : "pass",
+              },
+              checkedOut: false,
+            });
+
+            if (data.items?.length < 1) {
+              showMessage(
+                `There are no unchecked-out visitor transactions for the scanned ${
+                  result.items[0].passType == "pass-key" ? "Key" : "Pass"
+                } ${qrCodeMessage}.`,
+                "error"
+              );
+
+              return;
+            }
+
+            closeDialog();
+            emits("openVisitorDataFromScannedQrCodeDialog", data.items[0]);
           }
 
           // window.location.href = qrCodeMessage;

package/composables/useVisitor.ts

@@ -92,6 +92,7 @@ export default function () {
     checkedOut?: boolean;
     plateNumber?: string;
     tab?: string;
+    passOrKey?: string;
   };
 
   type SearchUncheckedOutUnregisteredVisitorParams = {
@@ -130,6 +131,7 @@ export default function () {
     plateNumber = "",
     checkedOut,
     tab,
+    passOrKey,
   }: GetVisitorsParams = {}) {
     const query = Object.fromEntries(
       Object.entries({
@@ -146,7 +148,10 @@ export default function () {
         plateNumber,
         order,
         tab,
-      }).filter(([, value]) => value !== undefined && value !== null && value !== "")
+        passOrKey,
+      }).filter(
+        ([, value]) => value !== undefined && value !== null && value !== ""
+      )
     );
 
     return await useNuxtApp().$api<Record<string, any>>(

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.79",
+  "version": "3.2.2-staging.80",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {