refactor: full address on table

src/components/shared/SelectInput.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { selectFilterOptionRefMod } from 'src/stores/utils';
+
+const model = defineModel<string | Date | null>();
+const option = defineModel<[]>('option', { default: [] });
+
+const props = defineProps<{
+  id?: string;
+  readonly?: boolean;
+  clearable?: boolean;
+  label?: string;
+  rules?: ((value: string) => string | true)[];
+  disabledDates?: string[] | Date[] | ((date: Date) => boolean);
+}>();
+
+const options = ref<Record<string, unknown>[]>([]);
+let typeBusinessFilter = selectFilterOptionRefMod(option, options, 'label');
+</script>
+<template>
+  <q-select
+    outlined
+    clearable
+    use-input
+    fill-input
+    emit-value
+    map-options
+    hide-selected
+    hide-bottom-space
+    :hide-dropdown-icon="readonly"
+    input-debounce="0"
+    option-value="value"
+    option-label="label"
+    v-model="model"
+    class="col-md-6 col-12"
+    dense
+    :readonly="readonly"
+    :label="label"
+    :options="options"
+    :for="`${prefixId}-select-business-type`"
+    @filter="typeBusinessFilter"
+    :rules="[(val: string) => !!val || $t('form.error.required')]"
+  >
+    <template v-slot:no-option>
+      <q-item>
+        <q-item-section class="text-grey">
+          {{ $t('general.noData') }}
+        </q-item-section>
+      </q-item>
+    </template>
+  </q-select>
+</template>

src/pages/01_branch-management/MainPage.vue

@@ -348,6 +348,12 @@ const defaultFormData = {
   subDistrictId: '',
   districtId: '',
   provinceId: '',
+  moo: '',
+  mooEN: '',
+  soi: '',
+  soiEN: '',
+  street: '',
+  streetEN: '',
   lineId: '',
   webUrl: '',
   virtual: false,
@@ -450,6 +456,12 @@ async function fetchBranchById(id: string) {
       webUrl: res.webUrl,
       virtual: res.virtual,
       selectedImage: res.selectedImage,
+      moo: res.moo,
+      mooEN: res.mooEN,
+      soi: res.soi,
+      soiEN: res.soiEN,
+      street: res.street,
+      streetEN: res.streetEN,
 
       permitExpireDate: new Date(res.permitExpireDate),
       permitIssueDate: new Date(res.permitIssueDate),
@@ -571,7 +583,6 @@ async function triggerEdit(
 
   currentId.value = id;
 
-
   if (!currentRecord) return;
 
   currentEdit.value = {
@@ -1296,7 +1307,7 @@ watch(currentHq, () => {
                           () => {
                             if (
                               props.row.isHeadOffice &&
-                              props.row._count.branch !== 0
+                              props.row._count?.branch !== 0
                             ) {
                               fieldSelectedBranch.value = '';
                               inputSearch = '';
@@ -1408,19 +1419,25 @@ watch(currentHq, () => {
                         <q-td v-if="fieldSelected.includes('branchLabelTel')">
                           {{
                             props.row.contact !== undefined
-                              ? props.row.contact[0]?.telephoneNo
+                              ? props.row.contact[0]?.telephoneNo || '-'
                               : '-'
                           }}
                         </q-td>
 
                         <q-td v-if="fieldSelected.includes('contactName')">
-                          {{ props.row.contactName }}
+                          {{ props.row.contactName || '-' }}
                         </q-td>
 
                         <q-td
                           v-if="fieldSelected.includes('branchLabelAddress')"
                         >
-                          {{ props.row.address }}
+                          {{
+                            locale === 'eng'
+                              ? `${props.row.addressEN} ${props.row.mooEN && `Moo ${props.row.mooEN}`} ${props.row.soiEN && `Soi ${props.row.soiEN}`} ${props.row.streetEN && `${props.row.streetEN} Street`} ${props.row.subDistrict.nameEN} ${props.row.district.nameEN} ${props.row.province.nameEN} ${props.row.subDistrict.zipCode}` ||
+                                '-'
+                              : `${props.row.address} ${props.row.moo && `หมู่ ${props.row.moo}`} ${props.row.soi && `ซอย ${props.row.soi}`} ${props.row.street && `ถนน ${props.row.street}`} ต.${props.row.subDistrict.name} อ.${props.row.district.name} จ.${props.row.province.name} ${props.row.subDistrict.zipCode}` ||
+                                '-'
+                          }}
                         </q-td>
                         <q-td>
                           <KebabAction
@@ -1485,13 +1502,13 @@ watch(currentHq, () => {
                           :virtual-branch="props.row.virtual"
                           :id="`branch-card-${props.row.name}`"
                           :class="{
-                            'cursor-pointer': props.row._count.branch !== 0,
+                            'cursor-pointer': props.row._count?.branch !== 0,
                           }"
                           @click="
                             () => {
                               if (
                                 props.row.isHeadOffice &&
-                                props.row._count.branch !== 0
+                                props.row._count?.branch !== 0
                               ) {
                                 fieldSelectedBranch.value = '';
                                 inputSearch = '';
@@ -1524,14 +1541,16 @@ watch(currentHq, () => {
                                 ? props.row.nameEN
                                 : props.row.name,
                             taxNo: props.row.taxNo,
-                            branchLabelTel: props.row.contact
+                            branchLabelTel:
-                              .map((c: BranchContact) => c.telephoneNo)
+                              props.row.contact &&
-                              .join(','),
+                              props.row.contact
-                            contactName: props.row.contactName,
+                                .map((c: BranchContact) => c.telephoneNo || '-')
+                                .join(','),
+                            contactName: props.row.contactName || '-',
                             branchLabelAddress:
                               $i18n.locale === 'eng'
-                                ? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
+                                ? `${props.row.addressEN} ${props.row.mooEN && `Moo ${props.row.mooEN}`} ${props.row.soiEN && `Soi ${props.row.soiEN}`} ${props.row.streetEN && `${props.row.streetEN} Street`} ${props.row.subDistrict.nameEN} ${props.row.district.nameEN} ${props.row.province.nameEN} ${props.row.subDistrict.zipCode}`
-                                : `${props.row.address || ''} ${props.row.subDistrict?.name || ''} ${props.row.district?.name || ''} ${props.row.province?.name || ''}`,
+                                : `${props.row.address} ${props.row.moo && `หมู่ ${props.row.moo}`} ${props.row.soi && `ซอย ${props.row.soi}`} ${props.row.street && `ถนน ${props.row.street}`} ต.${props.row.subDistrict.name} อ.${props.row.district.name} จ.${props.row.province.name} ${props.row.subDistrict.zipCode}`,
                             branchImgUrl: `/branch/${props.row.id}/branch`,
                           }"
                           :field-selected="fieldSelected"
@@ -1876,7 +1895,12 @@ watch(currentHq, () => {
               v-model:province-id="formData.provinceId"
               v-model:district-id="formData.districtId"
               v-model:sub-district-id="formData.subDistrictId"
-              v-model:zip-code="formData.zipCode"
+              v-model:moo="formData.moo"
+              v-model:mooEN="formData.mooEN"
+              v-model:soi="formData.soi"
+              v-model:soiEN="formData.soiEN"
+              v-model:street="formData.street"
+              v-model:streetEN="formData.streetEN"
               :readonly="formType === 'view'"
             />
             <FormLocation
@@ -2235,6 +2259,12 @@ watch(currentHq, () => {
                 v-model:province-id="formData.provinceId"
                 v-model:district-id="formData.districtId"
                 v-model:sub-district-id="formData.subDistrictId"
+                v-model:moo="formData.moo"
+                v-model:mooEN="formData.mooEN"
+                v-model:soi="formData.soi"
+                v-model:soiEN="formData.soiEN"
+                v-model:street="formData.street"
+                v-model:streetEN="formData.streetEN"
                 v-model:zip-code="formData.zipCode"
                 class="q-mb-xl"
               />

src/pages/03_customer-management/MainPage.vue

@@ -1269,11 +1269,9 @@ const emptyCreateDialog = ref(false);
 
                         <q-td v-if="fieldSelected.includes('address')">
                           {{
-                            props.row.branch.length !== 0
+                            locale === 'eng'
-                              ? props.row.branch[0].address !== null
+                              ? `${props.row.branch[0].addressEN} ${props.row.branch[0].mooEN} ${props.row.branch[0].soiEN} ${props.row.branch[0].streetEN} ${props.row.branch[0].subDistrict.nameEN} ${props.row.branch[0].district.nameEN} ${props.row.branch[0].province.nameEN} ${props.row.branch[0].subDistrict.zipCode}`
-                                ? `${props.row.branch[0].address} ${props.row.branch[0].moo} ${props.row.branch[0].soi} ${props.row.branch[0].street} จ.${props.row.branch[0].province.name} อ.${props.row.branch[0].district.name} ต.${props.row.branch[0].subDistrict.name} ${props.row.branch[0].subDistrict.zipCode}`
+                              : `${props.row.branch[0].address} ${props.row.branch[0].moo} ${props.row.branch[0].soi} ${props.row.branch[0].street} ต.${props.row.branch[0].subDistrict.name} อ.${props.row.branch[0].district.name} จ.${props.row.branch[0].province.name} ${props.row.branch[0].subDistrict.zipCode}`
-                                : '-'
-                              : '-'
                           }}
                         </q-td>
 
@@ -1532,7 +1530,7 @@ const emptyCreateDialog = ref(false);
                                             props.row.branch[0].jobPosition,
                                           )
                                         : key === 'officeTel'
-                                          ? props.row.branch[0].officeTel
+                                          ? props.row.branch[0].officeTel || '-'
                                           : ''
                                   }}
                                 </span>

src/stores/branch/types.ts

@@ -41,6 +41,12 @@ export type Branch = {
   provinceId: string | null;
   addressEN: string;
   address: string;
+  moo?: string;
+  mooEN?: string;
+  soi?: string;
+  soiEN?: string;
+  street?: string;
+  streetEN?: string;
   nameEN: string;
   name: string;
   taxNo: string;
@@ -70,6 +76,12 @@ export type BranchCreate = {
   name: string;
   addressEN: string;
   address: string;
+  moo?: string;
+  mooEN?: string;
+  soi?: string;
+  soiEN?: string;
+  street?: string;
+  streetEN?: string;
   zipCode: string;
   email: string;
   longitude: string;