From 72bce36373611abba6da0afae162a5dae0243416 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 6 Aug 2024 03:14:56 +0000
Subject: [PATCH] fix(03): form employee health check

---
 .../FormEmployeeHealthCheck.vue               | 630 +++++++++---------
 src/components/DialogForm.vue                 |   8 +-
 2 files changed, 330 insertions(+), 308 deletions(-)

diff --git a/src/components/03_customer-management/FormEmployeeHealthCheck.vue b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
index 7dbe1a5b..e631ba1d 100644
--- a/src/components/03_customer-management/FormEmployeeHealthCheck.vue
+++ b/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,339 +191,358 @@ 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="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
+      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-5"
+        :label="$t('formDialogInputCheckupRes')"
+        v-model="checkup.checkupResult"
+      />
+      <q-select
+        outlined
+        clearable
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        class="col-5"
+        input-debounce="0"
+        option-value="value"
+        option-label="label"
+        lazy-rules="ondemand"
+        v-model="checkup.checkupType"
+        :dense="dense"
+        :readonly="readonly"
+        :options="checkupTypeOptions"
+        :hide-dropdown-icon="readonly"
+        :for="`${prefixId}-select-checkup-type`"
+        :label="$t('formDialogInputCheckupType')"
+        @filter="checkupTypeFilter"
       >
-        <div class="col-md-3 col-12 app-text-muted q-pb-sm">
-          • {{ $t(`formDialogTitleHealthCheck`) }}
-        </div>
-        <div class="col-md-9 col-12 row q-col-gutter-md">
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+      <q-select
+        outlined
+        clearable
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        option-value="id"
+        input-debounce="0"
+        option-label="name"
+        lazy-rules="ondemand"
+        class="col-2"
+        v-model="checkup.provinceId"
+        :dense="dense"
+        :readonly="readonly"
+        :label="$t('province')"
+        :hide-dropdown-icon="readonly"
+        :for="`${prefixId}-select-province`"
+        :options="provinceOptions"
+        @filter="provinceFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+      <!-- @filter="provinceFilter" -->
+      <q-input
+        lazy-rules="ondemand"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-5"
+        :label="$t('formDialogInputHospital')"
+        v-model="checkup.hospitalName"
+        :for="`${prefixId}-input-hospital`"
+      />
+      <q-select
+        outlined
+        clearable
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        class="col-5"
+        input-debounce="0"
+        option-value="value"
+        option-label="label"
+        lazy-rules="ondemand"
+        v-model="checkup.medicalBenefitScheme"
+        :dense="dense"
+        :readonly="readonly"
+        :hide-dropdown-icon="readonly"
+        :options="medicalBenefitOptions"
+        :for="`${prefixId}-select-province`"
+        :label="$t('formDialogInputMedicalBenefit')"
+        @filter="medicalBenefitFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+      <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`"
+      />
+      <VueDatePicker
+        utc
+        autoApply
+        v-model="checkup.coverageStartDate"
+        :teleport="true"
+        :dark="$q.dark.isActive"
+        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
+        :enableTimePicker="false"
+        :disabled="readonly"
+        class="col"
+      >
+        <template #year="{ value }">
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+        </template>
+        <template #year-overlay-value="{ value }">
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+        </template>
+        <template #trigger>
           <q-input
             lazy-rules="ondemand"
+            :id="`${prefixId}-input-birth-date`"
+            :for="`${prefixId}-input-birth-date`"
+            :label="$t('formDialogInputCoverageStartDate')"
             :dense="dense"
             outlined
             :readonly="readonly"
-            hide-bottom-space
-            class="col-md-6 col-12"
-            :label="$t('formDialogInputCheckupRes')"
-            v-model="checkup.checkupResult"
-          />
-          <q-select
-            outlined
-            clearable
-            use-input
-            fill-input
-            emit-value
-            map-options
-            hide-selected
-            hide-bottom-space
-            class="col-6"
-            input-debounce="0"
-            option-value="value"
-            option-label="label"
-            lazy-rules="ondemand"
-            v-model="checkup.checkupType"
-            :dense="dense"
-            :readonly="readonly"
-            :options="checkupTypeOptions"
-            :hide-dropdown-icon="readonly"
-            :for="`${prefixId}-select-checkup-type`"
-            :label="$t('formDialogInputCheckupType')"
-            @filter="checkupTypeFilter"
+            placeholder="DD/MM/YYYY"
+            :mask="readonly ? '' : '##/##/####'"
+            :model-value="
+              checkup.coverageStartDate
+                ? readonly
+                  ? dateFormat(checkup.coverageStartDate)
+                  : dateFormat(checkup.coverageStartDate, false, false, true)
+                : undefined
+            "
+            @update:model-value="
+              (v) => {
+                if (v && v.toString().length === 10) {
+                  checkup.coverageStartDate = parseAndFormatDate(v, locale);
+                }
+              }
+            "
           >
-            <template v-slot:no-option>
-              <q-item>
-                <q-item-section class="text-grey">
-                  {{ $t('noResults') }}
-                </q-item-section>
-              </q-item>
+            <template v-slot:prepend>
+              <q-icon
+                size="xs"
+                name="mdi-calendar-blank-outline"
+                class="cursor-pointer"
+                color="positive"
+              />
             </template>
-          </q-select>
-          <q-select
-            outlined
-            clearable
-            use-input
-            fill-input
-            emit-value
-            map-options
-            hide-selected
-            hide-bottom-space
-            option-value="id"
-            input-debounce="0"
-            option-label="name"
-            lazy-rules="ondemand"
-            class="col-md-3 col-6"
-            v-model="checkup.provinceId"
-            :dense="dense"
-            :readonly="readonly"
-            :label="$t('province')"
-            :hide-dropdown-icon="readonly"
-            :for="`${prefixId}-select-province`"
-            :options="provinceOptions"
-            @filter="provinceFilter"
-          >
-            <template v-slot:no-option>
-              <q-item>
-                <q-item-section class="text-grey">
-                  {{ $t('noResults') }}
-                </q-item-section>
-              </q-item>
+            <template v-slot:append>
+              <q-icon
+                v-if="checkup.coverageStartDate && !readonly"
+                name="mdi-close-circle"
+                class="cursor-pointer app-text-muted"
+                size="sm"
+                @click.stop="checkup.coverageStartDate = undefined"
+              />
             </template>
-          </q-select>
-          <!-- @filter="provinceFilter" -->
+          </q-input>
+        </template>
+      </VueDatePicker>
+      <VueDatePicker
+        utc
+        autoApply
+        v-model="checkup.coverageExpireDate"
+        :teleport="true"
+        :dark="$q.dark.isActive"
+        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
+        :enableTimePicker="false"
+        :disabled="readonly"
+        class="col"
+      >
+        <template #year="{ value }">
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+        </template>
+        <template #year-overlay-value="{ value }">
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+        </template>
+        <template #trigger>
           <q-input
             lazy-rules="ondemand"
+            id="input-birth-date"
+            :label="$t('formDialogInputCoverageExpiretDate')"
             :dense="dense"
             outlined
             :readonly="readonly"
-            hide-bottom-space
-            class="col-md-9 col-12"
-            :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
-            use-input
-            fill-input
-            emit-value
-            map-options
-            hide-selected
-            hide-bottom-space
-            class="col-6"
-            input-debounce="0"
-            option-value="value"
-            option-label="label"
-            lazy-rules="ondemand"
-            v-model="checkup.medicalBenefitScheme"
-            :dense="dense"
-            :readonly="readonly"
-            :hide-dropdown-icon="readonly"
-            :options="medicalBenefitOptions"
-            :for="`${prefixId}-select-province`"
-            :label="$t('formDialogInputMedicalBenefit')"
-            @filter="medicalBenefitFilter"
+            placeholder="DD/MM/YYYY"
+            :mask="readonly ? '' : '##/##/####'"
+            :model-value="
+              checkup.coverageExpireDate
+                ? readonly
+                  ? dateFormat(checkup.coverageExpireDate)
+                  : dateFormat(checkup.coverageExpireDate, false, false, true)
+                : undefined
+            "
+            @update:model-value="
+              (v) => {
+                if (v && v.toString().length === 10) {
+                  checkup.coverageExpireDate = parseAndFormatDate(v, locale);
+                }
+              }
+            "
           >
-            <template v-slot:no-option>
-              <q-item>
-                <q-item-section class="text-grey">
-                  {{ $t('noResults') }}
-                </q-item-section>
-              </q-item>
+            <template v-slot:prepend>
+              <q-icon
+                size="xs"
+                name="mdi-calendar-blank-outline"
+                class="cursor-pointer"
+                color="positive"
+              />
             </template>
-          </q-select>
-          <q-select
-            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"
-            :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 v-slot:append>
+              <q-icon
+                v-if="checkup.coverageExpireDate && !readonly"
+                name="mdi-close-circle"
+                class="cursor-pointer app-text-muted"
+                size="sm"
+                @click.stop="checkup.coverageExpireDate = undefined"
+              />
             </template>
-          </q-select>
-          <VueDatePicker
-            utc
-            autoApply
-            v-model="checkup.coverageStartDate"
-            :teleport="true"
-            :dark="$q.dark.isActive"
-            :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-            :enableTimePicker="false"
-            :disabled="readonly"
-            class="col-md-3 col-6"
-          >
-            <template #year="{ value }">
-              {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-            </template>
-            <template #trigger>
-              <q-input
-                lazy-rules="ondemand"
-                :id="`${prefixId}-input-birth-date`"
-                :for="`${prefixId}-input-birth-date`"
-                :label="$t('formDialogInputCoverageStartDate')"
-                :dense="dense"
-                outlined
-                :readonly="readonly"
-                placeholder="DD/MM/YYYY"
-                :mask="readonly ? '' : '##/##/####'"
-                :model-value="
-                  checkup.coverageStartDate
-                    ? readonly
-                      ? dateFormat(checkup.coverageStartDate)
-                      : dateFormat(
-                          checkup.coverageStartDate,
-                          false,
-                          false,
-                          true,
-                        )
-                    : undefined
-                "
-                @update:model-value="
-                  (v) => {
-                    if (v && v.toString().length === 10) {
-                      checkup.coverageStartDate = parseAndFormatDate(v, locale);
-                    }
-                  }
-                "
-              >
-                <template v-slot:prepend>
-                  <q-icon
-                    size="xs"
-                    name="mdi-calendar-blank-outline"
-                    class="cursor-pointer"
-                    color="positive"
-                  />
-                </template>
-                <template v-slot:append>
-                  <q-icon
-                    v-if="checkup.coverageStartDate && !readonly"
-                    name="mdi-close-circle"
-                    class="cursor-pointer app-text-muted"
-                    size="sm"
-                    @click.stop="checkup.coverageStartDate = undefined"
-                  />
-                </template>
-              </q-input>
-            </template>
-          </VueDatePicker>
-          <VueDatePicker
-            utc
-            autoApply
-            v-model="checkup.coverageExpireDate"
-            :teleport="true"
-            :dark="$q.dark.isActive"
-            :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-            :enableTimePicker="false"
-            :disabled="readonly"
-            class="col-md-3 col-6"
-          >
-            <template #year="{ value }">
-              {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-            </template>
-            <template #trigger>
-              <q-input
-                lazy-rules="ondemand"
-                id="input-birth-date"
-                :label="$t('formDialogInputCoverageExpiretDate')"
-                :dense="dense"
-                outlined
-                :readonly="readonly"
-                placeholder="DD/MM/YYYY"
-                :mask="readonly ? '' : '##/##/####'"
-                :model-value="
-                  checkup.coverageExpireDate
-                    ? readonly
-                      ? dateFormat(checkup.coverageExpireDate)
-                      : dateFormat(
-                          checkup.coverageExpireDate,
-                          false,
-                          false,
-                          true,
-                        )
-                    : undefined
-                "
-                @update:model-value="
-                  (v) => {
-                    if (v && v.toString().length === 10) {
-                      checkup.coverageExpireDate = parseAndFormatDate(
-                        v,
-                        locale,
-                      );
-                    }
-                  }
-                "
-              >
-                <template v-slot:prepend>
-                  <q-icon
-                    size="xs"
-                    name="mdi-calendar-blank-outline"
-                    class="cursor-pointer"
-                    color="positive"
-                  />
-                </template>
-                <template v-slot:append>
-                  <q-icon
-                    v-if="checkup.coverageExpireDate && !readonly"
-                    name="mdi-close-circle"
-                    class="cursor-pointer app-text-muted"
-                    size="sm"
-                    @click.stop="checkup.coverageExpireDate = undefined"
-                  />
-                </template>
-              </q-input>
-            </template>
-          </VueDatePicker>
+          </q-input>
+        </template>
+      </VueDatePicker>
 
-          <div class="col-12 row justify-end" style="min-height: 50px">
-            <q-btn
-              v-if="!readonly && showBtnSave"
-              dense
-              unelevated
-              id="save-basic-info"
-              color="primary"
-              class="q-px-md"
-              :label="$t('save')"
-              @click="$emit('save', index)"
-            />
-          </div>
-        </div>
+      <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>
 
-        <q-separator
+      <!-- <div class="col-12 row justify-end" style="min-height: 50px">
+        <q-btn
+          v-if="!readonly && showBtnSave"
+          dense
+          unelevated
+          id="save-basic-info"
+          color="primary"
+          class="q-px-md"
+          :label="$t('save')"
+          @click="$emit('save', index)"
+        />
+      </div> -->
+    </div>
+  </div>
+
+  <!-- <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>
diff --git a/src/components/DialogForm.vue b/src/components/DialogForm.vue
index a07b5234..7dbcbb8c 100644
--- a/src/components/DialogForm.vue
+++ b/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)"
               />