From 1e4bac13ea0e362de82742114b3f44ac23dcf3d9 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 14 Jun 2024 09:31:21 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=82?=
 =?UTF-8?q?=E0=B8=99=E0=B8=B2=E0=B8=94=E0=B8=82=E0=B8=AD=E0=B8=87=20Card?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UsersDetailCardComponent.vue | 159 +-------------------
 1 file changed, 8 insertions(+), 151 deletions(-)

diff --git a/src/components/UsersDetailCardComponent.vue b/src/components/UsersDetailCardComponent.vue
index e5598e98..c09f3bba 100644
--- a/src/components/UsersDetailCardComponent.vue
+++ b/src/components/UsersDetailCardComponent.vue
@@ -42,7 +42,7 @@ defineEmits<{
 <template>
   <div v-if="metadata">
     <div
-      :style="`${noBg ? 'height: 228px' : 'min-height: 400px'}`"
+      :style="`${noBg ? 'height: 228px' : 'min-height: 310px'}`"
       class="flip"
       :class="{
         'person-box__no-hover': noHover,
@@ -143,8 +143,8 @@ defineEmits<{
           </q-menu>
         </q-btn>
         <div class="row justify-center relative-position">
-          <q-card-section class="q-pt-xl img-decoration">
-            <q-avatar size="100px">
+          <q-card-section class="q-pt-md img-decoration">
+            <q-avatar size="80px">
               <img :src="list.imageUrl ?? '/no-profile.png'" />
             </q-avatar>
           </q-card-section>
@@ -175,152 +175,16 @@ defineEmits<{
             <q-card-section
               v-for="(d, j) in list.detail"
               :key="j"
-              class="overflow"
+              class="overflow q-pt-none"
             >
               <div class="text-caption app-text-muted-2">
                 {{ $t(d.label) }}
               </div>
-              <div>{{ d.value }}</div>
+              <div>{{ !d.value ? '-' : d.value }}</div>
             </q-card-section>
           </div>
         </div>
       </AppBox>
-
-      <AppBox
-        style="padding: 0"
-        class="back"
-        :class="`${$q.dark.isActive ? 'dark ' : ''} color__${color}`"
-        bordered
-        @click="$emit('enterCard')"
-      >
-        <div
-          class="row q-pl-md q-pb-md items-center"
-          :class="{
-            'surface-1': !$q.dark.isActive,
-            'surface-2': $q.dark.isActive,
-          }"
-          style="border-radius: 12px 12px 0px 0px"
-        >
-          <q-btn
-            flat
-            round
-            padding="sm"
-            class="absolute-top-right dots-btn"
-            icon="mdi-dots-vertical"
-            size="sm"
-            @click.stop=""
-          >
-            <q-menu class="bordered">
-              <q-list v-close-popup>
-                <q-item
-                  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
-                  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
-                  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
-                        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>
-          <q-card-section class="q-pt-xl img-decoration">
-            <q-avatar size="50px">
-              <img :src="list.imageUrl ?? '/no-profile.png'" />
-            </q-avatar>
-          </q-card-section>
-
-          <div class="col-7 q-pl-md">
-            <div class="row">{{ list.name }}</div>
-            <div class="row">{{ list.code }}</div>
-          </div>
-        </div>
-
-        <q-separator />
-        <q-scroll-area
-          class="back-scroll"
-          :class="{
-            'surface-1': $q.dark.isActive,
-            'surface-2': !$q.dark.isActive,
-          }"
-        >
-          <q-card-section class="q-pa-md">
-            <div
-              v-for="(v, i) in badge"
-              :key="v.id"
-              class="bordered row q-pa-sm q-mb-sm rounded bg-color-text-1"
-            >
-              <div class="col-2 flex flex-center">{{ i + 1 }}</div>
-              <div class="col-10 rounded q-pa-sm bg-color-text-2">
-                {{ v.branchNo }}
-              </div>
-            </div>
-          </q-card-section>
-        </q-scroll-area>
-      </AppBox>
     </div>
   </div>
 </template>
@@ -343,16 +207,14 @@ defineEmits<{
   } */
 }
 
-.front,
-.back {
+.front {
   width: 100%;
-  height: min-content;
+  height: 310px;
   position: absolute;
   backface-visibility: hidden;
 }
 
-.front,
-.back {
+.front {
   --_color: var(--teal-6);
   --_color-dark: var(--_color);
   --_bg-front-scroll: hsla(var(--_color) / 0.05);
@@ -415,11 +277,6 @@ defineEmits<{
   }
 }
 
-.back {
-  background: #f5f5f5;
-  transform: rotateY(180deg);
-}
-
 .rounded {
   border-radius: var(--radius-1);
 }