feat: can + employee checkup and work history (include i18n)

src/components/03_customer-management/FormEmployeeHealthCheck.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { onMounted, reactive } from 'vue';
+import { onMounted, reactive, ref } from 'vue';
 import { dateFormat } from 'src/utils/datetime';
 import useAddressStore, {
   District,
   Province,
   SubDistrict,
 } from 'src/stores/address';
+import { EmployeeCheckupCreate } from 'src/stores/employee/types';
 
 const adrressStore = useAddressStore();
 
@@ -19,15 +20,9 @@ const addrOptions = reactive<{
   subDistrictOps: [],
 });
 
-const checkupResult = defineModel<string>('checkupResult');
+const employeeCheckup = defineModel<EmployeeCheckupCreate[]>('employeeCheckup');
-const checkupType = defineModel<string>('checkupType');
+
-const provinceId = defineModel<string>('provinceId');
+const tab = ref();
-const hospitalName = defineModel<string>('hospitalName');
-const remark = defineModel<string>('remark');
-const medicalBenefitScheme = defineModel<string>('medicalBenefitScheme');
-const insuranceCompany = defineModel<string>('insuranceCompany');
-const coverageStartDate = defineModel<Date | null>('coverageStartDate');
-const coverageExpireDate = defineModel<Date | null>('coverageExpireDate');
 
 defineProps<{
   title?: string;
@@ -44,12 +39,95 @@ async function fetchProvince() {
   if (result) addrOptions.provinceOps = result;
 }
 
+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}`;
+}
+
+function removeData(index: number) {
+  if (!employeeCheckup.value) return;
+  if (employeeCheckup.value.length === 1) return;
+
+  employeeCheckup.value.splice(index, 1);
+
+  if (index) if (tab.value === `tab${index}`) tab.value = `tab${index - 1}`;
+  if (tab.value === `tab${employeeCheckup.value.length}`)
+    tab.value = `tab${employeeCheckup.value.length - 1}`;
+}
+
 onMounted(async () => {
   await fetchProvince();
+  tab.value = 'tab0';
 });
 </script>
 
 <template>
+  <div class="bordered-b full-width">
+    <q-tabs
+      v-model="tab"
+      dense
+      class="text-grey"
+      active-class="active-tab"
+      indicator-color="transparent"
+      align="left"
+      :breakpoint="0"
+    >
+      <q-btn
+        @click="addData"
+        flat
+        class="app-text-muted"
+        style="background-color: var(--_body-bg)"
+        icon="mdi-plus"
+        padding="8px 8px"
+        :disable="readonly"
+        :color="$q.dark.isActive ? 'primary' : ''"
+        :class="tab !== 'tab0' ? 'bordered-r' : ''"
+      />
+      <q-tab
+        v-for="(tab, index) in employeeCheckup"
+        v-bind:key="index"
+        :name="`tab${index}`"
+        class="content-tab text-capitalize"
+        style="z-index: 999"
+      >
+        <div class="text-weight-medium row items-center">
+          {{ $t('formDialogTabCheckup') + (index + 1) }}
+          <q-btn
+            v-if="!readonly && employeeCheckup?.length !== 1"
+            round
+            flat
+            id="closeDialog"
+            size="sm"
+            icon="mdi-close"
+            padding="xs"
+            color="red"
+            :class="{ dark: $q.dark.isActive }"
+            @click.stop="removeData(index)"
+          />
+        </div>
+      </q-tab>
+    </q-tabs>
+  </div>
+
+  <q-tab-panels v-model="tab" style="padding-top: 0px">
+    <q-tab-panel
+      v-for="(checkup, index) in employeeCheckup"
+      v-bind:key="index"
+      :name="`tab${index}`"
+      class="row col-12 items-start"
+      style="overflow: auto; height: 50vh"
+    >
       <div class="col-3 app-text-muted">
         • {{ $t(`formDialogTitleHealthCheck`) }}
       </div>
@@ -62,7 +140,7 @@ onMounted(async () => {
           hide-bottom-space
           class="col-6"
           :label="$t('formDialogInputCheckupRes')"
-      v-model="checkupResult"
+          v-model="checkup.checkupResult"
         />
         <q-select
           id="select-province"
@@ -74,7 +152,7 @@ onMounted(async () => {
           hide-bottom-space
           emit-value
           map-options
-      v-model="checkupType"
+          v-model="checkup.checkupType"
           option-value="id"
           option-label="name"
           :label="$t('formDialogInputCheckupType')"
@@ -92,7 +170,7 @@ onMounted(async () => {
           hide-bottom-space
           emit-value
           map-options
-      v-model="provinceId"
+          v-model="checkup.provinceId"
           option-value="id"
           option-label="nameEN"
           :label="$t('province')"
@@ -108,7 +186,7 @@ onMounted(async () => {
           hide-bottom-space
           class="col-9"
           :label="$t('formDialogInputHospital')"
-      v-model="hospitalName"
+          v-model="checkup.hospitalName"
         />
         <q-input
           :label="$t('formDialogInputRemark')"
@@ -118,7 +196,7 @@ onMounted(async () => {
           :borderless="readonly"
           hide-bottom-space
           class="col-12"
-      v-model="remark"
+          v-model="checkup.remark"
           type="textarea"
         />
         <q-select
@@ -131,7 +209,7 @@ onMounted(async () => {
           hide-bottom-space
           emit-value
           map-options
-      v-model="medicalBenefitScheme"
+          v-model="checkup.medicalBenefitScheme"
           option-value="id"
           option-label="name"
           :label="$t('formDialogInputMedicalBenefit')"
@@ -149,7 +227,7 @@ onMounted(async () => {
           hide-bottom-space
           emit-value
           map-options
-      v-model="insuranceCompany"
+          v-model="checkup.insuranceCompany"
           option-value="id"
           option-label="name"
           :label="$t('formDialogInputInsuranceCompany')"
@@ -161,7 +239,7 @@ onMounted(async () => {
           utc
           autoApply
           :teleport="true"
-      v-model="coverageStartDate"
+          v-model="checkup.coverageStartDate"
           :locale="'th'"
           :enableTimePicker="false"
           :disabled="readonly"
@@ -178,7 +256,11 @@ onMounted(async () => {
               :outlined="readonly ? false : outlined"
               :readonly="readonly"
               :borderless="readonly"
-          :model-value="coverageStartDate ? dateFormat(coverageStartDate) : ''"
+              :model-value="
+                checkup.coverageStartDate
+                  ? dateFormat(checkup.coverageStartDate)
+                  : ''
+              "
             >
               <template v-slot:prepend>
                 <q-icon
@@ -190,11 +272,11 @@ onMounted(async () => {
               </template>
               <template v-slot:append>
                 <q-icon
-              v-if="coverageStartDate && !readonly"
+                  v-if="checkup.coverageStartDate && !readonly"
                   name="mdi-close"
                   class="cursor-pointer"
                   size="xs"
-              @click="coverageStartDate = undefined"
+                  @click="checkup.coverageStartDate = undefined"
                 />
               </template>
             </q-input>
@@ -204,7 +286,7 @@ onMounted(async () => {
           utc
           autoApply
           :teleport="true"
-      v-model="coverageExpireDate"
+          v-model="checkup.coverageExpireDate"
           :locale="'th'"
           :enableTimePicker="false"
           :disabled="readonly"
@@ -222,7 +304,9 @@ onMounted(async () => {
               :readonly="readonly"
               :borderless="readonly"
               :model-value="
-            coverageExpireDate ? dateFormat(coverageExpireDate) : ''
+                checkup.coverageExpireDate
+                  ? dateFormat(checkup.coverageExpireDate)
+                  : ''
               "
             >
               <template v-slot:prepend>
@@ -235,11 +319,11 @@ onMounted(async () => {
               </template>
               <template v-slot:append>
                 <q-icon
-              v-if="coverageExpireDate && !readonly"
+                  v-if="checkup.coverageExpireDate && !readonly"
                   name="mdi-close"
                   class="cursor-pointer"
                   size="xs"
-              @click="coverageExpireDate = undefined"
+                  @click="checkup.coverageExpireDate = undefined"
                 />
               </template>
             </q-input>
@@ -252,6 +336,16 @@ onMounted(async () => {
         class="col-12 q-mt-xl q-mb-md"
         style="padding-block: 0.5px"
       />
+    </q-tab-panel>
+  </q-tab-panels>
 </template>
 
-<style scoped></style>
+<style scoped>
+.active-tab {
+  color: var(--brand-1);
+  border-left: 1px solid var(--border-color);
+  border-right: 1px solid var(--border-color);
+  margin-bottom: -1.5px;
+  border-bottom: 3px solid var(--surface-1);
+}
+</style>

src/components/03_customer-management/FormEmployeeWorkHistory.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { onMounted, reactive } from 'vue';
+import { onMounted, reactive, ref } from 'vue';
 import { dateFormat } from 'src/utils/datetime';
 import useAddressStore, {
   District,
   Province,
   SubDistrict,
 } from 'src/stores/address';
+import { EmployeeWorkCreate } from 'src/stores/employee/types';
 
 const adrressStore = useAddressStore();
 
@@ -19,15 +20,9 @@ const addrOptions = reactive<{
   subDistrictOps: [],
 });
 
-const ownerName = defineModel<string>('ownerName');
+const employeeWork = defineModel<EmployeeWorkCreate[]>('employeeWork');
-const positionName = defineModel<string>('positionName');
+
-const jobType = defineModel<string>('jobType');
+const tab = ref();
-const workPlace = defineModel<string>('workPlace');
-const remark = defineModel<string>('remark');
-const workEndDate = defineModel<Date | null>('workEndDate');
-const workPermitNo = defineModel<string>('workPermitNo');
-const workPermitIssuDate = defineModel<Date | null>('workPermitIssuDate');
-const workPermitExpireDate = defineModel<Date | null>('workPermitExpireDate');
 
 defineProps<{
   title?: string;
@@ -44,12 +39,94 @@ async function fetchProvince() {
   if (result) addrOptions.provinceOps = result;
 }
 
+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}`;
+}
+
+function removeData(index: number) {
+  if (!employeeWork.value) return;
+  if (employeeWork.value.length === 1) return;
+
+  employeeWork.value.splice(index, 1);
+
+  if (index) if (tab.value === `tab${index}`) tab.value = `tab${index - 1}`;
+  if (tab.value === `tab${employeeWork.value.length}`)
+    tab.value = `tab${employeeWork.value.length - 1}`;
+}
+
 onMounted(async () => {
   await fetchProvince();
+  tab.value = 'tab0';
 });
 </script>
 
 <template>
+  <div class="bordered-b full-width">
+    <q-tabs
+      v-model="tab"
+      dense
+      class="text-grey"
+      active-class="active-tab"
+      indicator-color="transparent"
+      align="left"
+      :breakpoint="0"
+    >
+      <q-btn
+        @click="addData"
+        flat
+        class="app-text-muted"
+        style="background-color: var(--_body-bg)"
+        icon="mdi-plus"
+        padding="8px 8px"
+        :disable="readonly"
+        :color="$q.dark.isActive ? 'primary' : ''"
+        :class="tab !== 'tab0' ? 'bordered-r' : ''"
+      />
+      <q-tab
+        v-for="(tab, index) in employeeWork"
+        v-bind:key="index"
+        :name="`tab${index}`"
+        class="content-tab text-capitalize"
+        style="z-index: 999"
+      >
+        <div class="text-weight-medium row items-center">
+          {{ $t('formDialogTabWork') + (index + 1) }}
+          <q-btn
+            v-if="!readonly && employeeWork?.length !== 1"
+            round
+            flat
+            id="closeDialog"
+            size="sm"
+            icon="mdi-close"
+            padding="xs"
+            color="red"
+            :class="{ dark: $q.dark.isActive }"
+            @click.stop="removeData(index)"
+          />
+        </div>
+      </q-tab>
+    </q-tabs>
+  </div>
+
+  <q-tab-panels v-model="tab" style="padding-top: 0px">
+    <q-tab-panel
+      v-for="(work, index) in employeeWork"
+      v-bind:key="index"
+      :name="`tab${index}`"
+      class="row col-12 items-start"
+      style="overflow: auto; height: 50vh"
+    >
       <div class="col-3 app-text-muted">• {{ $t(`workHistory`) }}</div>
       <div class="col-9 row q-col-gutter-md">
         <q-input
@@ -61,7 +138,7 @@ onMounted(async () => {
           hide-bottom-space
           class="col-6"
           :label="$t('formDialogInputOwnerName')"
-      v-model="ownerName"
+          v-model="work.ownerName"
         />
         <q-select
           id="select-positionName"
@@ -73,7 +150,7 @@ onMounted(async () => {
           hide-bottom-space
           emit-value
           map-options
-      v-model="positionName"
+          v-model="work.positionName"
           option-value="id"
           option-label="name"
           :label="$t('formDialogInputJobPosition')"
@@ -91,7 +168,7 @@ onMounted(async () => {
           hide-bottom-space
           emit-value
           map-options
-      v-model="jobType"
+          v-model="work.jobType"
           option-value="id"
           option-label="nameEN"
           :label="$t('formDialogInputJobType')"
@@ -109,7 +186,7 @@ onMounted(async () => {
           hide-bottom-space
           emit-value
           map-options
-      v-model="workPlace"
+          v-model="work.workplace"
           option-value="id"
           option-label="nameEN"
           :label="$t('formDialogInputWorkPlace')"
@@ -126,7 +203,7 @@ onMounted(async () => {
           :borderless="readonly"
           hide-bottom-space
           class="col-12"
-      v-model="remark"
+          v-model="work.remark"
           type="textarea"
         />
         <VueDatePicker
@@ -134,7 +211,7 @@ onMounted(async () => {
           utc
           autoApply
           :teleport="true"
-      v-model="workEndDate"
+          v-model="work.workEndDate"
           :locale="'th'"
           :enableTimePicker="false"
           :disabled="readonly"
@@ -151,7 +228,9 @@ onMounted(async () => {
               :outlined="readonly ? false : outlined"
               :readonly="readonly"
               :borderless="readonly"
-          :model-value="workEndDate ? dateFormat(workEndDate) : ''"
+              :model-value="
+                work.workEndDate ? dateFormat(work.workEndDate) : ''
+              "
             >
               <template v-slot:prepend>
                 <q-icon
@@ -163,11 +242,11 @@ onMounted(async () => {
               </template>
               <template v-slot:append>
                 <q-icon
-              v-if="workEndDate && !readonly"
+                  v-if="work.workEndDate && !readonly"
                   name="mdi-close"
                   class="cursor-pointer"
                   size="xs"
-              @click="workEndDate = undefined"
+                  @click="work.workEndDate = undefined"
                 />
               </template>
             </q-input>
@@ -182,14 +261,14 @@ onMounted(async () => {
           hide-bottom-space
           class="col-6"
           :label="$t('formDialogInputWorkPermitNo')"
-      v-model="workPermitNo"
+          v-model="work.workPermitNo"
         />
         <VueDatePicker
           id="date-picker-workPermitIssuDate"
           utc
           autoApply
           :teleport="true"
-      v-model="workPermitIssuDate"
+          v-model="work.workPermitIssuDate"
           :locale="'th'"
           :enableTimePicker="false"
           :disabled="readonly"
@@ -207,7 +286,9 @@ onMounted(async () => {
               :readonly="readonly"
               :borderless="readonly"
               :model-value="
-            workPermitIssuDate ? dateFormat(workPermitIssuDate) : ''
+                work.workPermitIssuDate
+                  ? dateFormat(work.workPermitIssuDate)
+                  : ''
               "
             >
               <template v-slot:prepend>
@@ -220,11 +301,11 @@ onMounted(async () => {
               </template>
               <template v-slot:append>
                 <q-icon
-              v-if="workPermitIssuDate && !readonly"
+                  v-if="work.workPermitIssuDate && !readonly"
                   name="mdi-close"
                   class="cursor-pointer"
                   size="xs"
-              @click="workPermitIssuDate = undefined"
+                  @click="work.workPermitIssuDate = undefined"
                 />
               </template>
             </q-input>
@@ -235,7 +316,7 @@ onMounted(async () => {
           utc
           autoApply
           :teleport="true"
-      v-model="workPermitExpireDate"
+          v-model="work.workPermitExpireDate"
           :locale="'th'"
           :enableTimePicker="false"
           :disabled="readonly"
@@ -253,7 +334,9 @@ onMounted(async () => {
               :readonly="readonly"
               :borderless="readonly"
               :model-value="
-            workPermitExpireDate ? dateFormat(workPermitExpireDate) : ''
+                work.workPermitExpireDate
+                  ? dateFormat(work.workPermitExpireDate)
+                  : ''
               "
             >
               <template v-slot:prepend>
@@ -266,11 +349,11 @@ onMounted(async () => {
               </template>
               <template v-slot:append>
                 <q-icon
-              v-if="workPermitExpireDate && !readonly"
+                  v-if="work.workPermitExpireDate && !readonly"
                   name="mdi-close"
                   class="cursor-pointer"
                   size="xs"
-              @click="workPermitExpireDate = undefined"
+                  @click="work.workPermitExpireDate = undefined"
                 />
               </template>
             </q-input>
@@ -283,6 +366,16 @@ onMounted(async () => {
         class="col-12 q-mt-xl q-mb-md"
         style="padding-block: 0.5px"
       />
+    </q-tab-panel>
+  </q-tab-panels>
 </template>
 
-<style scoped></style>
+<style scoped>
+.active-tab {
+  color: var(--brand-1);
+  border-left: 1px solid var(--border-color);
+  border-right: 1px solid var(--border-color);
+  margin-bottom: -1.5px;
+  border-bottom: 3px solid var(--surface-1);
+}
+</style>

src/components/FormDialog.vue

@@ -14,6 +14,7 @@ defineProps<{
   badgeClass?: string;
   noFooter?: boolean;
   noAppBox?: boolean;
+  noPaddingTab?: boolean;
   maxWidth?: number;
   employee?: boolean;
   noAddress?: boolean;
@@ -92,7 +93,6 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
             dense
             class="app-text-muted cancel-overflow"
             v-model="employeeTab"
-            content-class="content-tab"
             active-class="active-tab"
             indicator-color="transparent"
           >
@@ -134,13 +134,21 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
           <AppBox
             v-if="!noAppBox"
             bordered
+            :noPadding="noPaddingTab"
             class="column full-height"
             :class="`${$slots.prepend ? ($q.screen.gt.sm ? 'col-10' : 'col-12') : $slots.append ? 'col-6' : 'col-12'}`"
             style="padding-right: 0; padding-bottom: 0"
           >
             <div
-              class="row col-12 q-col-gutter-y-md q-pr-md q-mb-md items-start"
+              class="row col-12 q-col-gutter-y-md q-mb-md items-start"
-              :style="$q.screen.gt.sm ? 'overflow-y: auto; height: 60vh' : ''"
+              :class="noPaddingTab ? '' : 'q-pr-md'"
+              :style="
+                $q.screen.gt.sm
+                  ? noPaddingTab
+                    ? 'height: 60vh'
+                    : 'overflow-y: auto; height: 60vh'
+                  : ''
+              "
             >
               <slot name="information"></slot>
               <slot name="person"></slot>

src/i18n/en-US/form-dialog.ts

@@ -167,4 +167,7 @@ export default {
   formDialogInputVisaStayUntil: 'Permitted to Stay Until',
   formDialogInputVisaTM6: 'TM.6 Number (Arrival)',
   formDialogInputVisaEnter: 'Date of Entry into the Country',
+
+  formDialogTabCheckup: 'Checkup ',
+  formDialogTabWork: 'Work  ',
 };

src/i18n/th-th/form-dialog.ts

@@ -166,4 +166,7 @@ export default {
   formDialogInputVisaStayUntil: 'ให้อยู่ในราชอาณาจักรถึงวันที่',
   formDialogInputVisaTM6: 'เลขที่ใบ ตม.6 (ใบขาเข้า)',
   formDialogInputVisaEnter: 'วันที่เดินทางเข้ามาในประเทศ',
+
+  formDialogTabCheckup: 'ครั้งที่ ',
+  formDialogTabWork: 'ครั้งที่ ',
 };

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

@@ -147,30 +147,30 @@ const formDataEmployee = ref<EmployeeCreate>({
   provinceId: '',
 
   employeeWork: [
-    // {
+    {
-    //   workEndDate: undefined,
+      workEndDate: null,
-    //   workPermitExpireDate: undefined,
+      workPermitExpireDate: null,
-    //   workPermitIssuDate: undefined,
+      workPermitIssuDate: null,
-    //   workPermitNo: '',
+      workPermitNo: '',
-    //   workplace: '',
+      workplace: '',
-    //   jobType: '',
+      jobType: '',
-    //   positionName: '',
+      positionName: '',
-    //   ownerName: '',
+      ownerName: '',
-    //   remark: '',
+      remark: '',
-    // },
+    },
   ],
   employeeCheckup: [
-    // {
+    {
-    //   coverageExpireDate: undefined,
+      coverageExpireDate: null,
-    //   coverageStartDate: undefined,
+      coverageStartDate: null,
-    //   insuranceCompany: '',
+      insuranceCompany: '',
-    //   medicalBenefitScheme: '',
+      medicalBenefitScheme: '',
-    //   remark: '',
+      remark: '',
-    //   hospitalName: '',
+      hospitalName: '',
-    //   provinceId: '',
+      provinceId: '',
-    //   checkupResult: '',
+      checkupResult: '',
-    //   checkupType: '',
+      checkupType: '',
-    // },
+    },
   ],
   employeeOtherInfo: {
     birthPlace: '',
@@ -1170,10 +1170,14 @@ watch(fieldSelectedCustomer, async () => {
   </FormDialog>
 
   <FormDialog
+    v-model:modal="dialogEmployee"
     employee
     addressSeparator
     :noAddress="formDataEmployeeTab !== 'personalInfo'"
-    v-model:modal="dialogEmployee"
+    :noPaddingTab="
+      formDataEmployeeTab === 'healthCheck' ||
+      formDataEmployeeTab === 'workHistory'
+    "
     v-model:tabs-list="employeeTab"
     v-model:employee-tab="formDataEmployeeTab"
     v-model:same-with-employer="formDataEmployeeSameAddr"
@@ -1227,15 +1231,21 @@ watch(fieldSelectedCustomer, async () => {
         v-model:birthDate="formDataEmployee.dateOfBirth"
         v-model:nationality="formDataEmployee.nationality"
       />
+
       <FormEmployeeHealthCheck
-        v-if="formDataEmployeeTab === 'healthCheck'"
+        v-if="
+          formDataEmployeeTab === 'healthCheck' &&
+          formDataEmployee.employeeCheckup
+        "
         dense
         outlined
+        v-model:employee-checkup="formDataEmployee.employeeCheckup"
       />
       <FormEmployeeWorkHistory
         v-if="formDataEmployeeTab === 'workHistory'"
         dense
         outlined
+        v-model:employee-work="formDataEmployee.employeeWork"
       />
       <FormEmployeeOther
         v-if="