From f2f8edbd6896945e6cb8ecd5a2e12e93470b19d5 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 3 Sep 2024 13:23:52 +0700
Subject: [PATCH] refactor(01): table image

---
 src/pages/01_branch-management/MainPage.vue | 42 ++++++++++-----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index b81fc455..68d7f669 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -1165,27 +1165,21 @@ watch(currentHq, () => {
                                 'branch-card__hq': props.row.isHeadOffice,
                                 'branch-card__br': !props.row.isHeadOffice,
                               }"
-                              style="
-                                display: flex;
-                                margin-bottom: var(--size-2);
-                              "
+                              style="display: flex"
                             >
-                              <div class="">
+                              <q-avatar size="md">
                                 <q-img
+                                  class="text-center"
+                                  :ratio="1"
                                   :src="
                                     baseUrl +
                                     `/branch/${props.row.id}/branch-image?ts=${Date.now()}`
                                   "
-                                  style="
-                                    height: 3rem;
-                                    width: 3rem;
-                                    border-radius: 50%;
-                                    aspect-ratio: 1;
-                                    overflow: visible;
-                                  "
                                 >
                                   <template #error>
-                                    <div class="branch-card__icon">
+                                    <div
+                                      class="branch-card__icon no-padding full-width full-height items-center justify-center"
+                                    >
                                       <q-icon
                                         size="sm"
                                         name="mdi-office-building-outline"
@@ -1194,12 +1188,18 @@ watch(currentHq, () => {
                                   </template>
                                 </q-img>
 
-                                <!-- <q-icon
-                                  size="md"
-                                  style="scale: 0.8"
-                                  name="mdi-office-building-outline"
-                                /> -->
-                              </div>
+                                <q-badge
+                                  class="absolute-bottom-right no-padding"
+                                  style="
+                                    border-radius: 50%;
+                                    min-width: 8px;
+                                    min-height: 8px;
+                                  "
+                                  :style="{
+                                    background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
+                                  }"
+                                ></q-badge>
+                              </q-avatar>
                             </div>
                             <div class="col">
                               <div class="col">{{ props.row.name }}</div>
@@ -2074,7 +2074,7 @@ watch(currentHq, () => {
   align-items: center;
   justify-content: center;
 
-  &::after {
+  /* &::after {
     content: ' ';
     display: block;
     block-size: 0.5rem;
@@ -2085,7 +2085,7 @@ watch(currentHq, () => {
     top: calc(50% - 0.25rem);
     bottom: calc(50% - 0.25rem);
     background-color: hsla(var(--_branch-status-color) / 1);
-  }
+  } */
 
   & :deep(.q-icon) {
     transform: rotate(-45deg);