From a8ebc85ace7763b2adcee68cbac3c6dd56507e2f Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Mon, 9 Sep 2024 14:22:07 +0700
Subject: [PATCH] refactor: show Badge virtual Branch

---
 .../01_branch-management/BranchCard.vue       | 28 +++++++++++++++++--
 src/pages/01_branch-management/MainPage.vue   |  1 +
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/01_branch-management/BranchCard.vue b/src/components/01_branch-management/BranchCard.vue
index 8fe0e32f..789a1add 100644
--- a/src/components/01_branch-management/BranchCard.vue
+++ b/src/components/01_branch-management/BranchCard.vue
@@ -13,7 +13,7 @@ defineProps<{
     branchLabelAddress: string;
     branchImgUrl: string;
   };
-
+  virtualBranch: boolean;
   metadata?: unknown;
   badgeField?: string[];
   fieldSelected?: string[];
@@ -31,7 +31,8 @@ defineProps<{
       'branch-card__none':
         color !== 'hq' && color !== 'br' && (!color || color === 'none'),
       'branch-card__hq': color === 'hq',
-      'branch-card__br': color === 'br',
+      'branch-card__br': color === 'br' && !virtualBranch,
+      'branch-card__br-virtual': color === 'br' && virtualBranch,
     }"
     @click="$emit('open')"
   >
@@ -60,7 +61,24 @@ defineProps<{
       </div>
 
       <div class="branch-card__action">
-        <slot name="action" />
+        <div class="text-right">
+          <slot name="action" />
+        </div>
+        <div
+          v-if="color === 'br'"
+          class="q-pa-xs rounded"
+          :style="`background: hsl(var(${virtualBranch ? '--blue-6-hsl' : '--purple-6-hsl'}) / 0.1)`"
+        >
+          <b
+            :style="`color: hsl(var(${virtualBranch ? '--blue-8-hsl' : '--purple-8-hsl'}) )`"
+          >
+            {{
+              $t(
+                `branch.card.${virtualBranch ? 'branchVirtual' : 'branchLabel'}`,
+              )
+            }}
+          </b>
+        </div>
       </div>
     </div>
     <div
@@ -185,6 +203,10 @@ defineProps<{
     }
   }
 
+  &.branch-card__br-virtual {
+    --_branch-card-bg: var(--blue-6-hsl);
+  }
+
   &.branch-card__inactive {
     --_branch-status-color: var(--red-4-hsl);
     --_branch-badge-bg: var(--red-4-hsl);
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 9284220d..6140d56a 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -1335,6 +1335,7 @@ watch(currentHq, () => {
                       <div class="col-12 col-md-6">
                         <BranchCard
                           class="surface-1"
+                          :virtual-branch="props.row.virtual"
                           :id="`branch-card-${props.row.name}`"
                           :class="{
                             'cursor-pointer': props.row._count.branch !== 0,