@7365admin1/layer-common 1.10.4 → 1.10.5

package/components/VehicleForm.vue

@@ -0,0 +1,600 @@
+<template>
+  <v-card width="100%" :loading="processing">
+    <v-toolbar>
+      <v-row no-gutters class="fill-height px-6 d-flex ga-2 justify-space-between" align="center">
+        <span class="font-weight-bold text-h5 text-capitalize">
+          {{ prop.mode }} Vehicle <span>({{ formatVehicleType(type) }})</span>
+        </span>
+        <span>
+          <ButtonClose @click="emit('close:all')" icon-only />
+        </span>
+      </v-row>
+    </v-toolbar>
+
+    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-3">
+      <span class="text-subtitle-1 w-100 font-weight-bold mb-3">General Information</span>
+      <v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorMessage = ''">
+        <v-row no-gutters class="pt-4">
+          <v-col v-if="shouldShowField('seasonPassType')" cols="12">
+            <InputLabel class="text-capitalize" title="Season Pass Type" required />
+            <v-combobox v-model.trim="vehicle.seasonPassType" v-model:search="seasonPassTypeInput" :hide-no-data="false"
+              @update:modelValue="onSeasonPassTypeSelected" :items="seasonPassTypeArray" :rules="[requiredRule]"
+              item-title="title" item-value="value" variant="outlined" density="comfortable" persistent-hint
+              small-chips>
+              <template v-slot:no-data>
+                <v-list-item>
+                  <v-list-item-title>
+                    No results matching "<strong>{{ seasonPassTypeInput }}</strong>". This value will be added as new
+                    option.
+                  </v-list-item-title>
+                </v-list-item>
+              </template>
+            </v-combobox>
+          </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-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]" />
+          </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]" />
+          </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"
+              @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"
+              :rules="[requiredRule]" />
+          </v-col>
+
+          <v-col v-if="shouldShowField('plateNumber')" cols="12">
+            <InputLabel class="text-capitalize" title="Vehicle Number" required />
+            <!-- <v-text-field v-model="vehicle.plateNumber" density="comfortable" :rules="[requiredRule]" /> -->
+             <InputVehicleNumber v-model="vehicle.plateNumber" density="comfortable" :rules="[requiredRule]" />
+          </v-col>
+
+          <v-col v-if="shouldShowField('remarks')" cols="12">
+            <InputLabel class="text-capitalize" title="Remarks" required />
+            <v-textarea v-model="vehicle.remarks" density="comfortable" :rows="3" no-resize :rules="[requiredRule]" />
+          </v-col>
+
+          <v-col v-if="shouldShowField('start')" cols="12">
+            <v-expand-transition v-if="showSubscriptionDateOptions">
+              <v-row no-gutters>
+                <v-row dense justify="space-between">
+                  <template v-for="option in subscriptionOptions" :key="option.value">
+                    <v-col cols="4">
+                      <v-btn :text="option.label" class="text-capitalize" min-width="120" :ripple="false"
+                        :class="[option.value === selectedSubscriptionDuration ? 'button-outline-class' : '']"
+                        @click="selectedSubscriptionDuration = option.value" />
+                    </v-col>
+
+                  </template>
+                </v-row>
+
+                <v-row no-gutters class="mt-5">
+                  <v-col cols="12">
+                    <InputLabel class="text-capitalize" title="Start Date" required />
+                    <InputDateTimePicker ref="startDateRef" v-model="vehicle.start" :rules="[validStartDateRule]" />
+                  </v-col>
+
+                  <v-col cols="12">
+                    <InputLabel class="text-capitalize" title="Expiry Date" required />
+                    <InputDateTimePicker ref="expiryDateRef" v-model="vehicle.end" :rules="[validExpiryDateRule]" />
+                  </v-col>
+                </v-row>
+              </v-row>
+
+
+            </v-expand-transition>
+
+            <v-col cols="12" :class="[showSubscriptionDateOptions && 'mt-5']">
+              <v-row justify="center">
+                <v-col cols="6">
+                  <v-btn block color="primary" variant="text" class="text-none font-weight-bold"
+                    :text="showSubscriptionDateOptions ? 'Hide Subscription Options' : 'Show Subscription Options'"
+                    @click="showSubscriptionDateOptions = !showSubscriptionDateOptions"></v-btn>
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-col>
+
+          <v-col cols="12">
+            <v-row no-gutters>
+              <v-col cols="12" class="text-center">
+                <span class="text-none text-subtitle-2 font-weight-medium text-error">
+                  {{ message }}
+                </span>
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+      </v-form>
+    </v-card-text>
+    <v-row no-gutters class="w-100" v-if="errorMessage">
+      <p class="text-error w-100 text-center text-subtitle-2">{{ errorMessage }}</p>
+    </v-row>
+    <v-toolbar density="compact">
+      <v-row no-gutters>
+        <v-col cols="6">
+          <v-btn v-if="prop.mode === 'add'" tile block variant="text" class="text-none" size="48" @click="back"
+            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 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>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+
+
+
+const prop = defineProps({
+  type: {
+    type: String as PropType<TVehicleType>,
+    required: true
+  },
+  org: {
+    type: String,
+    required: true
+  },
+  site: {
+    type: String,
+    required: true
+  },
+  mode: {
+    type: String as PropType<'add' | 'edit'>,
+    default: 'add'
+  },
+  vehicleData: {
+    type: Object as PropType<Partial<TVehicle> | null>,
+    default: null
+  }
+});
+
+const { requiredRule, formatDateISO8601, debounce } = useUtils();
+const { addVehicle, getCustomSeasonPassTypes, updateVehicle, getVehicleByNRIC } = useVehicle();
+const { getSiteById, getSiteLevels, getSiteUnits } = useSiteSettings();
+
+const emit = defineEmits(['back', 'select', 'done', 'error', 'close', 'close:all']);
+
+
+const vehicle = reactive<Partial<TVehicle>>({
+  plateNumber: '',
+  type: prop.type,
+  category: "resident",
+  name: '',
+  phoneNumber: '',
+  block: '',
+  level: '',
+  unit: '',
+  nric: '',
+  remarks: '',
+  seasonPassType: '',
+  start: '',
+  end: '',
+  site: prop.site,
+  org: prop.org,
+  _id: '',
+});
+
+
+
+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 checkingNRIC = ref(false);
+
+const defaultSeasonPassTypeArray = computed(() => {
+  return [
+    'Resident Season Pass',
+    'Tenant/Leaseholder Pass',
+    'VIP/Preferred Parking Pass',
+    'Visitor Season Pass',
+    'Staff & Service Provider Pass',
+    'Business Tenant Pass',
+  ].map((item) => ({
+    title: item,
+    value: item
+  }))
+});
+
+
+const typeFieldMap: Record<TVehicleType, 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']
+};
+
+const shouldShowField = (fieldKey: string): boolean => {
+  const visibleFields = typeFieldMap[prop.type as TVehicleType];
+  return visibleFields?.includes(fieldKey);
+};
+
+
+const validForm = ref(false);
+const seasonPassTypeInput = ref('')
+const formRef = ref<HTMLFormElement | null>(null);
+const startDateRef = ref<HTMLInputElement | null>(null)
+const expiryDateRef = ref<HTMLInputElement | null>(null)
+const processing = ref(false);
+const message = ref('');
+const selectedSubscriptionDuration = ref<string | null>('custom')
+const showSubscriptionDateOptions = ref(false)
+const errorMessage = ref('');
+
+
+// fetch existing vehicle data if in edit mode
+if (prop.mode === 'edit') {
+  const existingVehicleData = JSON.parse(JSON.stringify(prop.vehicleData || {}));
+  Object.assign(vehicle, existingVehicleData);
+}
+
+
+const { data: siteData, refresh: refreshSiteData } = useLazyAsyncData(
+  `fetch-site-data-${prop.site}`,
+  async () => await getSiteById(prop.site));
+
+const { data: levelsData, refresh: refreshLevelsData } = useLazyAsyncData(
+  `fetch-levels-data-${prop.site}-${vehicle.block}`,
+  async () => {
+    if (!vehicle.block) return Promise.resolve(null);;
+    return await getSiteLevels(prop.site, { block: Number(vehicle.block) })
+  });
+
+const { data: unitsData, refresh: refreshUnitsData } = useLazyAsyncData(
+  `fetch-units-data-${prop.site}-${vehicle.level}`,
+  async () => {
+    if (!vehicle.level) return Promise.resolve(null);;
+    return await getSiteUnits(prop.site, Number(vehicle.block), vehicle.level)
+  });
+
+
+const { data: seasonPassTypeData, refresh: refreshSeasonPassTypeData } = useLazyAsyncData(
+  `fetch-season-pass-type-data-${prop.site}`,
+  async () => await getCustomSeasonPassTypes(prop.site));
+
+
+watch(
+  siteData,
+  (newVal) => {
+    const siteDataValue = newVal as any;
+    if (siteDataValue) {
+      const numberOfBlocks = siteDataValue.metadata?.block || 0;
+      for (let i = 1; i <= numberOfBlocks; i++) {
+        blocksArray.value.push({
+          title: `Block ${i}`,
+          value: i
+        });
+      }
+
+    } else {
+      blocksArray.value = [];
+    }
+  }, { immediate: true });
+
+
+watch(
+  levelsData,
+  (newVal: any) => {
+    if (newVal) {
+      const arr = newVal.levels || [];
+      levelsArray.value = arr?.map((level: any) => ({
+        title: level,
+        value: level
+      }));
+    } else {
+      levelsArray.value = [];
+    }
+  }, { immediate: true });
+
+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 = [];
+    }
+  }, { immediate: true });
+
+
+watch(
+  seasonPassTypeData,
+  (newVal) => {
+    if (Array.isArray(newVal)) {
+      const filteredArr = newVal.filter((item: any) => item.title && item.value);
+      seasonPassTypeArray.value = [...defaultSeasonPassTypeArray.value, ...filteredArr];
+    } else {
+      seasonPassTypeArray.value = defaultSeasonPassTypeArray.value;
+    }
+  }, { immediate: true });
+
+
+
+
+const subscriptionOptions = computed(() => {
+  return [
+    { label: 'Custom', value: 'custom' },
+    { label: '1 Week', value: '1week' },
+    { label: '2 Weeks', value: '2weeks' },
+    { label: '3 Weeks', value: '3weeks' },
+    { label: '4 Weeks', value: '4weeks' },
+    { label: '5 Weeks', value: '5weeks' },
+  ];
+})
+
+function handleChangeBlock(value: any) {
+  vehicle.level = '';
+  vehicle.unit = '';
+  refreshLevelsData();
+}
+
+function handleChangeLevel(value: any) {
+  vehicle.unit = '';
+  refreshUnitsData();
+}
+
+
+
+function back() {
+  emit("back");
+  message.value = '';
+  showSubscriptionDateOptions.value = false;
+  selectedSubscriptionDuration.value = null;
+}
+
+function close() {
+  emit("close");
+  message.value = '';
+  showSubscriptionDateOptions.value = false;
+  selectedSubscriptionDuration.value = null;
+}
+
+function formatVehicleType(type: TVehicleType): string {
+  switch (type) {
+    case 'whitelist':
+      return 'Whitelist';
+    case 'blocklist':
+      return 'Blocklist';
+    case 'seasonpass':
+      return 'Season Pass';
+    default:
+      return '';
+  }
+}
+
+function onSeasonPassTypeSelected(val: string | { title: string, value: string }) {
+  vehicle.seasonPassType = typeof val === 'object' ? val?.value : val;
+}
+
+
+async function submit() {
+  errorMessage.value = '';
+  processing.value = true;
+  try {
+    const SPTVal = vehicle?.seasonPassType as string;
+    if (SPTVal) {
+      vehicle.seasonPassType = SPTVal?.charAt(0)?.toUpperCase() + SPTVal?.slice(1)?.toLowerCase();
+    }
+
+
+    const { plateNumber, type, category, name, phoneNumber, block, level, unit, nric, remarks, seasonPassType, start, end, site, org } = vehicle
+
+    let payload: Partial<TVehiclePayload> = {
+      plateNumber,
+      name,
+      phoneNumber,
+    };
+
+    if (prop.mode === 'add') {
+      payload = {
+        ...payload,
+        type,
+        category,
+        site,
+        org
+      }
+    }
+
+    if (vehicle.type === 'whitelist') {
+      payload = {
+        ...payload,
+        block,
+        level,
+        unit,
+      };
+    } else if (vehicle.type === 'seasonpass') {
+      payload = {
+        ...payload,
+        seasonPassType,
+        block,
+        level,
+        unit,
+        start,
+        end
+      };
+    } else if (vehicle.type === 'blocklist') {
+      payload = {
+        ...payload,
+        nric,
+        remarks,
+      };
+    }
+
+    if (prop.mode === 'add') {
+      await addVehicle(payload);
+    } else if (prop.mode === 'edit') {
+      const vehicleId = vehicle?._id as string;
+      await updateVehicle(vehicleId, payload);
+    }
+    emit("done");
+
+
+  } catch (error: any) {
+    const err = error?.data?.message
+    errorMessage.value = err || `Failed to ${prop.mode === 'add' ? 'add' : 'update'} vehicle. Please try again.`;
+  } finally {
+    processing.value = false;
+  }
+}
+
+// const showComponent = (value: TVehicleType[]) => {
+//   return value.includes(prop.type);
+
+// }
+
+watch(selectedSubscriptionDuration, (duration) => {
+
+
+  const dateNowISO = formatDateISO8601(new Date())
+  const weeksLaterISO = (week: number) => {
+    const now = new Date()
+    const dateWeekLater = new Date(now.getTime() + (week * 7) * 24 * 60 * 60 * 1000)
+    return formatDateISO8601(dateWeekLater)
+  }
+
+  if (duration === 'custom') {
+    vehicle.start = '';
+    vehicle.end = '';
+  } else if (duration === '1week') {
+    vehicle.start = dateNowISO
+    vehicle.end = weeksLaterISO(1)
+  } else if (duration === '2weeks') {
+    vehicle.start = dateNowISO
+    vehicle.end = weeksLaterISO(2)
+  } else if (duration === '3weeks') {
+    vehicle.start = dateNowISO
+    vehicle.end = weeksLaterISO(3)
+  } else if (duration === '4weeks') {
+    vehicle.start = dateNowISO
+    vehicle.end = weeksLaterISO(4)
+  } else if (duration === '5weeks') {
+    vehicle.start = dateNowISO
+    vehicle.end = weeksLaterISO(5)
+  }
+})
+
+function validStartDateRule(value: string) {
+  const expiryDateISO = vehicle.end;
+  if (!value && expiryDateISO) {
+    return 'Start Date is required';
+  }
+
+  return true;
+}
+
+function validExpiryDateRule(value: string) {
+  const startDateISO = vehicle.start;
+
+  if (!value && startDateISO) {
+    return 'Expiry Date is required';
+  }
+
+  if (value && startDateISO) {
+    const expiry = new Date(value);
+    const start = new Date(startDateISO as string);
+    return expiry > start || 'Expiry date must be later than start date';
+  }
+
+  return true;
+}
+
+watch([() => vehicle.end, () => vehicle.start], () => {
+  (expiryDateRef.value as any)?.validate();
+  (startDateRef.value as any)?.validate();
+});
+
+
+async function checkNRIC() {
+  if (!vehicle.nric || vehicle.nric.length < 5) return;
+
+  checkingNRIC.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;
+    } else {
+      showVehicleMatchDialog.value = false;
+      matchingVehicles.value = [];
+    }
+  } catch (error) {
+    console.error('Error checking NRIC:', error);
+    showVehicleMatchDialog.value = false;
+    matchingVehicles.value = [];
+  } finally {
+    checkingNRIC.value = false;
+  }
+}
+
+const debounceedCheckNRIC = debounce(checkNRIC, 500);
+
+watch(
+  () => vehicle.nric,
+  async (newNRIC) => {
+    if (!newNRIC || newNRIC.length < 5) 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;
+    }
+}
+);
+
+
+
+
+</script>
+<style scoped>
+.button-outline-class {
+  border: 1px solid rgba(var(--v-theme-primary));
+}
+</style>