feat: check tab before add

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' : ''"
       />

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' : ''"
       />

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<number>('statBranchNo', {
 const tab = defineModel<number>('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',
+        ])
+      "
     ></q-btn>
     <q-tabs
       :active-bg-color="$q.dark.isActive ? 'dark' : 'white'"

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

@@ -994,7 +994,6 @@ async function fetchListEmployee() {
 }
 
 async function triggerChangeStatus(id: string, status: string) {
-  console.log('asd');
   return await new Promise((resolve, reject) => {
     dialog({
       color: status !== 'INACTIVE' ? 'warning' : 'info',

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<string, unknown>,
+  )) {
+    if (except?.includes(key)) continue;
+    canAdd = val !== '' && val !== null;
+    if (canAdd) break;
+  }
+  return canAdd;
+}
+
 const useUtilsStore = defineStore('utilsStore', () => {
   const currentTitle = ref<{
     title: string;