@7365admin1/layer-common 1.11.21 → 1.11.23

package/components/VisitorDataFromScannedQRCodeForm.vue

@@ -0,0 +1,262 @@
+<template>
+  <v-card width="100%" :loading="processing">
+    <v-toolbar>
+      <v-row
+        no-gutters
+        class="fill-height px-6 d-flex justify-space-between align-center"
+        align="center"
+      >
+        <span class="font-weight-bold text-h5 text-capitalize">
+          Visitor Information
+        </span>
+        <ButtonClose @click="emit('close')" />
+      </v-row>
+    </v-toolbar>
+    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-3">
+      <div class="w-100 d-flex justify-space-between ga-2">
+        <!-- <span v-if="withStep2 || withStep3" class="text-subtitle-2 font-weight-bold" style="text-wrap: nowrap">Step
+          <span class="text-primary-button">{{ contractorStep }}</span>/{{ withStep3 ? 3 : withStep2 ? 2 : 1 }}</span> -->
+      </div>
+      <!-- <v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorMessage = ''"> -->
+      <v-row no-gutters class="pt-4">
+        <v-col cols="12">
+          <InputLabel class="text-capitalize" title="Full Name" />
+          <v-text-field
+            v-model="visitorInfo.name"
+            density="comfortable"
+            readonly
+          />
+        </v-col>
+
+        <v-col cols="12">
+          <InputLabel class="text-capitalize" title="NRIC/Passport/ID No." />
+          <v-text-field
+            v-if="!visitorInfo.checkIn"
+            v-model="visitorInfo.nric"
+            density="comfortable"
+            hide-details
+            clearable
+          />
+          <v-text-field
+            v-else
+            v-model="visitorNric"
+            density="comfortable"
+            hide-details
+            readonly
+          />
+        </v-col>
+
+        <v-col cols="12" class="mt-4">
+          <InputLabel
+            class="text-capitalize"
+            title="Vehicle Number (Optional)"
+          />
+          <InputVehicleNumber
+            v-if="!visitorInfo.checkIn"
+            v-model="visitorInfo.plateNumber"
+            density="comfortable"
+            hide-details
+            clearable
+          />
+          <InputVehicleNumber
+            v-else
+            v-model="visitorPlateNumber"
+            density="comfortable"
+            hide-details
+            readonly
+          />
+        </v-col>
+
+        <v-col cols="12" class="mt-4">
+          <InputLabel class="text-capitalize" title="Type" />
+          <v-text-field
+            v-model="visitorInfo.type"
+            density="comfortable"
+            hide-details
+            readonly
+          />
+        </v-col>
+
+        <v-col cols="12" class="mt-4">
+          <InputLabel class="text-capitalize" title="Phone Number" />
+          <InputPhoneNumberV2
+            v-model="visitorInfo.contact"
+            density="comfortable"
+            :readonly="true"
+          />
+        </v-col>
+
+        <v-col cols="12">
+          <InputLabel class="text-capitalize" title="Purpose" />
+          <v-textarea
+            v-model="visitorInfo.purpose"
+            density="comfortable"
+            :rows="3"
+            no-resize
+            readonly
+          />
+        </v-col>
+
+        <v-col cols="12">
+          <InputLabel class="text-capitalize" title="Location" />
+          <v-text-field v-model="location" density="comfortable" />
+        </v-col>
+
+        <v-col cols="12">
+          <InputLabel class="text-capitalize" title="Visitor Pass" />
+          <PassInformation
+            v-model:pass="visitorInfo.visitorPass"
+            :site="prop.site"
+            :type="visitorInfo.type"
+            :clearable="true"
+          />
+        </v-col>
+
+        <v-col cols="12" class="mt-4">
+          <v-row no-gutters class="pt-2">
+            <v-col cols="6" class="pr-1">
+              <v-card elevation="3" height="100%" width="100%">
+                <v-col cols="12" class="d-flex justify-center pb-0">
+                  <span
+                    class="text-h6 font-weight-bold d-flex text-center text-success"
+                  >
+                    {{
+                      visitorInfo.checkIn
+                        ? standardFormatDateTime(visitorInfo.checkIn)
+                        : "N/A"
+                    }}
+                  </span>
+                </v-col>
+                <v-col cols="12" class="d-flex justify-center">
+                  Actual Check In
+                </v-col>
+              </v-card>
+            </v-col>
+            <v-col cols="6" class="pl-1">
+              <v-card elevation="3" height="100%" width="100%">
+                <v-col cols="12" class="d-flex justify-center pb-0">
+                  <span
+                    class="text-h6 font-weight-bold d-flex text-center text-error"
+                  >
+                    {{
+                      visitorInfo.checkOut
+                        ? standardFormatDateTime(visitorInfo.checkOut)
+                        : "N/A"
+                    }}
+                  </span>
+                </v-col>
+                <v-col cols="12" class="d-flex justify-center">
+                  Actual Check Out
+                </v-col>
+              </v-card>
+            </v-col>
+          </v-row>
+        </v-col>
+      </v-row>
+      <!-- </v-form> -->
+    </v-card-text>
+
+    <v-toolbar density="compact">
+      <v-row no-gutters>
+        <v-col cols="6">
+          <v-btn text="Close" block size="48" tile @click="emit('close')" />
+        </v-col>
+        <v-col cols="6">
+          <v-btn
+            v-if="!visitorInfo.checkIn && !visitorInfo.checkOut"
+            block
+            text="Check In"
+            variant="flat"
+            color="success"
+            size="48"
+            tile
+            :disabled="processing"
+            @click="emit('check-in-out', 'checkIn', visitorInfo)"
+            :loading="processing"
+          />
+          <v-btn
+            v-if="visitorInfo.checkIn && !visitorInfo.checkOut"
+            block
+            text="Check Out"
+            variant="flat"
+            color="error"
+            size="48"
+            tile
+            :disabled="processing"
+            @click="emit('check-in-out', 'checkOut', visitorInfo)"
+            :loading="processing"
+          />
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+<script setup lang="ts">
+const prop = defineProps({
+  site: {
+    type: String,
+    required: true,
+  },
+  visitorData: {
+    type: Object as PropType<Partial<TVisitor>>,
+    default: {},
+  },
+  processing: {
+    type: Boolean,
+    required: false,
+  },
+});
+
+const emit = defineEmits(["check-in-out", "close"]);
+
+const { standardFormatDateTime } = useUtils();
+
+const visitorInfo = ref(prop.visitorData);
+
+const visitorNric = computed({
+  get: () =>
+    visitorInfo.value && visitorInfo.value.checkIn
+      ? visitorInfo.value.nric
+      : null,
+  set: () => {}, // readonly, do nothing on set
+});
+
+const visitorPlateNumber = computed({
+  get: () =>
+    visitorInfo.value && visitorInfo.value.checkIn
+      ? visitorInfo.value.plateNumber
+      : null,
+  set: () => {}, // readonly, do nothing on set
+});
+
+watchEffect(() => {
+  if (visitorInfo.value.plateNumber) {
+    visitorInfo.value.type = "guest";
+  } else {
+    visitorInfo.value.type = "walk-in";
+  }
+});
+
+const location = computed({
+  get: () => {
+    if (
+      visitorInfo.value &&
+      visitorInfo.value.block &&
+      visitorInfo.value.level &&
+      visitorInfo.value.unitName
+    ) {
+      return `${visitorInfo.value.block} / ${visitorInfo.value.level} / ${visitorInfo.value.unitName}`;
+    } else if (
+      visitorInfo.value &&
+      visitorInfo.value.block &&
+      !visitorInfo.value.level &&
+      !visitorInfo.value.unitName
+    ) {
+      return visitorInfo.value.block;
+    } else {
+      return "N/A";
+    }
+  },
+  set: () => {}, // readonly, do nothing on set
+});
+</script>

package/components/VisitorForm.vue

@@ -1012,7 +1012,7 @@ const membersFieldIncomplete = computed(() => {
 });
 
 onMounted(() => {
-  contractorStep.value = 2;
+  contractorStep.value = 1;
   currentAutofillSource.value = null;
 
   if (prop.mode === 'register' && prop.visitorData) {

package/components/VisitorManagement.vue

@@ -194,6 +194,7 @@
                 :loading="
                   loading.checkingOut && item?._id === selectedVisitorId
                 "
+                @click.stop="handleCheckout(item._id)"
               />
             </span>
           </span>
@@ -271,6 +272,7 @@
             </template>
             <v-list density="compact">
               <v-list-item
+                v-if="!item?.checkOut"
                 prepend-icon="mdi-logout"
                 title="Checkout"
                 @click.stop="handleCheckout(item._id)"
@@ -644,14 +646,34 @@
 
     <ScanVisitorQRCode
       :dialog="dialog.scanVisitorQRCode"
+      :site="siteId"
+      @open-visitor-data-from-scanned-qr-code-dialog="
+        handleShowVisitorDataFromScannedQRCodeDialog
+      "
       @close-dialog="dialog.scanVisitorQRCode = false"
     />
 
+    <v-dialog
+      v-model="dialog.showVisitorDataFromScannedQRCode"
+      width="450"
+      persistent
+    >
+      <VisitorDataFromScannedQRCodeForm
+        :site="siteId"
+        :visitor-data="visitorDataFromScannedQRCode"
+        @check-in-out="handleVisitorDataFromScannedQRCodeCheckInOut"
+        :processing="isVisitorDataFromScannedQRCodeCheckingInOut"
+        @close="handleCloseVisitorDataFromScannedQRCodeDialog"
+      />
+    </v-dialog>
+
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-row>
 </template>
 
 <script setup lang="ts">
+import { errorConverter } from "../utils/data";
+
 definePageMeta({
   middleware: ["01-auth", "02-org"],
 });
@@ -679,8 +701,16 @@ const props = defineProps({
   },
 });
 
-const { getVisitors, visitorSelection, typeFieldMap, updateVisitor } =
-  useVisitor();
+const { authenticate, currentUser } = useLocalAuth();
+authenticate();
+
+const {
+  getVisitors,
+  visitorSelection,
+  typeFieldMap,
+  updateVisitor,
+  visitorDataFromScannedQRCodeCheckInOut,
+} = useVisitor();
 const { debounce, formatCamelCaseToWords, formatDate, UTCToLocalTIme } =
   useUtils();
 const { formatLocation } = useSecurityUtils();
@@ -732,6 +762,7 @@ const dialog = reactive({
   addPassKey: false,
   editPassKey: false,
   scanVisitorQRCode: false,
+  showVisitorDataFromScannedQRCode: false,
 });
 
 const snapshotImageUrl = ref("");
@@ -913,6 +944,53 @@ function formatValues(key: string, value: any) {
   return value;
 }
 
+const visitorDataFromScannedQRCode = ref<Record<string, any>>({});
+
+function handleShowVisitorDataFromScannedQRCodeDialog(
+  _visitorDataFromScannedQRCode: Record<string, any>
+) {
+  visitorDataFromScannedQRCode.value = _visitorDataFromScannedQRCode;
+  dialog.showVisitorDataFromScannedQRCode = true;
+}
+
+const isVisitorDataFromScannedQRCodeCheckingInOut = ref(false);
+
+async function handleVisitorDataFromScannedQRCodeCheckInOut(
+  type: string,
+  visitorData: Record<string, any>
+) {
+  try {
+    isVisitorDataFromScannedQRCodeCheckingInOut.value = true;
+    await visitorDataFromScannedQRCodeCheckInOut({
+      type,
+      filter: {
+        _id: visitorData._id,
+      },
+      update: {
+        updatedBy: currentUser.value._id,
+        visitorPassIds: visitorData.visitorPass.map(
+          (i: Record<string, any>) => i.keyId
+        ),
+        nric: visitorData.nric ?? "",
+        plateNumber: visitorData.plateNumber ?? "",
+      },
+      userType: "site",
+    });
+
+    dialog.scanVisitorQRCode = false;
+    handleCloseVisitorDataFromScannedQRCodeDialog();
+  } catch (error) {
+    showMessage(errorConverter(error), "error");
+  } finally {
+    isVisitorDataFromScannedQRCodeCheckingInOut.value = false;
+  }
+}
+
+function handleCloseVisitorDataFromScannedQRCodeDialog() {
+  dialog.showVisitorDataFromScannedQRCode = false;
+  visitorDataFromScannedQRCode.value = {};
+}
+
 function handleAddNew() {
   dialog.showSelection = true;
   activeVisitorFormType.value = null;

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>