@7365admin1/layer-common 1.8.4 → 1.8.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 1.8.6
+
+### Patch Changes
+
+- 21990e5: Update Version for new changes
+
+## 1.8.5
+
+### Patch Changes
+
+- 8db0ed5: Update on components and config
+
 ## 1.8.4
 
 ### Patch Changes

package/components/BuildingManagement/buildings.vue

@@ -28,7 +28,7 @@
         </v-toolbar>
 
         <v-data-table :headers="headers" :items="items" item-value="_id" items-per-page="20" fixed-header
-          hide-default-footer hide-default-header @click:row="tableRowClickHandler"
+          hide-default-footer  @click:row="tableRowClickHandler"
           style="max-height: calc(100vh - (200px))">
           <template #item.createdAt="{ value }">
             {{ new Date(value).toLocaleDateString() }}
@@ -333,3 +333,8 @@ function setBuilding({
   }
 }
 </script>
+<style scoped>
+  .v-data-table :deep(thead th) {
+  font-weight: bold !important;
+}
+</style>

package/components/BuildingManagement/units.vue

@@ -28,7 +28,7 @@
         </v-toolbar>
 
         <v-data-table :headers="props.headers" :items="items" item-value="_id" items-per-page="20" fixed-header
-          hide-default-footer hide-default-header @click:row="tableRowClickHandler"
+          hide-default-footer  @click:row="tableRowClickHandler"
           style="max-height: calc(100vh - (200px))">
           <template #item.block="{ value }">
             {{ value ? `blk ${value}` : "" }}
@@ -348,3 +348,9 @@ function setBuilding({
   }
 }
 </script>
+
+<style scoped>
+  .v-data-table :deep(thead th) {
+  font-weight: bold !important;
+}
+</style>

package/components/CameraMain.vue

@@ -11,6 +11,7 @@
 
           <template #append>
             <v-btn
+             v-if="!prop.readOnly"
               variant="flat"
               color="primary"
               class="text-none"
@@ -144,7 +145,7 @@
 
         <v-toolbar class="pa-0" density="compact">
           <v-row no-gutters>
-            <v-col cols="6" class="pa-0">
+            <v-col :cols="prop.readOnly ? 12 : 6" class="pa-0">
               <v-btn
                 block
                 variant="text"
@@ -157,7 +158,7 @@
               </v-btn>
             </v-col>
 
-            <v-col cols="6" class="pa-0">
+            <v-col v-if="!prop.readOnly" cols="6" class="pa-0">
               <v-menu>
                 <template #activator="{ props }">
                   <v-btn
@@ -176,13 +177,13 @@
                 <v-list class="pa-0">
                   <v-list-item @click="openDialogEdit()">
                     <v-list-item-title class="text-subtitle-2">
-                      Edit Building
+                      Edit
                     </v-list-item-title>
                   </v-list-item>
 
                   <v-list-item @click="openDialogDelete()" class="text-red">
                     <v-list-item-title class="text-subtitle-2">
-                      Delete Building
+                      Delete
                     </v-list-item-title>
                   </v-list-item>
                 </v-list>
@@ -268,6 +269,10 @@ const prop = defineProps({
       { text: "Actions", value: "action", sortable: false },
     ],
   },
+  readOnly: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const items = ref<Array<TCamera>>([]);

package/components/FeedbackMain.vue

@@ -310,7 +310,7 @@ const _feedback = ref({
 
 const selected = ref<string[]>([]);
 
-const { getColorStatus } = useUtils();
+const { getColorStatus, debounce } = useUtils();
 
 const headers: Array<Record<string, any>> = [
   { title: "Name", value: "createdByName", align: "start" },
@@ -325,6 +325,10 @@ const erroredImages = ref<string[]>([]);
 const route = useRoute();
 const { customers } = useCustomer();
 
+const dialogPreview = ref(false);
+const selectedFeedback = ref<TFeedback | null>(null);
+const searchText = ref("");
+
 const {
   getFeedbacks: _getFeedbacks,
   deleteFeedback,
@@ -347,6 +351,7 @@ const {
     page: page.value,
     site: route.params.site as string,
     category: props.category,
+    search: searchText.value || "",
   })
 );
 
@@ -575,14 +580,19 @@ const categories = computed(() =>
 );
 
 function tableRowClickHandler(_: any, data: any) {
-  console.log(data.item);
+  // console.log(data.item);
   selectedFeedback.value = data.item;
   dialogPreview.value = true;
 }
 
-const dialogPreview = ref(false);
-const selectedFeedback = ref<TFeedback | null>(null);
-const searchText = ref("");
-
 getServiceProviderCategories();
+
+const debounceSearch = debounce(getAllReqRefresh, 500);
+
+watch(
+  () => searchText.value,
+  () => {
+    debounceSearch();
+  }
+);
 </script>

package/components/Input/InputPhoneNumberV2.vue

@@ -1,71 +1,83 @@
 <template>
-    <v-row no-gutters class="mb-5">
-        <v-col cols="12" class="d-flex ga-2">
-            <v-select v-model="selectedCode" :variant="variant" :items="countries" item-title="code" item-value="code"
-                hide-details class="px-0" :density="density" style="max-width: 95px" :rules="[...props.rules]"
-                :readonly="props.readOnly" @update:model-value="handleUpdateCountry">
-                <template v-slot:item="{ props: itemProps, item }">
-                    <v-list-item v-bind="itemProps" :title="item.raw.name" :subtitle="item.raw.dial_code" width="300" />
-                </template>
-            </v-select>
-            <v-mask-input v-model="input" :mask="currentMask" :rules="[...props.rules, validatePhone]" ref="maskRef" :key="`mask-key-${maskKey}`"
-                :loading="loading" :readonly="props.readOnly" :variant="variant" hint="Enter a valid phone number"
-                hide-details persistent-hint return-masked-value :prefix="phonePrefix || '###'" persistent-placeholder
-                :density="density" :placeholder="placeholder || currentMask"></v-mask-input>
-        </v-col>
-        <span class="text-error text-caption w-100" v-if="errorMessage && !hideDetails">{{ errorMessage }}</span>
-    </v-row>
-
+  <v-row no-gutters class="mb-5">
+    <v-col cols="12" class="d-flex ga-2">
+      <v-select
+        v-model="selectedCode"
+        :variant="variant"
+        :items="countries"
+        item-title="code"
+        item-value="code"
+        hide-details
+        class="px-0"
+        :density="density"
+        style="max-width: 95px"
+        :rules="[...props.rules]"
+        :readonly="props.readOnly"
+        @update:model-value="handleUpdateCountry"
+      >
+        <template v-slot:item="{ props: itemProps, item }">
+          <v-list-item
+            v-bind="itemProps"
+            :title="item.raw.name"
+            :subtitle="item.raw.dial_code"
+          />
+        </template>
+      </v-select>
+
+      <v-mask-input
+        v-model="input"
+        :mask="currentMask"
+        :rules="[...props.rules, validatePhone]"
+        ref="maskRef"
+        :key="`mask-key-${maskKey}`"
+        :loading="loading"
+        :readonly="props.readOnly"
+        :variant="variant"
+        hint="Enter a valid phone number"
+        hide-details
+        persistent-hint
+        return-masked-value
+        :prefix="phonePrefix || ''"
+        persistent-placeholder
+        :density="density"
+        :placeholder="placeholder || currentMask"
+      />
+    </v-col>
+    <span class="text-error text-caption w-100" v-if="errorMessage && !hideDetails">
+      {{ errorMessage }}
+    </span>
+  </v-row>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, type PropType } from 'vue'
-import type { ValidationRule } from 'vuetify/lib/types.mjs'
+import { ref, computed, watch, onMounted, type PropType } from 'vue'
 //@ts-ignore
 import phoneMasks from '~/utils/phoneMasks'
+import type { ValidationRule } from 'vuetify/lib/types.mjs'
 
 const props = defineProps({
-    rules: {
-        type: Array as PropType<ValidationRule[]>,
-        default: []
-    },
-    variant: {
-        type: String as PropType<any>,
-        default: "outlined"
-    },
-    density: {
-        type: String as PropType<Density>,
-        default: "default"
-    },
-    placeholder: {
-        type: String,
-    },
-    hideDetails: {
-        type: Boolean,
-        default: false
-    },
-    loading: {
-        type: Boolean,
-        default: false
-    },
-    readOnly: {
-        type: Boolean,
-        default: false
-    }
+  modelValue: { type: String as PropType<string>, default: '' },
+  rules: { type: Array as PropType<ValidationRule[]>, default: () => [] },
+  variant: { type: String as PropType<any>, default: 'outlined' },
+  density: { type: String as PropType<'default' | 'comfortable' | 'compact'>, default: 'default' },
+  placeholder: { type: String },
+  hideDetails: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+  readOnly: { type: Boolean, default: false },
 })
 
-type Density = 'default' | 'comfortable' | 'compact';
+const emit = defineEmits(['update:modelValue'])
 
-type TPhoneMask =
-    {
-        name: string
-        flag: string
-        code: string;
-        dial_code: string;
-        regex: string;
-    }
+type TPhoneMask = {
+  name: string
+  flag: string
+  code: string
+  dial_code: string
+  regex: string
+}
 
-const phone = defineModel({ default: '' })
+// Main reactive values
+const phone = ref(props.modelValue)
 const input = ref('')
 const selectedCode = ref('SG')
 const countries = phoneMasks
@@ -73,92 +85,82 @@ const errorMessage = ref('')
 const maskRef = ref()
 const maskKey = ref(0)
 
+
 const currentMask = computed(() => {
-    const country = phoneMasks.find((c: TPhoneMask) => c.code === selectedCode.value)
-    if (!country) return '############'
-    return generateMaskFromRegex(country.regex)
+  const country = countries.find((c: TPhoneMask) => c.code === selectedCode.value)
+  if (!country) return '############'
+  return generateMaskFromRegex(country.regex)
 })
 
 
-
-const validatePhone = (): boolean | string => {
-    if(props.readOnly) return true;
-    const value = phone.value
-    if (!value) {
-        errorMessage.value = ''
-        return true;
-    }
-    const country = phoneMasks.find((c: any) => c.code === selectedCode.value)
-    if (!country) {
-        errorMessage.value = ''
-        return true
-    }
-
-    const regex = new RegExp(country.regex)
-    const isValid = regex.test(value)
-
-    errorMessage.value = isValid ? '' : `Invalid ${country.name} phone number`
-    return isValid
-}
-
-
+const phonePrefix = computed(() => {
+  const country = countries.find((c: TPhoneMask) => c.code === selectedCode.value)
+  return country?.dial_code || ''
+})
 
 function generateMaskFromRegex(regex: string): string {
-    let pattern = regex.replace(/^\^|\$$/g, '');
-
-    pattern = pattern.replace(/\(\?:\+?\d+\)\?/g, '');
-    pattern = pattern.replace(/\+?\d{1,4}/, '');
-
-    pattern = pattern.replace(/\\d\{(\d+)\}/g, (_, count) => '#'.repeat(Number(count)));
+  let pattern = regex.replace(/^\^|\$$/g, '')
+  pattern = pattern.replace(/\(\?:\+?\d+\)\?/g, '')
+  pattern = pattern.replace(/\+?\d{1,4}/, '')
+  pattern = pattern.replace(/\\d\{(\d+)\}/g, (_, count) => '#'.repeat(Number(count)))
+  pattern = pattern.replace(/\\d/g, '#')
+  pattern = pattern.replace(/\\/g, '')
+  pattern = pattern.replace(/\(\?:/g, '')
+  return pattern.trim()
+}
 
-    pattern = pattern.replace(/\\d/g, '#');
+const validatePhone = (): boolean | string => {
+  if (props.readOnly) return true
+  if (!phone.value) return true
 
-    pattern = pattern.replace(/\\/g, '');
-    pattern = pattern.replace(/\(\?:/g, '');
-    pattern = pattern.trim();
+  const country = countries.find((c: TPhoneMask) => c.code === selectedCode.value)
+  if (!country) return true
 
-    return pattern;
+  const regex = new RegExp(country.regex)
+  const isValid = regex.test(phone.value)
+  errorMessage.value = isValid ? '' : `Invalid ${country.name} phone number`
+  return isValid
 }
 
-const phonePrefix = computed(() => {
-    const country = phoneMasks.find((c: TPhoneMask) => c.code === selectedCode.value)
-    return country?.dial_code || ''
-})
-
-
 function handleUpdateCountry() {
-    phone.value = ''
+  const prefix = phonePrefix.value
+  if (phone.value?.startsWith(prefix)) {
+    input.value = phone.value.slice(prefix.length)
+  } else {
+    input.value = ''
+  }
 }
 
-const emit = defineEmits(['update:modelValue'])
-
-watch(phone, (newVal) => {
-    emit('update:modelValue', newVal)
-})
 
 watch(input, (newInput) => {
-    const prefix = phonePrefix.value
+  const prefix = phonePrefix.value
+  if (!newInput) phone.value = ''
+  else phone.value = prefix + newInput
+})
 
-    if (!newInput) {
-        return
-    }
 
-    phone.value = prefix + newInput
+watch(phone, (newVal) => {
+  const prefix = phonePrefix.value
+  if (!newVal) input.value = ''
+  else input.value = newVal.startsWith(prefix) ? newVal.slice(prefix.length) : newVal
+  emit('update:modelValue', newVal)
 })
 
 
-onMounted(() => {
-    if (!phone.value) return
+watch(selectedCode, () => {
+  const prefix = phonePrefix.value
+  if (phone.value?.startsWith(prefix)) input.value = phone.value.slice(prefix.length)
+  else input.value = phone.value || ''
+})
 
-    const found = phoneMasks.find((c: any) => phone.value?.startsWith(c?.dial_code))
-    if (found) {
-        selectedCode.value = found.code
-    }
 
-    input.value = phone.value.replace(found?.dial_code || '', '')
+onMounted(() => {
+  if (phone.value) {
+    const found = countries.find((c: TPhoneMask) => phone.value.startsWith(c.dial_code))
+    if (found) selectedCode.value = found.code
+    const prefix = phonePrefix.value
+    input.value = phone.value.startsWith(prefix) ? phone.value.slice(prefix.length) : phone.value
     maskKey.value++
+  }
 })
-
-
-
 </script>

package/components/NumberSettingField.vue

@@ -4,11 +4,11 @@
             <v-row>
                 <v-col cols="6">
                     <InputLabel class="text-capitalize font-weight-bold" :title="title" :required="required" />
-                    <v-text-field v-model.number="count" type="number" density="comfortable" :rules="rules" />
+                    <v-text-field v-model.number="count" type="number" density="comfortable" :rules="rules" :readonly="readOnly" />
                 </v-col>
 
                 <v-col cols="6">
-                    <v-btn color="primary" class="text-none mt-6" size="large" variant="flat"
+                    <v-btn v-if="!readOnly" color="primary" class="text-none mt-6" size="large" variant="flat"
                         :disabled="!valid || disabled" :loading="loading || updating" text="Save" @click="handleSave" />
                 </v-col>
             </v-row>
@@ -34,6 +34,7 @@ const props = defineProps({
     siteId: { type: String, required: true },
     existingBlockNumber: { type: Number, default: 0 },
     existingGuardPostsNumber: { type: Number, default: 0 },
+    readOnly: { type: Boolean, default: false },
 });
 
 const { updateSite, setSiteGuardPosts } = useSiteSettings()

package/components/SearchVehicleNumberUser.vue

@@ -7,7 +7,7 @@
     </v-toolbar>
 
     <v-card-text style="max-height: 100vh; overflow-y: auto">
-      <v-data-table :items="prop.vehicleNumberUsersList" hide-default-footer :headers="headers" density="comfortable" style="max-height: calc(100vh - (200px))"
+      <v-data-table :items="prop.vehicleNumberUsersList" hide-default-footer :headers="headers" density="comfortable" 
         item-key="_id ">
         <template #item.name="{ item }">
           <span class="d-flex align-center ga-2">
@@ -81,6 +81,7 @@ function handleSelectUser(item: TPeople){
 function handleUpdateUserDetails(){
   confirmAction.value = false;
   emit('update:people', selectedPeople.value)
+  emit('close')
 }
 
 onMounted(() => {

package/components/VisitorForm.vue

@@ -62,7 +62,7 @@
 
           <v-col v-if="shouldShowField('contact')" cols="12">
             <InputLabel class="text-capitalize" title="Phone Number" required />
-            <InputPhoneNumberV2 v-model="visitor.contact" :rules="[requiredRule]" density="comfortable"
+            <InputPhoneNumberV2 v-model="visitor.contact" :rules="[requiredRule]" density="comfortable" :key="currentAutofillSource + 'phone-key'"
               :loading="fetchPersonByContactPending" @update:model-value="handleUpdateContact" />
           </v-col>
 
@@ -134,8 +134,8 @@
           <v-col v-if="shouldShowField('unit')" cols="12">
             <InputLabel class="text-capitalize" title="Unit" required />
             <v-select v-model="visitor.unit" :items="unitsArray" density="comfortable" item-title="title"
-              item-value="value" :disabled="!visitor.level"
-              :loading="unitsStatus === 'pending'" :rules="[requiredRule]" @update:model-value="handleUpdateUnit" />
+              item-value="value" :disabled="!visitor.level" :loading="unitsStatus === 'pending'" :rules="[requiredRule]"
+              @update:model-value="handleUpdateUnit" />
           </v-col>
 
           <v-col v-if="shouldShowField('remarks')" cols="12">
@@ -189,6 +189,11 @@
         </v-col>
       </v-row>
     </v-toolbar>
+
+    <v-dialog v-model="dialog.vehicleNumberUsersList" v-if="vehicleNumberUserItems.length > 0" persistent max-width="600">
+      <SearchVehicleNumberUser :vehicle-number="visitor.plateNumber ?? ''" :vehicle-number-users-list="vehicleNumberUserItems"
+        @close="dialog.vehicleNumberUsersList = false" @update:people="handleAutofillDataViaVehicleNumber" />
+    </v-dialog>
   </v-card>
 </template>
 
@@ -217,10 +222,14 @@ const prop = defineProps({
   },
 });
 
+type AutofillSource = "nric" | "contact" | "vehicleNumber" | null;
+const currentAutofillSource = ref<AutofillSource>(null);
+
+
 const { requiredRule, debounce } = useUtils();
 const { getSiteById, getSiteLevels, getSiteUnits } = useSiteSettings();
 const { createVisitor, typeFieldMap, contractorTypes } = useVisitor();
-const { findPersonByNRIC, findPersonByContact, searchCompanyList } = usePeople()
+const { findPersonByNRIC, findPersonByContact, searchCompanyList, findUsersByPlateNumber } = usePeople()
 
 const emit = defineEmits([
   "back",
@@ -248,6 +257,10 @@ const visitor = reactive<Partial<TVisitorPayload>>({
   members: [],
 });
 
+const dialog = reactive({
+  vehicleNumberUsersList: false,
+});
+
 const validForm = ref(false);
 const formRef = ref<HTMLFormElement | null>(null);
 const processing = ref(false);
@@ -267,6 +280,10 @@ const blocksArray = ref<TDefaultOptionObj[]>([]);
 const levelsArray = ref<TDefaultOptionObj[]>([]);
 const unitsArray = ref<TDefaultOptionObj[]>([]);
 
+
+const vehicleNumberUserItems = ref<TPeople[]>([])
+
+
 const shouldShowField = (fieldKey: keyof TVisitorPayload) => {
   if (prop.type !== "contractor" || contractorStep.value === 1) {
     const visibleFields = typeFieldMap[prop.type];
@@ -355,16 +372,20 @@ const {
 
 watch(fetchPersonByNRICReq, (obj) => {
   if (obj) {
+    currentAutofillSource.value = "nric";
     companyNames.value = obj.companyName ?? []
     visitor.name = obj.name
     visitor.contact = obj.contact
     if (!visitor.company) {
       visitor.company = companyNames.value?.[0]
     }
-    visitor.plateNumber = obj.plateNumber ?? ""
     visitor.block = obj.block ?? ""
     visitor.level = obj.level ?? ""
     visitor.unit = obj.unit ?? ""
+
+    setTimeout(() => {
+      currentAutofillSource.value = null;
+    }, 1000);
   }
 })
 
@@ -381,16 +402,20 @@ const {
 
 watch(fetchPersonByContactReq, (obj) => {
   if (obj) {
+    currentAutofillSource.value = "contact";
     companyNames.value = obj.companyName ?? []
-    visitor.name = obj.name
+    visitor.name = visitor.name ?? obj.name
     if (!visitor.company) {
       visitor.company = companyNames.value?.[0]
     }
-    visitor.plateNumber = obj.plateNumber ?? ""
-    visitor.block = obj.block ?? ""
-    visitor.level = obj.level ?? ""
-    visitor.unit = obj.unit ?? ""
-    visitor.nric = obj.nric ?? ""
+    visitor.block = visitor.block ?? obj.block ?? ""
+    visitor.level = visitor.level ??  obj.level ?? ""
+    visitor.unit = visitor.unit ?? obj.unit ?? ""
+    visitor.nric = visitor.nric ?? obj.nric ?? ""
+
+    setTimeout(() => {
+      currentAutofillSource.value = null;
+    }, 1000);
   }
 })
 
@@ -410,6 +435,25 @@ watch(fetchCompanyListReq, (arr) => {
     companyNames.value = arr?.flatMap(x => x?.companyName)
   }
 })
+const {
+  data: fetchVehicleNumberUserReq,
+  refresh: fetchVehicleNumberUserRefresh,
+  pending: fetchVehicleNumberUserPending,
+
+} = useLazyAsyncData(`fetch-vehicle-number-user-list`, () => {
+  if (!visitor.plateNumber) return Promise.resolve(null)
+  return findUsersByPlateNumber(visitor.plateNumber)
+})
+
+watch(fetchVehicleNumberUserReq, (arr) => {
+  const arrayData = arr?.data
+  if (Array.isArray(arrayData)) {
+    vehicleNumberUserItems.value = arrayData;
+    if (arrayData.length > 0) {
+      dialog.vehicleNumberUsersList = true
+    }
+  }
+})
 
 const debounceFetchCompany = debounce(async () => fetchCompanyListRefresh(), 200)
 
@@ -422,6 +466,41 @@ watch(companyNameInput, async (val) => {
 })
 
 
+const debounceSearchVehicleUsers = debounce(() => {
+  if (!visitor.plateNumber) {
+    vehicleNumberUserItems.value = [];
+    dialog.vehicleNumberUsersList = false;
+    return;
+  }
+  fetchVehicleNumberUserRefresh();
+}, 300); 
+
+watch(() => visitor.plateNumber, (newVal) => {
+  if(currentAutofillSource.value && currentAutofillSource.value !== "vehicleNumber") return;
+  debounceSearchVehicleUsers();
+});
+
+
+function handleAutofillDataViaVehicleNumber(item: TPeople){
+
+  currentAutofillSource.value = "vehicleNumber";
+
+  visitor.name = item.name
+  visitor.nric = item.nric
+  visitor.contact = item.contact
+  companyNames.value = item.companyName ?? []
+  if (!visitor.company) {
+    visitor.company = companyNames.value?.[0]
+  }
+  visitor.block = item.block ?? ""
+  visitor.level = item.level ?? ""
+  visitor.unit = item.unit ?? ""
+
+  setTimeout(() => {
+    currentAutofillSource.value = null;
+  }, 1000);
+}
+
 
 const {
   data: siteData,
@@ -538,10 +617,12 @@ const debounceFetchNRIC = debounce(fetchPersonByNRICRefresh, 500)
 const debounceFetchContact = debounce(fetchPersonByContactRefresh, 500)
 
 function handleUpdateNRIC() {
+  if (currentAutofillSource.value && currentAutofillSource.value !== "nric") return;
   debounceFetchNRIC()
 }
 
 function handleUpdateContact() {
+  if (currentAutofillSource.value && currentAutofillSource.value !== "contact") return;
   debounceFetchContact()
 }
 
@@ -650,6 +731,7 @@ watch(
 
 onMounted(() => {
   contractorStep.value = 1;
+  currentAutofillSource.value = null;
 });
 </script>
 <style scoped>

package/components/VisitorManagement.vue

@@ -145,10 +145,6 @@
       </VehicleUpdateMoreAction>
     </v-dialog>
 
-    <v-dialog v-model="dialog.vehicleNumberUsersList" persistent max-width="600">
-      <SearchVehicleNumberUser :vehicle-number="'123123'"  @close="dialog.vehicleNumberUsersList = false" @update:people="handleUpdateAutofillDetails"/>
-    </v-dialog>
-
     <v-dialog v-model="dialog.deleteConfirmation" width="450" persistent>
       <CardDeleteConfirmation prompt-title="Are you sure want to delete this visitor?"
         :loading="loading.deletingVisitor" @close="dialog.deleteConfirmation = false"
@@ -245,7 +241,6 @@ const dialog = reactive({
   addVisitor: false,
   viewVisitor: false,
   deleteConfirmation: false,
-  vehicleNumberUsersList: false
 });
 
 const tabOptions = [

package/components/WorkOrder/Main.vue

@@ -91,7 +91,12 @@
   <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
 
   <!-- Preview Dialog -->
-  <v-dialog v-model="dialogPreview" width="450" persistent v-if="canViewWorkOrders">
+  <v-dialog
+    v-model="dialogPreview"
+    width="450"
+    persistent
+    v-if="canViewWorkOrders"
+  >
     <v-card width="100%">
       <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
         <v-row no-gutters v-if="selectedWorkOrder" class="mb-4">
@@ -139,12 +144,18 @@
               </template>
 
               <v-list class="pa-0">
-                <v-list-item @click="onViewWorkOrder(selectedWorkOrder)" v-if="canViewWorkOrderDetails">
+                <v-list-item
+                  @click="onViewWorkOrder(selectedWorkOrder)"
+                  v-if="canViewWorkOrderDetails"
+                >
                   <v-list-item-title class="text-subtitle-2">
                     View
                   </v-list-item-title>
                 </v-list-item>
-                <v-list-item @click="editWorkOrder(selectedWorkOrder)" v-if="canUpdateWorkOrder">
+                <v-list-item
+                  @click="editWorkOrder(selectedWorkOrder)"
+                  v-if="canUpdateWorkOrder"
+                >
                   <v-list-item-title class="text-subtitle-2">
                     Edit
                   </v-list-item-title>
@@ -224,7 +235,7 @@ const message = ref("");
 const messageColor = ref("");
 const messageSnackbar = ref(false);
 
-const { getColorStatus, formatDate } = useUtils();
+const { getColorStatus, formatDate, debounce } = useUtils();
 
 const _workOrder = ref<TWorkOrderCreate>({
   attachments: [],
@@ -283,6 +294,7 @@ const {
     page: page.value,
     site: route.params.site as string,
     category: props.category,
+    search: searchText.value || "",
   })
 );
 
@@ -486,4 +498,13 @@ function tableRowClickHandler(_: any, data: any) {
 const dialogPreview = ref(false);
 const selectedWorkOrder = ref<TWorkOrder | null>(null);
 const searchText = ref("");
+
+const debounceSearch = debounce(getAllReqRefresh, 500);
+
+watch(
+  () => searchText.value,
+  () => {
+    debounceSearch();
+  }
+);
 </script>

package/composables/usePeople.ts

@@ -30,6 +30,12 @@ export default function(){
         method: "GET",
       });
   }
+  async function findUsersByPlateNumber(plateNumber: string): Promise<null | Partial<TPeople>> {
+      return await $fetch<Record<string, any>>(`/api/people/plateNumber/${plateNumber}`, {
+        method: "GET",
+        query: { limit: 20 }
+      });
+  }
 
   async function searchCompanyList(company: string): Promise<null | Partial<TPeople>> {
       return await $fetch<Record<string, any>>('/api/people/company', {
@@ -76,6 +82,7 @@ export default function(){
         findPersonByNRIC,
         findPersonByContact,
         getPeopleByUnit,
-        searchCompanyList
+        searchCompanyList,
+        findUsersByPlateNumber
     }
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "1.8.4",
+  "version": "1.8.6",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {

package/tsconfig.json

@@ -1,15 +1,3 @@
 {
-  "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "types": ["vite/client", "nuxt"],
-    "jsx": "preserve",
-    "resolveJsonModule": true,
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["./**/*.ts", "./**/*.vue"]
-}
+  "extends": "./.playground/.nuxt/tsconfig.json"
+}