refactor: add btn

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

@@ -11,6 +11,10 @@ import { useI18n } from 'vue-i18n';
 import { checkTabBeforeAdd, selectFilterOptionRefMod } from 'src/stores/utils';
 import { QSelect } from 'quasar';
 
+import SaveButton from 'src/components/button/SaveButton.vue';
+import EditButton from 'src/components/button/EditButton.vue';
+import DeleteButton from 'src/components/button/DeleteButton.vue';
+
 const { locale } = useI18n();
 const adrressStore = useAddressStore();
 
@@ -57,6 +61,8 @@ withDefaults(
 
 defineEmits<{
   (e: 'save', index: number): void;
+  (e: 'edit', index: number): void;
+  (e: 'delete', index: number): void;
 }>();
 
 async function fetchProvince() {
@@ -173,8 +179,28 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
       />
       <span class="col-12 flex justify-between items-center">
         {{ `ครั้งที่ ${index + 1}` }}
-        <q-btn
+        <div class="row items-center">
-          v-if="!readonly"
+          <SaveButton
+            v-if="!readonly && !checkup.statusSave"
+            @click="$emit('save', index)"
+          />
+
+          <EditButton
+            v-if="!readonly && checkup.statusSave"
+            @click="$emit('edit', index)"
+            type="button"
+          />
+
+          <DeleteButton
+            v-if="!readonly && checkup.statusSave"
+            @click="$emit('delete', index)"
+            type="button"
+          />
+        </div>
+
+        <!-- <q-btn
+          v-if="!readonly && !checkup.statusSave"
+          type="submit"
           dense
           unelevated
           id="save-basic-info"
@@ -182,7 +208,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
           color="primary"
           class="q-px-md rounded"
           @click="$emit('save', index)"
-        />
+        /> -->
       </span>
 
       <q-input
@@ -194,6 +220,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         class="col-5"
         :label="$t('formDialogInputCheckupRes')"
         v-model="checkup.checkupResult"
+        :rules="[(val) => !!val || $t('formDialogInputCheckupResRequired')]"
       />
       <q-select
         outlined

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

@@ -5,6 +5,10 @@ import { EmployeeWorkCreate } from 'src/stores/employee/types';
 import { useI18n } from 'vue-i18n';
 import { checkTabBeforeAdd, selectFilterOptionRefMod } from 'src/stores/utils';
 
+import SaveButton from 'src/components/button/SaveButton.vue';
+import EditButton from 'src/components/button/EditButton.vue';
+import DeleteButton from 'src/components/button/DeleteButton.vue';
+
 const { locale } = useI18n();
 
 const employeeWork = defineModel<EmployeeWorkCreate[]>('employeeWork');
@@ -33,6 +37,8 @@ defineProps<{
 
 defineEmits<{
   (e: 'save', index: number): void;
+  (e: 'edit', index: number): void;
+  (e: 'delete', index: number): void;
 }>();
 
 function addData() {
@@ -129,16 +135,24 @@ const workplaceFilter = selectFilterOptionRefMod(
       />
       <span class="col-12 flex justify-between items-center">
         {{ `ครั้งที่ ${index + 1}` }}
-        <q-btn
+        <div class="row items-center">
-          v-if="!readonly"
+          <SaveButton
-          dense
+            v-if="!readonly && !work.statusSave"
-          unelevated
+            @click="$emit('save', index)"
-          id="save-basic-info"
+          />
-          :label="$t('save')"
+
-          color="primary"
+          <EditButton
-          class="q-px-md rounded"
+            v-if="!readonly && work.statusSave"
-          @click="$emit('save', index)"
+            @click="$emit('edit', index)"
-        />
+            type="button"
+          />
+
+          <DeleteButton
+            v-if="!readonly && work.statusSave"
+            @click="$emit('delete', index)"
+            type="button"
+          />
+        </div>
       </span>
       <q-select
         outlined