@7365admin1/layer-common 3.0.8 → 3.0.9

package/components/HidQrCodeConfiguration.vue

@@ -0,0 +1,618 @@
+<template>
+  <section class="hid-qr-config">
+    <v-card flat class="config-panel">
+      <div class="panel-header">
+        <div>
+          <h2>HID Configuration</h2>
+        </div>
+        <v-btn icon="mdi-chevron-up" variant="text" density="comfortable" />
+      </div>
+
+      <div class="config-body">
+        <div class="section-head">
+          <div>
+            <h3>HID QR Code Pass</h3>
+            <p>Allow users to generate and scan digital QR codes at compatible HID readers for touchless access control.</p>
+          </div>
+          <v-switch
+            v-model="form.enabled"
+            color="success"
+            hide-details
+            inset
+            :loading="savingSection === 'enabled'"
+            @update:model-value="saveSection('enabled')"
+          />
+        </div>
+
+        <div class="form-section">
+          <div class="section-label">HID Reader</div>
+          <v-select
+            v-model="form.readerId"
+            :items="readerOptions"
+            item-title="title"
+            item-value="value"
+            placeholder="Select HID reader"
+            variant="outlined"
+            density="compact"
+            hide-details
+            class="reader-select"
+          />
+        </div>
+
+        <v-divider />
+
+        <div class="form-section">
+          <div class="section-label">QR Code Format</div>
+          <div class="validity-grid">
+            <v-select
+              v-model="form.qrFormat"
+              :items="qrFormatOptions"
+              item-title="title"
+              item-value="value"
+              placeholder="Select format"
+              variant="outlined"
+              density="compact"
+              hide-details
+            />
+            <v-btn
+              class="text-none save-button"
+              variant="flat"
+              prepend-icon="mdi-qrcode-edit"
+              height="40"
+              :loading="savingSection === 'qr-format'"
+              :disabled="!form.readerId"
+              @click="saveSection('qr-format')"
+            >
+              Save Format
+            </v-btn>
+          </div>
+        </div>
+
+        <div class="form-section">
+          <div class="section-label">Printer Setup</div>
+          <div class="printer-grid">
+            <v-text-field
+              v-model="form.printer.vendorId"
+              placeholder="Vendor"
+              variant="outlined"
+              density="compact"
+              hide-details
+            />
+            <v-text-field
+              v-model="form.printer.productId"
+              placeholder="Product Id"
+              variant="outlined"
+              density="compact"
+              hide-details
+            />
+            <v-btn
+              class="text-none utility-button"
+              variant="outlined"
+              prepend-icon="mdi-magnify"
+              height="40"
+              @click="scanPrinter"
+            >
+              Scan Printer
+            </v-btn>
+            <v-btn
+              class="text-none test-button"
+              variant="outlined"
+              prepend-icon="mdi-printer-check"
+              height="40"
+              :disabled="!hasPrinterConfig"
+              @click="testPrint"
+            >
+              Test & Print
+            </v-btn>
+            <v-btn
+              class="text-none save-button"
+              variant="flat"
+              prepend-icon="mdi-printer"
+              height="40"
+              :loading="savingSection === 'printer'"
+              @click="saveSection('printer')"
+            >
+              Save Settings
+            </v-btn>
+          </div>
+        </div>
+
+        <v-divider />
+
+        <div class="form-section">
+          <div class="section-label">HID QR Code Template</div>
+          <div class="template-grid">
+            <v-text-field
+              v-model="form.template.header"
+              placeholder="Header"
+              variant="outlined"
+              density="compact"
+              hide-details
+            />
+            <v-text-field
+              v-model="form.template.subtext"
+              placeholder="Subtext"
+              variant="outlined"
+              density="compact"
+              hide-details
+            />
+            <v-btn
+              class="text-none preview-button"
+              variant="flat"
+              prepend-icon="mdi-eye"
+              height="40"
+              @click="previewDialog = true"
+            >
+              Preview
+            </v-btn>
+            <v-btn
+              class="text-none save-button"
+              variant="flat"
+              prepend-icon="mdi-qrcode-scan"
+              height="40"
+              :loading="savingSection === 'template'"
+              @click="saveSection('template')"
+            >
+              Save
+            </v-btn>
+          </div>
+        </div>
+
+        <v-divider />
+
+        <div class="form-section">
+          <div class="section-label">HID QR Code Validity</div>
+          <div class="validity-grid">
+            <v-text-field
+              v-model.number="form.validityMinutes"
+              placeholder="Validity (minutes)"
+              variant="outlined"
+              density="compact"
+              hide-details
+              min="1"
+              type="number"
+            />
+            <v-btn
+              class="text-none save-button"
+              variant="flat"
+              prepend-icon="mdi-timer-outline"
+              height="40"
+              :loading="savingSection === 'validity'"
+              @click="saveSection('validity')"
+            >
+              Save
+            </v-btn>
+          </div>
+        </div>
+      </div>
+    </v-card>
+
+    <v-dialog v-model="previewDialog" max-width="420">
+      <v-card class="preview-shell">
+        <v-btn
+          class="preview-close"
+          icon="mdi-close"
+          variant="text"
+          density="comfortable"
+          @click="previewDialog = false"
+        />
+        <v-card-text>
+          <div class="preview-title">QR code Preview</div>
+          <div class="pass-preview">
+            <div class="pass-heading">{{ form.template.header || "Header" }}</div>
+            <div class="pass-subtext">{{ form.template.subtext || "Subtext" }}</div>
+
+            <div class="qr-grid">
+              <div class="qr-placeholder small"><span>No QR</span></div>
+              <div class="qr-placeholder small"><span>No QR</span></div>
+              <div class="qr-placeholder large"><span>No QR payload</span></div>
+              <div class="qr-placeholder small"><span>No QR</span></div>
+              <div class="qr-placeholder small"><span>No QR</span></div>
+            </div>
+
+            <div class="pass-footer">
+              <strong>{{ siteName }}</strong>
+              <strong>{{ siteLabel }}</strong>
+              <span>Validity: {{ validityText }}</span>
+              <span>Access: Door</span>
+              <span>Generated QR payload will render here.</span>
+            </div>
+          </div>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+
+    <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+  </section>
+</template>
+
+<script setup lang="ts">
+type HidQrConfig = {
+  enabled: boolean;
+  readerId: string;
+  qrFormat: "0" | "1" | "2";
+  printer: {
+    vendorId: string;
+    productId: string;
+  };
+  template: {
+    header: string;
+    subtext: string;
+  };
+  validityMinutes: number | null;
+};
+
+const props = defineProps<{
+  site: string;
+}>();
+
+const { getSiteById, updateSitebyId } = useSiteSettings();
+const { getReaders, setReaderConfiguration } = useHidAmico();
+
+const defaultConfig: HidQrConfig = {
+  enabled: false,
+  readerId: "",
+  qrFormat: "0",
+  printer: {
+    vendorId: "",
+    productId: "",
+  },
+  template: {
+    header: "",
+    subtext: "",
+  },
+  validityMinutes: null,
+};
+
+const siteData = ref<Record<string, any> | null>(null);
+const readers = ref<Record<string, any>[]>([]);
+const form = reactive<HidQrConfig>(structuredClone(defaultConfig));
+const previewDialog = ref(false);
+const savingSection = ref("");
+const message = ref("");
+const messageColor = ref("success");
+const messageSnackbar = ref(false);
+
+const hasPrinterConfig = computed(() =>
+  Boolean(form.printer.vendorId && form.printer.productId),
+);
+const readerOptions = computed(() => readers.value.map((reader) => ({
+  title: reader.name || reader.deviceId || reader._id,
+  value: reader._id,
+})));
+const qrFormatOptions = [
+  { title: "Alphanumeric", value: "0" },
+  { title: "Numeric only", value: "1" },
+  { title: "Hexadecimal numeric", value: "2" },
+];
+
+const siteName = computed(() => siteData.value?.name || "Site");
+const siteLabel = computed(() => siteData.value?.code || siteData.value?.block || props.site);
+const validityText = computed(() =>
+  form.validityMinutes ? `${form.validityMinutes} minutes` : "Not set",
+);
+
+watch(
+  () => props.site,
+  () => loadConfig(),
+  { immediate: true },
+);
+
+async function loadConfig() {
+  if (!props.site) return;
+
+  const [site, readerResponse] = await Promise.all([
+    getSiteById(props.site),
+    getReaders({ site: props.site, page: 1, limit: 100 }),
+  ]);
+  siteData.value = site;
+  readers.value = readerResponse?.items ?? readerResponse?.data?.items ?? readerResponse?.data?.readers ?? [];
+  const config = siteData.value?.metadata?.hidQrCodePass || {};
+  Object.assign(form, {
+    enabled: Boolean(config.enabled),
+    readerId: String(config.readerId || readers.value[0]?._id || ""),
+    qrFormat: ["0", "1", "2"].includes(String(config.qrFormat)) ? String(config.qrFormat) as "0" | "1" | "2" : "0",
+    printer: {
+      vendorId: String(config.printer?.vendorId || ""),
+      productId: String(config.printer?.productId || ""),
+    },
+    template: {
+      header: String(config.template?.header || ""),
+      subtext: String(config.template?.subtext || ""),
+    },
+    validityMinutes: config.validityMinutes ? Number(config.validityMinutes) : null,
+  });
+}
+
+function buildPayload() {
+  const metadata = {
+    ...(siteData.value?.metadata || {}),
+    hidQrCodePass: {
+      enabled: form.enabled,
+      readerId: form.readerId,
+      qrFormat: form.qrFormat,
+      printer: {
+        vendorId: form.printer.vendorId.trim(),
+        productId: form.printer.productId.trim(),
+      },
+      template: {
+        header: form.template.header.trim(),
+        subtext: form.template.subtext.trim(),
+      },
+      validityMinutes: form.validityMinutes ? Number(form.validityMinutes) : null,
+      updatedAt: new Date().toISOString(),
+    },
+  };
+
+  return { metadata };
+}
+
+async function saveSection(section: string) {
+  if (!props.site) return;
+
+  savingSection.value = section;
+  try {
+    if (section === "qr-format") {
+      await setReaderConfiguration(form.readerId, {
+        face_id: {
+          qrcode_legacy_mode_enabled: form.qrFormat,
+        },
+      });
+    }
+    await updateSitebyId(props.site, buildPayload());
+    await loadConfig();
+    showMessage("HID QR code settings saved.", "success");
+  } catch (error: any) {
+    showMessage(errorConverter(error), "error");
+  } finally {
+    savingSection.value = "";
+  }
+}
+
+async function scanPrinter() {
+  if (!("usb" in navigator)) {
+    showMessage("USB printer scan is not available in this browser.", "error");
+    return;
+  }
+
+  try {
+    const device = await (navigator as any).usb.requestDevice({ filters: [] });
+    form.printer.vendorId = `0x${Number(device.vendorId).toString(16).padStart(4, "0")}`;
+    form.printer.productId = `0x${Number(device.productId).toString(16).padStart(4, "0")}`;
+    showMessage("Printer selected. Save settings to keep it.", "success");
+  } catch (error: any) {
+    if (error?.name !== "NotFoundError") {
+      showMessage(error?.message || "Unable to scan printer.", "error");
+    }
+  }
+}
+
+function testPrint() {
+  showMessage("Printer settings are ready. Connect print command when HID QR payload generation is available.", "success");
+}
+
+function showMessage(text: string, color: string) {
+  message.value = text;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+</script>
+
+<style scoped>
+.hid-qr-config {
+  width: 100%;
+  min-width: 0;
+  padding: 8px 0 28px;
+}
+
+.config-panel {
+  border: 1px solid #e6eaee;
+  border-radius: 6px;
+  overflow: hidden;
+  background: #ffffff;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 48px;
+  padding: 0 18px;
+  background: #082e43;
+  color: #ffffff;
+}
+
+.panel-header h2 {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.config-body {
+  padding: 30px 38px;
+}
+
+.section-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 24px;
+}
+
+.section-head h3,
+.section-label {
+  margin: 0 0 6px;
+  color: #233545;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.section-head p {
+  margin: 0;
+  color: #677280;
+  font-size: 12px;
+}
+
+.form-section {
+  padding: 16px 0;
+}
+
+.printer-grid {
+  display: grid;
+  grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr);
+  gap: 14px;
+  align-items: center;
+}
+
+.template-grid {
+  display: grid;
+  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
+  gap: 14px;
+}
+
+.template-grid .preview-button,
+.template-grid .save-button {
+  width: 100%;
+}
+
+.validity-grid {
+  display: grid;
+  grid-template-columns: minmax(180px, 260px) minmax(140px, 260px);
+  gap: 14px;
+  align-items: center;
+}
+
+.save-button {
+  background: #082e43;
+  color: #ffffff;
+}
+
+.preview-button {
+  background: #35b84b;
+  color: #ffffff;
+}
+
+.test-button {
+  border-color: #34b84a;
+  color: #2da643;
+}
+
+.utility-button {
+  color: #1f3448;
+}
+
+.preview-shell {
+  position: relative;
+  overflow: visible;
+  background: transparent;
+  box-shadow: none;
+}
+
+.preview-close {
+  position: absolute;
+  top: 38px;
+  right: 18px;
+  z-index: 2;
+}
+
+.preview-title {
+  margin: 0 0 12px;
+  color: #ffffff;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.pass-preview {
+  width: 244px;
+  min-height: 360px;
+  margin: 0 auto;
+  padding: 22px 28px;
+  background: #ffffff;
+  color: #252f3b;
+  text-align: center;
+}
+
+.pass-heading {
+  min-height: 20px;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.pass-subtext {
+  min-height: 18px;
+  color: #6b7280;
+  font-size: 11px;
+}
+
+.qr-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px 36px;
+  justify-items: center;
+  margin: 16px 0;
+}
+
+.qr-placeholder {
+  display: grid;
+  place-items: center;
+  border: 1px dashed #aab3bd;
+  background:
+    linear-gradient(45deg, #f4f6f8 25%, transparent 25%),
+    linear-gradient(-45deg, #f4f6f8 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #f4f6f8 75%),
+    linear-gradient(-45deg, transparent 75%, #f4f6f8 75%);
+  background-size: 10px 10px;
+  background-position: 0 0, 0 5px, 5px -5px, -5px 0;
+  color: #6b7280;
+  font-size: 9px;
+}
+
+.qr-placeholder.small {
+  width: 54px;
+  height: 54px;
+}
+
+.qr-placeholder.large {
+  grid-column: 1 / -1;
+  width: 96px;
+  height: 96px;
+}
+
+.pass-footer {
+  display: grid;
+  gap: 4px;
+  color: #4b5563;
+  font-size: 10px;
+}
+
+.pass-footer strong {
+  color: #263241;
+  font-size: 15px;
+}
+
+@media (max-width: 1100px) {
+  .printer-grid,
+  .template-grid,
+  .validity-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 700px) {
+  .config-body {
+    padding: 22px 16px;
+  }
+
+  .section-head,
+  .printer-grid,
+  .template-grid,
+  .validity-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .section-head {
+    display: grid;
+  }
+}
+</style>