From 368e8ec5882feea62d7b8bb8653d61635d277783 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 27 Sep 2024 16:11:16 +0700
Subject: [PATCH] fix/chore: profile banner pin

---
 src/components/ProfileBanner.vue              | 39 ++++++++++++++-----
 src/pages/03_customer-management/MainPage.vue |  1 -
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/components/ProfileBanner.vue b/src/components/ProfileBanner.vue
index f376839c..da843851 100644
--- a/src/components/ProfileBanner.vue
+++ b/src/components/ProfileBanner.vue
@@ -43,10 +43,11 @@ const toggleStatus = defineModel<string>('toggleStatus', {
 const currentTab = defineModel<string | number>('currentTab');
 
 const showOverlay = ref(false);
+const smallBanner = ref(false);
 </script>
 <template>
   <q-img
-    v-if="$q.screen.gt.sm"
+    v-if="!smallBanner"
     fit="cover"
     class="cover rounded bordered relative-position"
     :style="`height: ${tabsList ? '180px' : '10vw'}`"
@@ -69,6 +70,19 @@ const showOverlay = ref(false);
           class="surface-1"
           style="border-radius: 50%; border: 4px solid var(--surface-1)"
         >
+          <q-btn
+            class="absolute-top-right q-ma-xs"
+            color="primary"
+            flat
+            rounded
+            padding="4px"
+            size="sm"
+            icon="mdi-pin-outline"
+            style="transition: 0.1s ease-in-out"
+            :style="smallBanner ? 'rotate: 90deg' : ''"
+            @click="smallBanner = !smallBanner"
+          />
+
           <q-avatar
             size="6vw"
             font-size="3vw"
@@ -261,7 +275,7 @@ const showOverlay = ref(false);
 
   <!-- small -->
   <q-img
-    v-else
+    v-if="(!$q.screen.gt.sm && smallBanner) || smallBanner"
     fit="cover"
     class="cover rounded bordered relative-position"
     :style="`height: 45px`"
@@ -273,8 +287,8 @@ const showOverlay = ref(false);
       :style="`background-image: linear-gradient(
           90deg, ${
             $q.dark.isActive
-              ? `hsla(var(--gray-10-hsl) / ${hideFade ? '0' : '1'}) 10%,hsla(var(--gray-10-hsl) / 0) 100%`
-              : `rgba(255, 255, 255, ${hideFade ? '0' : '1'}) 10%,rgba(255, 255, 255, 0) 100%`
+              ? `hsla(var(--gray-10-hsl) / 1) 0%,hsla(var(--gray-10-hsl) / 0) 100%`
+              : `rgba(255, 255, 255, 1) 10%,rgba(255, 255, 255, 0) 100%`
           }
         )`"
     >
@@ -395,12 +409,17 @@ const showOverlay = ref(false);
         </span>
       </div>
 
-      <ToggleButton
-        v-if="useToggle"
-        class="q-mr-lg"
-        two-way
-        :model-value="toggleStatus !== 'INACTIVE'"
-        @click="$emit('update:toggleStatus', toggleStatus)"
+      <q-btn
+        class="absolute-top-right q-ma-xs"
+        color="primary"
+        flat
+        rounded
+        padding="4px"
+        size="sm"
+        icon="mdi-pin-outline"
+        style="transition: 0.1s ease-in-out"
+        :style="smallBanner ? 'rotate: 90deg' : ''"
+        @click="smallBanner = !smallBanner"
       />
     </nav>
   </q-img>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 3afedab3..261e2fb1 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1329,7 +1329,6 @@ const emptyCreateDialog = ref(false);
                         </q-td>
 
                         <q-td>
-                          {{ console.log(props.row) }}
                           <q-btn
                             :id="`btn-eye-${props.row.branch[0].customerName || props.row.branch[0].firstName}`"
                             dense