From 415aa4bc8760fd7afd5f082e0e80bc7f4dc06ef8 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 13 Aug 2024 08:55:49 +0000
Subject: [PATCH] refactor(01): use new toggle button

---
 .../01_branch-management/FormBank.vue         |  8 +--
 src/pages/01_branch-management/MainPage.vue   | 57 ++++++++++---------
 2 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/src/components/01_branch-management/FormBank.vue b/src/components/01_branch-management/FormBank.vue
index 183b2434..dbc1dd47 100644
--- a/src/components/01_branch-management/FormBank.vue
+++ b/src/components/01_branch-management/FormBank.vue
@@ -6,6 +6,7 @@ import { onMounted, ref, watch } from 'vue';
 import { deleteItem } from 'stores/utils';
 import { QSelect } from 'quasar';
 import { AddButton, DeleteButton } from 'components/button';
+import ToggleButton from '../button/ToggleButton.vue';
 
 const optionStore = useOptionStore();
 
@@ -113,13 +114,10 @@ watch(
         <div class="row items-center">
           <div style="height: 30.8px" />
           {{ $t('accountStatus') }}
-          <q-toggle
+          <ToggleButton
             id="toggle-bank-status"
-            dense
-            size="md"
-            padding="none"
-            class="q-pl-md"
             :disable="readonly"
+            class="q-ml-md"
             v-model="book.currentlyUse"
           />
           <q-separator
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index c51d6aed..fec220a4 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -35,6 +35,7 @@ import ProfileBanner from 'components/ProfileBanner.vue';
 import SideMenu from 'components/SideMenu.vue';
 import ImageUploadDialog from 'components/ImageUploadDialog.vue';
 import FormBank from 'components/01_branch-management/FormBank.vue';
+import ToggleButton from 'src/components/button/ToggleButton.vue';
 
 const $q = useQuasar();
 const { t } = useI18n();
@@ -1288,17 +1289,12 @@ watch(currentHq, () => {
 
                                 <q-item dense>
                                   <q-item-section class="q-py-sm">
-                                    <div class="q-pa-sm surface-2 rounded">
-                                      <q-toggle
-                                        color="positive"
+                                    <div
+                                      class="q-pa-sm surface-2 rounded flex items-center"
+                                    >
+                                      <ToggleButton
+                                        two-way
                                         :id="`view-detail-btn-${props.row.name}-status`"
-                                        dense
-                                        size="sm"
-                                        :label="
-                                          props.row.status !== 'INACTIVE'
-                                            ? $t('switchOnLabel')
-                                            : $t('switchOffLabel')
-                                        "
                                         @click="
                                           async () => {
                                             const res =
@@ -1316,6 +1312,13 @@ watch(currentHq, () => {
                                           props.row.status === 'ACTIVE'
                                         "
                                       />
+                                      <span class="q-pl-md">
+                                        {{
+                                          props.row.status !== 'INACTIVE'
+                                            ? $t('switchOnLabel')
+                                            : $t('switchOffLabel')
+                                        }}
+                                      </span>
                                     </div>
                                   </q-item-section>
                                 </q-item>
@@ -1498,16 +1501,15 @@ watch(currentHq, () => {
 
                                 <q-item dense>
                                   <q-item-section class="q-py-sm">
-                                    <div class="q-pa-sm surface-2 rounded">
-                                      <q-toggle
+                                    <div
+                                      class="q-pa-sm surface-2 rounded flex items-center"
+                                    >
+                                      <ToggleButton
                                         :id="`view-detail-btn-${props.row.name}-status`"
-                                        color="positive"
-                                        dense
-                                        size="sm"
-                                        :label="
-                                          props.row.status !== 'INACTIVE'
-                                            ? $t('switchOnLabel')
-                                            : $t('switchOffLabel')
+                                        two-way
+                                        :model-value="
+                                          props.row.status === 'CREATED' ||
+                                          props.row.status === 'ACTIVE'
                                         "
                                         @click="
                                           async () => {
@@ -1521,11 +1523,14 @@ watch(currentHq, () => {
                                               props.row.status = res.status;
                                           }
                                         "
-                                        :model-value="
-                                          props.row.status === 'CREATED' ||
-                                          props.row.status === 'ACTIVE'
-                                        "
                                       />
+                                      <span class="q-pl-md">
+                                        {{
+                                          props.row.status !== 'INACTIVE'
+                                            ? $t('switchOnLabel')
+                                            : $t('switchOffLabel')
+                                        }}
+                                      </span>
                                     </div>
                                   </q-item-section>
                                 </q-item>
@@ -2017,11 +2022,9 @@ watch(currentHq, () => {
 
         <q-item clickable v-ripple>
           <q-item-section avatar>
-            <q-toggle
-              dense
-              color="positive"
+            <ToggleButton
+              two-way
               :id="`view-detail-btn-${currentNode.name}-status`"
-              size="sm"
               @click="
                 async () => {
                   if (!currentNode) return;