@7365admin1/layer-common 1.8.4 → 1.8.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 1.8.5
+
+### Patch Changes
+
+- 8db0ed5: Update on components and config
+
 ## 1.8.4
 
 ### Patch Changes

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/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/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.5",
   "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"
+}