fix(03): form employee health check

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

@@ -55,6 +55,11 @@ withDefaults(
     showBtnSave: false,
   },
 );
+
+defineEmits<{
+  (e: 'save', id: string): void;
+}>();
+
 async function fetchProvince() {
   const result = await adrressStore.fetchProvince();
 
@@ -67,7 +72,7 @@ async function fetchProvince() {
   );
 }
 
-function addData() {
+function addCheckup() {
   const canAdd = checkTabBeforeAdd(employeeCheckup.value || []);
   if (canAdd) {
     employeeCheckup.value?.push({
@@ -131,7 +136,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
 </script>
 
 <template>
-  <div class="full-height full-width column">
+  <!-- <div class="full-height full-width column">
     <div class="bordered-b full-width row no-wrap">
       <q-btn
         @click="addData"
@@ -186,27 +191,57 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
           </div>
         </q-tab>
       </q-tabs>
-    </div>
+    </div> -->
 
-    <q-tab-panels v-model="tab" style="padding-top: 0px" class="col">
+  <!-- <q-tab-panels v-model="tab" style="padding-top: 0px" class="col">
       <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"
-      >
+      > -->
-        <div class="col-md-3 col-12 app-text-muted q-pb-sm">
+
-          • {{ $t(`formDialogTitleHealthCheck`) }}
+  <div class="row col-12">
+    <div class="col-12 q-pb-sm text-weight-bold text-body1">
+      <q-icon
+        flat
+        size="xs"
+        class="q-pa-sm rounded q-mr-xs"
+        color="info"
+        name="mdi-hospital-box"
+        style="background-color: var(--surface-3)"
+      />
+      {{ $t(`formDialogTitleHealthCheck`) }}
+      <q-btn icon="mdi-plus" flat dense @click="addCheckup" v-if="!readonly" />
     </div>
-        <div class="col-md-9 col-12 row q-col-gutter-md">
+
+    <div
+      v-for="(checkup, index) in employeeCheckup"
+      v-bind:key="index"
+      class="col-12 row q-col-gutter-sm"
+    >
+      <span class="col-12 app-text-muted-2 flex justify-between items-center">
+        {{ `ครั้งที่ ${index + 1}` }}
+        <q-btn
+          v-if="!readonly"
+          dense
+          unelevated
+          id="save-basic-info"
+          color="primary"
+          class="q-px-md rounded"
+          :label="$t('save')"
+          @click="$emit('save', index)"
+        />
+      </span>
+
       <q-input
         lazy-rules="ondemand"
         :dense="dense"
         outlined
         :readonly="readonly"
         hide-bottom-space
-            class="col-md-6 col-12"
+        class="col-5"
         :label="$t('formDialogInputCheckupRes')"
         v-model="checkup.checkupResult"
       />
@@ -219,7 +254,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         map-options
         hide-selected
         hide-bottom-space
-            class="col-6"
+        class="col-5"
         input-debounce="0"
         option-value="value"
         option-label="label"
@@ -254,7 +289,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         input-debounce="0"
         option-label="name"
         lazy-rules="ondemand"
-            class="col-md-3 col-6"
+        class="col-2"
         v-model="checkup.provinceId"
         :dense="dense"
         :readonly="readonly"
@@ -279,23 +314,11 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         outlined
         :readonly="readonly"
         hide-bottom-space
-            class="col-md-9 col-12"
+        class="col-5"
         :label="$t('formDialogInputHospital')"
         v-model="checkup.hospitalName"
         :for="`${prefixId}-input-hospital`"
       />
-          <q-input
-            lazy-rules="ondemand"
-            :label="$t('formDialogInputRemark')"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            hide-bottom-space
-            class="col-12"
-            v-model="checkup.remark"
-            type="textarea"
-            :for="`${prefixId}-input-remark`"
-          />
       <q-select
         outlined
         clearable
@@ -305,7 +328,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         map-options
         hide-selected
         hide-bottom-space
-            class="col-6"
+        class="col-5"
         input-debounce="0"
         option-value="value"
         option-label="label"
@@ -327,37 +350,18 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
           </q-item>
         </template>
       </q-select>
-          <q-select
+      <q-input
-            outlined
-            clearable
-            use-input
-            fill-input
-            emit-value
-            map-options
-            hide-selected
-            hide-bottom-space
-            class="col-6"
-            input-debounce="0"
-            option-label="label"
-            option-value="value"
         lazy-rules="ondemand"
-            v-model="checkup.insuranceCompany"
+        :label="$t('formDialogInputRemark')"
         :dense="dense"
+        outlined
         :readonly="readonly"
-            :hide-dropdown-icon="readonly"
+        hide-bottom-space
-            :options="insuranceCompanyOptions"
+        class="col-12"
-            :for="`${prefixId}-select-province`"
+        v-model="checkup.remark"
-            :label="$t('formDialogInputInsuranceCompany')"
+        type="textarea"
-            @filter="insuranceCompanyFilter"
+        :for="`${prefixId}-input-remark`"
-          >
+      />
-            <template v-slot:no-option>
-              <q-item>
-                <q-item-section class="text-grey">
-                  {{ $t('noResults') }}
-                </q-item-section>
-              </q-item>
-            </template>
-          </q-select>
       <VueDatePicker
         utc
         autoApply
@@ -367,7 +371,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
         :enableTimePicker="false"
         :disabled="readonly"
-            class="col-md-3 col-6"
+        class="col"
       >
         <template #year="{ value }">
           {{ $i18n.locale === 'th-th' ? value + 543 : value }}
@@ -390,12 +394,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
               checkup.coverageStartDate
                 ? readonly
                   ? dateFormat(checkup.coverageStartDate)
-                      : dateFormat(
+                  : dateFormat(checkup.coverageStartDate, false, false, true)
-                          checkup.coverageStartDate,
-                          false,
-                          false,
-                          true,
-                        )
                 : undefined
             "
             @update:model-value="
@@ -435,7 +434,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
         :enableTimePicker="false"
         :disabled="readonly"
-            class="col-md-3 col-6"
+        class="col"
       >
         <template #year="{ value }">
           {{ $i18n.locale === 'th-th' ? value + 543 : value }}
@@ -457,21 +456,13 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
               checkup.coverageExpireDate
                 ? readonly
                   ? dateFormat(checkup.coverageExpireDate)
-                      : dateFormat(
+                  : dateFormat(checkup.coverageExpireDate, false, false, true)
-                          checkup.coverageExpireDate,
-                          false,
-                          false,
-                          true,
-                        )
                 : undefined
             "
             @update:model-value="
               (v) => {
                 if (v && v.toString().length === 10) {
-                      checkup.coverageExpireDate = parseAndFormatDate(
+                  checkup.coverageExpireDate = parseAndFormatDate(v, locale);
-                        v,
-                        locale,
-                      );
                 }
               }
             "
@@ -497,7 +488,39 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         </template>
       </VueDatePicker>
 
-          <div class="col-12 row justify-end" style="min-height: 50px">
+      <q-select
+        outlined
+        clearable
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        class="col-7"
+        input-debounce="0"
+        option-label="label"
+        option-value="value"
+        lazy-rules="ondemand"
+        v-model="checkup.insuranceCompany"
+        :dense="dense"
+        :readonly="readonly"
+        :hide-dropdown-icon="readonly"
+        :options="insuranceCompanyOptions"
+        :for="`${prefixId}-select-province`"
+        :label="$t('formDialogInputInsuranceCompany')"
+        @filter="insuranceCompanyFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+
+      <!-- <div class="col-12 row justify-end" style="min-height: 50px">
         <q-btn
           v-if="!readonly && showBtnSave"
           dense
@@ -508,17 +531,18 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
           :label="$t('save')"
           @click="$emit('save', index)"
         />
+      </div> -->
     </div>
   </div>
 
-        <q-separator
+  <!-- <q-separator
           v-if="separator"
           class="col-12 q-mt-xl q-mb-md"
           style="padding-block: 0.5px"
         />
       </q-tab-panel>
     </q-tab-panels>
-  </div>
+  </div> -->
 </template>
 
 <style scoped>

src/components/DialogForm.vue

@@ -163,17 +163,15 @@ const currentTab = defineModel<string>('currentTab');
               inline-label
               mobile-arrows
               dense
-              class="app-text-muted full-width"
+              class="full-width"
               v-model="currentTab"
-              active-class="active-tab"
-              indicator-color="transparent"
               align="left"
             >
               <q-tab
-                :id="`tab-${tab.label}`"
                 v-for="tab in tabsList"
                 v-bind:key="tab.name"
-                class="content-tab text-capitalize"
+                :id="`tab-${tab.label}`"
+                class="text-capitalize"
                 :name="tab.name"
                 :label="$t(tab.label)"
               />