@iservice365/layer-common 1.2.0 → 1.3.1

package/components/VisitorForm.vue

@@ -11,49 +11,24 @@
       <div class="w-100 d-flex justify-space-between ga-2">
         <span class="text-subtitle-1 w-100 font-weight-bold mb-3">{{
           formTitle
-        }}</span>
-        <span
-          v-if="prop.type === 'contractor'"
-          class="text-subtitle-2 font-weight-bold"
-          style="text-wrap: nowrap"
-          >Step <span class="text-primary-button">{{ contractorStep }}</span
-          >/3</span
-        >
+          }}</span>
+        <span v-if="prop.type === 'contractor'" class="text-subtitle-2 font-weight-bold" style="text-wrap: nowrap">Step
+          <span class="text-primary-button">{{ contractorStep }}</span>/3</span>
       </div>
-      <v-form
-        ref="formRef"
-        v-model="validForm"
-        :disabled="processing"
-        @click="errorMessage = ''"
-      >
+      <v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorMessage = ''">
         <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
-            >
+            <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>
               <template v-slot:no-data>
                 <v-list-item>
                   <v-list-item-title>
                     No results matching "<strong>{{
                       contractorTypeInput
-                    }}</strong
-                    >". This value will be added as new option.
+                      }}</strong>". This value will be added as new option.
                   </v-list-item-title>
                 </v-list-item>
               </template>
@@ -68,29 +43,30 @@
           <v-col v-if="shouldShowField('name')" cols="12">
             <v-row>
               <v-col cols="12">
-                <InputLabel
-                  class="text-capitalize"
-                  title="Full Name"
-                  required
-                />
-                <v-text-field
-                  v-model.trim="visitor.name"
-                  density="comfortable"
-                  :rules="[requiredRule]"
-                />
+                <InputLabel class="text-capitalize" title="Full Name" required />
+                <v-text-field v-model.trim="visitor.name" density="comfortable" :rules="[requiredRule]" />
               </v-col>
             </v-row>
           </v-col>
 
+          <v-col v-if="shouldShowField('nric')" cols="12">
+            <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" />
+              </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" />
+          </v-col>
+
           <v-col v-if="shouldShowField('deliveryType')" cols="12">
             <v-row>
               <v-col cols="12">
-                <v-radio-group
-                  v-model="visitor.deliveryType"
-                  inline
-                  color="primary"
-                  :rules="[requiredRule]"
-                >
+                <v-radio-group v-model="visitor.deliveryType" inline color="primary" :rules="[requiredRule]">
                   <v-radio label="Food" value="Food"></v-radio>
                   <v-radio label="Parcel" value="Parcel"></v-radio>
                 </v-radio-group>
@@ -99,158 +75,66 @@
           </v-col>
 
           <template v-if="shouldShowField('company')">
-            <v-col v-if="prop.type === 'delivery'" cols="12">
-              <InputLabel
-                class="text-capitalize"
-                title="Company Name"
-                required
-              />
-              <v-combobox
-                v-model="companyNameObj"
-                v-model:search="companyNameInput"
-                :hide-no-data="false"
-                @update:focused="handleFocusedCompanyName"
-                :items="companyNames"
-                :rules="[requiredRule]"
-                item-value="value"
-                @update:model-value="handleSelectCompanyName"
-                variant="outlined"
-                density="comfortable"
-                persistent-hint
-                small-chips
-              >
+            <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"
+                density="comfortable" persistent-hint small-chips>
                 <template v-slot:no-data>
                   <v-list-item>
-                    <v-list-item-title>
-                      No results matching "<strong>{{
-                        contractorTypeInput
-                      }}</strong
-                      >". This value will be added as new option.
+                    <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-list-item-title v-else>
+                      No companies available. Start typing to add a new one.
                     </v-list-item-title>
                   </v-list-item>
                 </template>
               </v-combobox>
             </v-col>
-
-            <v-col v-else cols="12">
-              <v-row>
-                <v-col cols="12">
-                  <InputLabel
-                    class="text-capitalize"
-                    title="Company Name"
-                    required
-                  />
-                  <v-text-field
-                    v-model.trim="visitor.company"
-                    density="comfortable"
-                    :rules="[requiredRule]"
-                  />
-                </v-col>
-              </v-row>
-            </v-col>
           </template>
 
-          <v-col v-if="shouldShowField('nric')" cols="12">
-            <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]"
-                />
-              </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"/>
-          </v-col>
 
           <v-col v-if="shouldShowField('plateNumber')" cols="12">
             <v-row>
               <v-col cols="12">
-                <InputLabel
-                  class="text-capitalize"
-                  title="Vehicle Number"
-                  required
-                />
+                <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.trim="visitor.plateNumber" density="comfortable" :rules="[requiredRule]" />
               </v-col>
             </v-row>
           </v-col>
 
           <v-col v-if="shouldShowField('block')" cols="12">
             <InputLabel class="text-capitalize" title="Block" required />
-            <v-select
-              v-model="visitor.block"
-              :items="blocksArray"
-              item-value="value"
-              item-title="title"
-              :loading="blockStatus === 'pending'"
-              @update:model-value="handleChangeBlock"
-              density="comfortable"
-              :rules="[requiredRule]"
-            />
+            <v-select v-model="visitor.block" :items="blocksArray" item-value="value" item-title="title"
+              :loading="blockStatus === 'pending'" @update:model-value="handleChangeBlock" density="comfortable"
+              :rules="[requiredRule]" />
           </v-col>
 
           <v-col v-if="shouldShowField('level')" cols="12">
             <InputLabel class="text-capitalize" title="Level" required />
-            <v-select
-              v-model="visitor.level"
-              :items="levelsArray"
-              density="comfortable"
-              :disabled="!visitor.block"
-              :loading="levelsStatus === 'pending'"
-              @update:model-value="handleChangeLevel"
-              :rules="[requiredRule]"
-            />
+            <v-select v-model="visitor.level" :items="levelsArray" density="comfortable" :disabled="!visitor.block"
+              :loading="levelsStatus === 'pending'" @update:model-value="handleChangeLevel" :rules="[requiredRule]" />
           </v-col>
 
           <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"
-              :loading="unitsStatus === 'pending'"
-              :rules="[requiredRule]"
-              @update:model-value="handleUpdateUnit"
-            />
+            <v-select v-model="visitor.unit" :items="unitsArray" density="comfortable" :disabled="!visitor.level"
+              :loading="unitsStatus === 'pending'" :rules="[requiredRule]" @update:model-value="handleUpdateUnit" />
           </v-col>
 
           <v-col v-if="shouldShowField('remarks')" cols="12">
             <InputLabel class="text-capitalize" title="Remarks" />
-            <v-textarea
-              v-model="visitor.remarks"
-              density="comfortable"
-              :rows="3"
-              no-resize
-            />
+            <v-textarea v-model="visitor.remarks" density="comfortable" :rows="3" no-resize />
           </v-col>
 
-          <v-col
-            v-if="prop.type === 'contractor' && contractorStep === 2"
-            cols="12"
-          >
+          <v-col v-if="prop.type === 'contractor' && contractorStep === 2" cols="12">
             <PassInformation />
           </v-col>
 
-          <v-col
-            v-if="prop.type === 'contractor' && contractorStep === 3"
-            cols="12"
-          >
+          <v-col v-if="prop.type === 'contractor' && contractorStep === 3" cols="12">
             <MemberInformation v-model="visitor.members" />
           </v-col>
 
@@ -275,66 +159,20 @@
     <v-toolbar density="compact">
       <v-row no-gutters>
         <v-col cols="6">
-          <v-btn
-            v-if="
-              prop.mode === 'add' &&
-              prop.type === 'contractor' &&
-              contractorStep > 1
-            "
-            tile
-            block
-            variant="text"
-            class="text-none"
-            size="48"
-            @click="handleGoToPreviousPage"
-            text="Back"
-          />
-          <v-btn
-            v-else-if="prop.mode === 'add'"
-            tile
-            block
-            variant="text"
-            class="text-none"
-            size="48"
-            @click="backToSelection"
-            text="Back to Selection"
-          />
-          <v-btn
-            v-else
-            tile
-            block
-            variant="text"
-            class="text-none"
-            size="48"
-            @click="close"
-            text="Close"
-          />
+          <v-btn v-if="
+            prop.mode === 'add' &&
+            prop.type === 'contractor' &&
+            contractorStep > 1
+          " tile block variant="text" class="text-none" size="48" @click="handleGoToPreviousPage" text="Back" />
+          <v-btn v-else-if="prop.mode === 'add'" tile block variant="text" class="text-none" size="48"
+            @click="backToSelection" text="Back to Selection" />
+          <v-btn v-else tile block variant="text" class="text-none" size="48" @click="close" text="Close" />
         </v-col>
         <v-col cols="6">
-          <v-btn
-            v-if="prop.type === 'contractor'"
-            tile
-            block
-            variant="flat"
-            color="primary-button"
-            class="text-none"
-            size="48"
-            :disabled="processing"
-            @click="handleNextPage"
-            :text="contractorStep === 3 ? 'Submit' : 'Next'"
-          />
-          <v-btn
-            v-else
-            tile
-            block
-            variant="flat"
-            color="black"
-            class="text-none"
-            size="48"
-            :disabled="!validForm || processing"
-            @click="submit"
-            :text="prop.mode == 'add' ? 'Submit' : 'Update'"
-          />
+          <v-btn v-if="prop.type === 'contractor'" tile block variant="flat" color="primary-button" class="text-none"
+            size="48" :disabled="processing" @click="handleNextPage" :text="contractorStep === 3 ? 'Submit' : 'Next'" />
+          <v-btn v-else tile block variant="flat" color="black" class="text-none" size="48"
+            :disabled="!validForm || processing" @click="submit" :text="prop.mode == 'add' ? 'Submit' : 'Update'" />
         </v-col>
       </v-row>
     </v-toolbar>
@@ -366,9 +204,10 @@ const prop = defineProps({
   },
 });
 
-const { requiredRule, formatDateISO8601 } = useUtils();
+const { requiredRule, debounce } = useUtils();
 const { getSiteById, getSiteLevels, getSiteUnits } = useSiteSettings();
 const { createVisitor, typeFieldMap, contractorTypes } = useVisitor();
+const { findPersonByNRIC } = usePeople()
 
 const emit = defineEmits([
   "back",
@@ -408,7 +247,7 @@ const contractorTypeObj = ref<TDefaultOptionObj | null>(null);
 const contractorStep = ref(1);
 
 const companyNameInput = ref("");
-const companyNameObj = ref<TDefaultOptionObj | null>(null);
+const companyNameObj = ref<string | null>(null);
 
 
 const blocksArray = ref<TDefaultOptionObj[]>([]);
@@ -422,40 +261,7 @@ const shouldShowField = (fieldKey: keyof TVisitorPayload) => {
   }
 };
 
-const companyNames = computed(() => {
-  const arr: string[] = [
-    "Foodpanda",
-    "GrabFood",
-    "Deliveroo",
-    "Lazada",
-    "Amazon",
-    "RedMart",
-    "J&T",
-    "NTUC FairPrice",
-    "NinjaVan",
-    "Lalamove",
-    "SingPost",
-    "EasyParcel",
-    "DHL",
-    "FedEx",
-    "Oddle",
-    "UParcel",
-    "UPS",
-    "Park N Parcel",
-    "ParkXL",
-    "Airpak Express",
-    "Pandago",
-    "Qdelivery",
-    "iXpress Logistics",
-    "Blue Dart",
-    "GogoX",
-    "Others (Type in remarks)",
-  ];
-  return arr.map((x) => ({
-    title: x,
-    value: x,
-  }));
-});
+const companyNames = ref<string[]>([])
 
 const formTitle = computed(() => {
   const isContractorForm = prop.type === "contractor";
@@ -478,26 +284,50 @@ function handleFocusedContractorType() {
   );
   if (!matched) {
     contractorTypeObj.value = null;
-    contractorTypeInput.value = "";
+    contractorTypeInput.value = ""
     visitor.contractorType = "";
   }
 }
 
-function handleSelectCompanyName(obj: { title: string; value: string }) {
-  visitor.company = obj.value ?? "";
+function handleSelectCompanyName(company: string) {
+  visitor.company = company
 }
 
-function handleFocusedCompanyName() {
-  const obj = companyNameObj.value;
-  const matched = companyNames.value.some(
-    (x) => x.value === obj?.value && x.title === obj?.title
-  );
-  if (!matched) {
-    companyNameObj.value = null;
-    companyNameInput.value = "";
-    visitor.company = "";
-  }
+// 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-company-list`, () =>{
+  const NRIC = visitor.nric;
+  if(!NRIC) return Promise.resolve(null)
+  return findPersonByNRIC(NRIC)
 }
+);
+
+watch(fetchPersonByNRICReq, (obj) => {
+  if(obj){
+    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 ?? ""
+  }
+})
 
 const {
   data: siteData,
@@ -516,7 +346,7 @@ const {
   async () => {
     if (!visitor.block) return Promise.resolve(null);
     return await getSiteLevels(prop.site, { block: Number(visitor.block) });
-  }
+  }, {watch: [() => visitor.block]}
 );
 
 const {
@@ -528,7 +358,7 @@ const {
   async () => {
     if (!visitor.level) return Promise.resolve(null);
     return await getSiteUnits(prop.site, Number(visitor.block), visitor.level);
-  }
+  }, {watch: [() => visitor.level]}
 );
 
 watch(
@@ -586,12 +416,10 @@ watch(
 function handleChangeBlock(value: any) {
   visitor.level = "";
   visitor.unit = "";
-  refreshLevelsData();
 }
 
 function handleChangeLevel(value: any) {
   visitor.unit = "";
-  refreshUnitsData();
 }
 
 function handleUpdateUnit(value: any) {
@@ -599,6 +427,12 @@ function handleUpdateUnit(value: any) {
   visitor.unitName = selectedUnit?.title || "";
 }
 
+const debounceFetchNRIC = debounce(fetchPersonByNRICRefresh, 500)
+
+function handleUpdateNRIC(){
+    debounceFetchNRIC()
+}
+
 function backToSelection() {
   emit("back");
   message.value = "";
@@ -617,6 +451,8 @@ function close() {
 
 function formatVisitorType(type: TVisitorType): string {
   switch (type) {
+    case "guest":
+      return "Guest";
     case "contractor":
       return "Contractor";
     case "delivery":
@@ -686,8 +522,7 @@ async function submit() {
     const err = error?.data?.message;
     errorMessage.value =
       err ||
-      `Failed to ${
-        prop.mode === "add" ? "add" : "update"
+      `Failed to ${prop.mode === "add" ? "add" : "update"
       } visitor. Please try again.`;
   } finally {
     processing.value = false;