From a25876a322cb1e2ec0b59de23a68fd9c422280cf Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 23 Apr 2024 11:12:01 +0000
Subject: [PATCH] refactor: customer card

---
 src/components/UsersDetailCardComponent.vue | 197 ++++++++++++++++----
 1 file changed, 156 insertions(+), 41 deletions(-)

diff --git a/src/components/UsersDetailCardComponent.vue b/src/components/UsersDetailCardComponent.vue
index b1acd976..59080320 100644
--- a/src/components/UsersDetailCardComponent.vue
+++ b/src/components/UsersDetailCardComponent.vue
@@ -3,9 +3,21 @@ import AppBox from './app/AppBox.vue';
 
 withDefaults(
   defineProps<{
+    noDetail?: boolean;
+    noHover?: boolean;
+    noBg?: boolean;
     dark?: boolean;
     width?: string;
     color: 'purple' | 'green';
+    gridColumns?: number;
+    metadata?: { id: string; disabled: boolean };
+    list: {
+      id: string;
+      type: 'customerLegalEntity' | 'customerNaturalPerson';
+      name: string;
+      code: string;
+      detail?: { label: string; value: string }[];
+    };
   }>(),
   {
     width: '300px',
@@ -13,44 +25,64 @@ withDefaults(
     color: 'green',
   },
 );
+
+defineEmits<{
+  (e: 'deleteCard', id: string): void;
+  (e: 'updateCard', action: 'FORM' | 'INFO', id: string): void;
+  (e: 'enterCard', action: 'FORM' | 'INFO', id: string): void;
+  (e: 'toggleStatus', id: string): void;
+}>();
 </script>
 
 <template>
-  <div class="container">
-    <div style="aspect-ratio: 9/16" class="flip">
+  <div v-if="metadata">
+    <div
+      :style="`${noBg ? 'aspect-ratio: 1.91/2' : 'aspect-ratio: 9/16'}`"
+      class="flip"
+      :class="{
+        'person-box__no-hover': noHover,
+      }"
+    >
       <AppBox
-        style="padding: 0"
-        :class="`${$q.dark.isActive ? 'dark ' : ''} color__${color}`"
+        no-padding
         class="surface-1 front"
         bordered
+        :class="`${$q.dark.isActive ? 'dark ' : ''} color__${color} ${noBg ? 'front__no-bg' : ''}`"
+        @click="$emit('enterCard', 'INFO', metadata.id)"
       >
-        <div class="row justify-center">
-          <q-card-section class="q-pt-xl img">
+        <div class="row justify-center relative-position">
+          <q-card-section class="q-pt-xl img-decoration">
             <q-avatar size="100px">
               <img src="https://cdn.quasar.dev/img/avatar1.jpg" />
             </q-avatar>
           </q-card-section>
         </div>
         <div class="box-title">
-          <div class="rounded title">นิติบุคคล</div>
+          <div class="rounded title">{{ $t(list.type) }}</div>
         </div>
         <q-card-section class="no-padding">
-          <div class="column items-center justify-center">
-            <div class="row">นางสาวสุดใจ แสนดี</div>
-            <div class="row q-mb-md">HQ0001</div>
+          <div class="column items-center justify-center q-mb-md">
+            <div class="row">{{ list.name }}</div>
+            <div v-if="!noDetail">
+              {{ list.code }}
+            </div>
           </div>
         </q-card-section>
 
-        <div>
-          <q-scroll-area
-            class="front-scroll"
-            style="border-radius: 0px 0px 12px 12px"
-          >
-            <q-card-section v-for="v in [1, 2]" :key="v" class="overflow">
-              <div class="color-front-text">ชื่อ บริษัท/นิติบุคคล ภาษาไทย</div>
-              <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"
+            >
+              <div class="text-caption app-text-muted-2">
+                {{ d.label }}
+              </div>
+              <div>{{ d.value }}</div>
             </q-card-section>
-          </q-scroll-area>
+          </div>
         </div>
       </AppBox>
 
@@ -59,6 +91,7 @@ withDefaults(
         class="back"
         :class="`${$q.dark.isActive ? 'dark ' : ''} color__${color}`"
         bordered
+        @click="$emit('enterCard', 'INFO', metadata.id)"
       >
         <div
           class="row q-pl-md q-pb-md items-center"
@@ -68,18 +101,105 @@ withDefaults(
           }"
           style="border-radius: 12px 12px 0px 0px"
         >
-          <q-card-section class="q-pt-xl img">
+          <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('enterCard', '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="https://cdn.quasar.dev/img/avatar1.jpg" />
             </q-avatar>
           </q-card-section>
 
           <div class="col-7 q-pl-md">
-            <div class="row">นางสาวสุขใจ แสนดี</div>
-            <div class="row">HQ0001</div>
+            <div class="row">{{ list.name }}</div>
+            <div class="row">{{ list.code }}</div>
           </div>
         </div>
 
+        <q-separator />
         <q-scroll-area
           class="back-scroll"
           :class="{
@@ -104,23 +224,19 @@ withDefaults(
 </template>
 
 <style scoped>
-.color-front-text {
-  color: var(--color-front-title);
-}
-
 .container {
-  width: 300px;
   height: 500px;
 }
 
 .flip {
-  cursor: pointer;
   width: 100%;
   position: relative;
   transition: transform 0.4s;
   transform-style: preserve-3d;
 
-  &:hover {
+  &:not(.person-box__no-hover):hover {
+    cursor: pointer;
+    transition-delay: 0.3s;
     transform: rotateY(180deg);
   }
 }
@@ -141,7 +257,7 @@ withDefaults(
   --_bg-back-detail-1: white;
   --_bg-back-detail-2: hsla(var(--_color) / 0.05) !important;
 
-  .img {
+  .img-decoration {
     background: hsl(var(--_color)) !important;
     border-bottom-left-radius: 100px;
     border-bottom-right-radius: 100px;
@@ -160,17 +276,12 @@ withDefaults(
   }
 
   .front-scroll {
-    border-radius: 0px 0px 5px 5px;
     background: var(--_bg-front-scroll) !important;
-    height: 254px;
-    max-width: 300px;
+    height: 150px;
   }
 
   .back-scroll {
-    height: 370px;
-    max-width: 300px;
-
-    border-radius: 0px 0px 15px 15px;
+    height: 268px;
 
     .bg-color-text-1 {
       background: var(--_bg-back-detail-1);
@@ -182,19 +293,23 @@ withDefaults(
 
   &.dark {
     color: hsl(--_color-dark) !important;
-    background-color: transparent !important;
+    background-color: var(--surface-2) !important;
 
     --_bg-back-avatar: var(--gray-11) !important;
     --_bg-back-detail-1: var(--gray-9) !important;
-    --_bg-front-scroll: var(--gray-11);
+    --_bg-front-scroll: hsla(var(--_color) / 0.1) !important;
     --_bg-back-detail-2: hsla(var(--_color) / 0.1) !important;
+
+    &.front__no-bg {
+      background-color: transparent !important;
+    }
   }
   &.color__purple {
     --_color: var(--purple-11-hsl);
   }
 
   &.color__green {
-    --_color: var(--green-9-hsl);
+    --_color: var(--teal-9-hsl);
   }
 }
 
@@ -204,7 +319,7 @@ withDefaults(
 }
 
 .rounded {
-  border-radius: 5px 5px 5px 5px;
+  border-radius: var(--radius-1);
 }
 
 .box-title {