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,6 +63,8 @@ async function fetchProvince() {
 }
 
 function addData() {
+  const canAdd = checkTabBeforeAdd(employeeCheckup.value || []);
+  if (canAdd) {
     employeeCheckup.value?.push({
       coverageExpireDate: null,
       coverageStartDate: null,
@@ -77,6 +79,7 @@ function addData() {
     if (employeeCheckup.value)
       tab.value = `tab${employeeCheckup.value.length - 1}`;
   }
+}
 
 function removeData(index: number) {
   if (!employeeCheckup.value) return;
@@ -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,6 +33,8 @@ defineProps<{
 }>();
 
 function addData() {
+  const canAdd = checkTabBeforeAdd(employeeWork.value || []);
+  if (canAdd) {
     employeeWork.value?.push({
       workEndDate: null,
       workPermitExpireDate: null,
@@ -46,6 +48,7 @@ function addData() {
     });
     if (employeeWork.value) tab.value = `tab${employeeWork.value.length - 1}`;
   }
+}
 
 function removeData(index: number) {
   if (!employeeWork.value) return;
@@ -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,6 +21,14 @@ const statBranchNo = defineModel<number>('statBranchNo', {
 const tab = defineModel<number>('tabIndex', { required: true });
 
 function addData() {
+  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: '',
@@ -53,6 +62,7 @@ function addData() {
 
     tab.value = customerBranch.value.length - 1;
   }
+}
 
 function close(index: number) {
   if (customerBranch.value.length < 2) return;
@@ -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;