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

package/components/QrTemplate/PrintDialog.vue

@@ -52,7 +52,7 @@
               <v-col cols="12" class="d-flex align-center">
                 <v-autocomplete
                   :items="
-                    localTemplateList.filter(
+                    templateOptions.filter(
                       (item) => !['All', 'Manually Added'].includes(item.name)
                     )
                   "
@@ -238,7 +238,7 @@
               >
                 <v-autocomplete
                   label="Start"
-                  :items="resultKeys2"
+                  :items="passRangeOptions"
                   item-title="text"
                   item-value="value"
                   v-model="startRange"
@@ -319,7 +319,7 @@
                   <v-row no-gutters dense>
                     <v-col cols="12">
                       <v-data-iterator
-                        :items="resultKeys2?.items"
+                        :items="keyListResult?.items || []"
                         :items-per-page="selectedPageRange"
                       >
                         <template v-slot:header>
@@ -697,7 +697,7 @@
                         </v-col>
 
                         <v-col cols="3" class="text-end">
-                          <span>{{ resultKeys2?.pageRange }}</span>
+                          <span>{{ keyListResult?.pageRange }}</span>
                           <v-btn
                             density="compact"
                             variant="text"
@@ -731,14 +731,7 @@
                 <v-btn
                   color="primary"
                   @click="printContent"
-                  :disabled="
-                    tab !== 'key'
-                      ? !selectedChoicePaperSizeOrientation ||
-                        !selectedTemplate?._id ||
-                        !startRange ||
-                        !endRange
-                      : !selectedKeysToPrint.length
-                  "
+                  :disabled="isPrintDisabled"
                 >
                   Print
                 </v-btn>
@@ -780,6 +773,18 @@
 </template>
 
 <script setup lang="ts">
+type TemplateOption = {
+  _id?: string | null;
+  name: string;
+  prefixPass?: string;
+  prefixKey?: string;
+};
+
+type PassRangeOption = {
+  text: string;
+  value: string;
+};
+
 const { templateQrCode, getTemplatesByPageSearch } = useTemplateReusable();
 
 const {
@@ -794,7 +799,7 @@ const {
 
 const props = defineProps<{
   open: Boolean;
-  templateList: Array;
+  templateList: Array<TemplateOption>;
   template: any;
   type: any;
   orientation: any;
@@ -802,90 +807,147 @@ const props = defineProps<{
 }>();
 
 const route = useRoute();
-
+const router = useRouter();
 const emit = defineEmits(["update:close"]);
 
 const selectedChoicePaperSizeOrientation = ref<any>(null);
-
-const resultKeys2 = ref<any>([]);
+const passRangeOptions = ref<PassRangeOption[]>([]);
 const startRange = ref<any>(null);
 const endRange = ref<any>(null);
 const prefixAndName = ref<string>("");
 
 const snackbarStartRange = ref<boolean>(false);
-
 const isFetchingTemplates = ref<boolean>(false);
 const isFetchingPassKeys = ref<boolean>(false);
-
 const resultPass = ref<any>(null);
 
 const searchKey = ref("");
 const totalPages = ref(0);
+const page = ref(1);
 const canNextPage = computed(() => totalPages.value > page.value);
 const canPrevPage = computed(() => page.value <= 1);
 const pageRanges = ref([10, 25, 50, 100, 500, 1000]);
 const selectedPageRange = ref(10);
 
 const selectAll = ref(false);
-const localTemplateList = ref([]);
+const templateOptions = ref<TemplateOption[]>([]);
+const keyListResult = ref<any>({
+  items: [],
+  pages: 0,
+  pageRange: "-- - -- of --",
+});
+const message = ref("");
+const messageColor = ref("");
+const messageSnackbar = ref(false);
+
+const isPassTab = computed(() => tab.value === "pass");
+const isKeyTab = computed(() => tab.value === "key");
+const selectedTemplateId = computed(
+  () => selectedTemplate.value?._id ?? props.template?._id ?? null
+);
+const isPrintDisabled = computed(() =>
+  isKeyTab.value
+    ? !selectedKeysToPrint.value.length
+    : !selectedChoicePaperSizeOrientation.value ||
+      !selectedTemplateId.value ||
+      !startRange.value ||
+      !endRange.value
+);
 
 watch(
   () => props.templateList,
   (newVal) => {
-    localTemplateList.value = newVal;
-  }
+    templateOptions.value = Array.isArray(newVal)
+      ? newVal.map((item) => ({
+          _id: item?._id ?? null,
+          name: item?.name ?? "",
+          prefixPass: item?.prefixPass,
+          prefixKey: item?.prefixKey,
+        }))
+      : [];
+  },
+  { immediate: true }
 );
 
-// interset start
-
-// const page = ref(1); // replace with your actual page value
-// const totalNumberOfPagesTemplateList = ref(1); // replace with your actual total number of pages value
-
-// const endIntersectTemplateList = async (isIntersecting) => {
-//   await getTemplateNameLists(page.value);
-//   if (isIntersecting && !isFetchingTemplates.value) {
-//     page.value += 1;
-//     await getTemplateNameLists(page.value);
-//   }
-// };
-
-// const getTemplateNameLists = async (page = 1, query = "") => {
-//   isFetchingTemplates.value = true;
-
-//   const result = await getTemplatesByPageSearch({
-//     sites: [route.params.site as string],
-//     limit: 10,
-//     page: page,
-//     statuses: ["active"],
-//     search: query,
-//   });
-
-//   totalNumberOfPagesTemplateList.value = result?.pages;
-//   if (result?.items.length) {
-//     const newItems = result?.items.map((item) => ({
-//       _id: item._id,
-//       name: item.name,
-//       prefixPass: item.prefixPass,
-//       prefixKey: item.prefixKey,
-//     }));
-
-//     if (page === 1) {
-//       newItems.unshift({ _id: null, name: "All" });
-//       newItems.push({ _id: "Manually Added", name: "Manually Added" });
-//     }
-
-//     // Only add new items if they don't already exist in the list
-//     newItems.forEach((newItem) => {
-//       if (!localTemplateList.value.find((item) => item._id === newItem._id)) {
-//         localTemplateList.value.push(newItem);
-//       }
-//     });
-//   }
-
-//   isFetchingTemplates.value = false;
-// };
-
-const searchTemplate = async (query) => {
+function resetPrintState() {
+  selectedChoicePaperSizeOrientation.value = null;
+  passRangeOptions.value = [];
+  startRange.value = null;
+  endRange.value = null;
+  prefixAndName.value = "";
+  selectAll.value = false;
+  keyListResult.value = {
+    items: [],
+    pages: 0,
+    pageRange: "-- - -- of --",
+  };
+}
+
+function getTemplateOptionItems(items: Array<any> = []) {
+  return items.map((item) => ({
+    _id: item?._id ?? null,
+    name: item?.name ?? "",
+    prefixPass: item?.prefixPass,
+    prefixKey: item?.prefixKey,
+  }));
+}
+
+function mapPassRangeItems(items: Array<any> = []) {
+  return items
+    .map((item: any) => ({
+      text: item?.prefixAndName ?? item?.name ?? "N/A",
+      value: item?.name ?? "",
+    }))
+    .filter((item) => item.value)
+    .sort((firstItem, secondItem) => {
+      const numericValueOfFirstItem = Number(
+        firstItem.value.replace(/\D/g, "")
+      );
+      const numericValueOfSecondItem = Number(
+        secondItem.value.replace(/\D/g, "")
+      );
+
+      return numericValueOfFirstItem - numericValueOfSecondItem;
+    });
+}
+
+function normalizePassNumberValue(value: string | null | undefined) {
+  const rawValue = (value ?? "").toString().trim();
+  if (!rawValue) return "";
+
+  const match = rawValue.match(/^(.*?)(\d+)$/);
+  if (!match) return rawValue;
+
+  const prefix = match[1].replace(/\s+/g, "").toUpperCase();
+  const numericPart = match[2];
+
+  return `${prefix}${numericPart}`;
+}
+
+function getPassNumberPrefix(value: string | null | undefined) {
+  const normalizedValue = normalizePassNumberValue(value);
+
+  return normalizedValue.replace(/\d+$/, "").replace(/\s+/g, "").toUpperCase();
+}
+
+function syncPrefixFromSelection() {
+  const selectedRangeOption = passRangeOptions.value.find(
+    (item) => item.value === startRange.value
+  );
+  const fallbackOption = selectedRangeOption ?? passRangeOptions.value[0];
+
+  prefixAndName.value = getPassNumberPrefix(
+    fallbackOption?.text ?? fallbackOption?.value ?? ""
+  );
+}
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+const searchTemplate = async (query: string) => {
   isFetchingTemplates.value = true;
 
   const result = await getTemplatesByPageSearch({
@@ -896,34 +958,25 @@ const searchTemplate = async (query) => {
     search: query,
   });
 
-  if (result?.items.length) {
-    props.templateList = result?.items.map((item) => ({
-      _id: item._id,
-      name: item.name,
-      prefixPass: item.prefixPass,
-      prefixKey: item.prefixKey,
-    }));
-
-    props.templateList.unshift({ _id: null, name: "All" });
-    props.templateList.push({ _id: "Manually Added", name: "Manually Added" });
-  }
+  templateOptions.value = getTemplateOptionItems(result?.items ?? []);
+  templateOptions.value.unshift({ _id: null, name: "All" });
+  templateOptions.value.push({ _id: "Manually Added", name: "Manually Added" });
 
   isFetchingTemplates.value = false;
 };
-//end intersect
 
 async function selectAllKeys() {
   if (selectAll.value) {
-    selectedKeysToPrint.value = resultKeys2.value?.items;
+    selectedKeysToPrint.value = keyListResult.value?.items ?? [];
   } else {
     selectedKeysToPrint.value = [];
   }
 }
 
-const closeDialog = async (type?: string, tab?: string) => {
+const closeDialog = async (type?: string, tabType?: string) => {
   await emit("update:close", false);
-  if (type == "generate") {
-    if (tab == "pass") {
+  if (type === "generate") {
+    if (tabType === "pass") {
       dialog.value = true;
       dialogType.value = "generate";
       generatePass.value = true;
@@ -935,28 +988,23 @@ const closeDialog = async (type?: string, tab?: string) => {
         },
       });
     }
-    selectedChoicePaperSizeOrientation.value = null;
-    resultKeys2.value = [];
+    resetPrintState();
     snackbarStartRange.value = false;
   }
 };
 
 const fetchTemplateData = async (inputStatus: any) => {
   isFetchingTemplates.value = true;
-  selectedChoicePaperSizeOrientation.value = null;
-
-  startRange.value = null;
-  endRange.value = null;
-  resultKeys2.value = [];
+  resetPrintState();
 
   const id = selectedTemplate.value
     ? selectedTemplate.value?._id
-    : props.template._id;
+    : props.template?._id;
 
   const status = route.query.status as string;
   const finalStatus =
     typeof inputStatus === "string" ? inputStatus : String(inputStatus);
-  let site = route.params.site as string;
+  const site = route.params.site as string;
   const data = await getTemplatesByPageSearch({
     _id: id,
     sites: [site],
@@ -964,7 +1012,7 @@ const fetchTemplateData = async (inputStatus: any) => {
     statuses: [finalStatus ? finalStatus : status],
   });
 
-  templateQrCode.value = data?.items[0];
+  templateQrCode.value = data?.items?.[0] ?? null;
 
   isFetchingTemplates.value = false;
 };
@@ -972,47 +1020,44 @@ const fetchTemplateData = async (inputStatus: any) => {
 watch(
   () => props.open,
   async (newVal: any) => {
-    if (newVal) {
-      selectAll.value = false;
-      if (props.template.name !== "All") {
-        selectedTemplate.value = props.template;
-      } else {
-        selectedTemplate.value = null;
-      }
-      if (tab.value == "key") {
-        selectedKeysToPrint.value = [];
-        isFetchingPassKeys.value = true;
-        resultKeys2.value = await getPassKeysByPageSearch({
-          sites: [route.params.site as string],
-          template: null,
-          passOrKey: tab.value,
-          passTypes: ["pass-key"],
-          sortBy: { column: "createdAt", order: "1" },
-          limit: 10,
-        });
-
-        totalPages.value = resultKeys2.value.pages;
-        isFetchingPassKeys.value = false;
-      } else {
-        selectedChoicePaperSizeOrientation.value = props.orientation;
-        await fetchTemplateData("active");
-      }
+    if (!newVal) return;
+
+    selectAll.value = false;
+    selectedTemplate.value =
+      props.template?.name !== "All" ? props.template : null;
+
+    if (isKeyTab.value) {
+      selectedKeysToPrint.value = [];
+      isFetchingPassKeys.value = true;
+      keyListResult.value = await getPassKeysByPageSearch({
+        sites: [route.params.site as string],
+        template: null,
+        passOrKey: tab.value,
+        passTypes: ["pass-key"],
+        sortBy: { column: "createdAt", order: "1" },
+        limit: 10,
+      });
+
+      totalPages.value = keyListResult.value?.pages ?? 0;
+      isFetchingPassKeys.value = false;
+    } else {
+      selectedChoicePaperSizeOrientation.value = props.orientation;
+      await fetchTemplateData("active");
     }
   },
   { immediate: true }
 );
 
-const router = useRouter();
-
 const printContent = () => {
-  const printRangeStart = startRange.value;
-  const printRangeEnd = endRange.value;
-  const printOrientation =
-    tab.value !== "key" ? selectedChoicePaperSizeOrientation.value : "KeyCard";
+  const printRangeStart = startRange.value?.toString() ?? "";
+  const printRangeEnd = endRange.value?.toString() ?? "";
+  const printOrientation = isPassTab.value
+    ? selectedChoicePaperSizeOrientation.value
+    : "KeyCard";
   const status = (route.query.status as string) || "active";
   const templateParam =
     (route.query.template as string) || (selectedTemplate.value?._id as string);
-  const prefix = prefixAndName.value;
+  const prefix = getPassNumberPrefix(prefixAndName.value);
 
   const url = router.resolve({
     name: "org-site-keys-visitor-printQr",
@@ -1028,121 +1073,89 @@ const printContent = () => {
     },
   }).href;
 
-  if (printOrientation == "KeyCard") {
+  if (printOrientation === "KeyCard") {
     localStorage.setItem(
       "selectedKeysToPrint",
       JSON.stringify(selectedKeysToPrint.value)
     );
   }
 
-  // Open the URL in a new tab
   setTimeout(() => {
     window.open(url, "_blank");
   }, 500);
 };
 
 watch(selectedChoicePaperSizeOrientation, async (newVal: any) => {
-  resultKeys2.value = [];
-  const id = selectedTemplate.value
-    ? selectedTemplate.value?._id
-    : props.template._id;
+  if (!isPassTab.value) return;
+  if (!newVal || !selectedTemplateId.value) {
+    passRangeOptions.value = [];
+    prefixAndName.value = "";
+    startRange.value = null;
+    endRange.value = null;
+    return;
+  }
 
   isFetchingPassKeys.value = true;
 
   resultPass.value = await getPassKeysByPageSearch({
     sites: [route.params.site as string],
-    template: id,
+    template: selectedTemplateId.value,
     passOrKey: tab.value,
     passTypes: ["visitor-pass", "agent-pass", "contractor-pass"],
     limit: 2000,
     sortBy: { column: "prefixAndName", order: "1" },
   });
 
-  resultKeys2.value = resultPass?.value.items.map((item: any) => ({
-    text: item.prefixAndName,
-    value: item.name,
-  }));
-
-  if (resultKeys2.value.length > 0) {
-    prefixAndName.value = resultKeys2.value[0].text
-      .replace(/\d/g, "")
-      .toUpperCase();
-  }
+  passRangeOptions.value = mapPassRangeItems(resultPass?.value?.items ?? []);
 
-  resultKeys2.value = resultPass?.value.items.map((item: any) => ({
-    text: item.prefixAndName,
-    value: item.name,
-  }));
-
-  if (resultKeys2.value.length > 0) {
-    prefixAndName.value = resultKeys2.value[0].text
-      .replace(/\d/g, "")
-      .toUpperCase();
+  if (passRangeOptions.value.length > 0) {
+    syncPrefixFromSelection();
+  } else {
+    prefixAndName.value = "";
   }
 
-  resultKeys2.value.sort(
-    (firstItem: { value: string }, secondItem: { value: string }) => {
-      const numericValueOfFirstItem = Number(
-        firstItem.value.replace(/\D/g, "")
-      );
-      const numericValueOfSecondItem = Number(
-        secondItem.value.replace(/\D/g, "")
-      );
-
-      return numericValueOfFirstItem - numericValueOfSecondItem;
-    }
-  );
-
-  startRange.value = props.start.toString();
+  startRange.value = props.start?.toString() ?? null;
+  syncPrefixFromSelection();
   isFetchingPassKeys.value = false;
 });
 
-const page = ref(1);
-
 watch(startRange, (newVal: any, oldVal: any) => {
   if (newVal !== oldVal) {
     endRange.value = newVal;
+    syncPrefixFromSelection();
   }
 });
 
 const endRangeKeys = computed(() => {
-  return resultKeys2.value.filter(
-    (item: any) => item.value >= startRange.value
+  return passRangeOptions.value.filter(
+    (item: PassRangeOption) => item.value >= (startRange.value ?? "")
   );
 });
-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 showSnackbarEndRange = () => {
-  if (resultKeys2.value.length === 0) {
+  if (passRangeOptions.value.length === 0) {
     showMessage(
       !startRange.value
         ? "Please select a start range first."
-        : `No ${tab.value == "key" ? "Key" : "Pass"} found. Please try to
-      generate first.`,
+        : `No ${
+            tab.value === "key" ? "Key" : "Pass"
+          } found. Please try to generate first.`,
       "error"
     );
   }
 };
+
 const showSnackbarStartRange = () => {
-  if (resultKeys2.value.length === 0) {
+  if (passRangeOptions.value.length === 0) {
     snackbarStartRange.value = true;
   }
 };
 
-// if print key
 async function onSearch() {
   isFetchingPassKeys.value = true;
   try {
     page.value = 1;
-    resultKeys2.value = await getPassKeysByPageSearch({
+    keyListResult.value = await getPassKeysByPageSearch({
       sites: [route.params.site as string],
       search: searchKey.value,
       template: null,
@@ -1152,8 +1165,8 @@ async function onSearch() {
       sortBy: { column: "createdAt", order: "1" },
       page: page.value,
     });
-    totalPages.value = resultKeys2.value.pages;
-  } catch (error) {
+    totalPages.value = keyListResult.value?.pages ?? 0;
+  } catch (error: any) {
     showMessage(errorConverter(error), "error");
   } finally {
     isFetchingPassKeys.value = false;
@@ -1162,7 +1175,7 @@ async function onSearch() {
 
 async function updateItemsPerPage() {
   isFetchingPassKeys.value = true;
-  resultKeys2.value = await getPassKeysByPageSearch({
+  keyListResult.value = await getPassKeysByPageSearch({
     sites: [route.params.site as string],
     template: null,
     passOrKey: "key",
@@ -1171,14 +1184,14 @@ async function updateItemsPerPage() {
     page: page.value,
     limit: selectedPageRange.value,
   });
-  totalPages.value = resultKeys2.value.pages;
+  totalPages.value = keyListResult.value?.pages ?? 0;
   isFetchingPassKeys.value = false;
 }
 
 async function prevPage() {
   isFetchingPassKeys.value = true;
   page.value -= 1;
-  resultKeys2.value = await getPassKeysByPageSearch({
+  keyListResult.value = await getPassKeysByPageSearch({
     sites: [route.params.site as string],
     search: searchKey.value,
     template: null,
@@ -1189,14 +1202,14 @@ async function prevPage() {
     limit: selectedPageRange.value,
   });
 
-  totalPages.value = resultKeys2.value.pages;
+  totalPages.value = keyListResult.value?.pages ?? 0;
   isFetchingPassKeys.value = false;
 }
 
 async function nextPage() {
   isFetchingPassKeys.value = true;
   page.value += 1;
-  resultKeys2.value = await getPassKeysByPageSearch({
+  keyListResult.value = await getPassKeysByPageSearch({
     sites: [route.params.site as string],
     search: searchKey.value,
     template: null,
@@ -1207,7 +1220,7 @@ async function nextPage() {
     limit: selectedPageRange.value,
   });
 
-  totalPages.value = resultKeys2.value.pages;
+  totalPages.value = keyListResult.value?.pages ?? 0;
   isFetchingPassKeys.value = false;
 }
 </script>