refactor: add DrawerInfo of employee

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

@@ -16,6 +16,7 @@ import { Status } from 'stores/types';
 import { CustomerStats, Customer, CustomerBranch } from 'stores/customer/types';
 import { Employee, EmployeeHistory } from 'stores/employee/types';
 
+import DrawerInfo from 'components/DrawerInfo.vue';
 import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
 import PersonCard from 'components/home/PersonCard.vue';
 import StatCardComponent from 'components/StatCardComponent.vue';
@@ -23,13 +24,20 @@ import TooltipComponent from 'components/TooltipComponent.vue';
 import AddButton from 'components/AddButton.vue';
 import NoData from 'components/NoData.vue';
 import PaginationComponent from 'components/PaginationComponent.vue';
-import SideMenu from 'components/SideMenu.vue';
 import DialogForm from 'components/DialogForm.vue';
-
+import SideMenu from 'src/components/SideMenu.vue';
+import BasicInformation from 'src/components/03_customer-management/employee/BasicInformation.vue';
+import FormPerson from 'src/components/02_personnel-management/FormPerson.vue';
 import FormBasicInfo from './components/FormBasicInfo.vue';
 import CustomerInfoComponent from './components/CustomerBranch.vue';
-import { columnsCustomer, columnsEmployee } from './constant';
-import { useCustomerForm } from './form';
+import FormAddress from 'src/components/02_personnel-management/FormAddress.vue';
+
+import {
+  columnsCustomer,
+  columnsEmployee,
+  formMenuIconEmployee,
+} from './constant';
+import { useCustomerForm, useEmployeeForm } from './form';
 import { storeToRefs } from 'pinia';
 import ProfileBanner from 'src/components/ProfileBanner.vue';
 import ImageUploadDialog from 'src/components/ImageUploadDialog.vue';
@@ -44,9 +52,12 @@ const customerStore = useCustomerStore();
 const userBranchStore = useMyBranchStore();
 const employeeStore = useEmployeeStore();
 const customerFormStore = useCustomerForm();
+const employeeFormStore = useEmployeeForm();
 
 const { state: customerFormState, currentFormData: customerFormData } =
   storeToRefs(customerFormStore);
+const { state: employeeFormState, currentFromDataEmployee } =
+  storeToRefs(employeeFormStore);
 
 async function init() {
   utilsStore.currentTitle.title = 'customerManagement';
@@ -1201,6 +1212,12 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
                         :id="`row-table-${props.row.firstNameEN}`"
                         @click="
                           () => {
+                            employeeFormState.drawerModal = true;
+                            employeeFormStore.assignFormDataEmployee(
+                              props.row.id,
+                            );
+                            // $router.push(`/customer-management/${props.row.id}/branch`);
+
                             // openDialogInputForm('INFO', props.row.id);
                           }
                         "
@@ -1761,6 +1778,104 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
     clear-button
     @save="() => {}"
   ></ImageUploadDialog>
+
+  <!-- นายจ้างนิติ -->
+  <DrawerInfo
+    v-model:drawer-open="employeeFormState.drawerModal"
+    :is-edit="employeeFormState.isEmployeeEdit"
+    :edit-data="() => (employeeFormState.isEmployeeEdit = true)"
+    :title="
+      employeeFormState.currentEmployee
+        ? $i18n.locale === 'en-US'
+          ? `${employeeFormState.currentEmployee.firstNameEN} ${employeeFormState.currentEmployee.lastNameEN}`
+          : `${employeeFormState.currentEmployee.firstName} ${employeeFormState.currentEmployee.lastName}`
+        : '-'
+    "
+  >
+    <div class="q-mx-lg q-mt-lg">
+      <ProfileBanner
+        active
+        hideFade
+        :img="employeeFormState.profileUrl"
+        :menu="formMenuIconEmployee"
+      />
+
+      <div
+        class="col surface-1 q-mt-lg rounded bordered scroll row"
+        id="personnel-form"
+      >
+        <div class="col">
+          <div style="position: sticky; top: 0" class="q-pa-sm">
+            <SideMenu
+              :menu="[
+                {
+                  name: $t('formDialogTitleInformation'),
+                  anchor: 'form-information',
+                },
+                {
+                  name: $t('formDialogTitlePersonal'),
+                  anchor: 'form-personal',
+                },
+                {
+                  name: $t('formDialogTitlePersonnelAddress'),
+                  anchor: 'form-personal-address',
+                },
+                {
+                  name: $t('formDialogTitlePassport'),
+                  anchor: 'form-passport',
+                },
+                {
+                  name: $t('formDialogTitleVisa'),
+                  anchor: 'form-visa',
+                },
+              ]"
+              background="transparent"
+              :active="{
+                background: 'hsla(var(--blue-6-hsl) / .2)',
+                foreground: 'var(--blue-6)',
+              }"
+              scroll-element="#personnel-form"
+            />
+          </div>
+        </div>
+
+        <div class="col-10 q-pa-md q-gutter-y-xl">
+          <BasicInformation
+            prefix-id="drawer-info-employee"
+            employee
+            dense
+            outlined
+            separator
+            :title="$t('formDialogTitleInformation')"
+            :readonly="!employeeFormState.isEmployeeEdit"
+            :employee-owner-option="employeeStore.ownerOption"
+            v-model:customer-branch="employeeFormState.formDataEmployeeOwner"
+            v-model:employee-id="employeeFormState.currentEmployeeCode"
+            v-model:nrc-no="currentFromDataEmployee.nrcNo"
+            v-model:code="currentFromDataEmployee.code"
+            @filter-owner-branch="employeeFormStore.employeeFilterOwnerBranch"
+          />
+
+          <FormPerson
+            prefix-id="drawer-info-employee"
+            dense
+            outlined
+            employee
+            separator
+            :title="$t('personalInfo')"
+            :readonly="!employeeFormState.isEmployeeEdit"
+            v-model:firstName="currentFromDataEmployee.firstName"
+            v-model:lastName="currentFromDataEmployee.lastName"
+            v-model:firstNameEN="currentFromDataEmployee.firstNameEN"
+            v-model:lastNameEN="currentFromDataEmployee.lastNameEN"
+            v-model:gender="currentFromDataEmployee.gender"
+            v-model:birthDate="currentFromDataEmployee.dateOfBirth"
+            v-model:nationality="currentFromDataEmployee.nationality"
+          />
+        </div>
+      </div>
+    </div>
+  </DrawerInfo>
 </template>
 
 <style scoped>