feat(03): young worker warning dialog

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

@@ -47,7 +47,7 @@ import DialogForm from 'components/DialogForm.vue';
 import SideMenu from 'components/SideMenu.vue';
 import { AddButton } from 'components/button';
 import TableEmpoloyee from 'src/components/03_customer-management/TableEmpoloyee.vue';
-
+import { calculateAge, toISOStringWithTimezone } from 'src/utils/datetime';
 import { UploadFile } from 'components/upload-file';
 
 import {
@@ -408,7 +408,11 @@ async function triggerChangeStatus(id: string, status: string) {
 }
 
 async function toggleStatusEmployee(id: string, status: boolean) {
-  await employeeStore.editById(id, { status: !status ? 'ACTIVE' : 'INACTIVE' });
+  const res = await employeeStore.editById(id, {
+    status: !status ? 'ACTIVE' : 'INACTIVE',
+  });
+  if (res && employeeFormState.value.drawerModal)
+    currentFromDataEmployee.value.status = res.status;
 
   await fetchListEmployee();
   flowStore.rotate();
@@ -592,6 +596,50 @@ watch(
   },
 );
 
+watch(
+  () => currentFromDataEmployee.value.dateOfBirth,
+  (v) => {
+    const isEdit =
+      employeeFormState.value.drawerModal &&
+      employeeFormState.value.isEmployeeEdit;
+    let currentFormDate = toISOStringWithTimezone(new Date(v));
+    let currentDate: string = '';
+
+    if (isEdit) {
+      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) < 18) {
+        dialog({
+          color: 'warning',
+          icon: 'mdi-alert',
+          title: t('dialog.title.youngWorker'),
+          actionText: t('dialog.action.ok'),
+          persistent: true,
+          message: t('dialog.message.youngWorker'),
+          action: async () => {
+            return;
+          },
+          cancel: async () => {
+            currentFromDataEmployee.value.dateOfBirth = null;
+            return;
+          },
+        });
+      }
+    }
+  },
+);
+
 const emptyCreateDialog = ref(false);
 </script>
 
@@ -2740,7 +2788,7 @@ const emptyCreateDialog = ref(false);
                 triggerChangeStatus(currentFromDataEmployee.id, v);
             }
           "
-          active
+          :active="currentFromDataEmployee.status !== 'INACTIVE'"
           use-toggle
           color="white"
           icon="mdi-account-outline"