refactor: add btn

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

@@ -1,5 +1,12 @@
 <script setup lang="ts">
 import { EmployeeOtherCreate } from 'stores/employee/types';
+import {
+  AddButton,
+  EditButton,
+  DeleteButton,
+  SaveButton,
+  UndoButton,
+} from 'components/button';
 
 defineProps<{
   dense?: boolean;
@@ -14,7 +21,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
 </script>
 <template>
   <div class="col-12" v-if="employeeOther">
-    <div class="col-12 q-pb-sm text-weight-bold text-body1">
+    <div class="col-12 row items-center q-pb-sm text-weight-bold text-body1">
       <q-icon
         flat
         size="xs"
@@ -24,6 +31,36 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
         style="background-color: var(--surface-3)"
       />
       {{ $t('formDialogTitleFamilyHistory') }}
+
+      <div class="row q-ml-auto">
+        <UndoButton
+          v-if="!readonly && !!employeeOther.id && !employeeOther.statusSave"
+          id="btn-info-health-undo"
+          icon-only
+          @click="$emit('undo')"
+          type="button"
+        />
+        <SaveButton
+          icon-only
+          id="btn-info-health-save"
+          v-if="!readonly && !employeeOther.statusSave"
+          @click="$emit('save')"
+        />
+        <EditButton
+          icon-only
+          id="btn-info-health-edit"
+          v-if="!readonly && employeeOther.statusSave"
+          @click="$emit('edit')"
+          type="button"
+        />
+        <DeleteButton
+          icon-only
+          id="btn-info-health-delete"
+          v-if="readonly"
+          @click="$emit('delete')"
+          type="button"
+        />
+      </div>
     </div>
 
     <div class="col-12 row q-col-gutter-y-sm">