@7365admin1/layer-common 4.97.1-staging.586 → 4.97.1-staging.588

package/components/AddPassKeyToVisitor.vue

@@ -1,41 +1,51 @@
 <template>
   <v-card width="100%" class="screen-modal passkey" :loading="processing">
     <div class="passkey__head">
-      <v-card-title>{{ isEditMode ? "Edit" : "Assign" }} Pass &amp; Keys</v-card-title>
-      <AppButton
-        variant="icon"
-        icon="mdi-close"
-        aria-label="Close"
-        @click="emit('close')"
-      />
+      <v-card-title>{{ dialogTitle }}</v-card-title>
+      <v-btn icon="mdi-close" variant="text" aria-label="Close" @click="emit('close')" />
     </div>
 
     <div class="screen-modal__body passkey__body">
       <!-- `.filter-field` is the design's input, and it is a descendant
            selector, so both autocompletes get it from this one class. -->
       <v-row no-gutters class="ga-1 filter-field">
+        <!-- Whose passes and keys these are, as the return dialog. -->
         <v-col cols="12">
-          <span class="passkey__name">Name: {{ prop.visitor.name }}</span>
+          <div class="passkey__who">
+            <div class="passkey__who-line font-weight-bold">
+              <v-icon icon="mdi-account-outline" size="18" />
+              {{ prop.visitor.name || "N/A" }}
+            </div>
+            <div class="passkey__who-line">
+              <v-icon icon="mdi-storefront-outline" size="18" />
+              {{ visitorLocation }}
+            </div>
+          </div>
         </v-col>
 
         <!-- Pass section -->
-        <v-col cols="12" class="mt-3">
-          <InputLabel title="Pass" />
+        <v-col v-if="showPass" cols="12" class="mt-3">
+          <p class="passkey__label">Pass</p>
 
           <!-- Existing pass -->
-          <div v-if="existingPass" class="d-flex align-center ga-2 mb-2">
-            <StatusChip tone="info" :dot="false">
-              <v-icon icon="mdi-card-bulleted-outline" size="13" />
-              {{ existingPass.prefixAndName }}
-            </StatusChip>
-            <span class="passkey__current">(current)</span>
-          </div>
-
-          <!-- New pass selector -->
+          <template v-if="existingPass">
+            <p class="passkey__sublabel">Current</p>
+            <div class="d-flex flex-wrap ga-2 mb-3">
+              <v-chip variant="outlined" prepend-icon="mdi-card-bulleted-outline"
+                class="font-weight-bold passkey-chip passkey-chip--pass">
+                {{ existingPass.prefixAndName }}
+              </v-chip>
+            </div>
+            <p class="passkey__sublabel">New pass</p>
+          </template>
+
+          <!-- New pass selector, with Scan Pass beside it (as iSecure). -->
+          <div class="scan-row">
           <v-autocomplete
             v-model="selectedPass"
+            class="scan-row__field"
             v-model:search="passInput"
-            :label="existingPass?.keyId ? 'Change pass' : undefined"
+            
             :hide-no-data="false"
             :items="passItems"
             item-title="prefixAndName"
@@ -61,49 +71,52 @@
               </v-list-item>
             </template>
           </v-autocomplete>
+            <v-btn variant="flat" class="text-none screen-btn-primary scan-row__btn" prepend-icon="mdi-qrcode"
+              data-test="passkey-scan-pass" :disabled="processing" @click="openScanner('pass')">
+              Scan Pass
+            </v-btn>
+          </div>
+          <p v-if="passNotice" :class="['passkey__notice', passNotice.error && 'passkey__notice--error']">
+            {{ passNotice.text }}
+          </p>
         </v-col>
 
         <!-- Keys section -->
         <v-col v-if="showKeys" cols="12" class="mt-3">
-          <InputLabel title="Keys" />
+          <p class="passkey__label">Keys</p>
 
-          <!-- Existing keys -->
-          <div
-            v-if="existingKeys.length > 0"
-            class="d-flex flex-wrap ga-1 mb-2"
-          >
-            <!-- The design's tag chip, keeping the remove control the product
-                 already had: the tone and the shape are the shared ones, only
-                 the close button is drawn inside rather than by Vuetify. -->
-            <StatusChip
-              v-for="key in existingKeys.filter((k) => k.status != 'Removed')"
-              :key="key.keyId"
-              tone="warn"
-              :dot="false"
-            >
-              <v-icon icon="mdi-key" size="13" />
-              {{ key.prefixAndName }}
-              <button
-                class="passkey__remove"
-                :aria-label="`Remove ${key.prefixAndName}`"
-                @click="removeExistingKey(key)"
+          <!-- Existing keys: ✕ takes one off (saved as "Removed"). -->
+          <template v-if="existingKeys.some((k) => k.status != 'Removed')">
+            <p class="passkey__sublabel">Current</p>
+            <div class="d-flex flex-wrap ga-2 mb-3">
+              <v-chip
+                v-for="key in existingKeys.filter((k) => k.status != 'Removed')"
+                :key="key.keyId"
+                variant="outlined"
+                prepend-icon="mdi-key"
+                closable
+                :close-label="`Remove ${key.prefixAndName}`"
+                class="font-weight-bold passkey-chip passkey-chip--key"
+                @click:close="removeExistingKey(key)"
               >
-                <v-icon icon="mdi-close-circle" size="14" />
-              </button>
-            </StatusChip>
-            <span class="passkey__current align-self-center">(current)</span>
-          </div>
-
-          <!-- New keys selector -->
+                {{ key.prefixAndName }}
+              </v-chip>
+            </div>
+            <p class="passkey__sublabel">Add more keys</p>
+          </template>
+
+          <!-- New keys selector, with Scan Key beside it (as iSecure). -->
+          <div class="scan-row">
           <v-autocomplete
             v-model="selectedKeys"
+            class="scan-row__field"
             v-model:search="keyInput"
             :hide-no-data="false"
             :items="keyItems"
             item-title="prefixAndName"
             item-value="_id"
             :item-props="keyItemProps"
-            :label="existingKeys.length > 0 ? 'Add more keys' : undefined"
+            
             multiple
             variant="outlined"
             hide-details
@@ -127,6 +140,14 @@
               </v-list-item>
             </template>
           </v-autocomplete>
+            <v-btn variant="flat" class="text-none screen-btn-primary scan-row__btn" prepend-icon="mdi-qrcode"
+              data-test="passkey-scan-key" :disabled="processing" @click="openScanner('key')">
+              Scan Key
+            </v-btn>
+          </div>
+          <p v-if="keyNotice" :class="['passkey__notice', keyNotice.error && 'passkey__notice--error']">
+            {{ keyNotice.text }}
+          </p>
         </v-col>
       </v-row>
 
@@ -135,10 +156,13 @@
       </v-row>
     </div>
 
+    <VisitorPassKeyQRScanner v-if="scanner.open" :dialog="scanner.open" v-model:scanned-value="scanner.value"
+      @close-dialog="scanner.open = false" />
+
     <div class="passkey__footer">
       <AppButton variant="ghost" @click="emit('close')">Cancel</AppButton>
       <AppButton :disabled="!canSubmit" @click="handleSubmit">
-        {{ isEditMode ? "Save" : "Assign" }}
+        {{ submitLabel }}
       </AppButton>
     </div>
   </v-card>
@@ -149,6 +173,7 @@ import type { PropType } from "vue";
 import usePassKey from "../composables/usePassKey";
 import useVisitor from "../composables/useVisitor";
 import useKeyPresses from "../composables/useKeyPresses";
+import VisitorPassKeyQRScanner from "./VisitorPassKeyQRScanner.vue";
 
 const prop = defineProps({
   visitor: {
@@ -159,8 +184,13 @@ const prop = defineProps({
     type: String,
     required: true,
   },
+  /**
+   * iSecure's pass & key dialogs: "add" is Assign (Assign Pass & Keys for a
+   * contractor, Add Pass otherwise), "add-keys" is Add Key(s) (contractor),
+   * "edit-pass" is Change Pass, "edit" the combined edit.
+   */
   mode: {
-    type: String as PropType<"add" | "edit">,
+    type: String as PropType<"add" | "edit" | "add-keys" | "edit-pass">,
     default: "add",
   },
 });
@@ -172,6 +202,17 @@ const emit = defineEmits<{
 
 const { getPassKeysByPageSearch } = usePassKey();
 const { updateVisitor } = useVisitor();
+const { currentUser } = useLocalAuth();
+
+const { formatLocation } = useSecurityUtils();
+const visitorLocation = computed(
+  () =>
+    formatLocation({
+      block: (prop.visitor as any).block,
+      level: (prop.visitor as any).level,
+      unit: (prop.visitor as any).unit,
+    }) || "N/A"
+);
 
 const processing = ref(false);
 const errorMessage = ref("");
@@ -195,8 +236,40 @@ const existingKeys = ref<
   { keyId: string; prefixAndName: string; status?: string }[]
 >([]);
 
-const isEditMode = computed(() => prop.mode === "edit");
-const showKeys = computed(() => prop.visitor.type === "contractor");
+// Every mode but Assign starts from what the visitor holds now.
+const isEditMode = computed(() => prop.mode !== "add");
+const isContractor = computed(() => prop.visitor.type === "contractor");
+const showPass = computed(() => prop.mode !== "add-keys");
+const showKeys = computed(() => isContractor.value && prop.mode !== "edit-pass");
+
+const dialogTitle = computed(() => {
+  switch (prop.mode) {
+    case "add-keys":
+      // Once the visitor holds keys the dialog adds AND removes them.
+      return prop.visitor.passKeys?.some((key: any) => key?.status != "Removed")
+        ? "Add/Remove Key(s)"
+        : "Add Key(s)";
+    case "edit-pass":
+      return "Change Pass";
+    case "edit":
+      return "Edit Pass & Keys";
+    default:
+      return isContractor.value ? "Assign Pass & Keys" : "Add Pass";
+  }
+});
+
+const submitLabel = computed(() => {
+  switch (prop.mode) {
+    case "add-keys":
+      return "Add";
+    case "edit-pass":
+      return "Update";
+    case "edit":
+      return "Save";
+    default:
+      return isContractor.value ? "Save" : "Add";
+  }
+});
 // The key's press (if the site has any) under each key in the picker. Read
 // only when the key picker is shown.
 const { keyItemProps } = useKeyPresses(() => (showKeys.value ? prop.site : ""));
@@ -364,8 +437,136 @@ watch(
   { deep: true, immediate: true }
 );
 
+/*
+ * Scan Pass / Scan Key (iSecure `onPassScanned` / `onScanned`): the QR holds
+ * the pass or key name (`prefixAndName`, e.g. VP01). It is looked up on the
+ * server across every status, so a pass or key that is not Available is
+ * reported with its status instead of "not found".
+ */
+const PASS_TYPE_LABELS: Record<string, string> = {
+  "visitor-pass": "Visitor Pass",
+  "contractor-pass": "Contractor Pass",
+  "agent-pass": "Agent Pass",
+  "pass-key": "Key",
+};
+
+type TNotice = { text: string; error: boolean } | null;
+const passNotice = ref<TNotice>(null);
+const keyNotice = ref<TNotice>(null);
+const scanner = reactive<{ open: boolean; value: string; target: "pass" | "key" }>({
+  open: false,
+  value: "",
+  target: "pass",
+});
+
+function openScanner(target: "pass" | "key") {
+  if (target === "pass") passNotice.value = null;
+  else keyNotice.value = null;
+  scanner.target = target;
+  scanner.value = "";
+  scanner.open = true;
+}
+
+type TScanned = { _id: string; prefixAndName?: string; status?: string; passType?: string };
+
+async function findScanned(code: string): Promise<TScanned[]> {
+  const same = (item: TScanned) =>
+    (item.prefixAndName ?? "").trim().toLowerCase() === code.toLowerCase();
+  try {
+    const res: any = await getPassKeysByPageSearch({
+      search: code,
+      page: 1,
+      limit: 50,
+      sites: [prop.site],
+    });
+    const items: TScanned[] = res?.items ?? res?.data?.items ?? [];
+    return items.filter(same);
+  } catch {
+    // Offline / failed: the Available lists already loaded.
+    return [
+      ...((passesData.value as any)?.items ?? []),
+      ...((keysData.value as any)?.items ?? []),
+    ].filter(same);
+  }
+}
+
+async function onPassScanned(code: string) {
+  const fail = (text: string) => (passNotice.value = { text, error: true });
+  const found = await findScanned(code);
+  if (!found.length) return fail(`Pass or Key ${code} not found.`);
+  const item = found[0];
+  const isKey = item.passType === "pass-key";
+  const label = PASS_TYPE_LABELS[item.passType ?? ""] ?? (isKey ? "Key" : "Pass");
+  const name = item.prefixAndName ?? code;
+  if (found.length > 1) return fail(`${label} ${name} found duplicates.`);
+  if (isKey) return fail(`${label} ${name} is a key, not a pass.`);
+  if (item.status && item.status !== "Available") return fail(`${label} ${name} is ${item.status}.`);
+  if (existingPassId.value === item._id)
+    return fail(`${label} ${name} is already selected to this visitor.`);
+  if (!passTypesComputed.value.includes(item.passType ?? "")) {
+    const allowed = passTypesComputed.value
+      .map((t) => PASS_TYPE_LABELS[t] ?? t)
+      .join(" / ");
+    return fail(`${label} ${name} cannot be used for this visitor type (${allowed}).`);
+  }
+  // Shown in the picker even if the loaded list did not have it yet.
+  if (!passItems.value.some((p) => p._id === item._id)) {
+    passItems.value = [...passItems.value, item as TPassKey];
+  }
+  selectedPass.value = item._id;
+  passNotice.value = { text: `${label} ${name} selected.`, error: false };
+}
+
+async function onKeyScanned(code: string) {
+  const fail = (text: string) => (keyNotice.value = { text, error: true });
+  const found = await findScanned(code);
+  if (!found.length) return fail(`Pass or Key ${code} not found.`);
+  const item = found[0];
+  const isKey = item.passType === "pass-key";
+  const label = PASS_TYPE_LABELS[item.passType ?? ""] ?? (isKey ? "Key" : "Pass");
+  const name = item.prefixAndName ?? code;
+  if (found.length > 1) return fail(`${label} ${name} found duplicates.`);
+  if (!isKey) return fail(`You are scanning a key, but ${label} ${name} is a pass, not a key.`);
+  // A current key marked for removal: scanning it just undoes that.
+  if (existingKeys.value.some((k) => k.keyId === item._id && k.status === "Removed")) {
+    selectedKeys.value = [...selectedKeys.value, item._id];
+    selectKeys();
+    keyNotice.value = { text: `${label} ${name} restored.`, error: false };
+    return;
+  }
+  if (
+    selectedKeys.value.includes(item._id) ||
+    existingKeys.value.some((k) => k.keyId === item._id && k.status !== "Removed")
+  )
+    return fail(`${label} ${name} is already selected to this visitor.`);
+  if (item.status && item.status !== "Available") return fail(`${label} ${name} is ${item.status}.`);
+  if (!keyItems.value.some((k) => k._id === item._id)) {
+    keyItems.value = [...keyItems.value, item as TPassKey];
+  }
+  selectedKeys.value = [...selectedKeys.value, item._id];
+  keyNotice.value = { text: `${label} ${name} selected.`, error: false };
+}
+
+watch(
+  () => scanner.value,
+  (value) => {
+    const code = String(value ?? "").trim();
+    if (!code) return;
+    scanner.value = "";
+    if (scanner.target === "pass") void onPassScanned(code);
+    else void onKeyScanned(code);
+  }
+);
+
+// Picking by hand clears the last scan message.
+watch(selectedPass, () => {
+  if (passNotice.value?.error) passNotice.value = null;
+});
+
 const canSubmit = computed(() => {
   const hasRemovedKeys = existingKeys.value.some((k) => k.status === "Removed");
+  if (prop.mode === "edit-pass") return !!selectedPass.value;
+  if (prop.mode === "add-keys") return selectedKeys.value.length > 0 || hasRemovedKeys;
   return (
     !!selectedPass.value || selectedKeys.value.length > 0 || hasRemovedKeys
   );
@@ -394,7 +595,8 @@ async function handleSubmit() {
         add: true,
       });
     }
-    payload.visitorPass = finalPasses;
+    // Add Key(s) changes the keys only (iSecure `addKeysPayload`).
+    if (showPass.value) payload.visitorPass = finalPasses;
 
     // Build final keys list: kept existing + newly selected
     if (showKeys.value) {
@@ -413,6 +615,7 @@ async function handleSubmit() {
       payload.passKeys = finalKeys;
     }
 
+    payload.updatedBy = currentUser.value?._id;
     await updateVisitor(prop.visitor._id, payload);
     emit("done");
     emit("close");
@@ -468,6 +671,81 @@ async function handleSubmit() {
   opacity: 1;
 }
 
+/* A Scan button beside its input, the same height, as on the visitor form. */
+.scan-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.scan-row__field {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.scan-row__btn {
+  flex: 0 0 auto;
+}
+
+.passkey__notice {
+  margin: 6px 0 0;
+  font-size: var(--fs-cell);
+  font-weight: 600;
+  color: rgb(var(--v-theme-success));
+}
+
+.passkey__notice--error {
+  color: var(--err);
+}
+
+.passkey__who {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 8px;
+  font-size: 0.9375rem;
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.passkey__who-line {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.passkey__label {
+  margin: 6px 0 6px;
+  font-size: 1rem;
+  font-weight: 600;
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.passkey__sublabel {
+  margin: 0 0 6px;
+  font-size: var(--fs-cell);
+  color: var(--text2);
+}
+
+/* The same pass / key chips as the visitor list and the return dialog. */
+.passkey-chip.v-chip {
+  --v-chip-height: 32px;
+  font-size: 0.875rem;
+  padding: 0 12px;
+  background: rgb(var(--v-theme-surface));
+  color: rgb(var(--v-theme-on-surface));
+  border: 1.5px solid rgba(var(--v-theme-on-surface), 0.87);
+}
+
+.passkey-chip--pass :deep(.v-chip__prepend .v-icon) {
+  color: #1565c0;
+}
+
+.passkey-chip--key :deep(.v-chip__prepend .v-icon) {
+  color: #e65100;
+}
+
 .passkey__footer {
   display: flex;
   justify-content: flex-end;

package/components/FileInput.vue

@@ -288,6 +288,10 @@ const removeFile = (index) => {
 onUnmounted(() => {
   stopCamera();
 });
+
+// Lets a screen open the camera from its own button (the visitor form's
+// "Camera") while the picker itself stays hidden.
+defineExpose({ openCameraDialog });
 </script>
 
 <style scoped>