@7365admin1/layer-common 1.9.0 → 1.10.1

package/components/EntryPassMain.vue

@@ -8,7 +8,7 @@
   <v-row no-gutters class="" v-if="!loading">
     <v-col cols="12" elevation="3" class="border">
       <v-row no-gutters class="px-6 pt-4">
-        <div class="d-flex mt-7 pb-5">
+        <!-- <div class="d-flex mt-7 pb-5">
           <p class="mr-6 font-weight-medium flex-grow-1">
             Physical / Key Pass
             <span class="d-block text-caption text-grey-darken-1 mt-1">
@@ -25,8 +25,8 @@
             @update:modelValue="updateEntryPassSettingsPhysicalPass()"
           ></v-switch>
         </div>
-        <v-divider thickness="1"></v-divider>
-        <div class="d-flex mt-7 pb-5">
+        <v-divider thickness="1"></v-divider> -->
+        <div class="d-flex mt-7 pb-5 pr-5">
           <p class="mr-6 font-weight-medium flex-grow-1">
             NFC / QR Code Pass
             <span class="d-block text-caption text-grey-darken-1 mt-1">
@@ -46,35 +46,60 @@
         </div>
         <v-divider thickness="1"></v-divider>
         <div class="d-flex w-100 mt-7 pb-10">
-          <p class="mr-6 font-weight-medium flex-grow-1">
+          <p class="font-weight-medium flex-grow-1">
             Upload Access Cards Template
             <span class="d-block text-caption text-grey-darken-1 mt-1">
               <a
-                target="_blank"
+                v-if="currentEntryPassSettings.template?.id"
+                href="#"
                 class="text-truncate d-flex items-center text-decoration-none"
-                href=""
+                @click.prevent="downloadTemplate"
               >
-                <v-icon class="mr-2" size="24px"> mdi-paperclip </v-icon>
-                template
+                <v-icon class="mr-2" size="24px">mdi-paperclip</v-icon>
+                {{ currentEntryPassSettings.template.name }}
               </a>
             </span>
           </p>
-          <v-btn
-            variant="flat"
-            color="error"
-            size="small"
-            style="height: 40px; margin-left: auto"
-            prepend-icon="mdi-file-document-remove-outline"
-          >
-            Remove
-          </v-btn>
+          <div class="d-flex align-center" style="margin-left: auto; gap: 8px">
+            <v-btn
+              v-if="!currentEntryPassSettings.template?.id"
+              variant="flat"
+              color="primary"
+              size="small"
+              style="height: 40px"
+              prepend-icon="mdi-tray-arrow-up"
+              :loading="uploadingTemplate"
+              @click="triggerTemplateUpload"
+            >
+              Upload
+            </v-btn>
+            <v-btn
+              v-if="currentEntryPassSettings.template?.id"
+              variant="flat"
+              color="error"
+              size="small"
+              style="height: 40px"
+              prepend-icon="mdi-file-document-remove-outline"
+              :loading="uploadingTemplate"
+              @click="removeTemplate"
+            >
+              Remove
+            </v-btn>
+          </div>
+          <input
+            type="file"
+            ref="templateFileInput"
+            accept=".xlsx,.xls"
+            style="display: none"
+            @change="handleTemplateUpload"
+          />
         </div>
         <v-divider thickness="1"></v-divider>
         <div class="d-flex w-100 mt-7 pb-10">
-          <p class="mr-6 font-weight-medium flex-grow-1">
+          <p class="font-weight-medium flex-grow-1">
             Printer Setup
             <v-col cols="12">
-              <v-row>
+              <v-row align="center">
                 <v-col cols="3">
                   <v-text-field
                     label="Vendor ID"
@@ -91,33 +116,39 @@
                     v-model="currentEntryPassSettings.printerProductId"
                   ></v-text-field>
                 </v-col>
-                <v-col cols="3">
+                <v-col cols="3" class="d-flex align-end">
                   <v-btn
                     color="primary"
                     variant="outlined"
                     prepend-icon="mdi-magnify"
                     block
+                    height="48"
+                    :loading="scanningPrinter"
+                    @click="scanPrinter()"
                   >
                     Scan Printer
                   </v-btn>
                 </v-col>
-                <v-col cols="3">
+                <v-col cols="3" class="d-flex align-end pr-0">
                   <v-btn
                     color="success"
                     variant="outlined"
                     prepend-icon="mdi-printer-check"
                     block
+                    height="48"
+                    :loading="testingPrinter"
+                    @click="testAndPrint()"
                   >
                     Test & Print
                   </v-btn>
                 </v-col>
               </v-row>
               <v-row class="mt-4">
-                <v-col cols="12" sm="6" md="4">
+                <v-col cols="12" md="3">
                   <v-btn
                     color="primary"
                     variant="flat"
-                    prepend-icon="mdi-content-save"
+                    prepend-icon="mdi-printer"
                     block
                     @click="savePrinterSettings()"
                   >
@@ -132,22 +163,22 @@
         <v-divider thickness="1"></v-divider>
 
         <div class="d-flex w-100 mt-7 pb-10">
-          <p class="mr-6 font-weight-medium flex-grow-1">
+          <p class="font-weight-medium flex-grow-1">
             QR Code Template
             <span class="d-block text-caption text-grey-darken-1 mt-1">
               <v-col cols="12">
                 <v-row>
-                  <v-col cols="12">
+                  <v-col cols="12" class="pr-0">
                     <v-text-field
                       label="Header"
-                      placeholder="Enter qr code header eg. Welcome to Company Name"
+                      placeholder="Enter QR code header"
                       hide-details
                       density="comfortable"
                       clearable
                       v-model="currentEntryPassSettings.qrCodeTemplateHeader"
                     ></v-text-field>
                   </v-col>
-                  <v-col cols="12">
+                  <v-col cols="12" class="pr-0">
                     <v-text-field
                       label="Subtext"
                       placeholder="Enter qr code sub header"
@@ -161,15 +192,16 @@
                     ></v-text-field>
                   </v-col>
                   <v-row class="mt-3">
-                    <v-col cols="12" md="2">
-                      <v-btn color="primary" variant="flat" block>
+                    <v-col cols="12" md="3">
+                      <v-btn color="success" variant="flat" prepend-icon="mdi-eye" block @click="isShowTemplatePreview = true">
                         Preview
                       </v-btn>
                     </v-col>
-                    <v-col cols="12" md="2">
+                    <v-col cols="12" md="3">
                       <v-btn
                         color="primary"
                         variant="flat"
+                        prepend-icon="mdi-qrcode"
                         block
                         @click="saveQrCodeTemplate()"
                       >
@@ -186,10 +218,10 @@
         <v-divider thickness="1"></v-divider>
 
         <div class="d-flex w-100 mt-7 pb-10">
-          <p class="mr-6 font-weight-medium flex-grow-1">
+          <p class="font-weight-medium flex-grow-1">
             Resident-app Disclaimer Message
             <span class="d-block text-caption text-grey-darken-1 mt-1">
-              <v-col cols="12">
+              <v-col cols="12" class="pr-0">
                 <v-row no-gutters>
                   <v-col cols="12" class="mb-5">
                     <v-textarea
@@ -204,10 +236,11 @@
                     ></v-textarea>
                   </v-col>
                   <v-row class="mt-3">
-                    <v-col cols="12" md="2">
+                    <v-col cols="12" md="3">
                       <v-btn
                         color="primary"
                         variant="flat"
+                        prepend-icon="mdi-message-text-outline"
                         block
                         @click="saveResidentAppDisclaimerMsg()"
                       >
@@ -224,21 +257,21 @@
         <v-divider thickness="1"></v-divider>
 
         <div class="d-flex w-100 mt-7 pb-10">
-          <p class="mr-6 font-weight-medium flex-grow-1">
+          <p class="font-weight-medium flex-grow-1">
             Entrypass URL
             <span class="d-block text-caption text-grey-darken-1 mt-1">
-              <v-col>
+              <v-col class="pr-0">
                 <v-text-field
                   label="Enter entrypass URL"
-                  placeholder="https://example.com"
+                  placeholder="https://your-entrypass-socket-url.com"
                   outlined
                   clearable
                   hide-details
                   v-model="currentEntryPassSettings.url"
                 />
               </v-col>
-              <v-col>
-                <v-btn color="primary" @click="saveEntryPassUrl()">Save</v-btn>
+              <v-col cols="12" md="3">
+                <v-btn color="primary" variant="flat" prepend-icon="mdi-link-variant" block @click="saveEntryPassUrl()">Save</v-btn>
               </v-col>
             </span>
           </p>
@@ -247,6 +280,12 @@
     </v-col>
 
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+
+    <EntryPassQrTemplatePreview
+      v-model="isShowTemplatePreview"
+      :header="currentEntryPassSettings.qrCodeTemplateHeader"
+      :sub-text="currentEntryPassSettings.qrCodeTemplateHeaderSubText"
+    />
   </v-row>
 </template>
 <script lang="ts" setup>
@@ -275,8 +314,13 @@ const currentEntryPassSettings = ref<Record<string, any>>({
   site: "",
   org: "",
   isEnabled: true,
+  api: null,
+  port: null,
+  serviceId: null,
   physicalPass: false,
   nfcPass: false,
+  qrPass: false,
+  keyPass: false,
   printerVendorId: "",
   printerProductId: "",
   qrCodeTemplateHeader: "",
@@ -284,6 +328,7 @@ const currentEntryPassSettings = ref<Record<string, any>>({
   qrCodeTemplateDate: "",
   disclaimerMessage: "",
   url: "",
+  template: { id: "", name: "" },
   status: "",
   createdBy: "",
   updatedBy: "",
@@ -292,28 +337,118 @@ const currentEntryPassSettings = ref<Record<string, any>>({
   deletedAt: "",
 });
 
-const entryPassSettingsPayload = ref<Record<string, any>>({
-  site: "",
-  org: "",
-  isEnabled: true,
-  physicalPass: false,
-  nfcPass: false,
-  printerVendorId: "",
-  printerProductId: "",
-  qrCodeTemplateHeader: "",
-  qrCodeTemplateHeaderSubText: "",
-  qrCodeTemplateDate: "",
-  disclaimerMessage: "",
-  url: "",
-  status: "",
-});
-
 const {
   getBySiteId: _getSiteEntryPassSettings,
-  add: _add,
-  updateBySiteId: _updateBySiteId,
+  save: _save,
 } = useSiteEntryPassSettings();
 
+const { requestDevice, testConnection, isWebUsbSupported } = useWebUsb();
+const { addFile, getFileUrl } = useFile();
+
+const scanningPrinter = ref(false);
+const testingPrinter = ref(false);
+const isShowTemplatePreview = ref(false);
+const uploadingTemplate = ref(false);
+const templateFileInput = ref<HTMLInputElement | null>(null);
+
+function triggerTemplateUpload() {
+  templateFileInput.value?.click();
+}
+
+async function handleTemplateUpload(e: Event) {
+  const files = (e.target as HTMLInputElement).files;
+  if (!files || files.length === 0) return;
+  uploadingTemplate.value = true;
+  try {
+    const res = await addFile(files[0]);
+    currentEntryPassSettings.value.template = {
+      id: res.id as string,
+      name: (res.name as string) || files[0].name,
+    };
+    await _save(buildPayload());
+    showMessage("Template uploaded successfully!", "success");
+    getSiteEntryPassSettings();
+  } catch {
+    showMessage("Failed to upload template", "error");
+  } finally {
+    uploadingTemplate.value = false;
+    (e.target as HTMLInputElement).value = "";
+  }
+}
+
+async function removeTemplate() {
+  currentEntryPassSettings.value.template = { id: "", name: "" };
+  await _save(buildPayload());
+  showMessage("Template removed successfully!", "success");
+  getSiteEntryPassSettings();
+}
+
+async function downloadTemplate() {
+  const { id, name } = currentEntryPassSettings.value.template;
+  try {
+    const response = await fetch(getFileUrl(id));
+    const blob = await response.blob();
+    const blobUrl = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = blobUrl;
+    link.download = name;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(blobUrl);
+  } catch {
+    showMessage("Failed to download template", "error");
+  }
+}
+
+async function scanPrinter() {
+  if (!isWebUsbSupported.value) {
+    showMessage("Web USB is not supported in this browser", "error");
+    return;
+  }
+  try {
+    scanningPrinter.value = true;
+    const device = await requestDevice();
+    currentEntryPassSettings.value.printerVendorId = String(device.vendorId);
+    currentEntryPassSettings.value.printerProductId = String(device.productId);
+    showMessage(
+      `Printer found: ${device.productName} (${device.vendorId}:${device.productId})`,
+      "success",
+    );
+  } catch (error: any) {
+    if (error.message !== "No device selected") {
+      showMessage(error.message || "Failed to scan printer", "error");
+    }
+  } finally {
+    scanningPrinter.value = false;
+  }
+}
+
+async function testAndPrint() {
+  if (!isWebUsbSupported.value) {
+    showMessage("Web USB is not supported in this browser", "error");
+    return;
+  }
+  const vendorId = Number(currentEntryPassSettings.value.printerVendorId);
+  const productId = Number(currentEntryPassSettings.value.printerProductId);
+  if (!vendorId || !productId) {
+    showMessage("Please set a valid Vendor ID and Product ID first", "warning");
+    return;
+  }
+  try {
+    testingPrinter.value = true;
+    const result = await testConnection(vendorId, productId);
+    showMessage(
+      result.message,
+      result.success ? "success" : "error",
+    );
+  } catch (error: any) {
+    showMessage(error.message || "Test print failed", "error");
+  } finally {
+    testingPrinter.value = false;
+  }
+}
+
 const route = useRoute();
 const siteId = route.params.site as string;
 const orgId = route.params.org as string;
@@ -335,178 +470,95 @@ const loading = computed(
 );
 
 watchEffect(() => {
-  if (getSiteEntryPassSettingsReq.value) {
-    currentEntryPassSettings.value = getSiteEntryPassSettingsReq.value;
-    // console.log("currentEntryPassSettings", currentEntryPassSettings.value);
-    // console.log(currentEntryPassSettings.value._id);
+  const data = getSiteEntryPassSettingsReq.value?.data;
+  if (data) {
+    currentEntryPassSettings.value = {
+      ...currentEntryPassSettings.value,
+      _id: data._id ?? "",
+      site: data.site ?? "",
+      isEnabled: data.isEnabled ?? true,
+      api: data.api ?? null,
+      port: data.port ?? null,
+      serviceId: data.serviceId ?? null,
+      physicalPass: data.settings?.physicalPass ?? false,
+      nfcPass: data.settings?.nfcPass ?? false,
+      qrPass: data.settings?.qrPass ?? false,
+      keyPass: data.settings?.keyPass ?? false,
+      printerVendorId: data.settings?.printer?.vendorId ? String(data.settings.printer.vendorId) : "",
+      printerProductId: data.settings?.printer?.productId ? String(data.settings.printer.productId) : "",
+      qrCodeTemplateHeader: data.settings?.qrTemplate?.header ?? "",
+      qrCodeTemplateHeaderSubText: data.settings?.qrTemplate?.subText ?? "",
+      qrCodeTemplateDate: data.settings?.qrTemplate?.date ?? "",
+      url: data.settings?.url ?? "",
+      template: data.settings?.template ?? { id: "", name: "" },
+      createdAt: data.createdAt ?? "",
+      updatedAt: data.updatedAt ?? "",
+    };
   }
 });
 
-async function addPayload() {
-  const payload = {
+function buildPayload() {
+  return {
     site: siteId,
-    org: orgId,
-    isEnabled: true,
-    physicalPass: currentEntryPassSettings.value.physicalPass,
-    nfcPass: currentEntryPassSettings.value.nfcPass,
-    printerVendorId: currentEntryPassSettings.value.printerVendorId,
-    printerProductId: currentEntryPassSettings.value.printerProductId,
-    qrCodeTemplateHeader: currentEntryPassSettings.value.qrCodeTemplateHeader,
-    qrCodeTemplateHeaderSubText:
-      currentEntryPassSettings.value.qrCodeTemplateHeaderSubText,
-    qrCodeTemplateDate: currentEntryPassSettings.value.qrCodeTemplateDate,
-    disclaimerMessage: currentEntryPassSettings.value.disclaimerMessage,
-    url: currentEntryPassSettings.value.url,
-    status: "Active",
+    isEnabled: currentEntryPassSettings.value.isEnabled ?? true,
+    api: currentEntryPassSettings.value.api ?? null,
+    port: currentEntryPassSettings.value.port ?? null,
+    serviceId: currentEntryPassSettings.value.serviceId ?? null,
+    settings: {
+      physicalPass: currentEntryPassSettings.value.physicalPass,
+      nfcPass: currentEntryPassSettings.value.nfcPass,
+      qrPass: currentEntryPassSettings.value.qrPass ?? false,
+      keyPass: currentEntryPassSettings.value.keyPass ?? false,
+      printer: {
+        vendorId: Number(currentEntryPassSettings.value.printerVendorId) || null,
+        productId: Number(currentEntryPassSettings.value.printerProductId) || null,
+      },
+      qrTemplate: {
+        header: currentEntryPassSettings.value.qrCodeTemplateHeader,
+        subText: currentEntryPassSettings.value.qrCodeTemplateHeaderSubText,
+        date: currentEntryPassSettings.value.qrCodeTemplateDate || null,
+      },
+      url: currentEntryPassSettings.value.url,
+      template: currentEntryPassSettings.value.template?.id
+        ? currentEntryPassSettings.value.template
+        : null,
+    },
   };
-  entryPassSettingsPayload.value = payload;
-}
-
-async function updatePayload() {
-  const payload = {
-    isEnabled: true,
-    physicalPass: currentEntryPassSettings.value.physicalPass,
-    nfcPass: currentEntryPassSettings.value.nfcPass,
-    printerVendorId: currentEntryPassSettings.value.printerVendorId,
-    printerProductId: currentEntryPassSettings.value.printerProductId,
-    qrCodeTemplateHeader: currentEntryPassSettings.value.qrCodeTemplateHeader,
-    qrCodeTemplateHeaderSubText:
-      currentEntryPassSettings.value.qrCodeTemplateHeaderSubText,
-    qrCodeTemplateDate: currentEntryPassSettings.value.qrCodeTemplateDate,
-    disclaimerMessage: currentEntryPassSettings.value.disclaimerMessage,
-    url: currentEntryPassSettings.value.url,
-    status: "Active",
-  };
-  entryPassSettingsPayload.value = payload;
 }
 
 async function updateEntryPassSettingsPhysicalPass() {
-  if (!currentEntryPassSettings.value._id) {
-    addPayload();
-    entryPassSettingsPayload.value.physicalPass =
-      currentEntryPassSettings.value.physicalPass;
-    await _add(entryPassSettingsPayload.value);
-    showMessage("Entry Pass Settings added successfully!", "success");
-  } else {
-    updatePayload();
-    entryPassSettingsPayload.value.physicalPass =
-      currentEntryPassSettings.value.physicalPass;
-    await _updateBySiteId(
-      entryPassSettingsPayload.value,
-      currentEntryPassSettings.value.site
-    );
-    showMessage("Entry Pass Settings updated successfully!", "success");
-  }
+  await _save(buildPayload());
+  showMessage("Entry Pass Settings updated successfully!", "success");
   getSiteEntryPassSettings();
 }
 
 async function updateEntryPassSettingsNfcPass() {
-  if (!currentEntryPassSettings.value._id) {
-    addPayload();
-    entryPassSettingsPayload.value.nfcPass =
-      currentEntryPassSettings.value.nfcPass;
-    await _add(entryPassSettingsPayload.value);
-    showMessage("Entry Pass Settings added successfully!", "success");
-  } else {
-    updatePayload();
-    entryPassSettingsPayload.value.nfcPass =
-      currentEntryPassSettings.value.nfcPass;
-    await _updateBySiteId(
-      entryPassSettingsPayload.value,
-      currentEntryPassSettings.value.site
-    );
-    showMessage("Entry Pass Settings updated successfully!", "success");
-  }
+  await _save(buildPayload());
+  showMessage("Entry Pass Settings updated successfully!", "success");
   getSiteEntryPassSettings();
 }
 
 async function savePrinterSettings() {
-  if (!currentEntryPassSettings.value._id) {
-    addPayload();
-    entryPassSettingsPayload.value.printerVendorId =
-      currentEntryPassSettings.value.printerVendorId;
-    entryPassSettingsPayload.value.printerProductId =
-      currentEntryPassSettings.value.printerProductId;
-    await _add(entryPassSettingsPayload.value);
-    showMessage("Entry Pass Settings added successfully!", "success");
-  } else {
-    updatePayload();
-    entryPassSettingsPayload.value.printerVendorId =
-      currentEntryPassSettings.value.printerVendorId;
-    entryPassSettingsPayload.value.printerProductId =
-      currentEntryPassSettings.value.printerProductId;
-    console.log(
-      "entryPassSettingsPayload.value",
-      entryPassSettingsPayload.value
-    );
-    await _updateBySiteId(
-      entryPassSettingsPayload.value,
-      currentEntryPassSettings.value.site
-    );
-    showMessage("Entry Pass Settings updated successfully!", "success");
-  }
+  await _save(buildPayload());
+  showMessage("Entry Pass Settings updated successfully!", "success");
   getSiteEntryPassSettings();
 }
 
 async function saveQrCodeTemplate() {
-  if (!currentEntryPassSettings.value._id) {
-    addPayload();
-    entryPassSettingsPayload.value.qrCodeTemplateHeader =
-      currentEntryPassSettings.value.qrCodeTemplateHeader;
-    entryPassSettingsPayload.value.qrCodeTemplateHeaderSubText =
-      currentEntryPassSettings.value.qrCodeTemplateHeaderSubText;
-    await _add(entryPassSettingsPayload.value);
-    showMessage("Entry Pass Settings added successfully!", "success");
-  } else {
-    updatePayload();
-    entryPassSettingsPayload.value.qrCodeTemplateHeader =
-      currentEntryPassSettings.value.qrCodeTemplateHeader;
-    entryPassSettingsPayload.value.qrCodeTemplateHeaderSubText =
-      currentEntryPassSettings.value.qrCodeTemplateHeaderSubText;
-    await _updateBySiteId(
-      entryPassSettingsPayload.value,
-      currentEntryPassSettings.value.site
-    );
-    showMessage("Entry Pass Settings updated successfully!", "success");
-  }
+  await _save(buildPayload());
+  showMessage("Entry Pass Settings updated successfully!", "success");
   getSiteEntryPassSettings();
 }
 
 async function saveResidentAppDisclaimerMsg() {
-  if (!currentEntryPassSettings.value._id) {
-    addPayload();
-    entryPassSettingsPayload.value.disclaimerMessage =
-      currentEntryPassSettings.value.disclaimerMessage;
-    await _add(entryPassSettingsPayload.value);
-    showMessage("Entry Pass Settings added successfully!", "success");
-  } else {
-    updatePayload();
-    entryPassSettingsPayload.value.disclaimerMessage =
-      currentEntryPassSettings.value.disclaimerMessage;
-    await _updateBySiteId(
-      entryPassSettingsPayload.value,
-      currentEntryPassSettings.value.site
-    );
-    showMessage("Entry Pass Settings updated successfully!", "success");
-  }
+  await _save(buildPayload());
+  showMessage("Entry Pass Settings updated successfully!", "success");
   getSiteEntryPassSettings();
 }
 
 async function saveEntryPassUrl() {
-  if (!currentEntryPassSettings.value._id) {
-    addPayload();
-    entryPassSettingsPayload.value.url = currentEntryPassSettings.value.url;
-    await _add(entryPassSettingsPayload.value);
-    showMessage("Entry Pass Settings added successfully!", "success");
-  } else {
-    updatePayload();
-    entryPassSettingsPayload.value.url = currentEntryPassSettings.value.url;
-    await _updateBySiteId(
-      entryPassSettingsPayload.value,
-      currentEntryPassSettings.value.site
-    );
-    showMessage("Entry Pass Settings updated successfully!", "success");
-  }
+  await _save(buildPayload());
+  showMessage("Entry Pass Settings updated successfully!", "success");
   getSiteEntryPassSettings();
 }