feat(03): young worker warning dialog

src/i18n/eng/index.ts

@@ -469,12 +469,14 @@ export default {
       incompleteDataEntry: 'Incomplete Data Entry',
       confirmChangeStatus: 'Confirm Status Change',
       confirmDelete: 'Confirm Deletion',
+      youngWorker: 'Employee under 18',
     },
     message: {
       incompleteDataEntry: 'Incomplete data entry on {tap} page',
       confirmChangeStatusOn: 'Do you want to open?',
       confirmChangeStatusOff: 'Do you want to close?',
       confirmDelete: 'Do you want to delete this item?',
+      youngWorker: 'Employee is under 18 years old, do you want to confirm?',
     },
     action: {
       ok: 'OK',

src/i18n/tha/index.ts

@@ -469,12 +469,14 @@ export default {
       incompleteDataEntry: 'กรอกข้อมูลไม่ครบ',
       confirmChangeStatus: 'ยืนยันการเปลี่ยนสถานะ',
       confirmDelete: 'ยืนยันการลบ',
+      youngWorker: 'ลูกจ้างอายุต่ำกว่า 18 ปี',
     },
     message: {
       incompleteDataEntry: 'กรอกข้อมูลไม่ครบในหน้า {tap}',
       confirmChangeStatusOn: 'คุณต้องการเปิดใช่หรือไม่',
       confirmChangeStatusOff: 'คุณต้องการปิดใช่หรือไม่',
       confirmDelete: 'คุณต้องการลบรายการนี้ใช่หรือไม่',
+      youngWorker: 'ลูกจ้างอายุต่ำกว่า 18 ปี ต้องการยืนยันหรือไม่',
     },
     action: {
       ok: 'ยืนยัน',

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"

src/utils/datetime.ts

@@ -78,9 +78,11 @@ export function toISOStringWithTimezone(date: Date) {
   );
 }
 
-export function calculateAge(birthDate: Date | null | string) {
+export function calculateAge(
+  birthDate: Date | null | string,
+  only?: 'year' | 'months' | 'days',
+) {
   if (!birthDate) return null;
-  const { locale } = useI18n();
 
   const birthDateTimeStamp = new Date(birthDate).getTime();
   const now = new Date();
@@ -91,6 +93,11 @@ export function calculateAge(birthDate: Date | null | string) {
   const months = ageDate.getUTCMonth();
   const days = ageDate.getUTCDate() - 1;
 
+  if (only) {
+    return only === 'year' ? years : only === 'months' ? months : days;
+  }
+
+  const { locale } = useI18n();
   if (locale.value === 'tha') {
     return `${years} ปี ${months !== 0 ? months + ' เดือน' : ''}  ${days !== 0 ? days + ' วัน' : ''} `;
   } else {