import { ref, watch } from 'vue'; import { defineStore } from 'pinia'; import { CustomerCreate } from 'src/stores/customer/types'; import { Employee, EmployeeCreate } from 'src/stores/employee/types'; import useMyBranch from 'src/stores/my-branch'; import useCustomerStore from 'src/stores/customer'; import useEmployeeStore from 'src/stores/employee'; import useFlowStore from 'src/stores/flow'; export const useCustomerForm = defineStore('form-customer', () => { const apiBaseUrl = import.meta.env.VITE_API_BASE_URL; const customerStore = useCustomerStore(); const branchStore = useMyBranch(); const defaultFormData: CustomerCreate = { status: 'CREATED', personName: '', customerType: 'CORP', customerName: '', customerNameEN: '', taxNo: '', registeredBranchId: branchStore.currentMyBranch?.id || '', customerBranch: [], image: null, }; let resetFormData = structuredClone(defaultFormData); const currentFormData = ref(structuredClone(defaultFormData)); const state = ref<{ dialogType: 'info' | 'create' | 'edit'; dialogOpen: boolean; dialogModal: boolean; branchIndex: number; saveMode: 'customer' | 'branch'; customerImageUrl: string; imageDialog: boolean; imageEdit: boolean; editReadonly: boolean; editCustomerId?: string; editCustomerBranchId?: string; }>({ dialogType: 'info', dialogOpen: false, dialogModal: false, imageDialog: false, branchIndex: 0, editReadonly: true, imageEdit: false, saveMode: 'customer', customerImageUrl: '', editCustomerId: '', editCustomerBranchId: '', }); watch( currentFormData, (v) => (defaultFormData.customerType = v.customerType), ); function isFormDataDifferent() { return ( JSON.stringify(resetFormData) !== JSON.stringify(currentFormData.value) ); } function resetForm(clean = false) { if (clean) { defaultFormData.customerType = currentFormData.value.customerType; currentFormData.value = structuredClone(defaultFormData); currentFormData.value.registeredBranchId = branchStore.currentMyBranch?.id || ''; resetFormData = structuredClone(defaultFormData); resetFormData.registeredBranchId = branchStore.currentMyBranch?.id || ''; state.value.editCustomerId = ''; return; } if (!resetFormData.registeredBranchId) { resetFormData.registeredBranchId = branchStore.currentMyBranch?.id || ''; } if (state.value.dialogType === 'create') { state.value.editCustomerId = ''; } currentFormData.value = structuredClone(resetFormData); } async function assignFormData(id?: string) { if (!id) { resetFormData = structuredClone(defaultFormData); return; } const data = await customerStore.fetchById(id); if (!data) return; state.value.customerImageUrl = `${apiBaseUrl}/customer/${id}/image`; resetFormData.registeredBranchId = data.registeredBranchId; resetFormData.status = data.status; resetFormData.customerType = data.customerType; resetFormData.customerName = data.customerName; resetFormData.customerNameEN = data.customerNameEN; resetFormData.personName = data.personName; resetFormData.taxNo = data.taxNo; resetFormData.image = null; resetFormData.customerBranch = data.branch.map((v) => ({ id: v.id, code: v.code, branchNo: v.branchNo, address: v.address, addressEN: v.addressEN, provinceId: v.province.id, districtId: v.district.id, subDistrictId: v.subDistrict.id, zipCode: v.zipCode, email: v.email, telephoneNo: v.telephoneNo, name: v.name, status: undefined, taxNo: v.taxNo, nameEN: v.nameEN, legalPersonNo: v.legalPersonNo, registerName: v.registerName, registerDate: new Date(v.registerDate), authorizedCapital: v.authorizedCapital, employmentOffice: v.employmentOffice, bussinessType: v.bussinessType, bussinessTypeEN: v.bussinessTypeEN, jobPosition: v.jobPosition, jobPositionEN: v.jobPositionEN, jobDescription: v.jobDescription, saleEmployee: v.saleEmployee, payDate: new Date(v.payDate), wageRate: v.wageRate, })); currentFormData.value = structuredClone(resetFormData); } function addCurrentCustomerBranch() { currentFormData.value.customerBranch?.push({ id: '', code: '', branchNo: (currentFormData.value.customerBranch?.at(-1)?.branchNo || 0) + 1, address: '', addressEN: '', provinceId: '', districtId: '', subDistrictId: '', zipCode: '', email: '', telephoneNo: '', name: '', status: 'CREATED', taxNo: '', nameEN: '', legalPersonNo: '', registerName: '', registerDate: new Date(), authorizedCapital: '', employmentOffice: '', bussinessType: '', bussinessTypeEN: '', jobPosition: '', jobPositionEN: '', jobDescription: '', saleEmployee: '', payDate: new Date(), wageRate: 0, }); } async function submitForm() { if (state.value.saveMode === 'customer') { const _data = await submitFormCustomer(); if (_data) { await assignFormData(_data.id); state.value.dialogType = 'edit'; state.value.editReadonly = true; state.value.editCustomerId = _data.id; } } } async function submitFormCustomer() { if (state.value.dialogType === 'info') return; if (state.value.dialogType === 'create') { return await customerStore.create(currentFormData.value); } if (!state.value.editCustomerId) { throw new Error( 'Form mode is set to edit but no ID is provided. Make sure to set customer ID.', ); } await customerStore.editById(state.value.editCustomerId, { ...currentFormData.value, status: currentFormData.value.status !== 'CREATED' ? currentFormData.value.status : undefined, image: currentFormData.value.image || undefined, customerBranch: undefined, }); } return { state, resetFormData, currentFormData, isFormDataDifferent, resetForm, assignFormData, submitForm, addCurrentCustomerBranch, }; }); export const useEmployeeForm = defineStore('form-employee', () => { const customerStore = useCustomerStore(); const employeeStore = useEmployeeStore(); const flowStore = useFlowStore(); const branchStore = useMyBranch(); const state = ref<{ dialogType: 'info' | 'create' | 'edit'; currentTab: string; dialogModal: boolean; drawerModal: boolean; currentEmployeeCode: string; currentEmployee: Employee | null; profileUrl: string; isEmployeeEdit: boolean; profileSubmit: boolean; formDataEmployeeSameAddr: boolean; infoEmployeePersonCard: { id: string; img: string; name: string; male: boolean; female: boolean; badge: string; disabled: boolean; }[]; formDataEmployeeOwner: | { id: string; address: string; addressEN: string; provinceId: string; districtId: string; subDistrictId: string; zipCode: string; } | undefined; }>({ drawerModal: false, currentTab: 'personalInfo', dialogModal: false, dialogType: 'info', currentEmployeeCode: '', currentEmployee: null, profileUrl: '', isEmployeeEdit: false, profileSubmit: false, formDataEmployeeSameAddr: false, infoEmployeePersonCard: [], formDataEmployeeOwner: undefined, }); const defaultFormData: EmployeeCreate = { code: '', image: null, customerBranchId: '', nrcNo: '', dateOfBirth: null, gender: '', nationality: '', firstName: '', firstNameEN: '', lastName: '', lastNameEN: '', addressEN: '', address: '', zipCode: '', passportType: '', passportNumber: '', passportIssueDate: null, passportExpiryDate: null, passportIssuingCountry: '', passportIssuingPlace: '', previousPassportReference: '', visaType: '', visaNumber: '', visaIssueDate: null, visaExpiryDate: null, visaIssuingPlace: '', visaStayUntilDate: null, tm6Number: '', entryDate: null, workerStatus: '', subDistrictId: '', districtId: '', provinceId: '', employeeWork: [ { workEndDate: null, workPermitExpireDate: null, workPermitIssuDate: null, workPermitNo: '', workplace: '', jobType: '', positionName: '', ownerName: '', remark: '', }, ], employeeCheckup: [ { coverageExpireDate: null, coverageStartDate: null, insuranceCompany: '', medicalBenefitScheme: '', remark: '', hospitalName: '', provinceId: '', checkupResult: '', checkupType: '', }, ], employeeOtherInfo: { citizenId: '', fatherFirstName: '', fatherLastName: '', fatherFirstNameEN: '', fatherLastNameEN: '', fatherBirthPlace: '', motherFirstName: '', motherLastName: '', motherFirstNameEN: '', motherLastNameEN: '', motherBirthPlace: '', }, }; const resetEmployeeData = structuredClone(defaultFormData); const currentFromDataEmployee = ref( structuredClone(defaultFormData), ); function resetFormDataEmployee(cb?: (...args: any[]) => unknown) { currentFromDataEmployee.value = structuredClone(resetEmployeeData); cb?.(); } async function assignFormDataEmployee(id: string) { const res = await employeeStore.fetchById(id); if (res) { state.value.currentEmployee = res; const { province, district, subDistrict, createdBy, updatedBy, profileImageUrl, ...playlond } = res; currentFromDataEmployee.value = { ...playlond, provinceId: province?.id, districtId: district?.id, subDistrictId: subDistrict?.id, employeeCheckup: structuredClone(playlond.employeeCheckup), employeeOtherInfo: structuredClone(playlond.employeeOtherInfo), employeeWork: structuredClone(playlond.employeeWork), image: null, }; const foundBranch = await customerStore.fetchListCustomeBranchById( playlond.customerBranchId, ); state.value.currentEmployeeCode = playlond.code; state.value.profileUrl = profileImageUrl || ''; profileImageUrl ? (state.value.profileSubmit = true) : (state.value.profileSubmit = false); state.value.isEmployeeEdit = true; state.value.formDataEmployeeOwner = { ...foundBranch }; if (foundBranch.address === playlond.address) { state.value.formDataEmployeeSameAddr = true; } else { state.value.formDataEmployeeSameAddr = false; } if (state.value.infoEmployeePersonCard) { state.value.infoEmployeePersonCard[0].img = profileImageUrl || ''; } flowStore.rotate(); } } async function employeeFilterOwnerBranch( val: string, update: (...args: unknown[]) => void, ) { update(async () => { const result = await customerStore.fetchListCustomeBranch({ includeCustomer: true, query: val, pageSize: 30, }); if (result) employeeStore.ownerOption = result.result; }); } return { state, currentFromDataEmployee, resetEmployeeData, resetFormDataEmployee, assignFormDataEmployee, employeeFilterOwnerBranch, }; });