@7365admin1/layer-common 1.10.5 → 1.10.7

package/components/VehicleForm.vue

@@ -32,47 +32,87 @@
             </v-combobox>
           </v-col>
 
+          <v-col v-if="shouldShowField('nric')" cols="12">
+            <InputLabel class="text-capitalize" title="NRIC" required />
+            <InputNRICNumber v-model="vehicle.nric" density="comfortable" :rules="[requiredRule]" />
+          </v-col>
+
           <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="vehicle.name" density="comfortable" :rules="[requiredRule]" />
+                <v-text-field v-model.trim="vehicle.name" density="comfortable" :rules="[requiredRule]" disabled />
               </v-col>
             </v-row>
           </v-col>
 
-          <v-col v-if="shouldShowField('nric')" cols="12">
-            <InputLabel class="text-capitalize" title="NRIC" required />
-             <InputNRICNumber v-model="vehicle.nric" density="comfortable" :rules="[requiredRule]" />
-          </v-col>
+
 
           <v-col v-if="shouldShowField('phone')" cols="12">
             <InputLabel class="text-capitalize" title="Phone Number" required />
-            <InputPhoneNumberV2 v-model="vehicle.phoneNumber" density="comfortable" :rules="[requiredRule]" />
+            <InputPhoneNumberV2 v-model="vehicle.phoneNumber" density="comfortable" :rules="[requiredRule]" :disabled="disablePrefilledInputs" />
           </v-col>
 
           <v-col v-if="shouldShowField('block')" cols="12">
             <InputLabel class="text-capitalize" title="Block" required />
             <v-select v-model="vehicle.block" :items="blocksArray" item-value="value" item-title="title"
-              @update:model-value="handleChangeBlock" density="comfortable" :rules="[requiredRule]" />
+              @update:model-value="handleChangeBlock" density="comfortable" :rules="[requiredRule]" :disabled="disablePrefilledInputs" />
           </v-col>
 
           <v-col v-if="shouldShowField('level')" cols="12">
             <InputLabel class="text-capitalize" title="Level" required />
-            <v-select v-model="vehicle.level" :items="levelsArray" density="comfortable" :disabled="!vehicle.block"
+            <v-select v-model="vehicle.level" :items="levelsArray" density="comfortable" :disabled="!vehicle.block || disablePrefilledInputs"
               @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="vehicle.unit" :items="unitsArray" density="comfortable" :disabled="!vehicle.level"
+            <v-select v-model="vehicle.unit" :items="unitsArray" density="comfortable" :disabled="!vehicle.level || disablePrefilledInputs"
               :rules="[requiredRule]" />
           </v-col>
 
           <v-col v-if="shouldShowField('plateNumber')" cols="12">
-            <InputLabel class="text-capitalize" title="Vehicle Number" required />
+            <InputLabel class="text-capitalize" title="Vehicle Numbers" required />
             <!-- <v-text-field v-model="vehicle.plateNumber" density="comfortable" :rules="[requiredRule]" /> -->
-             <InputVehicleNumber v-model="vehicle.plateNumber" density="comfortable" :rules="[requiredRule]" />
+            <template v-for="plate in vehicle.plates" :key="plate.plateNumber">
+              <v-text-field v-model="plate.plateNumber" density="comfortable" :rules="[requiredRule]" class="mb-2" readonly>
+                <template #append-inner>
+                    <v-chip size="small"  class="ma-0" :color="formatVehicleStatus(plate?.status)?.color as string">{{  formatVehicleStatus(plate?.status)?.label }}</v-chip>
+                </template>
+              </v-text-field>
+            </template>
+
+            <template v-for="(plate, index) in newPlateNumbers" :key="index">
+                <v-row class="" :class="`${index === newPlateNumbers.length - 1 ? 'mb-1' : 'mb-5'}`" no-gutters>
+                  <v-col :cols="newPlateNumbers.length > 1 ? '11' : '12'">
+                    <InputVehicleNumber
+                      v-model="newPlateNumbers[index]"
+                      density="comfortable"
+                      placeholder="New Vehicle Number"
+                      :rules="[requiredRule]"
+                    />
+                  </v-col>
+
+                  <v-col :cols="newPlateNumbers.length > 1 ? '1' : '0'" class="d-flex align-start">
+                    <v-btn
+                      icon="mdi-delete-outline"
+                      variant="text"
+                      color="error"
+                      v-if="newPlateNumbers.length > 1"
+                      @click="removePlate(index)"
+                    />
+                  </v-col>
+                </v-row>
+              </template>
+
+              <v-btn
+                prepend-icon="mdi-plus"
+                variant="outlined"
+                class="text-none"
+                @click="addPlate"
+              >
+                Add Plate
+              </v-btn>
           </v-col>
 
           <v-col v-if="shouldShowField('remarks')" cols="12">
@@ -149,6 +189,59 @@
         </v-col>
       </v-row>
     </v-toolbar>
+
+    <v-dialog v-model="showMatchingPeopleDialog" max-width="700">
+      <v-card :loading="checkingNRIC">
+        <v-toolbar>
+          <v-toolbar-title>
+            <v-row no-gutters class="d-flex align-center justify-space-between">
+              <span class="font-weight-bold">
+                Matching Records for NRIC: {{ vehicle.nric }}
+              </span>
+              <span>
+                <v-btn icon="mdi-close" variant="text" @click="showMatchingPeopleDialog = false" />
+              </span>
+            </v-row>
+          </v-toolbar-title>
+        </v-toolbar>
+
+        <v-card-text>
+
+          <v-list lines="three">
+            <v-list-item v-if="matchingPeople.length > 0 || checkingNRIC" v-for="v in matchingPeople" :key="v._id" class="cursor-pointer">
+              <v-list-item-title>
+                {{ v.name }}
+              </v-list-item-title>
+
+              <v-list-item-subtitle>
+                Block {{ v.block }} - {{ v.level }} - {{ v.unitName }}
+              </v-list-item-subtitle>
+
+              <div class="mt-1">
+                <v-chip v-for="p in v.plates" :key="p?.plateNumber" size="small" class="mr-1">
+                  {{ p?.plateNumber }}
+                </v-chip>
+              </div>
+
+              <template #append>
+                <v-btn variant="flat" color="primary"  @click="selectNRICRecord(v)">Select</v-btn>
+              </template>
+
+            </v-list-item>
+              <v-empty-state v-else
+                icon="mdi-account-off"
+                title="No matching records found"
+                subtitle="The NRIC you entered does not match any existing records.">
+                <template #actions>
+                  <v-btn variant="flat" color="primary" @click="showMatchingPeopleDialog = false">Close</v-btn>
+                </template>
+              </v-empty-state>
+          </v-list>
+
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+
   </v-card>
 </template>
 
@@ -158,7 +251,7 @@
 
 const prop = defineProps({
   type: {
-    type: String as PropType<TVehicleType>,
+    type: String as PropType<TVehicleType | 'seasonpass'>,
     required: true
   },
   org: {
@@ -180,14 +273,15 @@ const prop = defineProps({
 });
 
 const { requiredRule, formatDateISO8601, debounce } = useUtils();
-const { addVehicle, getCustomSeasonPassTypes, updateVehicle, getVehicleByNRIC } = useVehicle();
+const { addVehicle, getCustomSeasonPassTypes, updateVehicle, formatVehicleStatus } = useVehicle();
 const { getSiteById, getSiteLevels, getSiteUnits } = useSiteSettings();
+const { findPersonByNRICMultipleResult } = usePeople();
 
 const emit = defineEmits(['back', 'select', 'done', 'error', 'close', 'close:all']);
 
 
-const vehicle = reactive<Partial<TVehicle>>({
-  plateNumber: '',
+const vehicle = reactive<Omit<ExceptPartial<TVehicle>, 'type'> & { type: TVehicleType | 'seasonpass' }>({
+  plates: [],
   type: prop.type,
   category: "resident",
   name: '',
@@ -205,15 +299,16 @@ const vehicle = reactive<Partial<TVehicle>>({
   _id: '',
 });
 
-
+const newPlateNumbers = ref<string[]>(['']);
+const disablePrefilledInputs = ref(true);
 
 const blocksArray = ref<TDefaultOptionObj[]>([]);
 const levelsArray = ref<TDefaultOptionObj[]>([]);
 const unitsArray = ref<TDefaultOptionObj[]>([]);
 const seasonPassTypeArray = ref<{ title: string, value: string }[]>([]);
 
-const matchingVehicles = ref<TVehicle[]>([]);
-const showVehicleMatchDialog = ref(false);
+const matchingPeople = ref<Partial<TPeople>[]>([]);
+const showMatchingPeopleDialog = ref(false);
 const checkingNRIC = ref(false);
 
 const defaultSeasonPassTypeArray = computed(() => {
@@ -231,7 +326,7 @@ const defaultSeasonPassTypeArray = computed(() => {
 });
 
 
-const typeFieldMap: Record<TVehicleType, string[]> = {
+const typeFieldMap: Record<TVehicleType | 'seasonpass', string[]> = {
   seasonpass: ['seasonPassType', 'name', 'phone', 'plateNumber', 'block', 'level', 'unit', 'start', 'end'],
   blocklist: ['name', 'nric', 'phone', 'plateNumber', 'remarks'],
   whitelist: ['name', 'nric', 'phone', 'plateNumber', 'block', 'level', 'unit']
@@ -256,7 +351,7 @@ const errorMessage = ref('');
 
 
 // fetch existing vehicle data if in edit mode
-if (prop.mode === 'edit') {
+if (prop.vehicleData) {
   const existingVehicleData = JSON.parse(JSON.stringify(prop.vehicleData || {}));
   Object.assign(vehicle, existingVehicleData);
 }
@@ -370,7 +465,14 @@ function handleChangeLevel(value: any) {
   refreshUnitsData();
 }
 
+function addPlate() {
+  newPlateNumbers.value.push('');
+}
+
 
+function removePlate(index: number) {
+  newPlateNumbers.value.splice(index, 1);
+}
 
 function back() {
   emit("back");
@@ -386,12 +488,13 @@ function close() {
   selectedSubscriptionDuration.value = null;
 }
 
-function formatVehicleType(type: TVehicleType): string {
+function formatVehicleType(type: TVehicleType | 'seasonpass'): string {
   switch (type) {
     case 'whitelist':
       return 'Whitelist';
     case 'blocklist':
       return 'Blocklist';
+
     case 'seasonpass':
       return 'Season Pass';
     default:
@@ -417,15 +520,16 @@ async function submit() {
     const { plateNumber, type, category, name, phoneNumber, block, level, unit, nric, remarks, seasonPassType, start, end, site, org } = vehicle
 
     let payload: Partial<TVehiclePayload> = {
-      plateNumber,
+      plateNumber: newPlateNumbers.value,
       name,
       phoneNumber,
+      type: type === 'seasonpass' ? 'whitelist' : type, // season pass will be created as whitelist type in backend with additional seasonPassType field,
+      nric
     };
 
     if (prop.mode === 'add') {
       payload = {
         ...payload,
-        type,
         category,
         site,
         org
@@ -452,7 +556,6 @@ async function submit() {
     } else if (vehicle.type === 'blocklist') {
       payload = {
         ...payload,
-        nric,
         remarks,
       };
     }
@@ -541,23 +644,41 @@ watch([() => vehicle.end, () => vehicle.start], () => {
 });
 
 
+function selectNRICRecord(record: TPeople) {
+
+  vehicle.name = record.name;
+  vehicle.phoneNumber = record.contact;
+  vehicle.block = Number(record.block);
+  vehicle.level = record.level;
+  vehicle.unit = record.unit;
+
+  vehicle.plates = record.plates || [];
+
+  disablePrefilledInputs.value = true;
+  showMatchingPeopleDialog.value = false;
+
+  refreshLevelsData();
+  refreshUnitsData();
+}
+
+
 async function checkNRIC() {
   if (!vehicle.nric || vehicle.nric.length < 5) return;
 
   checkingNRIC.value = true;
+  showMatchingPeopleDialog.value = true;
   try {
-    const res = await getVehicleByNRIC(vehicle.nric, prop.site);
-    if (res && res.vehicles && res.vehicles.length > 0) {
-      matchingVehicles.value = res.vehicles;
-      showVehicleMatchDialog.value = true;
+    const res = await findPersonByNRICMultipleResult(vehicle.nric, prop.site) as { items: TPeople[] } | null;
+
+    if (res?.items && res.items.length > 0) {
+      matchingPeople.value = res.items || []
     } else {
-      showVehicleMatchDialog.value = false;
-      matchingVehicles.value = [];
+      matchingPeople.value = [];
     }
+
+
   } catch (error) {
-    console.error('Error checking NRIC:', error);
-    showVehicleMatchDialog.value = false;
-    matchingVehicles.value = [];
+    console.error("NRIC search failed:", error);
   } finally {
     checkingNRIC.value = false;
   }
@@ -568,26 +689,27 @@ const debounceedCheckNRIC = debounce(checkNRIC, 500);
 watch(
   () => vehicle.nric,
   async (newNRIC) => {
-    if (!newNRIC || newNRIC.length < 5) return;
+    resetVehicleDetails();
+    matchingPeople.value = [];
+    if (!newNRIC || newNRIC.length < 3) return;
 
     debounceedCheckNRIC();
   }
 );
 
-watch(
-  () => vehicle.plateNumber,
-  (newData) => {
-   
-    const plateNumberExistsInNRICMatches = matchingVehicles.value.some(v => v.plateNumber === newData);
-    if (plateNumberExistsInNRICMatches) {
-      errorMessage.value = 'The vehicle number you entered is already associated with the NRIC provided. Please double check.';
-      showVehicleMatchDialog.value = true;
-    } else {
-      errorMessage.value = '';  
-      showVehicleMatchDialog.value = false;
-    }
+
+const resetVehicleDetails = () => {
+  vehicle.name = '';
+  vehicle.phoneNumber = '';
+  vehicle.block = '';
+  vehicle.level = '';
+  vehicle.unit = '';
+  vehicle.plates = [];
+  disablePrefilledInputs.value = false;
 }
-);
+
+watch()
+