From 3f7fd7c3cdac7b61902e6d906973685a666049f5 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 8 Aug 2024 07:38:24 +0000
Subject: [PATCH] fix(01): use share button on form bank

---
 .../01_branch-management/FormBank.vue         | 30 ++++++++-----------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/components/01_branch-management/FormBank.vue b/src/components/01_branch-management/FormBank.vue
index f2d888ab..a6ae48f9 100644
--- a/src/components/01_branch-management/FormBank.vue
+++ b/src/components/01_branch-management/FormBank.vue
@@ -5,6 +5,7 @@ import { selectFilterOptionRefMod } from 'src/stores/utils';
 import { onMounted, ref, watch } from 'vue';
 import { deleteItem } from 'src/stores/utils';
 import { QSelect } from 'quasar';
+import { AddButton, DeleteButton } from 'src/components/button';
 
 const optionStore = useOptionStore();
 
@@ -76,25 +77,22 @@ watch(
 </script>
 <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"
-        class="q-pa-sm rounded q-mr-xs"
+        class="q-pa-sm rounded q-mr-sm"
         color="info"
         name="mdi-bank-outline"
         style="background-color: var(--surface-3)"
       />
       {{ $t(`${title}`) }}
-      <q-btn
-        rounded
-        color="primary"
-        class="q-ml-md"
-        icon="mdi-plus"
-        flat
-        dense
-        @click="addBankBook"
+      <AddButton
         v-if="!readonly"
+        id="btn-add-bank"
+        icon-only
+        class="q-ml-sm"
+        @click="addBankBook"
       />
     </div>
 
@@ -112,7 +110,8 @@ watch(
       />
       <span class="col-12 app-text-muted-2 flex justify-between items-center">
         {{ `${$t('bankBookNo')} ${i + 1}` }}
-        <div class="row">
+        <div class="row items-center">
+          <div style="height: 30.8px" />
           {{ $t('accountStatus') }}
           <q-toggle
             id="toggle-bank-status"
@@ -128,13 +127,10 @@ watch(
             vertical
             spaced="lg"
           />
-          <q-btn
+          <DeleteButton
             v-if="bankBookList.length !== 1 && !readonly"
-            flat
-            dense
-            size="sm"
-            color="negative"
-            icon="mdi-trash-can-outline"
+            id="btn-delete-bank"
+            icon-only
             @click="deleteItem(bankBookList, i)"
           />
         </div>