From c29d33f9638aabaed6b2bd4c36464ad41fa5ebc7 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 5 Aug 2024 11:21:14 +0000
Subject: [PATCH] fix: profile banner tabs & active status

---
 src/components/ProfileBanner.vue | 165 ++++++++++++++++++++-----------
 1 file changed, 108 insertions(+), 57 deletions(-)

diff --git a/src/components/ProfileBanner.vue b/src/components/ProfileBanner.vue
index c1217ee0..ebb2e0ab 100644
--- a/src/components/ProfileBanner.vue
+++ b/src/components/ProfileBanner.vue
@@ -17,6 +17,7 @@ defineProps<{
   useToggle?: boolean;
 
   menu?: { icon: string; color: string; bgColor: string }[];
+  tabsList?: { name: string; label: string }[];
 }>();
 
 defineEmits<{
@@ -35,12 +36,17 @@ const toggleStatus = defineModel<string>('toggleStatus', {
   default: 'CREATED',
 });
 
+const currentTab = defineModel<string>('currentTab');
+
 const showOverlay = ref(false);
+
+currentTab.value = 'name1';
 </script>
 <template>
   <q-img
     fit="cover"
     class="cover rounded bordered relative-position"
+    :style="`height: ${tabsList ? '12rem' : '10rem'}`"
     :src="coverUrl || fallbackCover || 'blank-cover.png'"
     @error="coverUrl = ''"
   >
@@ -55,20 +61,17 @@ const showOverlay = ref(false);
         )`"
     >
       <!-- profile -->
-      <div class="flex items-center full-height q-pl-lg" style="z-index: 999">
+      <div class="flex items-center full-height q-pl-lg" style="z-index: 1">
         <div
           class="surface-1"
-          style="
-            border-radius: 50%;
-            border: 4px solid var(--surface-1);
-            overflow: hidden;
-          "
+          style="border-radius: 50%; border: 4px solid var(--surface-1)"
         >
-          <div
+          <!-- <div
             class="avatar__status"
             style="z-index: 2"
             :style="`${active ? 'background-color: hsla(var(--positive-bg) / 1)' : 'background-color: hsla(var(--text-mute) / 1)'}`"
-          ></div>
+          ></div> -->
+
           <q-avatar
             size="6rem"
             font-size="3rem"
@@ -96,62 +99,112 @@ const showOverlay = ref(false);
               </template>
             </q-img>
             <q-icon v-else :name="icon || 'mdi-account'" />
-
-            <!-- <Transition name="slide-fade"> -->
-            <div
-              v-if="showOverlay && !readonly"
-              class="absolute-bottom text-caption flex items-center justify-center upload-overlay"
-              :class="{ dark: $q.dark.isActive }"
-              @click.stop="$emit('edit')"
+            <q-badge
+              class="absolute-bottom-right"
+              style="
+                border-radius: 10px;
+                width: 20px;
+                height: 20px;
+                z-index: 2;
+                background: var(--surface-1);
+              "
             >
-              {{ $t('editImage') }}
-            </div>
-            <!-- </Transition> -->
+              <q-badge
+                class="absolute-center"
+                style="border-radius: 7px; width: 14px; height: 14px"
+                :style="`background: hsl(var(${active ? '--positive-bg' : '--text-mute'}))`"
+              ></q-badge>
+            </q-badge>
+
+            <Transition name="slide-fade">
+              <div
+                v-if="showOverlay && !readonly"
+                class="absolute text-caption full-width full-height"
+                style="border-radius: 50% 50%; overflow: hidden"
+                :class="{ dark: $q.dark.isActive }"
+              >
+                <div
+                  class="upload-overlay absolute-bottom flex items-center justify-center"
+                  @click.stop="$emit('edit')"
+                >
+                  {{ $t('editImage') }}
+                </div>
+              </div>
+            </Transition>
           </q-avatar>
         </div>
       </div>
 
       <!-- text -->
       <div
-        class="absolute-bottom relative-position justify-between row text-cover"
+        class="absolute-bottom relative-position column text-cover justify-between no-wrap"
         :class="{ dark: $q.dark.isActive }"
       >
-        <div class="column">
-          <span class="text-bold q-pt-xs text-body1">{{ title }}</span>
-          <span class="app-text-muted">{{ caption }}</span>
+        <div
+          class="row justify-between full-height"
+          style="padding-left: 150px"
+        >
+          <div class="column">
+            <span class="text-bold q-pt-xs text-body1">{{ title }}</span>
+            <span class="app-text-muted">{{ caption }}</span>
+          </div>
+
+          <!-- icon -->
+          <div class="row items-center q-pr-lg" style="z-index: 1">
+            <span v-if="toggleTitle" class="q-mr-md app-text-muted-2">
+              {{ toggleTitle }}
+            </span>
+            <q-toggle
+              v-if="useToggle"
+              id="toggle-status"
+              dense
+              size="md"
+              padding="none"
+              :model-value="toggleStatus !== 'INACTIVE'"
+              @click="$emit('update:toggleStatus', toggleStatus)"
+            />
+            <q-separator
+              v-if="useToggle"
+              vertical
+              class="q-my-lg"
+              spaced="lg"
+              style="background: hsl(var(--text-mute))"
+            />
+            <div class="q-gutter-x-sm">
+              <q-btn
+                v-for="(item, n) in menu"
+                :key="n"
+                flat
+                size="sm"
+                class="q-pa-xs rounded"
+                :icon="item.icon"
+                :style="`background-color: ${item.bgColor}; color: ${item.color}`"
+              />
+            </div>
+          </div>
         </div>
 
-        <!-- icon -->
-        <div class="row items-center q-pr-lg" style="z-index: 1">
-          <span v-if="toggleTitle" class="q-mr-md app-text-muted-2">
-            {{ toggleTitle }}
-          </span>
-          <q-toggle
-            v-if="useToggle"
-            id="toggle-status"
-            dense
-            size="md"
-            padding="none"
-            :model-value="toggleStatus !== 'INACTIVE'"
-            @click="$emit('update:toggleStatus', toggleStatus)"
-          />
-          <q-separator
-            v-if="useToggle"
-            vertical
-            class="q-my-lg"
-            spaced="lg"
-            style="background: hsl(var(--text-mute))"
-          />
-          <div class="q-gutter-x-sm">
-            <q-btn
-              v-for="(item, n) in menu"
-              :key="n"
-              flat
-              size="sm"
-              class="q-pa-xs rounded"
-              :icon="item.icon"
-              :style="`background-color: ${item.bgColor}; color: ${item.color}`"
-            />
+        <div class="row" v-if="tabsList && currentTab">
+          <div class="row q-px-sm full-width">
+            <q-tabs
+              inline-label
+              mobile-arrows
+              dense
+              class="app-text-muted full-width"
+              v-model="currentTab"
+              active-class="active-tab"
+              indicator-color="transparent"
+              align="left"
+            >
+              <q-tab
+                :id="`tab-${tab.label}`"
+                v-for="tab in tabsList"
+                v-bind:key="tab.name"
+                class="content-tab text-capitalize"
+                :name="tab.name"
+                :label="$t(tab.label)"
+              />
+            </q-tabs>
           </div>
         </div>
       </div>
@@ -161,7 +214,6 @@ const showOverlay = ref(false);
 
 <style lang="scss">
 .cover {
-  height: 15vh;
   overflow: hidden;
   background-size: cover;
   background-repeat: no-repeat;
@@ -169,8 +221,7 @@ const showOverlay = ref(false);
 }
 
 .text-cover {
-  height: 7.5vh;
-  padding-left: 150px;
+  height: 50%;
   background: linear-gradient(
     90deg,
     rgba(255, 255, 255, 1) 35%,
@@ -201,7 +252,7 @@ const showOverlay = ref(false);
 }
 
 .upload-overlay {
-  top: 3.5rem;
+  top: 60%;
   background-color: hsla(var(--gray-10-hsl) / 0.5);
   color: white;