From b9dd21d7bddac60a790d59ca56af1a936b42e389 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 9 Aug 2024 02:10:06 +0000
Subject: [PATCH] fix(03): employee drawer info work history

---
 .../FormEmployeeWorkHistory.vue               | 43 +++++++++++--------
 1 file changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/components/03_customer-management/FormEmployeeWorkHistory.vue b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
index 6295c54f..369acdbd 100644
--- a/src/components/03_customer-management/FormEmployeeWorkHistory.vue
+++ b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
@@ -4,11 +4,13 @@ import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
 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';
-
+import {
+  AddButton,
+  EditButton,
+  DeleteButton,
+  SaveButton,
+  UndoButton,
+} from 'src/components/button';
 const { locale } = useI18n();
 
 const employeeWork = defineModel<EmployeeWorkCreate[]>('employeeWork');
@@ -39,6 +41,7 @@ defineEmits<{
   (e: 'save', index: number): void;
   (e: 'edit', index: number): void;
   (e: 'delete', index: number): void;
+  (e: 'undo'): void;
 }>();
 
 function addData() {
@@ -99,7 +102,7 @@ const workplaceFilter = selectFilterOptionRefMod(
 
 <template>
   <div class="row col-12">
-    <div class="col-12 q-pb-sm text-weight-bold text-body1">
+    <div class="col-12 q-pb-sm text-weight-bold text-body1 row items-center">
       <q-icon
         flat
         size="xs"
@@ -109,15 +112,12 @@ const workplaceFilter = selectFilterOptionRefMod(
         style="background-color: var(--surface-3)"
       />
       {{ $t(`workHistory`) }}
-      <q-btn
-        rounded
-        color="primary"
-        class="q-ml-md"
-        icon="mdi-plus"
-        flat
-        dense
-        @click="addData"
+      <AddButton
         v-if="!readonly"
+        id="btn-add-bank"
+        icon-only
+        class="q-ml-sm"
+        @click="addData"
       />
     </div>
 
@@ -136,19 +136,28 @@ const workplaceFilter = selectFilterOptionRefMod(
       <span class="col-12 flex justify-between items-center">
         {{ `ครั้งที่ ${index + 1}` }}
         <div class="row items-center">
+          <UndoButton
+            v-if="!readonly"
+            id="btn-info-health-undo"
+            icon-only
+            @click="$emit('undo')"
+            type="button"
+          />
           <SaveButton
+            icon-only
             v-if="!readonly && !work.statusSave"
             @click="$emit('save', index)"
           />
 
           <EditButton
-            v-if="!readonly && work.statusSave"
+            icon-only
+            v-if="readonly"
             @click="$emit('edit', index)"
             type="button"
           />
-
           <DeleteButton
-            v-if="!readonly && work.statusSave"
+            icon-only
+            v-if="readonly"
             @click="$emit('delete', index)"
             type="button"
           />