@iservice365/layer-common 1.6.0 → 1.7.0

package/components/VisitorForm.vue

@@ -19,16 +19,17 @@
         <v-row no-gutters class="pt-4">
           <v-col v-if="shouldShowField('contractorType')" cols="12">
             <InputLabel class="text-capitalize" title="Contractor Type" required />
-            <v-combobox v-model="contractorTypeObj" v-model:search="contractorTypeInput" :hide-no-data="false"
-              @update:focused="handleFocusedContractorType" :items="contractorTypes" :rules="[requiredRule]"
-              item-value="value" @update:model-value="handleSelectContractorType" variant="outlined"
-              density="comfortable" persistent-hint small-chips>
+            <v-combobox v-model="contractorTypeObj" v-model:search="contractorTypeInput" ref="contractorTypeCombo"
+              autocomplete="off" :hide-no-data="false" @update:focused="handleFocusedContractorType"
+              :items="contractorTypes" :rules="[requiredRule]" item-value="value"
+              @update:model-value="handleSelectContractorType" variant="outlined" density="comfortable" persistent-hint
+              small-chips>
               <template v-slot:no-data>
                 <v-list-item>
-                  <v-list-item-title>
-                    No results matching "<strong>{{
+                  <v-list-item-title @click.stop="handleAddNewContractorType" class="d-flex align-center ga-1">
+                    <span><v-icon icon="mdi-plus" /></span> Add "<strong>{{
                       contractorTypeInput
-                      }}</strong>". This value will be added as new option.
+                      }}</strong>" as custom contractor type.
                   </v-list-item-title>
                 </v-list-item>
               </template>
@@ -53,14 +54,16 @@
             <v-row>
               <v-col cols="12">
                 <InputLabel class="text-capitalize" title="NRIC/Passport/ID No." required />
-                <InputNRICNumber v-model.trim="visitor.nric" density="comfortable" :rules="[requiredRule]" @update:model-value="handleUpdateNRIC" :loading="fetchPersonByNRICPending" />
+                <InputNRICNumber v-model="visitor.nric" density="comfortable" :rules="[requiredRule]"
+                  @update:model-value="handleUpdateNRIC" :loading="fetchPersonByNRICPending" />
               </v-col>
             </v-row>
           </v-col>
 
           <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" :loading="fetchPersonByContactPending" @update:model-value="handleUpdateContact" />
+            <InputPhoneNumberV2 v-model="visitor.contact" :rules="[requiredRule]" density="comfortable"
+              :loading="fetchPersonByContactPending" @update:model-value="handleUpdateContact" />
           </v-col>
 
           <v-col v-if="shouldShowField('deliveryType')" cols="12">
@@ -75,16 +78,25 @@
           </v-col>
 
           <template v-if="shouldShowField('company')">
-            <v-col  cols="12">
-              <InputLabel class="text-capitalize" title="Company Name" required />
-              <v-combobox v-model="visitor.company" v-model:search="companyNameInput" :hide-no-data="false"
-                 :items="companyNames" :rules="[requiredRule]"
-                item-value="value" @update:model-value="handleSelectCompanyName" variant="outlined"
+            <v-col cols="12">
+              <InputLabel class="text-capitalize" title="Company Name" />
+              <v-combobox v-model="visitor.company" v-model:search="companyNameInput" ref="companyCombo"
+                autocomplete="off" :hide-no-data="false" :items="companyNames" item-value="value"
+                :loading="fetchCompanyListPending" @update:model-value="handleSelectCompanyName" variant="outlined"
                 density="comfortable" persistent-hint small-chips>
                 <template v-slot:no-data>
                   <v-list-item>
-                    <v-list-item-title v-if="companyNameInput">
-                      No results matching "<strong>{{companyNameInput}}</strong>". This value will be added as new option.
+                    <v-list-item-title v-if="fetchCompanyListPending">
+                      <v-progress-circular indeterminate size="20" class="mr-3" />
+                      Searching companies…
+                    </v-list-item-title>
+                    <v-list-item-title v-else-if="companyNameInput" @click.stop="handleAddNewCompany"
+                      class="d-flex align-center ga-1">
+                      <span><v-icon icon="mdi-plus" /></span>Add "<strong>{{ companyNameInput }}</strong>" as new
+                      company.
+                    </v-list-item-title>
+                    <v-list-item-title v-else-if="!companyNameInput && companyNames.length === 0">
+                      Start typing to search for companies.
                     </v-list-item-title>
                     <v-list-item-title v-else>
                       No companies available. Start typing to add a new one.
@@ -101,7 +113,7 @@
               <v-col cols="12">
                 <InputLabel class="text-capitalize" title="Vehicle Number" required />
                 <!-- <v-text-field v-model.trim.uppercase="visitor.plateNumber" density="comfortable" /> -->
-                <InputVehicleNumber v-model.trim="visitor.plateNumber" density="comfortable" :rules="[requiredRule]" />
+                <InputVehicleNumber v-model="visitor.plateNumber" density="comfortable" :rules="[requiredRule]" />
               </v-col>
             </v-row>
           </v-col>
@@ -121,7 +133,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" :disabled="!visitor.level"
+            <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" />
           </v-col>
 
@@ -207,7 +220,7 @@ const prop = defineProps({
 const { requiredRule, debounce } = useUtils();
 const { getSiteById, getSiteLevels, getSiteUnits } = useSiteSettings();
 const { createVisitor, typeFieldMap, contractorTypes } = useVisitor();
-const { findPersonByNRIC, findPersonByContact } = usePeople()
+const { findPersonByNRIC, findPersonByContact, searchCompanyList } = usePeople()
 
 const emit = defineEmits([
   "back",
@@ -262,6 +275,7 @@ const shouldShowField = (fieldKey: keyof TVisitorPayload) => {
 };
 
 const companyNames = ref<string[]>([])
+const companyAutofillDataArray = ref<{ companyName: string[], unit: string, block: number, level: string, unitName: string }[]>([])
 
 const formTitle = computed(() => {
   const isContractorForm = prop.type === "contractor";
@@ -278,48 +292,73 @@ function handleSelectContractorType(obj: { title: string; value: string }) {
 }
 
 function handleFocusedContractorType() {
-  const obj = contractorTypeObj.value;
-  const matched = contractorTypes.some(
-    (x) => x.value === obj?.value && x.title === obj?.title
-  );
-  if (!matched) {
-    contractorTypeObj.value = null;
-    contractorTypeInput.value = ""
-    visitor.contractorType = "";
-  }
+  // const obj = contractorTypeObj.value;
+  // const matched = contractorTypes.some(
+  //   (x) => x.value === obj?.value && x.title === obj?.title
+  // );
+  // if (!matched) {
+  //   contractorTypeObj.value = null;
+  //   contractorTypeInput.value = ""
+  //   visitor.contractorType = "";
+  // }
+}
+
+const contractorTypeCombo = ref(null)
+
+async function handleAddNewContractorType() {
+  visitor.contractorType = contractorTypeInput.value
+
+  const combo = contractorTypeCombo.value as any
+  await nextTick();
+
+  combo.isMenuActive = false;
+  combo.$el.querySelector("input")?.blur(); ``
+
 }
 
-function handleSelectCompanyName(company: string) {
+async function handleSelectCompanyName(company: string) {
   visitor.company = company
+
+  const selected = companyAutofillDataArray.value.find(x => x.companyName?.includes(company))
+  if (!selected) return
+
+  visitor.block = selected.block || ""
+  visitor.level = selected.level || ""
+  visitor.unit = selected.unit || ""
+  visitor.unitName = selected.unitName || ""
+
+}
+
+const companyCombo = ref(null)
+
+async function handleAddNewCompany() {
+  visitor.company = companyNameInput.value
+
+  const combo = companyCombo.value as any
+  await nextTick();
+
+  combo.isMenuActive = false;
+  combo.$el.querySelector("input")?.blur();
 }
 
-// function handleFocusedCompanyName() {
-//   const companyNameSelected = companyNameObj.value;
-//   const matched = companyNames.value.some((x) => x === companyNameSelected);
-//   if (!matched) {
-//     companyNameObj.value = null;
-//     companyNameInput.value = "";
-//     visitor.company = "";
-//   }
-// }
 
 const {
   data: fetchPersonByNRICReq,
   refresh: fetchPersonByNRICRefresh,
   pending: fetchPersonByNRICPending,
-} = useLazyAsyncData(`fetch-person`, () =>{
+} = useLazyAsyncData(`fetch-person`, () => {
   const NRIC = visitor.nric;
-  if(!NRIC) return Promise.resolve(null)
+  if (!NRIC) return Promise.resolve(null)
   return findPersonByNRIC(NRIC)
 }
 );
 
 watch(fetchPersonByNRICReq, (obj) => {
-  if(obj){
+  if (obj) {
     companyNames.value = obj.companyName ?? []
     visitor.name = obj.name
     visitor.contact = obj.contact
-    if(!visitor.company){
+    if (!visitor.company) {
       visitor.company = companyNames.value?.[0]
     }
     visitor.plateNumber = obj.plateNumber ?? ""
@@ -333,28 +372,57 @@ const {
   data: fetchPersonByContactReq,
   refresh: fetchPersonByContactRefresh,
   pending: fetchPersonByContactPending,
-} = useLazyAsyncData(`fetch-contact`, () =>{
+} = useLazyAsyncData(`fetch-contact`, () => {
   const contact = visitor.contact;
-  if(!contact) return Promise.resolve(null)
+  if (!contact) return Promise.resolve(null)
   return findPersonByContact(contact)
 }
 );
 
 watch(fetchPersonByContactReq, (obj) => {
-  if(obj){
+  if (obj) {
     companyNames.value = obj.companyName ?? []
     visitor.name = obj.name
-    if(!visitor.company){
+    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.nric = obj.nric ?? ""
+  }
+})
+
+const {
+  data: fetchCompanyListReq,
+  refresh: fetchCompanyListRefresh,
+  pending: fetchCompanyListPending,
+
+} = useLazyAsyncData(`fetch-company-list`, () => {
+  if (!companyNameInput.value) return Promise.resolve(null)
+  return searchCompanyList(companyNameInput.value)
+})
+
+watch(fetchCompanyListReq, (arr) => {
+  if (Array.isArray(arr)) {
+    companyAutofillDataArray.value = arr;
+    companyNames.value = arr?.flatMap(x => x?.companyName)
   }
 })
 
+const debounceFetchCompany = debounce(async () => fetchCompanyListRefresh(), 200)
+
+watch(companyNameInput, async (val) => {
+  if (!val) {
+    companyNames.value = []
+    return
+  }
+  await debounceFetchCompany()
+})
+
+
+
 const {
   data: siteData,
   refresh: refreshSiteData,
@@ -372,7 +440,7 @@ const {
   async () => {
     if (!visitor.block) return Promise.resolve(null);
     return await getSiteLevels(prop.site, { block: Number(visitor.block) });
-  }, {watch: [() => visitor.block]}
+  }, { watch: [() => visitor.block] }
 );
 
 const {
@@ -384,7 +452,7 @@ const {
   async () => {
     if (!visitor.level) return Promise.resolve(null);
     return await getSiteUnits(prop.site, Number(visitor.block), visitor.level);
-  }, {watch: [() => visitor.level]}
+  }, { watch: [() => visitor.level] }
 );
 
 watch(
@@ -425,18 +493,31 @@ watch(
 watch(
   unitsData,
   (newVal: any) => {
-    if (newVal && Array.isArray(newVal)) {
-      const arr = newVal || [];
-      unitsArray.value = arr?.map((unit: any) => ({
-        title: unit?.name,
-        value: unit?._id,
-      }));
-    } else {
-      unitsArray.value = [];
+    if (!newVal) {
+      unitsArray.value = []
+      return
     }
+
+    const mapped = newVal.map((unit: any) => ({
+      title: unit.name,
+      value: unit._id,
+    }))
+
+    // keep custom unit pushed from autofill
+    const selected = visitor.unit
+    const exists = mapped.some((u: TDefaultOptionObj) => u.value === selected)
+
+    if (!exists && visitor.unitName) {
+      mapped.push({
+        title: visitor.unitName,
+        value: selected,
+      })
+    }
+
+    unitsArray.value = mapped
   },
   { immediate: true }
-);
+)
 
 
 function handleChangeBlock(value: any) {
@@ -456,12 +537,12 @@ function handleUpdateUnit(value: any) {
 const debounceFetchNRIC = debounce(fetchPersonByNRICRefresh, 500)
 const debounceFetchContact = debounce(fetchPersonByContactRefresh, 500)
 
-function handleUpdateNRIC(){
-    debounceFetchNRIC()
+function handleUpdateNRIC() {
+  debounceFetchNRIC()
 }
 
-function handleUpdateContact(){
-    debounceFetchContact()
+function handleUpdateContact() {
+  debounceFetchContact()
 }
 
 function backToSelection() {

package/components/VisitorManagement.vue

@@ -256,6 +256,7 @@ const formattedFields = {
   nric: "NRIC",
   contact: "Phone Number",
   plateNumber: "Vehicle Number",
+  company: "Company",
   block: "Block",
   level: "Level",
   unitName: "Unit",
@@ -434,20 +435,6 @@ async function handleCheckout(userId: string) {
   }
 }
 
-// get dates in ISO String (UTC Time)
-function getUTCDates() {
-  const today = new Date();
-  const yesterday = new Date();
-  yesterday.setUTCDate(today.getUTCDate() - 1);
-
-  const dateFrom = ref(yesterday.toISOString()); // yesterday in UTC
-  const dateTo = ref(today.toISOString()); // today in UTC
-
-  const dateYesterday = yesterday.toISOString();
-  const dateToday = today.toISOString();
-
-  return { dateYesterday, dateToday };
-}
 
 
 const updateRouteQuery = debounce(

package/composables/useCard.ts

@@ -0,0 +1,46 @@
+export default function useCard() {
+  function getAll({
+    page = 1,
+    search = "",
+    limit = 10,
+    status = "active",
+    site = "",
+  } = {}) {
+    return useNuxtApp().$api<Record<string, any>>(`/api/cards`, {
+      method: "GET",
+      query: {
+        page,
+        search,
+        limit,
+        status,
+        site,
+      },
+    });
+  }
+  function add(value: any) {
+    return useNuxtApp().$api<Record<string, any>>("/api/cards", {
+      method: "POST",
+      body: value,
+    });
+  }
+
+  function deleteById(id: string) {
+    return useNuxtApp().$api(`/api/cards/${id}`, {
+      method: "DELETE",
+    });
+  }
+
+  function updateById(id: string, value: any) {
+    return useNuxtApp().$api(`/api/cards/${id}`, {
+      method: "PUT",
+      body: value,
+    });
+  }
+
+  return {
+    getAll,
+    add,
+    deleteById,
+    updateById,
+  };
+}

package/composables/useNFCPatrolTag.ts

@@ -0,0 +1,51 @@
+export default function useNFCPatrolTag() {
+  function getAll({
+    page = 1,
+    limit = 10,
+    site = "",
+  } = {}) {
+    return useNuxtApp().$api<Record<string, any>>(`/api/nfc-patrol-tag`, {
+      method: "GET",
+      query: {
+        page,
+        limit,
+        site,
+      },
+    });
+  }
+
+  function add(value: { site: string; tagID: string; name: string }) {
+    return useNuxtApp().$api<Record<string, any>>("/api/nfc-patrol-tag", {
+      method: "POST",
+      body: {
+        site: value.site,
+        tagID: value.tagID,
+        name: value.name,
+      },
+    });
+  }
+
+  function deleteById(id: string) {
+    return useNuxtApp().$api(`/api/nfc-patrol-tag/${id}`, {
+      method: "DELETE",
+    });
+  }
+
+  function updateById(id: string, value: { site: string; tagID: string; name: string }) {
+    return useNuxtApp().$api(`/api/nfc-patrol-tag/${id}`, {
+      method: "PUT",
+      body: {
+        site: value.site,
+        tagID: value.tagID,
+        name: value.name,
+      },
+    });
+  }
+
+  return {
+    getAll,
+    add,
+    deleteById,
+    updateById,
+  };
+}

package/composables/usePeople.ts

@@ -31,6 +31,13 @@ export default function(){
       });
   }
 
+  async function searchCompanyList(company: string): Promise<null | Partial<TPeople>> {
+      return await $fetch<Record<string, any>>('/api/people/company', {
+        method: "GET",
+        query: { search: company}
+      });
+  }
+
     async function create(payload: Partial<TPeoplePayload>){
       return await useNuxtApp().$api<Record<string, any>>("/api/people", {
         method: "POST",
@@ -51,6 +58,15 @@ export default function(){
       }); 
     }
 
+    async function getPeopleByUnit( _id: string,{
+      status = "active",
+      type = "resident",
+      } = {}){
+      return await useNuxtApp().$api<Record<string, any>>(`/api/people/unit/${_id}`, {
+         method: "GET",
+         query: { status, type }
+      }); 
+    }
 
     return {
         create,
@@ -58,6 +74,8 @@ export default function(){
         updateById,
         deleteById,
         findPersonByNRIC,
-        findPersonByContact
+        findPersonByContact,
+        getPeopleByUnit,
+        searchCompanyList
     }
 }

package/composables/useVisitor.ts

@@ -14,7 +14,7 @@ export default function () {
   ];
 
     const typeFieldMap: Record<TVisitorType, (keyof TVisitorPayload)[]> = {
-      guest: ['name', 'nric', 'contact', 'block', 'level', 'unit' , 'unitName', 'remarks'],
+      guest: ['name', 'nric', 'contact', 'company', 'block', 'level', 'unit' , 'unitName', 'remarks'],
       contractor: ['contractorType', 'name', 'nric', 'company', 'contact', 'plateNumber', 'block', 'level', 'unit', 'unitName', 'remarks'],
       delivery: ['attachments', 'name', 'deliveryType', 'company', 'nric', 'contact', 'plateNumber', 'block', 'level', 'unit' , 'unitName',  'remarks'],
       'walk-in': ['name', 'company', 'nric', 'contact', 'block', 'level', 'unit' , 'unitName', 'remarks'],

package/package.json

@@ -2,7 +2,7 @@
   "name": "@iservice365/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",

package/types/building.d.ts

@@ -11,6 +11,8 @@ declare type TBuildingUnit = {
   _id?: string;
   site: string;
   name?: string;
+  owner?: string;
+  ownerName?: string;
   building: string;
   buildingName?: string;
   block: number | null;

package/types/card.d.ts

@@ -0,0 +1,22 @@
+declare type TCard = {
+  _id?: string;
+  name: string;
+  accessCardType?: string;
+  type?: string;
+  cardNumber?: string;
+  startDate?: string | Date;
+  endDate?: string | Date;
+  door?: string;
+  accessGroup?: string[];
+  cardType?: string;
+  pinNo?: string;
+  useAsLiftCard?: boolean;
+  liftAccessLevel?: string;
+  isActivate?: boolean;
+  isAntiPassBack?: boolean;
+  status?: string;
+  org?: string | ObjectId;
+  site?: string | ObjectId;
+  unit: string;
+  assign: string;
+};