fix(03): employee drawer info & icon outline

src/components/03_customer-management/employee/BasicInformation.vue

@@ -3,8 +3,12 @@ import { QSelect } from 'quasar';
 import { CustomerBranch } from 'src/stores/customer/types';
 import { selectFilterOptionRefMod } from 'src/stores/utils';
 import { onMounted, ref, watch } from 'vue';
-
-import SaveButton from 'src/components/button/SaveButton.vue';
+import {
+  EditButton,
+  DeleteButton,
+  SaveButton,
+  UndoButton,
+} from 'src/components/button';
 
 const optionsBranch = defineModel<{ id: string; name: string }[]>(
   'optionsBranch',
@@ -25,26 +29,24 @@ const customerBranch = defineModel<{
 const nrcNo = defineModel<string>('nrcNo');
 const code = defineModel<string>('code');
 
-const props = withDefaults(
-  defineProps<{
-    title?: string;
-    dense?: boolean;
-    outlined?: boolean;
-    readonly?: boolean;
-    separator?: boolean;
-    typeCustomer?: string;
-    employee?: boolean;
-    employeeOwnerOption?: CustomerBranch[];
-    prefixId: string;
-    showBtnSave?: boolean;
-  }>(),
-  {
-    showBtnSave: false,
-  },
-);
+defineProps<{
+  title?: string;
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  typeCustomer?: string;
+  employee?: boolean;
+  employeeOwnerOption?: CustomerBranch[];
+  prefixId: string;
+  showBtnSave?: boolean;
+}>();
 
 defineEmits<{
   (e: 'filterOwnerBranch', val: string, update: void): void;
+  (e: 'save'): void;
+  (e: 'undo'): void;
+  (e: 'delete'): void;
+  (e: 'edit'): void;
 }>();
 
 const branchOptions = ref<Record<string, unknown>[]>([]);
@@ -74,16 +76,49 @@ onMounted(() => {
     <div
       class="col-12 items-center row justify-between 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-office-building-outline"
-        style="background-color: var(--surface-3)"
-      />
-      {{ $t(`${title}`) }}
-      <SaveButton class="q-ml-auto" v-if="!readonly" @click="$emit('save')" />
+      <div>
+        <q-icon
+          flat
+          size="xs"
+          class="q-pa-sm rounded q-mr-xs"
+          color="info"
+          name="mdi-office-building-outline"
+          style="background-color: var(--surface-3)"
+        />
+        {{ $t(`${title}`) }}
+      </div>
+
+      <!-- v-if="!readonly" -->
+      <div class="row">
+        <UndoButton
+          v-if="!readonly"
+          id="btn-info-basic-undo"
+          icon-only
+          @click="$emit('undo')"
+          type="button"
+        />
+        <SaveButton
+          v-if="!readonly"
+          id="btn-info-basic-save"
+          icon-only
+          @click="$emit('save')"
+          type="button"
+        />
+        <EditButton
+          v-if="readonly"
+          id="btn-info-basic-edit"
+          icon-only
+          @click="$emit('edit')"
+          type="button"
+        />
+        <DeleteButton
+          v-if="readonly"
+          id="btn-info-basic-delete"
+          icon-only
+          @click="$emit('delete')"
+          type="button"
+        />
+      </div>
     </div>
 
     <div class="col-12 row" style="gap: var(--size-2)">
@@ -96,7 +131,7 @@ onMounted(() => {
         :hide-dropdown-icon="readonly"
         :dense="dense"
         outlined
-        :readonly="readonly || customerBranch !== undefined"
+        :readonly="readonly"
         hide-bottom-space
         class="col-12"
         :label="$t('formDialogEmployerBranchCode')"
@@ -305,6 +340,7 @@ onMounted(() => {
         outlined
         hide-bottom-space
         :readonly="readonly"
+        :disable="!readonly"
         class="col-3"
         :label="$t('formDialogEmployeeID')"
         v-model="code"