refactor: edit layout checkup

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

@@ -9,6 +9,8 @@ import { EmployeeCheckupCreate } from 'stores/employee/types';
 import { selectFilterOptionRefMod } from 'stores/utils';
 import { QSelect } from 'quasar';
 import DatePicker from '../shared/DatePicker.vue';
+
+import SelectInput from 'components/shared/SelectInput.vue';
 import {
   AddButton,
   EditButton,
@@ -31,6 +33,11 @@ const addrOptions = reactive<{
 
 const currentIndex = defineModel<number>('currentIndex');
 const employeeCheckup = defineModel<EmployeeCheckupCreate[]>('employeeCheckup');
+
+const checkupResultsOption = defineModel<{ label: string; value: string }[]>(
+  'checkupResultsOption',
+  { required: true },
+);
 const checkupTypeOption = defineModel<{ label: string; value: string }[]>(
   'checkupTypeOption',
   { required: true },
@@ -126,6 +133,13 @@ let provinceFilter: (
   update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
 ) => void;
 
+const checkupResultsOptions = ref<Record<string, unknown>[]>([]);
+const checkupResultsFilter = selectFilterOptionRefMod(
+  checkupResultsOption,
+  checkupResultsOptions,
+  'label',
+);
+
 const checkupTypeOptions = ref<Record<string, unknown>[]>([]);
 const checkupTypeFilter = selectFilterOptionRefMod(
   checkupTypeOption,
@@ -222,15 +236,6 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         </div>
       </span>
 
-      <q-input
-        :dense="dense"
-        outlined
-        :readonly="readonly || checkup.statusSave"
-        hide-bottom-space
-        class="col-5"
-        :label="$t('customerEmployee.formHealthCheck.result')"
-        v-model="checkup.checkupResult"
-      />
       <q-select
         outlined
         clearable
@@ -240,7 +245,38 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         map-options
         hide-selected
         hide-bottom-space
-        class="col-5"
+        class="col-6"
+        input-debounce="0"
+        option-value="value"
+        option-label="label"
+        v-model="checkup.checkupResult"
+        :dense="dense"
+        :readonly="readonly || checkup.statusSave"
+        :options="checkupResultsOptions"
+        :hide-dropdown-icon="readonly || checkup.statusSave"
+        :for="`${prefixId}-select-health-checkresult`"
+        :label="$t('customerEmployee.formHealthCheck.result')"
+        @filter="checkupResultsFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('general.noData') }}
+            </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
+        class="col-6"
         input-debounce="0"
         option-value="value"
         option-label="label"
@@ -261,47 +297,38 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
           </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"
-        class="col-2"
-        v-model="checkup.provinceId"
-        :dense="dense"
-        :readonly="readonly || checkup.statusSave"
-        :label="$t('form.province')"
-        :hide-dropdown-icon="readonly || checkup.statusSave"
-        :for="`${prefixId}-select-province`"
-        :options="provinceOptions"
-        @filter="provinceFilter"
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey">
-              {{ $t('general.noData') }}
-            </q-item-section>
-          </q-item>
-        </template>
-      </q-select>
       <!-- @filter="provinceFilter" -->
       <q-input
         :dense="dense"
         outlined
         :readonly="readonly || checkup.statusSave"
         hide-bottom-space
-        class="col-5"
+        class="col-12"
         :label="$t('customerEmployee.formHealthCheck.hospital')"
         v-model="checkup.hospitalName"
         :for="`${prefixId}-input-hospital`"
       />
+
+      <div class="col">
+        <DatePicker
+          :label="$t('customerEmployee.formHealthCheck.coverageStartDate')"
+          v-model="checkup.coverageStartDate"
+          :id="`${prefixId}-input-coverage-start-date`"
+          :readonly="readonly || checkup.statusSave"
+          clearable
+        />
+      </div>
+
+      <div class="col">
+        <DatePicker
+          :label="$t('customerEmployee.formHealthCheck.coverageExpireDate')"
+          v-model="checkup.coverageExpireDate"
+          :id="`${prefixId}-input-coverage-expire-date`"
+          :readonly="readonly || checkup.statusSave"
+          clearable
+        />
+      </div>
+
       <q-select
         outlined
         clearable
@@ -311,7 +338,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         map-options
         hide-selected
         hide-bottom-space
-        class="col-5"
+        class="col-6"
         input-debounce="0"
         option-value="value"
         option-label="label"
@@ -343,53 +370,6 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         type="textarea"
         :for="`${prefixId}-input-remark`"
       />
-      <DatePicker
-        :label="$t('customerEmployee.formHealthCheck.coverageStartDate')"
-        v-model="checkup.coverageStartDate"
-        class="col"
-        :id="`${prefixId}-input-coverage-start-date`"
-        :readonly="readonly || checkup.statusSave"
-        clearable
-      />
-      <DatePicker
-        :label="$t('customerEmployee.formHealthCheck.coverageExpireDate')"
-        v-model="checkup.coverageExpireDate"
-        class="col"
-        :id="`${prefixId}-input-coverage-expire-date`"
-        :readonly="readonly || checkup.statusSave"
-        clearable
-      />
-
-      <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"
-        v-model="checkup.insuranceCompany"
-        :dense="dense"
-        :readonly="readonly || checkup.statusSave"
-        :hide-dropdown-icon="readonly || checkup.statusSave"
-        :options="insuranceCompanyOptions"
-        :for="`${prefixId}-select-province`"
-        :label="$t('customerEmployee.formHealthCheck.insuranceCompany')"
-        @filter="insuranceCompanyFilter"
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey">
-              {{ $t('general.noData') }}
-            </q-item-section>
-          </q-item>
-        </template>
-      </q-select>
     </div>
   </div>
 </template>