refactor: add contact information fields to agency forms and update data models

src/components/07_agencies-management/FormBasicInfoAgencies.vue

@@ -14,6 +14,9 @@ defineProps<{
 const group = defineModel('group', { default: '' });
 const name = defineModel('name', { default: '' });
 const nameEn = defineModel('nameEn', { default: '' });
+const contactName = defineModel('contactName', { default: '' });
+const email = defineModel('email', { default: '' });
+const contactTel = defineModel('contactTel', { default: '' });
 
 type Options = { label: string; value: string };
 </script>
@@ -35,7 +38,7 @@ type Options = { label: string; value: string };
 
     <div class="col-12 row q-col-gutter-sm">
       <SelectInput
-        :class="{ col: $q.screen.lt.md }"
+        class="col"
         :disable="!readonly && onDrawer"
         :readonly="readonly"
         for="input-agencies-code"
@@ -62,7 +65,7 @@ type Options = { label: string; value: string };
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-md col-12"
+        class="col-md-4 col-12"
         :label="$t('agencies.name')"
         v-model="name"
         :rules="[(val: string) => !!val || $t('form.error.required')]"
@@ -73,10 +76,78 @@ type Options = { label: string; value: string };
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-md col-12"
+        class="col-md-4 col-12"
         :label="'Agencies Name'"
         v-model="nameEn"
       />
+
+      <q-input
+        for="input-agencies-contact-name"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-md-4 col-12"
+        :label="$t('agencies.contactName')"
+        :model-value="readonly ? contactName || '-' : contactName"
+        @update:model-value="
+          (v) => (typeof v === 'string' ? (contactName = v) : '')
+        "
+      />
+      <q-input
+        for="input-agencies-email"
+        dense
+        outlined
+        hide-bottom-space
+        :readonly="readonly"
+        :label="$t('form.email')"
+        :rules="
+          readonly
+            ? undefined
+            : [
+                (v: string) =>
+                  !v ||
+                  /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g.test(v) ||
+                  $t('form.error.invalid'),
+              ]
+        "
+        class="col-md-4 col-12"
+        :model-value="readonly ? email || '-' : email"
+        @update:model-value="(v) => (typeof v === 'string' ? (email = v) : '')"
+        @clear="email = ''"
+      >
+        <template #prepend>
+          <q-icon
+            size="xs"
+            name="mdi-email-outline"
+            class="cursor-pointer"
+            color="primary"
+          />
+        </template>
+      </q-input>
+      <q-input
+        for="input-agencies-contact-tel"
+        id="input-agencies-contact-tel"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-md-4 col-12"
+        :label="$t('form.telephone')"
+        :model-value="readonly ? contactTel || '-' : contactTel"
+        @update:model-value="
+          (v) => (typeof v === 'string' ? (contactTel = v) : '')
+        "
+      >
+        <template #prepend>
+          <q-icon
+            size="xs"
+            name="mdi-phone-outline"
+            class="cursor-pointer"
+            color="primary"
+          />
+        </template>
+      </q-input>
     </div>
   </div>
 </template>

src/pages/07_agencies-management/AgenciesDialog.vue

@@ -10,6 +10,7 @@ import DrawerInfo from 'src/components/DrawerInfo.vue';
 import DialogForm from 'src/components/DialogForm.vue';
 import ProfileBanner from 'src/components/ProfileBanner.vue';
 import SideMenu from 'src/components/SideMenu.vue';
+import FormBank from 'src/components/01_branch-management/FormBank.vue';
 import FormBasicInfoAgencies from 'src/components/07_agencies-management/FormBasicInfoAgencies.vue';
 import {
   UndoButton,
@@ -19,6 +20,7 @@ import {
 } from 'src/components/button';
 import AddressForm from 'src/components/form/AddressForm.vue';
 import ImageUploadDialog from 'src/components/ImageUploadDialog.vue';
+import { BankBook } from 'src/stores/branch/types';
 
 const institutionStore = useInstitution();
 
@@ -73,6 +75,9 @@ const data = defineModel<InstitutionPayload>('data', {
     group: '',
     name: '',
     nameEN: '',
+    contactName: '',
+    contactEmail: '',
+    contactTel: '',
     code: '',
     addressEN: '',
     address: '',
@@ -88,6 +93,19 @@ const data = defineModel<InstitutionPayload>('data', {
     selectedImage: '',
   },
 });
+const formBankBook = defineModel<BankBook[]>('formBankBook', {
+  default: [
+    {
+      bankName: '',
+      accountNumber: '',
+      bankBranch: '',
+      accountName: '',
+      accountType: '',
+      currentlyUse: true,
+      bankUrl: '',
+    },
+  ],
+});
 
 function viewImage() {
   imageState.imageDialog = true;
@@ -237,11 +255,15 @@ watch(
             :menu="[
               {
                 name: $t('form.field.basicInformation'),
-                anchor: 'agencies-basic-info',
+                anchor: 'agencies-form-basic-info',
               },
               {
                 name: $t('general.address'),
-                anchor: 'agencies-address-info',
+                anchor: 'agencies-form-address-info',
+              },
+              {
+                name: $t('agencies.bankInfo'),
+                anchor: 'agencies-form-bank-info',
               },
             ]"
             background="transparent"
@@ -275,14 +297,17 @@ watch(
           </div>
         </div>
         <FormBasicInfoAgencies
-          id="agencies-basic-info"
+          id="agencies-form-basic-info"
           class="q-mb-xl"
           v-model:group="data.group"
           v-model:name="data.name"
           v-model:name-en="data.nameEN"
+          v-model:contact-name="data.contactName"
+          v-model:email="data.contactEmail"
+          v-model:contact-tel="data.contactTel"
         />
         <AddressForm
-          id="agencies-address-info"
+          id="agencies-form-address-info"
           dense
           :prefix-id="''"
           v-model:address="data.address"
@@ -297,6 +322,14 @@ watch(
           v-model:district-id="data.districtId"
           v-model:sub-district-id="data.subDistrictId"
         />
+        <FormBank
+          id="agencies-form-bank-info"
+          title="agencies.bankInfo"
+          class="q-pt-xl"
+          dense
+          single
+          v-model:bank-book-list="formBankBook"
+        />
       </div>
     </div>
   </DialogForm>
@@ -427,13 +460,17 @@ watch(
                     name: $t('general.address'),
                     anchor: 'agencies-address-info',
                   },
+                  {
+                    name: $t('agencies.bankInfo'),
+                    anchor: 'agencies-bank-info',
+                  },
                 ]"
                 background="transparent"
                 :active="{
                   background: 'hsla(var(--blue-6-hsl) / .2)',
                   foreground: 'var(--blue-6)',
                 }"
-                scroll-element="#agencies-form-content"
+                scroll-element="#agencies-view-content"
               />
             </div>
           </div>
@@ -444,7 +481,7 @@ watch(
               'q-py-md q-pr-md ': $q.screen.gt.sm,
               'q-pa-sm': !$q.screen.gt.sm,
             }"
-            id="user-form-content"
+            id="agencies-view-content"
             style="height: 100%; max-height: 100; overflow-y: auto"
           >
             <FormBasicInfoAgencies
@@ -455,6 +492,9 @@ watch(
               v-model:group="data.group"
               v-model:name="data.name"
               v-model:name-en="data.nameEN"
+              v-model:contact-name="data.contactName"
+              v-model:email="data.contactEmail"
+              v-model:contact-tel="data.contactTel"
             />
             <AddressForm
               id="agencies-address-info"
@@ -473,6 +513,15 @@ watch(
               v-model:district-id="data.districtId"
               v-model:sub-district-id="data.subDistrictId"
             />
+            <FormBank
+              id="agencies-bank-info"
+              title="agencies.bankInfo"
+              class="q-pt-xl"
+              dense
+              single
+              :readonly
+              v-model:bank-book-list="formBankBook"
+            />
           </div>
         </div>
       </div>

src/pages/07_agencies-management/MainPage.vue

@@ -85,6 +85,9 @@ const blankFormData: InstitutionPayload = {
   code: '',
   name: '',
   nameEN: '',
+  contactName: '',
+  contactEmail: '',
+  contactTel: '',
   addressEN: '',
   address: '',
   soi: '',
@@ -98,6 +101,16 @@ const blankFormData: InstitutionPayload = {
   provinceId: '',
   selectedImage: '',
   status: 'CREATED',
+  bank: [
+    {
+      bankName: '',
+      accountNumber: '',
+      bankBranch: '',
+      accountName: '',
+      accountType: '',
+      currentlyUse: true,
+    },
+  ],
 };
 
 const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
@@ -160,6 +173,19 @@ function assignFormData(data: Institution) {
     provinceId: data.provinceId,
     selectedImage: data.selectedImage,
     status: data.status,
+    contactEmail: data.contactEmail,
+    contactName: data.contactName,
+    contactTel: data.contactTel,
+    bank: [
+      {
+        bankName: data.bank[0]?.bankName,
+        accountNumber: data.bank[0]?.accountNumber,
+        bankBranch: data.bank[0]?.bankBranch,
+        accountName: data.bank[0]?.accountName,
+        accountType: data.bank[0]?.accountType,
+        currentlyUse: data.bank[0]?.currentlyUse,
+      },
+    ],
   };
 }
 
@@ -169,6 +195,9 @@ async function submit(opt?: { selectedImage: string }) {
     code: formData.value.code,
     name: formData.value.name,
     nameEN: formData.value.nameEN,
+    contactName: formData.value.contactName,
+    contactEmail: formData.value.contactEmail,
+    contactTel: formData.value.contactTel,
     addressEN: formData.value.addressEN,
     address: formData.value.address,
     soi: formData.value.soi,
@@ -181,6 +210,14 @@ async function submit(opt?: { selectedImage: string }) {
     districtId: formData.value.districtId,
     provinceId: formData.value.provinceId,
     status: formData.value.status,
+    bank: formData.value.bank.map((v) => ({
+      bankName: v.bankName,
+      accountNumber: v.accountNumber,
+      bankBranch: v.bankBranch,
+      accountName: v.accountName,
+      accountType: v.accountType,
+      currentlyUse: v.currentlyUse,
+    })),
   };
   if (
     (pageState.isDrawerEdit && currAgenciesData.value?.id) ||
@@ -922,6 +959,7 @@ watch(
     v-model="pageState.addModal"
     v-model:drawer-model="pageState.viewDrawer"
     v-model:data="formData"
+    v-model:form-bank-book="formData.bank"
     v-model:on-create-image-list="onCreateImageList"
   />
 </template>