@7365admin1/layer-common 3.2.1 → 3.2.2-staging.100

package/components/OnlineFormFill.vue

@@ -247,6 +247,40 @@
             {{ resolveText(block.text) }}
           </p>
 
+          <!-- ORDERED LIST -->
+          <div v-else-if="block.type === 'ordered-list'" class="mb-3">
+            <div
+              v-if="block.title"
+              class="text-body-2 font-weight-bold mb-1"
+              style="text-decoration: underline; text-underline-offset: 3px"
+            >{{ block.title }}</div>
+            <ol style="padding-left: 22px; margin: 0">
+              <li
+                v-for="(item, itemIdx) in block.items"
+                :key="itemIdx"
+                class="text-body-2 mb-1"
+                style="line-height: 1.55; color: #333"
+              >{{ item }}</li>
+            </ol>
+          </div>
+
+          <!-- UNORDERED LIST -->
+          <div v-else-if="block.type === 'unordered-list'" class="mb-3">
+            <div
+              v-if="block.title"
+              class="text-body-2 font-weight-bold mb-1"
+              style="text-decoration: underline; text-underline-offset: 3px"
+            >{{ block.title }}</div>
+            <ul style="padding-left: 22px; margin: 0">
+              <li
+                v-for="(item, itemIdx) in block.items"
+                :key="itemIdx"
+                class="text-body-2 mb-1"
+                style="line-height: 1.55; color: #333"
+              >{{ item }}</li>
+            </ul>
+          </div>
+
           <!-- DIVIDER -->
           <v-divider v-else-if="block.type === 'divider'" class="my-4" />
 
@@ -433,6 +467,7 @@ const props = defineProps({
   approvalMode: { type: Boolean, default: false },
   initialManagementValues: { type: Object as PropType<Record<string, string>>, default: () => ({}) },
   formType: { type: String, default: "" },
+  paymentAmount: { type: Number, default: 0 },
   /** Optional custom submit handler. Receives the collected form values.
    *  If omitted the component submits to /api/online-forms automatically. */
   submitFn: {
@@ -596,15 +631,8 @@ const submissionStatusColor = computed(() => {
   }
 });
 
-const PAYMENT_REQUIRED_FORM_TYPES = new Set([
-  "Application for Electronic Access Card",
-  "Application for Booking of BBQ Pit",
-  "Application for Moving In/Out & Delivery",
-  "Application for Main Entrance RFID Transponder",
-]);
-
 const requiresPayment = computed(() => {
-  if (!PAYMENT_REQUIRED_FORM_TYPES.has(props.formType)) return false;
+  if (props.paymentAmount <= 0) return false;
   if (props.formType === "Application for Main Entrance RFID Transponder") {
     return !!(props.initialValues.reasonLost || props.initialValues.reasonDamaged);
   }

package/components/OnlineFormsConfiguration.vue

@@ -22,7 +22,7 @@
         rounded="lg"
         :loading="loading"
       >
-        <v-toolbar density="compact" color="grey-lighten-4">
+        <v-toolbar density="compact" class="px-3 border-b-sm" color="transparent">
           <template #prepend>
             <v-btn
               fab
@@ -88,7 +88,7 @@
     >
 
     <!-- Create Dialog -->
-    <v-dialog v-model="createDialog" width="450" persistent>
+    <v-dialog v-model="createDialog" width="720" persistent>
       <OnlineFormConfigurationForm
         mode="add"
         @cancel="createDialog = false"
@@ -97,7 +97,7 @@
     </v-dialog>
 
     <!-- Edit Dialog -->
-    <v-dialog v-model="editDialog" width="450" persistent>
+    <v-dialog v-model="editDialog" width="720" persistent>
       <OnlineFormConfigurationForm
         mode="edit"
         @cancel="editDialog = false"
@@ -113,6 +113,7 @@
         :definition="selectedFormDefinition"
         :site-id="siteId"
         :org-id="orgId"
+        :payment-amount="selectedPaymentAmount"
         readonly
         @cancel="previewDialog = false"
       >
@@ -336,6 +337,9 @@ const selectedFormDefinition = ref<any>(null);
 const deleteLoading = ref(false);
 const confirmDialog = ref(false);
 const selectedOnlineFormId = ref<string | null>(null);
+const selectedPaymentAmount = computed(() =>
+  Number(selectedOnlineForm.value?.fields?.paymentAmount ?? 0)
+);
 
 function parseFieldsToInputs(fields: Record<string, string>): any[] {
   return Object.keys(fields)

package/components/PageHeader.vue

@@ -0,0 +1,43 @@
+<!--
+  THE PAGE TITLE ROW.
+
+  The design opens EVERY screen with this row: the page's name at 22px/800,
+  and the screen's primary action on the right of the same line. The product
+  has never had it - the page name lived only in the browser tab and in the
+  navigation rail - which is the single most visible difference between the
+  staging site and the handoff.
+
+  It is a label and a slot. It fetches nothing, decides nothing and navigates
+  nowhere; the action passed into it is the screen's own button.
+-->
+<template>
+  <div class="app-page-head">
+    <!-- A caller with actions but no page name (the shared table card, when the
+         screen has not given it a title) gets just the action group, at the
+         left, rather than an empty heading holding a line of blank space. -->
+    <div v-if="title || $slots.title || subtitle || $slots.subtitle">
+      <h1 class="app-page-head__title">
+        <slot name="title">{{ title }}</slot>
+      </h1>
+
+      <!-- The design's second line: a location, a count, a date range. Only
+           drawn when a screen supplies one. -->
+      <div v-if="subtitle || $slots.subtitle" class="app-page-head__sub">
+        <v-icon v-if="subtitleIcon" :icon="subtitleIcon" size="15" />
+        <slot name="subtitle">{{ subtitle }}</slot>
+      </div>
+    </div>
+
+    <div v-if="$slots.actions" class="app-page-head__actions">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  title: { type: String, default: "" },
+  subtitle: { type: String, default: "" },
+  subtitleIcon: { type: String, default: "" },
+});
+</script>

package/components/PassInformation.vue

@@ -8,8 +8,8 @@
           :height="40"
           text="Scan QR Code"
           class="text-capitalize"
-          disabled
           prepend-icon="mdi-qrcode"
+          @click="handleScanQRCode"
         />
         <v-autocomplete
           v-model="selectedPass"
@@ -88,6 +88,11 @@
       </v-card-text>
     </v-card>
   </v-row>
+  <visitor-pass-key-q-r-scanner
+    :dialog="dialog.scanQRCode"
+    v-model:scannedValue="scannedValue"
+    @close-dialog="dialog.scanQRCode = false"
+  />
   <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
 </template>
 
@@ -95,46 +100,36 @@
 import type { PropType } from "vue";
 import type { ValidationRule } from "vuetify/lib/types.mjs";
 import usePassKey from "../composables/usePassKey";
-import useKey from "../composables/useKey";
-import { string } from "zod/v4";
+import { errorConverter } from "../utils/data";
+import VisitorPassKeyQRScanner from "./VisitorPassKeyQRScanner.vue";
 
-const props = defineProps({
-  passRules: {
-    type: Array as PropType<ValidationRule[]>,
-    default: [],
-  },
-  countRules: {
-    type: Array as PropType<ValidationRule[]>,
-    default: [],
-  },
-  site: {
-    type: String,
-    required: true,
-  },
-  type: {
-    type: String as PropType<TVisitorType>,
-    required: true,
-  },
-  contractorType: {
-    type: String,
-    default: "",
-  },
-  passKeys: {
-    type: Array,
-    default: [],
-  },
-  hideKeys: {
-    type: Boolean,
-    default: false,
-  },
-  clearable: {
-    type: Boolean,
-    default: false,
-  },
+type PassInformationProps = {
+  passRules?: ValidationRule[];
+  countRules?: ValidationRule[];
+  site: string;
+  type: TVisitorType;
+  contractorType?: string;
+  passKeys?: unknown[];
+  hideKeys?: boolean;
+  clearable?: boolean;
+  pass?: TPassKeyPayload[];
+  keys?: TPassKeyPayload[];
+};
+
+const props = withDefaults(defineProps<PassInformationProps>(), {
+  passRules: [],
+  countRules: [],
+  contractorType: "",
+  passKeys: [],
+  hideKeys: false,
+  clearable: false,
+  pass: [],
+  keys: [],
 });
 
-const pass = defineModel<TPassKeyPayload[]>("pass", { default: [] });
-const keys = defineModel<TPassKeyPayload[]>("keys", { default: [] });
+const emit = defineEmits(["update:pass", "update:keys"]);
+const pass = ref<TPassKeyPayload[]>(props.pass);
+const keys = ref<TPassKeyPayload[]>(props.keys);
 const selectedPass = ref<string>("");
 const selectedKeys = ref<string[]>([]);
 const passInput = ref("");
@@ -144,6 +139,11 @@ const keyItems = ref<any[]>([]);
 const selectedType = ref<"qr-pass" | "nfc-card">();
 const count = ref(1);
 
+const dialog = reactive({
+  scanQRCode: false,
+});
+const scannedValue = ref("");
+
 const { getPassKeysByPageSearch } = usePassKey();
 
 const typeItems = [
@@ -179,6 +179,23 @@ function showMessage(msg: string, color: string) {
   messageSnackbar.value = true;
 }
 
+function getItemLabel(item: any) {
+  return (item?.prefixAndName ?? item?.raw?.prefixAndName ?? "")
+    .toString()
+    .trim();
+}
+
+function handleScanQRCode() {
+  scannedValue.value = "";
+  dialog.scanQRCode = true;
+  if (passItems.value.length === 0) {
+    fetchPasses();
+  }
+  if (!props.hideKeys && keyItems.value.length === 0) {
+    fetchKeys();
+  }
+}
+
 const isPassListLoading = ref(false);
 
 async function fetchPasses() {
@@ -207,7 +224,7 @@ const isKeyListLoading = ref(false);
 async function fetchKeys() {
   isKeyListLoading.value = true;
   try {
-    const keys: any = await getPassKeysByPageSearch({
+    const result: any = await getPassKeysByPageSearch({
       page: 1,
       sites: [props.site],
       limit: 10000,
@@ -223,7 +240,7 @@ async function fetchKeys() {
       return false;
     });
 
-    const filteredArray = keys.items.filter((item: any) => {
+    const filteredArray = result.items.filter((item: any) => {
       if (Array.isArray(props?.passKeys) && props.passKeys.length) {
         return !props.passKeys.includes(item._id);
       }
@@ -231,18 +248,60 @@ async function fetchKeys() {
     });
     keyItems.value = [...previouslySelectedKeys, ...filteredArray];
   } catch (error) {
-    showMessage(errorConverter(error as string), "error");
+    showMessage(errorConverter(error), "error");
   } finally {
     isKeyListLoading.value = false;
   }
 }
 
 watch(selectedPass, (newVal) => {
-  pass.value = [{ keyId: newVal }];
+  const updated = newVal ? [{ keyId: newVal }] : [];
+  pass.value = updated;
+  emit("update:pass", updated);
 });
 
 watch(selectedKeys, (newVal) => {
-  keys.value = newVal.map((key) => ({ keyId: key }));
+  const updated = newVal.map((key) => ({ keyId: key }));
+  keys.value = updated;
+  emit("update:keys", updated);
+});
+
+watch(scannedValue, async (newValue) => {
+  if (!newValue) return;
+
+  const scanned = String(newValue).trim();
+  if (!scanned) return;
+
+  if (passItems.value.length === 0) {
+    await fetchPasses();
+  }
+  if (!props.hideKeys && keyItems.value.length === 0) {
+    await fetchKeys();
+  }
+
+  const matchedPass = passItems.value.find((item) => {
+    return getItemLabel(item).toLowerCase() === scanned.toLowerCase();
+  });
+
+  if (matchedPass && matchedPass._id) {
+    selectedPass.value = matchedPass._id;
+    return;
+  }
+
+  if (!props.hideKeys) {
+    const matchedKey = keyItems.value.find((item) => {
+      return getItemLabel(item).toLowerCase() === scanned.toLowerCase();
+    });
+
+    if (matchedKey && matchedKey._id) {
+      if (!selectedKeys.value.includes(matchedKey._id)) {
+        selectedKeys.value = [...selectedKeys.value, matchedKey._id];
+      }
+      return;
+    }
+  }
+
+  showMessage(`Scanned pass or key "${scanned}" not found`, "error");
 });
 
 //prevent negative value;
@@ -254,10 +313,10 @@ watch(count, (newCount) => {
 
 onMounted(() => {
   if (pass.value.length > 0) {
-    selectedPass.value = pass.value[0].keyId;
+    selectedPass.value = pass.value[0]?.keyId ?? "";
   }
   if (keys.value.length > 0) {
-    selectedKeys.value = keys.value.map((k) => k.keyId);
+    selectedKeys.value = keys.value.map((k) => k.keyId ?? "");
   }
 });
 </script>

package/components/QrTemplate/CreditCardLandscape.vue

@@ -33,7 +33,7 @@
 
                 <qrcode-vue
                   v-if="templateQrCode.CCFrontQREnabled"
-                  :value="`${prefix}0${+printRangeStart + +card.number - 1}`"
+                  :value="getPassNumberValue(card.number)"
                   :size="templateQrCode.CCFrontQRCodeSize"
                   level="H"
                   :style="{
@@ -53,9 +53,7 @@
                   }"
                   class="position-absolute text-center"
                 >
-                  Pass Number: {{ prefix }}0{{
-                    +printRangeStart + +card.number - 1
-                  }}
+                  Pass Number: {{ getPassNumberValue(card.number) }}
                 </div>
               </v-card>
 
@@ -74,7 +72,7 @@
 
                 <qrcode-vue
                   v-if="templateQrCode.CCBackQREnabled"
-                  :value="`${prefix}0${+printRangeStart + +card.number - 1}`"
+                  :value="getPassNumberValue(card.number)"
                   :size="templateQrCode.CCBackQRCodeSize"
                   level="H"
                   :style="{
@@ -93,9 +91,7 @@
                   }"
                   class="position-absolute text-center"
                 >
-                  Pass Number: {{ prefix }}0{{
-                    +printRangeStart + +card.number - 1
-                  }}
+                  Pass Number: {{ getPassNumberValue(card.number) }}
                 </div>
               </v-card>
             </v-col>
@@ -113,11 +109,22 @@ const props = defineProps({
   paginatedCardData: Array,
   templateQrCode: Object,
   prefix: String,
-  printRangeStart: Number,
-});
-onMounted(() => {
-  console.log("templateQrCode 11", props.templateQrCode.CCOrientation);
+  printRangeStart: [String, Number],
 });
+
+const getPassNumberValue = (position) => {
+  const rawStartValue = `${props.printRangeStart ?? ""}`.trim();
+  const startMatch = rawStartValue.match(/(\d+)$/);
+  const startValue = startMatch?.[1] ?? "0";
+  const startNumber = Number(startValue);
+  const sequenceNumber = startNumber + Number(position) - 1;
+  const cleanPrefix = `${props.prefix ?? ""}`.replace(/\d+$/, "");
+  const width = startValue.length;
+  const formattedSequence =
+    width > 0 ? `${sequenceNumber}`.padStart(width, "0") : `${sequenceNumber}`;
+
+  return `${cleanPrefix}${formattedSequence}`;
+};
 </script>
 
 <style scoped>