@7365admin1/layer-common 1.11.22 → 1.11.23

package/components/VisitorPassKeyQRScanner.vue

@@ -0,0 +1,138 @@
+<template>
+    <v-dialog v-model="props.dialog" transition="dialog-bottom-transition" width="700" max-width="700" persistent
+        @after-enter="handleScanVisitorQRCode">
+        <v-container class="d-flex justify-center" max-height="90vh">
+            <!-- QR code reader container -->
+            <v-card elevation="2" class="d-flex flex-column align-center pa-2 w-100 h-100">
+                <v-toolbar>
+                    <v-card-title class="text-h5"> Scan QR Code </v-card-title>
+                    <v-spacer />
+                    <v-btn color="grey-darken-1" icon="mdi-close" @click="closeDialog()" />
+                </v-toolbar>
+
+                <div id="reader" class="d-flex justify-center align-center w-100 h-100"
+                    style="height: calc(100vh - 64px)">
+                    <!-- The QR code scanner box -->
+                    <!-- This is where the QR code scanner will be displayed -->
+                </div>
+                <!-- Show Error Messages -->
+                <div v-if="showNotFoundMessage" class="text-error mt-8">
+                    <p>{{ errorMessage }}</p>
+                </div>
+                <!-- Switch camera button inside the reader box -->
+                <v-btn color="primary" icon class="mt-4" @click="switchCamera()">
+                    <v-icon icon="mdi-camera-switch" large />
+                </v-btn>
+            </v-card>
+        </v-container>
+    </v-dialog>
+    <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+</template>
+<script setup lang="ts">
+const { $Html5Qrcode }: any = useNuxtApp();
+
+const props = defineProps({
+    dialog: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const scannedValue = defineModel<string>("scannedValue", {
+    default: "",
+});
+
+const emit = defineEmits(["closeDialog"]);
+
+const message = ref("");
+const messageColor = ref("");
+const messageSnackbar = ref(false);
+
+function showMessage(msg: string, color: string) {
+    message.value = msg;
+    messageColor.value = color;
+    messageSnackbar.value = true;
+}
+
+const html5QrCodeInstance = ref<any>(null);
+const cameraFacingMode = ref<string>("environment");
+
+const showNotFoundMessage = ref<boolean>(false);
+const errorMessage = ref<string>("");
+
+const handleScanVisitorQRCode = async () => {
+    if (html5QrCodeInstance.value) return;
+    const config = { fps: 10, qrbox: { width: 250, height: 250 } };
+    html5QrCodeInstance.value = new $Html5Qrcode("reader");
+    html5QrCodeInstance.value
+        .start(
+            { facingMode: cameraFacingMode.value },
+            config,
+            async (qrCodeMessage: string) => {
+                showNotFoundMessage.value = false;
+                scannedValue.value = qrCodeMessage;
+                console.log(`QR Code scanned: ${qrCodeMessage}`);
+                setTimeout(() => {
+                    closeDialog();
+                }, 100);
+            },
+            (msg: string) => {
+                if (msg === "QR Code no longer in front") {
+                    showNotFoundMessage.value = true;
+                    errorMessage.value = msg;
+                    showMessage(msg, "error");
+                }
+            }
+        )
+        .catch((err: any) => {
+            showMessage(`Unable to start scanning, error: ${err}`, "error");
+        });
+};
+
+const isValidUrl = (string: string) => {
+    try {
+        new URL(string);
+        return true;
+    } catch (_) {
+        return false;
+    }
+};
+
+const switchCamera = async () => {
+    await stopScanner();
+    cameraFacingMode.value =
+        cameraFacingMode.value === "environment" ? "user" : "environment";
+    showMessage(
+        `Switched to ${cameraFacingMode.value === "environment" ? "Back" : "Front"
+        } Camera`,
+        "info"
+    );
+    handleScanVisitorQRCode();
+};
+
+const closeDialog = () => {
+    emit("closeDialog");
+    stopScanner();
+};
+
+const stopScanner = () => {
+    return new Promise<void>((resolve, reject) => {
+        if (html5QrCodeInstance.value) {
+            html5QrCodeInstance.value
+                .stop()
+                .then(() => {
+                    html5QrCodeInstance.value.clear();
+                    html5QrCodeInstance.value = null;
+                    showNotFoundMessage.value = false;
+                    resolve(); // Resolve the promise when the scanner is fully stopped
+                })
+                .catch((err: any) => {
+                    showMessage("Unable to stop scanning.", err);
+                    reject(err); // Reject the promise if there's an error
+                });
+        } else {
+            resolve(); // Resolve immediately if no scanner instance exists
+        }
+    });
+};
+</script>

package/composables/useVisitor.ts

@@ -4,7 +4,7 @@ export default function () {
     value: TVisitorType;
   };
 
-  const visitorSelection: TVisitorSelection[] =[
+  const visitorSelection: TVisitorSelection[] = [
     { label: "Drive-in", value: "guest" },
     { label: "Contractor", value: "contractor" },
     { label: "Walk-In", value: "walk-in" },
@@ -13,14 +13,62 @@ export default function () {
     { label: "Drop-Off", value: "drop-off" },
   ];
 
-    const typeFieldMap: Record<TVisitorType, (keyof TVisitorPayload | 'delivery-company')[]> = {
-      guest: ['name', 'nric', 'contact', 'block', 'plateNumber', 'level', 'unit' , 'unitName', 'remarks'],
-      contractor: ['contractorType', 'name', 'nric', 'company', 'contact', 'plateNumber', 'block', 'level', 'unit', 'unitName', 'remarks'],
-      'walk-in': ['name', 'company', 'nric', 'contact', 'block', 'level', 'unit' , 'unitName', 'remarks'],
-      delivery: ['attachments', 'name', 'deliveryType', 'delivery-company', 'nric', 'contact', 'plateNumber', 'block', 'level', 'unit' , 'unitName',  'remarks'],
-      'pick-up': ['plateNumber', 'block', 'remarks'],
-      'drop-off': ['plateNumber', 'block', 'remarks'],
-  }
+  const typeFieldMap: Record<
+    TVisitorType,
+    (keyof TVisitorPayload | "delivery-company")[]
+  > = {
+    guest: [
+      "name",
+      "nric",
+      "contact",
+      "block",
+      "plateNumber",
+      "level",
+      "unit",
+      "unitName",
+      "remarks",
+    ],
+    contractor: [
+      "contractorType",
+      "name",
+      "nric",
+      "company",
+      "contact",
+      "plateNumber",
+      "block",
+      "level",
+      "unit",
+      "unitName",
+      "remarks",
+    ],
+    "walk-in": [
+      "name",
+      "company",
+      "nric",
+      "contact",
+      "block",
+      "level",
+      "unit",
+      "unitName",
+      "remarks",
+    ],
+    delivery: [
+      "attachments",
+      "name",
+      "deliveryType",
+      "delivery-company",
+      "nric",
+      "contact",
+      "plateNumber",
+      "block",
+      "level",
+      "unit",
+      "unitName",
+      "remarks",
+    ],
+    "pick-up": ["plateNumber", "block", "remarks"],
+    "drop-off": ["plateNumber", "block", "remarks"],
+  };
 
   const contractorTypes = [
     { title: "Estate Contractor", value: "estate-contractor" },
@@ -29,21 +77,20 @@ export default function () {
     { title: "House Mover", value: "house-mover" },
   ];
 
-
   type GetVisitorsParams = {
-  page?: number
-  limit?: number
-  order?: "asc" | "desc"
-  search?: string
-  org?: string
-  site?: string
-  dateTo?: string
-  dateFrom?: string
-  type?: string
-  status?: string
-  checkedOut?: boolean
-  plateNumber?: string
-}
+    page?: number;
+    limit?: number;
+    order?: "asc" | "desc";
+    search?: string;
+    org?: string;
+    site?: string;
+    dateTo?: string;
+    dateFrom?: string;
+    type?: string;
+    status?: string;
+    checkedOut?: boolean;
+    plateNumber?: string;
+  };
 
   async function getVisitors({
     page = 1,
@@ -58,7 +105,7 @@ export default function () {
     status = "",
     // status = "registered"
     plateNumber = "",
-    checkedOut
+    checkedOut,
   }: GetVisitorsParams = {}) {
     return await useNuxtApp().$api<Record<string, any>>(
       "/api/visitor-transactions",
@@ -76,7 +123,7 @@ export default function () {
           status,
           checkedOut,
           plateNumber,
-          order
+          order,
         },
       }
     );
@@ -111,7 +158,13 @@ export default function () {
     );
   }
 
-  async function updateVisitorPassKey(_id: string, payload: TPassKeyPayload[]){
+  function validateVisitorQrCode(site: string, id: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/visitors/visitor-qr-code/${id}?site=${site}`
+    );
+  }
+
+  async function updateVisitorPassKey(_id: string, payload: TPassKeyPayload[]) {
     return await useNuxtApp().$api<Record<string, any>>(
       `/api/visitor-transactions/replace-keys/id/${_id}`,
       {
@@ -120,7 +173,13 @@ export default function () {
       }
     );
   }
-  
+
+  function visitorDataFromScannedQRCodeCheckInOut(payload: any) {
+    return useNuxtApp().$api<Record<string, any>>("/api/visitors/update-one", {
+      method: "PUT",
+      body: payload,
+    });
+  }
 
   return {
     typeFieldMap,
@@ -130,6 +189,8 @@ export default function () {
     getVisitors,
     updateVisitor,
     deleteVisitor,
-    updateVisitorPassKey
+    validateVisitorQrCode,
+    updateVisitorPassKey,
+    visitorDataFromScannedQRCodeCheckInOut,
   };
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "1.11.22",
+  "version": "1.11.23",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {
@@ -34,6 +34,7 @@
     "@types/qrcode": "^1.5.6",
     "ckeditor5": "^47.2.0",
     "html2pdf.js": "^0.10.2",
+    "html5-qrcode": "^2.3.8",
     "moment-timezone": "^0.6.0",
     "nuxt-signature-pad": "^1.8.0",
     "qrcode": "^1.5.4",

package/types/visitor.d.ts

@@ -16,39 +16,69 @@ declare type TVisitor = {
   nric?: string;
   contact?: string;
   remarks?: string;
+  purpose?: string;
   attachments: string[];
   org: string;
-  site: string,
+  site: string;
   manualCheckout?: boolean;
   visitorPass?: TPassKeyPayload[];
-  passKeys?: TPassKeyPayload[]
+  passKeys?: TPassKeyPayload[];
   checkInRemarks?: string;
   checkOutRemarks?: string;
 };
 
-declare type TVisitorType = "contractor" | "delivery" | "walk-in" | "pick-up" | "drop-off" | "guest";
-
-declare type TVisitorPayload = Pick<TVisitor, "name" | "type" | "company" | "block" | "level" | "unit" | "unitName" | "contact" | "plateNumber" | "checkOut" | "contractorType" | "deliveryType" | "nric" | "contact" | "remarks" | "attachments" | "org" | "site" | "status" | "visitorPass" | "passKeys" | "checkInRemarks" | "checkOutRemarks"> & {
-  members?: TMemberInfo[]
-}
-
+declare type TVisitorType =
+  | "contractor"
+  | "delivery"
+  | "walk-in"
+  | "pick-up"
+  | "drop-off"
+  | "guest";
 
+declare type TVisitorPayload = Pick<
+  TVisitor,
+  | "name"
+  | "type"
+  | "company"
+  | "block"
+  | "level"
+  | "unit"
+  | "unitName"
+  | "contact"
+  | "plateNumber"
+  | "checkOut"
+  | "contractorType"
+  | "deliveryType"
+  | "nric"
+  | "contact"
+  | "remarks"
+  | "attachments"
+  | "org"
+  | "site"
+  | "status"
+  | "visitorPass"
+  | "passKeys"
+  | "checkInRemarks"
+  | "checkOutRemarks"
+> & {
+  members?: TMemberInfo[];
+};
 
 declare type TDefaultOptionObj = {
   title: string;
   value: any;
-}
+};
 
 declare type TMemberInfo = {
-    name: string;
-    nric: string;
-    visitorPass?: string;
-    passKeys?: TPassKeyPayload[];
-    contact: string
+  name: string;
+  nric: string;
+  visitorPass?: { keyId: string }[];
+  passKeys?: TPassKeyPayload[];
+  contact: string
 }
 
 declare type TPassKeyPayload = {
   keyId: string;
   status?: string;
   remarks?: string;
-}
+};