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

---
 .../ProductCardComponent.vue                  | 26 ++++++---------
 .../TotalProductCardComponent.vue             | 25 ++++++--------
 src/components/ProfileBanner.vue              |  9 ++---
 src/components/TreeComponent.vue              | 33 +++++++++++++------
 4 files changed, 46 insertions(+), 47 deletions(-)

diff --git a/src/components/04_product-service/ProductCardComponent.vue b/src/components/04_product-service/ProductCardComponent.vue
index f2444d4d..8565055e 100644
--- a/src/components/04_product-service/ProductCardComponent.vue
+++ b/src/components/04_product-service/ProductCardComponent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { dateFormat } from 'src/utils/datetime';
 import { Status } from 'stores/types';
-
+import ToggleButton from '../button/ToggleButton.vue';
 withDefaults(
   defineProps<{
     title?: string;
@@ -128,23 +128,17 @@ withDefaults(
               </q-item>
               <q-item dense>
                 <q-item-section class="q-py-sm">
-                  <div class="q-pa-sm surface-2 rounded">
-                    <q-toggle
-                      dense
-                      size="sm"
+                  <div class="q-pa-sm surface-2 rounded flex items-center">
+                    <ToggleButton
+                      two-way
                       @click="$emit('toggleStatus', id)"
                       :model-value="!isDisabled"
-                      val="xs"
-                      padding="none"
-                    >
-                      <div class="q-ml-xs">
-                        {{
-                          !isDisabled
-                            ? $t('switchOnLabel')
-                            : $t('switchOffLabel')
-                        }}
-                      </div>
-                    </q-toggle>
+                    />
+                    <span class="q-pl-md">
+                      {{
+                        !isDisabled ? $t('switchOnLabel') : $t('switchOffLabel')
+                      }}
+                    </span>
                   </div>
                 </q-item-section>
               </q-item>
diff --git a/src/components/04_product-service/TotalProductCardComponent.vue b/src/components/04_product-service/TotalProductCardComponent.vue
index 1d79be7b..9a905f71 100644
--- a/src/components/04_product-service/TotalProductCardComponent.vue
+++ b/src/components/04_product-service/TotalProductCardComponent.vue
@@ -4,6 +4,7 @@ import AppBox from 'components/app/AppBox.vue';
 import { dateFormat } from 'src/utils/datetime';
 
 import { formatNumberDecimal } from 'stores/utils';
+import ToggleButton from '../button/ToggleButton.vue';
 
 const addedProduct = ref<boolean>(false);
 
@@ -106,23 +107,17 @@ withDefaults(
 
               <q-item dense>
                 <q-item-section class="q-py-sm">
-                  <div class="q-pa-sm surface-2 rounded">
-                    <q-toggle
-                      dense
-                      size="sm"
+                  <div class="q-pa-sm surface-2 rounded flex items-center">
+                    <ToggleButton
+                      two-way
                       @click="$emit('toggleStatus', data?.id)"
                       :model-value="!isDisabled"
-                      val="xs"
-                      padding="none"
-                    >
-                      <div class="q-ml-xs">
-                        {{
-                          !isDisabled
-                            ? $t('switchOnLabel')
-                            : $t('switchOffLabel')
-                        }}
-                      </div>
-                    </q-toggle>
+                    />
+                    <span class="q-pl-md">
+                      {{
+                        !isDisabled ? $t('switchOnLabel') : $t('switchOffLabel')
+                      }}
+                    </span>
                   </div>
                 </q-item-section>
               </q-item>
diff --git a/src/components/ProfileBanner.vue b/src/components/ProfileBanner.vue
index 973510ff..72f09f82 100644
--- a/src/components/ProfileBanner.vue
+++ b/src/components/ProfileBanner.vue
@@ -157,13 +157,10 @@ const showOverlay = ref(false);
             <span v-if="toggleTitle" class="q-mr-md app-text-muted-2">
               {{ toggleTitle }}
             </span>
-            <q-toggle
+
+            <ToggleButton
               v-if="useToggle"
-              id="toggle-status"
-              dense
-              size="md"
-              padding="none"
-              color="positive"
+              two-way
               :model-value="toggleStatus !== 'INACTIVE'"
               @click="$emit('update:toggleStatus', toggleStatus)"
             />
diff --git a/src/components/TreeComponent.vue b/src/components/TreeComponent.vue
index adab2045..559cb1b1 100644
--- a/src/components/TreeComponent.vue
+++ b/src/components/TreeComponent.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { BranchWithChildren } from 'stores/branch/types';
+import ToggleButton from './button/ToggleButton.vue';
+
 const nodes = defineModel<(any | BranchWithChildren)[]>('nodes', {
   default: [],
 });
@@ -20,6 +22,17 @@ withDefaults(
     labelKey: 'name',
   },
 );
+
+defineEmits<{
+  (e: 'handleHold', node: string): void;
+  (e: 'select', node: string): void;
+  (e: 'create', node: string): void;
+
+  (e: 'view', node: string): void;
+  (e: 'edit', node: string): void;
+  (e: 'delete', node: string): void;
+  (e: 'changeStatus', node: string): void;
+}>();
 </script>
 
 <template>
@@ -188,20 +201,20 @@ withDefaults(
 
                   <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-${node.name}-status`"
-                          color="positive"
-                          dense
-                          size="sm"
-                          :label="
+                          two-way
+                          :model-value="node.status !== 'INACTIVE'"
+                          @click="() => $emit('changeStatus', node)"
+                        />
+                        <span class="q-pl-md">
+                          {{
                             node.status !== 'INACTIVE'
                               ? $t('switchOnLabel')
                               : $t('switchOffLabel')
-                          "
-                          @click.stop="() => $emit('changeStatus', node)"
-                          :model-value="node.status !== 'INACTIVE'"
-                        />
+                          }}
+                        </span>
                       </div>
                     </q-item-section>
                   </q-item>