From be397112f6e25b01c126131fbeb4f49a21651a21 Mon Sep 17 00:00:00 2001 From: puriphatt Date: Tue, 30 Jul 2024 07:19:14 +0000 Subject: [PATCH] feat: check tab before add --- .../FormEmployeeHealthCheck.vue | 33 ++++---- .../FormEmployeeWorkHistory.vue | 31 +++---- src/components/TabComponent.vue | 83 ++++++++++++------- src/pages/03_customer-management/MainPage.vue | 1 - src/stores/utils/index.ts | 17 ++++ 5 files changed, 103 insertions(+), 62 deletions(-) diff --git a/src/components/03_customer-management/FormEmployeeHealthCheck.vue b/src/components/03_customer-management/FormEmployeeHealthCheck.vue index 68f76e44..5519a306 100644 --- a/src/components/03_customer-management/FormEmployeeHealthCheck.vue +++ b/src/components/03_customer-management/FormEmployeeHealthCheck.vue @@ -8,7 +8,7 @@ import useAddressStore, { } from 'src/stores/address'; import { EmployeeCheckupCreate } from 'src/stores/employee/types'; import { useI18n } from 'vue-i18n'; -import { selectFilterOptionRefMod } from 'src/stores/utils'; +import { checkTabBeforeAdd, selectFilterOptionRefMod } from 'src/stores/utils'; import { QSelect } from 'quasar'; const { locale } = useI18n(); @@ -63,19 +63,22 @@ async function fetchProvince() { } function addData() { - employeeCheckup.value?.push({ - coverageExpireDate: null, - coverageStartDate: null, - insuranceCompany: '', - medicalBenefitScheme: '', - remark: '', - hospitalName: '', - provinceId: '', - checkupResult: '', - checkupType: '', - }); - if (employeeCheckup.value) - tab.value = `tab${employeeCheckup.value.length - 1}`; + const canAdd = checkTabBeforeAdd(employeeCheckup.value || []); + if (canAdd) { + employeeCheckup.value?.push({ + coverageExpireDate: null, + coverageStartDate: null, + insuranceCompany: '', + medicalBenefitScheme: '', + remark: '', + hospitalName: '', + provinceId: '', + checkupResult: '', + checkupType: '', + }); + if (employeeCheckup.value) + tab.value = `tab${employeeCheckup.value.length - 1}`; + } } function removeData(index: number) { @@ -132,7 +135,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod( style="background-color: var(--_body-bg); min-width: 40px" icon="mdi-plus" padding="8px 8px" - :disable="readonly" + :disable="readonly || !checkTabBeforeAdd(employeeCheckup || [])" :color="$q.dark.isActive ? 'primary' : ''" :class="tab !== 'tab0' ? 'bordered-r' : ''" /> diff --git a/src/components/03_customer-management/FormEmployeeWorkHistory.vue b/src/components/03_customer-management/FormEmployeeWorkHistory.vue index 9160bd71..018d4633 100644 --- a/src/components/03_customer-management/FormEmployeeWorkHistory.vue +++ b/src/components/03_customer-management/FormEmployeeWorkHistory.vue @@ -3,7 +3,7 @@ import { onMounted, ref } from 'vue'; import { dateFormat, parseAndFormatDate } from 'src/utils/datetime'; import { EmployeeWorkCreate } from 'src/stores/employee/types'; import { useI18n } from 'vue-i18n'; -import { selectFilterOptionRefMod } from 'src/stores/utils'; +import { checkTabBeforeAdd, selectFilterOptionRefMod } from 'src/stores/utils'; const { locale } = useI18n(); @@ -33,18 +33,21 @@ defineProps<{ }>(); function addData() { - employeeWork.value?.push({ - workEndDate: null, - workPermitExpireDate: null, - workPermitIssuDate: null, - workPermitNo: '', - workplace: '', - jobType: '', - positionName: '', - ownerName: '', - remark: '', - }); - if (employeeWork.value) tab.value = `tab${employeeWork.value.length - 1}`; + const canAdd = checkTabBeforeAdd(employeeWork.value || []); + if (canAdd) { + employeeWork.value?.push({ + workEndDate: null, + workPermitExpireDate: null, + workPermitIssuDate: null, + workPermitNo: '', + workplace: '', + jobType: '', + positionName: '', + ownerName: '', + remark: '', + }); + if (employeeWork.value) tab.value = `tab${employeeWork.value.length - 1}`; + } } function removeData(index: number) { @@ -94,7 +97,7 @@ const workplaceFilter = selectFilterOptionRefMod( style="background-color: var(--_body-bg); min-width: 40px" icon="mdi-plus" padding="8px 8px" - :disable="readonly" + :disable="readonly || !checkTabBeforeAdd(employeeWork || [])" :color="$q.dark.isActive ? 'primary' : ''" :class="tab !== 'tab0' ? 'bordered-r' : ''" /> diff --git a/src/components/TabComponent.vue b/src/components/TabComponent.vue index 0b130ec1..7a16c085 100644 --- a/src/components/TabComponent.vue +++ b/src/components/TabComponent.vue @@ -2,6 +2,7 @@ import { ref } from 'vue'; import { CustomerBranchCreate } from 'stores/customer/types'; import { onMounted } from 'vue'; +import { checkTabBeforeAdd } from 'src/stores/utils'; const props = defineProps<{ readonly?: boolean; @@ -20,38 +21,47 @@ const statBranchNo = defineModel('statBranchNo', { const tab = defineModel('tabIndex', { required: true }); function addData() { - const currentNo = (customerBranch.value.at(-1)?.branchNo || 0) + 1; - customerBranch.value.push({ - code: '', - branchNo: currentNo, - 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, - }); + const canAdd = checkTabBeforeAdd(customerBranch.value || [], [ + 'branchNo', + 'payDate', + 'registerDate', + 'status', + 'wageRate', + ]); + if (canAdd) { + const currentNo = (customerBranch.value.at(-1)?.branchNo || 0) + 1; + customerBranch.value.push({ + code: '', + branchNo: currentNo, + 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, + }); - tab.value = customerBranch.value.length - 1; + tab.value = customerBranch.value.length - 1; + } } function close(index: number) { @@ -85,7 +95,16 @@ onMounted(() => { style="background-color: var(--_body-bg)" @click="addData()" icon="mdi-plus" - :disable="readonly" + :disable=" + readonly || + !checkTabBeforeAdd(customerBranch || [], [ + 'branchNo', + 'payDate', + 'registerDate', + 'status', + 'wageRate', + ]) + " > { dialog({ color: status !== 'INACTIVE' ? 'warning' : 'info', diff --git a/src/stores/utils/index.ts b/src/stores/utils/index.ts index 1ad63c15..2b006e89 100644 --- a/src/stores/utils/index.ts +++ b/src/stores/utils/index.ts @@ -145,6 +145,23 @@ export function selectOptionFilter( return { options, filter }; } +export function checkTabBeforeAdd(data: unknown[], except?: string[]) { + if (!data) return; + const lastData = data[data.length - 1]; + + if (typeof lastData !== 'object') return false; + + let canAdd = false; + for (const [key, val] of Object.entries( + lastData as Record, + )) { + if (except?.includes(key)) continue; + canAdd = val !== '' && val !== null; + if (canAdd) break; + } + return canAdd; +} + const useUtilsStore = defineStore('utilsStore', () => { const currentTitle = ref<{ title: string;