refactor: drawer employee

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

@@ -3,21 +3,11 @@ import { ref, watch, onMounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useRoute, useRouter } from 'vue-router';
-import { getUserId, getRole } from 'src/services/keycloak';
+import { canAccess } from 'stores/utils';
-import { baseUrl, setPrefixName, waitAll } from 'src/stores/utils';
-import { dateFormat } from 'src/utils/datetime';
-import { dialogCheckData, canAccess } from 'stores/utils';
 
-import useOcrStore from 'stores/ocr';
 import useCustomerStore from 'stores/customer';
 import useEmployeeStore from 'stores/employee';
-import useMyBranchStore from 'stores/my-branch';
+import { dialog } from 'stores/utils';
-import {
-  dialog,
-  notify,
-  resetScrollBar,
-  capitalizeFirstLetter,
-} from 'stores/utils';
 import { useNavigator } from 'src/stores/navigator';
 import useFlowStore from 'stores/flow';
 import { Status } from 'stores/types';
@@ -25,68 +15,21 @@ import {
   CustomerStats,
   Customer,
   CustomerBranch,
-  CustomerBranchCreate,
   CustomerType,
 } from 'stores/customer/types';
 import { Employee, EmployeeHistory } from 'stores/employee/types';
-import {
+import { SaveButton } from 'components/button';
-  EditButton,
-  DeleteButton,
-  SaveButton,
-  UndoButton,
-} from 'components/button';
 
 import TabCustomer from './TabCustomer.vue';
-import ExpirationDate from 'components/03_customer-management/ExpirationDate.vue';
-import { AddressForm } from 'components/form';
-import BranchCard from 'src/components/01_branch-management/BranchCard.vue';
-import ItemCard from 'src/components/ItemCard.vue';
-import DrawerInfo from 'components/DrawerInfo.vue';
 import FloatingActionButton from 'components/FloatingActionButton.vue';
 import StatCardComponent from 'components/StatCardComponent.vue';
-import TooltipComponent from 'components/TooltipComponent.vue';
-import EmptyAddButton from 'components/AddButton.vue';
-import NoData from 'components/NoData.vue';
-import PaginationComponent from 'components/PaginationComponent.vue';
-import BasicInformation from 'components/03_customer-management/employee/BasicInformation.vue';
-import FormPerson from 'components/02_personnel-management/FormPerson.vue';
-import { EmployerFormBasicInfo, EmployerFormBranch } from './components';
 import BranchPage from './BranchPage.vue';
-import FormEmployeePassport from 'components/03_customer-management/FormEmployeePassport.vue';
-import DialogForm from 'components/DialogForm.vue';
-import SideMenu from 'components/SideMenu.vue';
-import TableEmpoloyee from 'src/components/03_customer-management/TableEmpoloyee.vue';
-import HistoryEditComponent from 'src/components/03_customer-management/HistoryEditComponent.vue';
-import { calculateAge, toISOStringWithTimezone } from 'src/utils/datetime';
-import { runOcr, parseResultMRZ } from 'src/utils/ocr';
-import { formatAddress } from 'src/utils/address';
-import {
-  UploadFileGroup,
-  FormTm6,
-  NoticeJobEmployment,
-} from 'components/upload-file';
 
-import {
+import { columnsCustomer, columnsEmployee } from './constant';
-  columnsCustomer,
-  columnsEmployee,
-  uploadFileListEmployee,
-  columnsAttachment,
-  dialogCreateCustomerItem,
-} from './constant';
 import { useCustomerForm, useEmployeeForm } from './form';
 import { storeToRefs } from 'pinia';
-import ProfileBanner from 'components/ProfileBanner.vue';
+
-import ImageUploadDialog from 'components/ImageUploadDialog.vue';
-import FormEmployeeHealthCheck from 'components/03_customer-management/FormEmployeeHealthCheck.vue';
-import FormEmployeeWorkHistory from 'components/03_customer-management/FormEmployeeWorkHistory.vue';
-import FormEmployeeOther from 'components/03_customer-management/FormEmployeeOther.vue';
-import useOptionStore from 'stores/options';
-import { DialogContainer, DialogHeader } from 'components/dialog';
-import KebabAction from 'src/components/shared/KebabAction.vue';
 import { nextTick } from 'vue';
-import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa.vue';
-import PaginationPageSize from 'src/components/PaginationPageSize.vue';
-import { AddButton } from 'components/button';
 import AdvanceSearch from 'src/components/shared/AdvanceSearch.vue';
 import TabEmployee from './TabEmployee.vue';
 
@@ -97,48 +40,20 @@ const router = useRouter();
 const flowStore = useFlowStore();
 const navigatorStore = useNavigator();
 const customerStore = useCustomerStore();
-const userBranchStore = useMyBranchStore();
 const employeeStore = useEmployeeStore();
 const customerFormStore = useCustomerForm();
 const employeeFormStore = useEmployeeForm();
-const optionStore = useOptionStore();
-const ocrStore = useOcrStore();
 
-const mrz = ref<Awaited<ReturnType<typeof parseResultMRZ>>>();
+const { state: customerFormState, currentFormData: customerFormData } =
-
+  storeToRefs(customerFormStore);
-const {
+const { state: employeeFormState, statusEmployeeCreate } =
-  fetchListOfOptionBranch,
+  storeToRefs(employeeFormStore);
-  customerFormUndo,
-  customerConfirmUnsave,
-  deleteCustomerById,
-  validateTabField,
-  deleteCustomerBranchById,
-} = customerFormStore;
-
-const { employeeFormUndo, employeeConfirmUnsave, deleteEmployeeById } =
-  employeeFormStore;
-
-const {
-  state: customerFormState,
-  currentFormData: customerFormData,
-  registerAbleBranchOption,
-  tabFieldRequired,
-} = storeToRefs(customerFormStore);
-const {
-  state: employeeFormState,
-  currentFromDataEmployee,
-  onCreateImageList,
-  statusEmployeeCreate,
-  refreshImageState,
-} = storeToRefs(employeeFormStore);
 
 const refTabCustomer = ref<InstanceType<typeof TabCustomer>>();
 const refTabEmployee = ref<InstanceType<typeof TabEmployee>>();
 
 // NOTE: Page Data
 const currentCustomer = ref<Customer>();
-// const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>([]);
-// const listEmployee = ref<Employee[]>([]);
 const hideStats = ref(false);
 const statsCustomerType = ref<CustomerStats>({
   CORP: 0,
@@ -158,27 +73,8 @@ const customerTypeSelected = ref<{
   value: 'all',
 });
 
-// const customerNameInfo = computed(() => {
-//   if (customerFormData.value.customerBranch === undefined) return;
-
-//   const name =
-//     locale.value === 'eng'
-//       ? `${customerFormData.value.customerBranch[0]?.firstNameEN} ${customerFormData.value.customerBranch[0]?.lastNameEN}`
-//       : `${customerFormData.value.customerBranch[0]?.firstName} ${customerFormData.value.customerBranch[0]?.lastName}`;
-//   return name || '-';
-// });
-// const currentBtnOpen = ref<boolean[]>([]);
 const employeeStats = ref(0);
 const gridView = ref(false);
-// const splitPercent = computed(() => ($q.screen.lt.md ? 0 : 15));
-
-// const currentPageCustomer = ref<number>(1);
-// const maxPageCustomer = ref<number>(1);
-// const currentPageEmployee = ref<number>(1);
-// const maxPageEmployee = ref<number>(1);
-// const pageSize = ref<number>(30);
-// const dialogCustomerImageUpload = ref<InstanceType<typeof ImageUploadDialog>>();
-// const dialogEmployeeImageUpload = ref<InstanceType<typeof ImageUploadDialog>>();
 
 // image
 const imageList = ref<{ selectedImage: string; list: string[] }>();
@@ -354,27 +250,6 @@ async function init() {
 
 watch(() => route.name, init);
 
-// watch(
-//   [currentTab, currentStatus, inputSearch, searchDate],
-//   async ([tabName], [oldTabName]) => {
-//     if (tabName !== oldTabName) searchDate.value = [];
-//     if (tabName === 'employer') {
-//       currentPageCustomer.value = 1;
-//       currentBtnOpen.value = [];
-//       listCustomer.value = [];
-//       await fetchListCustomer(true);
-//     }
-//     if (tabName === 'employee') {
-//       currentPageEmployee.value = 1;
-//       listEmployee.value = [];
-//       await fetchListEmployee({ fetchStats: true });
-//     }
-
-//     customerFormState.value.currentCustomerId = undefined;
-//     flowStore.rotate();
-//   },
-// );
-
 watch(locale, () => {
   customerTypeSelected.value = {
     label: `${customerTypeSelected.value.label}`,
@@ -388,304 +263,6 @@ watch(
 );
 
 onMounted(async () => await init());
-// const employeeHistoryDialog = ref(false);
-// const employeeHistory = ref<EmployeeHistory[]>();
-
-// async function fetchListCustomer(fetchStats = false, mobileFetch?: boolean) {
-//   const total = statsCustomerType.value.PERS + statsCustomerType.value.CORP;
-
-//   const resultList = await customerStore.fetchList({
-//     includeBranch: true,
-//     page: mobileFetch ? 1 : currentPageCustomer.value,
-//     pageSize: mobileFetch
-//       ? listCustomer.value.length +
-//         (total === listCustomer.value.length ? 1 : 0)
-//       : pageSize.value,
-//     status:
-//       currentStatus.value === 'All'
-//         ? undefined
-//         : currentStatus.value === 'ACTIVE'
-//           ? 'ACTIVE'
-//           : 'INACTIVE',
-//     query: inputSearch.value,
-//     startDate: searchDate.value[0],
-//     endDate: searchDate.value[1],
-//     customerType: (
-//       {
-//         all: undefined,
-//         customerLegalEntity: CustomerType.Corporate,
-//         customerNaturalPerson: CustomerType.Person,
-//       } as const
-//     )[customerTypeSelected.value.value],
-//   });
-
-//   if (resultList) {
-//     maxPageCustomer.value = Math.ceil(resultList.total / pageSize.value);
-//     $q.screen.xs && !mobileFetch
-//       ? listCustomer.value.push(...resultList.result)
-//       : (listCustomer.value = resultList.result);
-//   }
-
-//   if (fetchStats) {
-//     statsCustomerType.value = await customerStore
-//       .getStatsCustomer()
-//       .then((value) => (value ? value : { CORP: 0, PERS: 0 }));
-//   }
-// }
-
-// async function fetchListEmployee(opt?: {
-//   fetchStats?: boolean;
-//   page?: number;
-//   pageSize?: number;
-//   customerId?: string;
-//   mobileFetch?: boolean;
-// }) {
-//   const resultListEmployee = await employeeStore.fetchList({
-//     customerId: opt?.customerId,
-//     page: opt
-//       ? opt.mobileFetch
-//         ? 1
-//         : opt.page || currentPageEmployee.value
-//       : currentPageEmployee.value,
-//     pageSize: opt
-//       ? opt.mobileFetch
-//         ? listEmployee.value.length +
-//           (employeeStats.value === listEmployee.value.length ? 1 : 0)
-//         : opt.pageSize || pageSize.value
-//       : pageSize.value,
-//     status:
-//       currentStatus.value === 'All'
-//         ? undefined
-//         : currentStatus.value === 'ACTIVE'
-//           ? 'ACTIVE'
-//           : 'INACTIVE',
-//     query: inputSearch.value,
-//     passport: true,
-//     visa: true,
-//     startDate: searchDate.value[0],
-//     endDate: searchDate.value[1],
-//   });
-//   if (resultListEmployee) {
-//     maxPageEmployee.value = Math.ceil(
-//       resultListEmployee.total / pageSize.value,
-//     );
-//     $q.screen.xs && !(opt && opt.mobileFetch)
-//       ? listEmployee.value.push(...resultListEmployee.result)
-//       : (listEmployee.value = resultListEmployee.result);
-//   }
-
-//   if (opt && opt.fetchStats)
-//     employeeStats.value = await employeeStore.getStatsEmployee();
-// }
-
-// async function toggleStatusEmployee(
-//   id: string,
-//   status: boolean,
-//   employeeName: string,
-// ) {
-//   const res = await employeeStore.editById(id, {
-//     status: !status ? 'ACTIVE' : 'INACTIVE',
-//     firstNameEN: employeeName,
-//   });
-//   if (res && employeeFormState.value.drawerModal)
-//     currentFromDataEmployee.value.status = res.status;
-
-//   await fetchListEmployee({ mobileFetch: $q.screen.xs });
-//   flowStore.rotate();
-// }
-
-// async function toggleStatusCustomer(id: string, status: boolean) {
-//   const res = await customerStore.editById(id, {
-//     status: !status ? 'ACTIVE' : 'INACTIVE',
-//   });
-//   if (res && customerFormState.value.drawerModal)
-//     customerFormData.value.status = res.status;
-
-//   await fetchListCustomer(false, $q.screen.xs);
-//   flowStore.rotate();
-// }
-// async function openHistory(id: string) {
-//   const res = await employeeStore.getEditHistory(id);
-//   employeeHistory.value = res.reverse();
-//   employeeHistoryDialog.value = true;
-// }
-
-// async function editCustomerForm(id: string) {
-//   await customerFormStore.assignFormData(id);
-//   await fetchListOfOptionBranch();
-//   await fetchImageList(
-//     id,
-//     customerFormData.value.selectedImage || '',
-//     'customer',
-//   );
-//   customerFormState.value.branchIndex = -1;
-//   customerFormState.value.dialogType = 'edit';
-//   customerFormState.value.drawerModal = true;
-//   customerFormState.value.editCustomerId = id;
-// }
-
-// async function editEmployeeFormPersonal(id: string) {
-//   await employeeFormStore.assignFormDataEmployee(id);
-//   await fetchImageList(
-//     id,
-//     currentFromDataEmployee.value.selectedImage || '',
-//     'employee',
-//   );
-
-//   employeeFormState.value.isEmployeeEdit = true;
-//   employeeFormState.value.dialogType = 'edit';
-//   employeeFormState.value.drawerModal = true;
-// }
-
-// async function openSpecificCustomer(id: string) {
-//   await customerFormStore.assignFormData(id);
-//   await fetchImageList(
-//     id,
-//     customerFormData.value.selectedImage || '',
-//     'customer',
-//   );
-//   customerFormState.value.branchIndex = -1;
-//   customerFormState.value.drawerModal = true;
-//   customerFormState.value.editCustomerId = id;
-//   customerFormState.value.dialogType = 'info';
-// }
-
-// async function openSpecificEmployee(id: string) {
-//   await employeeFormStore.assignFormDataEmployee(id);
-//   await fetchImageList(
-//     id,
-//     currentFromDataEmployee.value.selectedImage || '',
-//     'employee',
-//   );
-//   employeeFormState.value.dialogType = 'info';
-//   employeeFormState.value.drawerModal = true;
-// }
-
-// TODO: When in employee form, if select address same as customer then auto fill
-
-// watch(
-//   () => employeeFormState.value.currentCustomerBranch,
-//   (e) => {
-//     if (!e) return;
-//     if (employeeFormState.value.formDataEmployeeSameAddr) {
-//       currentFromDataEmployee.value.address = e.address;
-//       currentFromDataEmployee.value.addressEN = e.addressEN;
-//       currentFromDataEmployee.value.provinceId = e.provinceId;
-//       currentFromDataEmployee.value.districtId = e.districtId;
-//       currentFromDataEmployee.value.subDistrictId = e.subDistrictId;
-//     }
-//     currentFromDataEmployee.value.customerBranchId = e.id;
-//   },
-// );
-
-// watch(
-//   () => employeeFormState.value.formDataEmployeeSameAddr,
-//   (isSame) => {
-//     if (!employeeFormState.value.currentCustomerBranch) return;
-//     if (isSame) {
-//       currentFromDataEmployee.value.address =
-//         employeeFormState.value.currentCustomerBranch.address;
-//       currentFromDataEmployee.value.addressEN =
-//         employeeFormState.value.currentCustomerBranch.addressEN;
-//       currentFromDataEmployee.value.provinceId =
-//         employeeFormState.value.currentCustomerBranch.provinceId;
-//       currentFromDataEmployee.value.districtId =
-//         employeeFormState.value.currentCustomerBranch.districtId;
-//       currentFromDataEmployee.value.subDistrictId =
-//         employeeFormState.value.currentCustomerBranch.subDistrictId;
-//     }
-//     currentFromDataEmployee.value.customerBranchId =
-//       employeeFormState.value.currentCustomerBranch.id;
-//   },
-// );
-
-// watch(
-//   () => employeeFormState.value.currentTab,
-//   () => {
-//     employeeFormState.value.isEmployeeEdit = false;
-//   },
-// );
-
-// watch(
-//   () => currentFromDataEmployee.value.dateOfBirth,
-//   (v) => {
-//     const isEdit =
-//       employeeFormState.value.drawerModal &&
-//       employeeFormState.value.isEmployeeEdit;
-//     let currentFormDate = v && toISOStringWithTimezone(new Date(v));
-//     let currentDate: string = '';
-
-//     if (isEdit && employeeFormState.value.currentEmployee) {
-//       currentDate = toISOStringWithTimezone(
-//         new Date(employeeFormState.value.currentEmployee.dateOfBirth),
-//       );
-//     }
-
-//     if (
-//       employeeFormState.value.dialogModal ||
-//       (isEdit && currentFormDate !== currentDate)
-//     ) {
-//       const age = calculateAge(
-//         currentFromDataEmployee.value.dateOfBirth,
-//         'year',
-//       );
-//       if (currentFromDataEmployee.value.dateOfBirth && Number(age) < 15) {
-//         dialog({
-//           color: 'warning',
-//           icon: 'mdi-alert',
-//           title: t('dialog.title.youngWorker15'),
-//           cancelText: t('general.edit'),
-//           persistent: true,
-//           message: t('dialog.message.youngWorker15'),
-
-//           cancel: async () => {
-//             currentFromDataEmployee.value.dateOfBirth = null;
-//             return;
-//           },
-//         });
-//       }
-
-//       if (
-//         currentFromDataEmployee.value.dateOfBirth &&
-//         Number(age) > 15 &&
-//         Number(age) <= 18
-//       ) {
-//         dialog({
-//           color: 'warning',
-//           icon: 'mdi-alert',
-//           title: t('dialog.title.youngWorker18'),
-//           cancelText: t('general.cancel'),
-//           actionText: t('general.confirm'),
-//           persistent: true,
-//           message: t('dialog.message.youngWorker18'),
-//           action: () => {},
-//           cancel: async () => {
-//             currentFromDataEmployee.value.dateOfBirth = null;
-//             return;
-//           },
-//         });
-//       }
-//     }
-//   },
-// );
-
-// watch(
-//   () => customerFormData.value.image,
-//   () => {
-//     if (customerFormData.value.image !== null)
-//       customerFormState.value.isImageEdit = true;
-//   },
-// );
-
-// watch(
-//   () => currentFromDataEmployee.value.image,
-//   () => {
-//     if (currentFromDataEmployee.value.image !== null)
-//       employeeFormState.value.isImageEdit = true;
-//   },
-// );
-
-// const emptyCreateDialog = ref(false);
 </script>
 
 <template>

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

@@ -8,6 +8,7 @@ import { useRoute, useRouter } from 'vue-router';
 import BranchCard from 'src/components/01_branch-management/BranchCard.vue';
 import KebabAction from 'src/components/shared/KebabAction.vue';
 import TableEmpoloyee from 'src/components/03_customer-management/TableEmpoloyee.vue';
+import DrawerEmployee from 'src/components/03_customer-management/DrawerEmployee.vue';
 import { DialogContainer, DialogHeader } from 'components/dialog';
 import { EmployerFormBasicInfo, EmployerFormBranch } from './components';
 import EmptyAddButton from 'components/AddButton.vue';
@@ -262,9 +263,16 @@ async function toggleStatusCustomer(id: string, status: boolean) {
   flowStore.rotate();
 }
 
-async function fetchListEmployee(customerId: string) {
+async function fetchListEmployee(opt?: {
+  fetchStats?: boolean;
+  page?: number;
+  pageSize?: number;
+  customerId?: string;
+  mobileFetch?: boolean;
+}) {
+  // ลูกจ้างภายในนายจ้าง
   const resultListEmployee = await employeeStore.fetchList({
-    customerId: customerId,
+    customerId: opt.customerId,
     page: 1,
     pageSize: 9999,
     passport: true,
@@ -662,7 +670,9 @@ onMounted(async () => {
                                 props.row.id;
 
                               // TODO:
-                              await fetchListEmployee(props.row.id);
+                              await fetchListEmployee({
+                                customerId: props.row.id,
+                              });
 
                               currentBtnOpen.map((v, i) => {
                                 if (i !== props.rowIndex) {
@@ -1940,6 +1950,11 @@ onMounted(async () => {
       </div>
     </template>
   </ImageUploadDialog>
+
+  <DrawerEmployee
+    :fetch-list-employee="fetchListEmployee"
+    :current-tab="currentTab"
+  />
 </template>
 
 <style scoped>