From 2eac88cf70e0e1351c32f0ac279f586858ec3197 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 30 Jul 2024 09:44:37 +0000
Subject: [PATCH] fix: User Detail Card

---
 src/components/UsersDetailCardComponent.vue | 352 +++++++++-----------
 1 file changed, 166 insertions(+), 186 deletions(-)

diff --git a/src/components/UsersDetailCardComponent.vue b/src/components/UsersDetailCardComponent.vue
index 6d72df2b..d7cedd27 100644
--- a/src/components/UsersDetailCardComponent.vue
+++ b/src/components/UsersDetailCardComponent.vue
@@ -47,199 +47,180 @@ defineEmits<{
 </script>
 
 <template>
-  <div v-if="metadata">
+  <div
+    v-if="metadata"
+    class="full-width"
+    :class="{
+      'status-inactive': list.status === 'INACTIVE',
+    }"
+  >
     <div
-      :style="`${noBg ? 'height: 228px' : 'min-height: 310px'}`"
-      class="flip"
-      :class="{
-        'person-box__no-hover': noHover,
-        'status-inactive': list.status === 'INACTIVE',
-      }"
+      class="surface-1 full-height front bordered rounded"
+      :class="`${$q.dark.isActive ? 'dark ' : ''} color__${color} ${noBg ? 'front__no-bg' : ''}`"
+      @click="$emit('enterCard')"
     >
-      <AppBox
-        no-padding
-        class="surface-1 front"
-        bordered
-        :class="`${$q.dark.isActive ? 'dark ' : ''} color__${color} ${noBg ? 'front__no-bg' : ''}`"
-        @click="$emit('enterCard')"
+      <q-btn
+        v-if="!hideButton"
+        :id="`btn-dots-${list.code}`"
+        flat
+        round
+        padding="sm"
+        class="absolute-top-right dots-btn"
+        icon="mdi-dots-vertical"
+        style="z-index: 99"
+        size="sm"
+        @click.stop=""
       >
-        <q-btn
-          v-if="!hideButton"
-          :id="`btn-dots-${list.code}`"
-          flat
-          round
-          padding="sm"
-          class="absolute-top-right dots-btn"
-          icon="mdi-dots-vertical"
-          style="z-index: 99"
-          size="sm"
-          @click.stop=""
-        >
-          <q-menu class="bordered">
-            <q-list v-close-popup>
-              <q-item
-                id="btn-view"
-                clickable
-                dense
-                class="row q-py-sm"
-                style="white-space: nowrap"
-                @click="$emit('viewCard', 'INFO', metadata.id)"
-              >
-                <q-icon
-                  name="mdi-eye-outline"
-                  class="col-3"
-                  size="xs"
-                  style="color: hsl(var(--green-6-hsl))"
-                />
-                <span class="col-9 q-px-md flex items-center">
-                  {{ $t('viewDetail') }}
-                </span>
-              </q-item>
-              <q-item
-                id="btn-edit"
-                dense
-                clickable
-                class="row q-py-sm"
-                style="white-space: nowrap"
-                @click="$emit('updateCard', 'FORM', metadata.id)"
-                v-close-popup
-              >
-                <q-icon
-                  name="mdi-pencil-outline"
-                  class="col-3"
-                  size="xs"
-                  style="color: hsl(var(--cyan-6-hsl))"
-                />
-                <span class="col-9 q-px-md flex items-center">
-                  {{ $t('edit') }}
-                </span>
-              </q-item>
-              <q-item
-                id="btn-delete"
-                dense
-                clickable
-                @click="$emit('deleteCard', metadata.id)"
-                v-close-popup
-              >
-                <q-icon
-                  name="mdi-trash-can-outline"
-                  size="xs"
-                  class="col-3 app-text-negative"
-                />
-                <span class="col-9 q-px-md flex items-center">
-                  {{ $t('delete') }}
-                </span>
-              </q-item>
-              <q-item dense>
-                <q-item-section class="q-py-sm">
-                  <div class="q-pa-sm surface-2 rounded">
-                    <q-toggle
-                      id="toggle-status"
-                      dense
-                      size="sm"
-                      @click="$emit('toggleStatus', metadata.id)"
-                      :model-value="metadata.disabled"
-                      val="xs"
-                      padding="none"
-                    >
-                      <div class="q-ml-xs">
-                        {{
-                          metadata.disabled
-                            ? $t('switchOnLabel')
-                            : $t('switchOffLabel')
-                        }}
-                      </div>
-                    </q-toggle>
-                  </div>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-menu>
-        </q-btn>
-        <div class="row justify-center relative-position">
-          <q-card-section class="q-pt-md img-decoration">
-            <div style="position: relative">
-              <AppCircle
-                bordered
-                class="avatar"
-                style="border: 2px solid var(--border-color); height: 80px"
-                :class="{ 'edit-profile': canEditProfile }"
-                @click="
-                  () => {
-                    if (canEditProfile) $emit('editProfile');
-                  }
-                "
-              >
-                <q-img
-                  :src="list.imageUrl ?? '/no-profile.png'"
-                  style="object-fit: cover; width: 100%; height: 100%"
-                />
-                <div class="status-circle" style="">
-                  <q-icon
-                    :name="`mdi-${list.status === 'INACTIVE' ? 'close' : 'check'}`"
-                    :style="`color:${list.status === 'INACTIVE' ? 'var(--gray-6)' : 'white'}`"
-                  />
-                </div>
-              </AppCircle>
-            </div>
-
-            <!-- <q-avatar size="80px">
-              <img :src="list.imageUrl ?? '/no-profile.png'" />
-            </q-avatar>
-
-            <div class="status-circle">
+        <q-menu class="bordered">
+          <q-list v-close-popup>
+            <q-item
+              id="btn-view"
+              clickable
+              dense
+              class="row q-py-sm"
+              style="white-space: nowrap"
+              @click="$emit('viewCard', 'INFO', metadata.id)"
+            >
               <q-icon
-                :name="`mdi-${list.status === 'INACTIVE' ? 'close' : 'check'}`"
-                :style="`color:${list.status === 'INACTIVE' ? 'var(--gray-6)' : 'white'}`"
+                name="mdi-eye-outline"
+                class="col-3"
+                size="xs"
+                style="color: hsl(var(--green-6-hsl))"
               />
-            </div> -->
-          </q-card-section>
-        </div>
-        <div class="box-title">
-          <div class="rounded title">
-            {{
-              $t(
-                list.type === 'CORP'
-                  ? 'customerLegalEntity'
-                  : 'customerNaturalPerson',
-              )
-            }}
-          </div>
-        </div>
-        <q-card-section class="no-padding">
-          <div class="column items-center justify-center q-mb-md">
-            <div class="row">{{ list.name }}</div>
-            <div v-if="!noDetail">
-              {{ list.code }}
-            </div>
+              <span class="col-9 q-px-md flex items-center">
+                {{ $t('viewDetail') }}
+              </span>
+            </q-item>
+            <q-item
+              id="btn-edit"
+              dense
+              clickable
+              class="row q-py-sm"
+              style="white-space: nowrap"
+              @click="$emit('updateCard', 'FORM', metadata.id)"
+              v-close-popup
+            >
+              <q-icon
+                name="mdi-pencil-outline"
+                class="col-3"
+                size="xs"
+                style="color: hsl(var(--cyan-6-hsl))"
+              />
+              <span class="col-9 q-px-md flex items-center">
+                {{ $t('edit') }}
+              </span>
+            </q-item>
+            <q-item
+              id="btn-delete"
+              dense
+              clickable
+              @click="$emit('deleteCard', metadata.id)"
+              v-close-popup
+            >
+              <q-icon
+                name="mdi-trash-can-outline"
+                size="xs"
+                class="col-3 app-text-negative"
+              />
+              <span class="col-9 q-px-md flex items-center">
+                {{ $t('delete') }}
+              </span>
+            </q-item>
+            <q-item dense>
+              <q-item-section class="q-py-sm">
+                <div class="q-pa-sm surface-2 rounded">
+                  <q-toggle
+                    id="toggle-status"
+                    dense
+                    size="sm"
+                    @click="$emit('toggleStatus', metadata.id)"
+                    :model-value="metadata.disabled"
+                    val="xs"
+                    padding="none"
+                  >
+                    <div class="q-ml-xs">
+                      {{
+                        metadata.disabled
+                          ? $t('switchOnLabel')
+                          : $t('switchOffLabel')
+                      }}
+                    </div>
+                  </q-toggle>
+                </div>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
+      </q-btn>
+      <div class="row justify-center relative-position">
+        <q-card-section class="q-pt-md img-decoration">
+          <div style="position: relative">
+            <AppCircle
+              bordered
+              class="avatar"
+              style="border: 2px solid var(--border-color); height: 80px"
+              :class="{ 'edit-profile': canEditProfile }"
+              @click="
+                () => {
+                  if (canEditProfile) $emit('editProfile');
+                }
+              "
+            >
+              <q-img
+                :src="list.imageUrl ?? '/no-profile.png'"
+                style="object-fit: cover; width: 100%; height: 100%"
+              />
+              <div class="status-circle" style="">
+                <q-icon
+                  :name="`mdi-${list.status === 'INACTIVE' ? 'close' : 'check'}`"
+                  :style="`color:${list.status === 'INACTIVE' ? 'var(--gray-6)' : 'white'}`"
+                />
+              </div>
+            </AppCircle>
           </div>
         </q-card-section>
+      </div>
+      <div class="box-title">
+        <div class="rounded-type title text-center q-pa-xs">
+          {{
+            $t(
+              list.type === 'CORP'
+                ? 'customerLegalEntity'
+                : 'customerNaturalPerson',
+            )
+          }}
+        </div>
+      </div>
 
-        <div v-if="!noDetail">
-          <q-separator />
-          <div class="front-scroll">
-            <q-card-section
-              v-for="(d, j) in list.detail"
-              :key="j"
-              class="overflow q-pt-none"
-            >
-              <div class="text-caption app-text-muted-2">
-                {{ $t(d.label) }}
-              </div>
-              <div>{{ !d.value ? '-' : d.value }}</div>
-            </q-card-section>
+      <q-card-section class="no-padding">
+        <div class="column items-center justify-center q-mb-md">
+          <div class="row">{{ list.name }}</div>
+          <div v-if="!noDetail">
+            {{ list.code }}
           </div>
         </div>
-      </AppBox>
+      </q-card-section>
+
+      <div v-if="!noDetail">
+        <q-separator />
+        <div class="front-scroll">
+          <q-card-section
+            v-for="(d, j) in list.detail"
+            :key="j"
+            class="overflow q-pt-none"
+          >
+            <div class="text-caption app-text-muted-2">
+              {{ $t(d.label) }}
+            </div>
+            <div>{{ !d.value ? '-' : d.value }}</div>
+          </q-card-section>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.container {
-  height: 500px;
-}
-
 .flip {
   width: 100%;
   position: relative;
@@ -255,8 +236,6 @@ defineEmits<{
 
 .front {
   width: 100%;
-  height: 310px;
-  position: absolute;
   backface-visibility: hidden;
 }
 
@@ -274,8 +253,7 @@ defineEmits<{
   }
 
   .title {
-    width: 50%;
-    height: 25px;
+    width: 68px;
     background: hsl(var(--_color)) !important;
     position: relative;
     bottom: 16px;
@@ -283,15 +261,16 @@ defineEmits<{
     justify-content: center;
     align-items: center;
     color: white;
+    margin-top: -3px;
   }
 
   .front-scroll {
     background: var(--_bg-front-scroll) !important;
-    height: 150px;
+    /* height: 150px; */
   }
 
   .back-scroll {
-    height: 268px;
+    /* height: 268px; */
 
     .bg-color-text-1 {
       background: var(--_bg-back-detail-1);
@@ -323,8 +302,9 @@ defineEmits<{
   }
 }
 
-.rounded {
-  border-radius: var(--radius-1);
+.rounded-type {
+  border-bottom-left-radius: var(--radius-2);
+  border-bottom-right-radius: var(--radius-2);
 }
 
 .box-title {