refactor: add FormAddress

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

@@ -1791,18 +1791,26 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
           : `${employeeFormState.currentEmployee.firstName} ${employeeFormState.currentEmployee.lastName}`
         : '-'
     "
+    :badgeClass="
+      currentFromDataEmployee.gender === 'male'
+        ? 'app-bg-male text-white'
+        : currentFromDataEmployee.gender === 'female'
+          ? 'app-bg-female text-white'
+          : ''
+    "
   >
-    <div class="q-mx-lg q-mt-lg">
+    <div class="full-height full-width column">
-      <ProfileBanner
+      <div class="q-mx-lg q-mt-lg">
-        active
+        <ProfileBanner
-        hideFade
+          active
-        :img="employeeFormState.profileUrl"
+          hideFade
-        :menu="formMenuIconEmployee"
+          :img="employeeFormState.profileUrl"
-      />
+          :menu="formMenuIconEmployee"
-
+        />
+      </div>
       <div
-        class="col surface-1 q-mt-lg rounded bordered scroll row"
+        class="col surface-1 q-ma-lg rounded bordered scroll row"
-        id="personnel-form"
+        id="employee-form"
       >
         <div class="col">
           <div style="position: sticky; top: 0" class="q-pa-sm">
@@ -1834,13 +1842,13 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
                 background: 'hsla(var(--blue-6-hsl) / .2)',
                 foreground: 'var(--blue-6)',
               }"
-              scroll-element="#personnel-form"
+              scroll-element="#employee-form"
             />
           </div>
         </div>
-
         <div class="col-10 q-pa-md q-gutter-y-xl">
           <BasicInformation
+            id="form-information"
             prefix-id="drawer-info-employee"
             employee
             dense
@@ -1855,8 +1863,8 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
             v-model:code="currentFromDataEmployee.code"
             @filter-owner-branch="employeeFormStore.employeeFilterOwnerBranch"
           />
-
           <FormPerson
+            id="form-personal"
             prefix-id="drawer-info-employee"
             dense
             outlined
@@ -1872,6 +1880,18 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
             v-model:birthDate="currentFromDataEmployee.dateOfBirth"
             v-model:nationality="currentFromDataEmployee.nationality"
           />
+          <FormAddress
+            id="form-personal-address"
+            v-model:address="currentFromDataEmployee.address"
+            v-model:addressEN="currentFromDataEmployee.addressEN"
+            v-model:provinceId="currentFromDataEmployee.provinceId"
+            v-model:districtId="currentFromDataEmployee.districtId"
+            v-model:subDistrictId="currentFromDataEmployee.subDistrictId"
+            v-model:zipCode="currentFromDataEmployee.zipCode"
+            :readonly="!employeeFormState.isEmployeeEdit"
+            prefix-id="drawer-info-personnel"
+            dense
+          />
         </div>
       </div>
     </div>