From a484d8f3ea795b30c0cda0eb30c1e6327c1d21f3 Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Mon, 10 Jun 2024 11:10:05 +0700
Subject: [PATCH] fix: disable flip card

---
 src/components/UsersDetailCardComponent.vue | 93 ++++++++++++++++++++-
 1 file changed, 90 insertions(+), 3 deletions(-)

diff --git a/src/components/UsersDetailCardComponent.vue b/src/components/UsersDetailCardComponent.vue
index 4bcf87af..7ce835fa 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' : 'aspect-ratio: 9/16'}`"
+      :style="`${noBg ? 'height: 228px' : 'min-height: 400px'}`"
       class="flip"
       :class="{
         'person-box__no-hover': noHover,
@@ -55,6 +55,93 @@ defineEmits<{
         :class="`${$q.dark.isActive ? 'dark ' : ''} color__${color} ${noBg ? 'front__no-bg' : ''}`"
         @click="$emit('enterCard')"
       >
+        <q-btn
+          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
+                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>
         <div class="row justify-center relative-position">
           <q-card-section class="q-pt-xl img-decoration">
             <q-avatar size="100px">
@@ -244,12 +331,12 @@ defineEmits<{
   position: relative;
   transition: transform 0.4s;
   transform-style: preserve-3d;
-
+  /* 
   &:not(.person-box__no-hover):hover {
     cursor: pointer;
     transition-delay: 0.3s;
     transform: rotateY(180deg);
-  }
+  } */
 }
 
 .front,