From 18c1f42ef68ae2b60bce915e72e5160f1e81a607 Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Fri, 14 Jun 2024 16:36:28 +0700
Subject: [PATCH] fix: change product card UI

---
 .../ProductCardComponent.vue                  | 180 +++++++++++++-----
 src/pages/04_product-service/MainPage.vue     |   5 +-
 2 files changed, 137 insertions(+), 48 deletions(-)

diff --git a/src/components/04_product-service/ProductCardComponent.vue b/src/components/04_product-service/ProductCardComponent.vue
index 325ed278..a69dc389 100644
--- a/src/components/04_product-service/ProductCardComponent.vue
+++ b/src/components/04_product-service/ProductCardComponent.vue
@@ -10,6 +10,7 @@ withDefaults(
     color?: string;
     status?: Status;
     date?: Date;
+    isType?: boolean;
   }>(),
   {
     color: 'var(--brand-1)',
@@ -19,55 +20,142 @@ withDefaults(
 
 <template>
   <div
-    class="full-width rounded hover-card"
-    :style="`border:1px solid ${color}`"
+    class="full-width rounded hover-card bordered q-pa-sm"
     @click="$emit('onClick')"
   >
-    <div class="q-pa-md row justify-between items-center">
-      <q-btn
-        round
-        icon="mdi-folder"
-        size="12px"
-        flat
-        :style="`color:${color};background-color:var(--surface-0)`"
-      />
-      <AllAroundBtn
-        :label="'viewDetail'"
-        :color="color"
-        @view-detail="$emit('viewDetail')"
-      />
-    </div>
-    <div class="q-px-md">
-      <div class="text-subtitle1 text-bold">{{ title }}</div>
-      <div class="text-subtitle3">{{ subtitle }}</div>
-    </div>
-    <div class="q-pa-md q-mt-lg sub-card">
-      <div>
-        <div class="row justify-between q-mb-sm">
-          <div class="app-text-muted">{{ $t('status') }}</div>
-
-          <q-badge
-            v-if="status !== 'INACTIVE'"
-            class="q-px-md q-py-xs rounded"
-            style="background-color: var(--teal-0); color: var(--teal-6)"
-          >
-            {{ $t('statusACTIVE') }}
-          </q-badge>
-          <q-badge
-            v-else
-            text-color="orange"
-            class="q-px-md q-py-xs rounded"
-            style="background-color: var(--red-1); color: var(--orange-4)"
-          >
-            {{ $t('statusINACTIVE') }}
-          </q-badge>
-        </div>
-        <div class="row justify-between">
-          <div class="app-text-muted">{{ 'วันที่ล่าสุด' }}</div>
-          <div>{{ dateFormat(date) }}</div>
-        </div>
-        <div></div>
+    <div
+      class="relative-position rounded q-pb-lg"
+      :style="`background-color:hsla(${color}/0.1)`"
+    >
+      <div class="row justify-between items-center">
+        <q-btn
+          round
+          icon="mdi-folder"
+          size="12px"
+          class="q-my-md q-ml-md"
+          flat
+          :style="`color:hsl(${color});background-color:var(--surface-0)`"
+        />
+        <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')"
+              >
+                <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')"
+                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')"
+                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-list>
+          </q-menu>
+        </q-btn>
       </div>
+
+      <div class="q-px-md">
+        <div class="text-subtitle1 text-bold">{{ title }}</div>
+        <div class="text-subtitle3 app-text-muted">{{ subtitle }}</div>
+        <div class="row q-gutter-md q-mt-sm">
+          <div
+            v-if="!isType"
+            class="col-3 bordered row justify-between q-px-sm rounded no-wrap"
+            style="border-radius: 5px"
+          >
+            <div><q-icon name="mdi-folder-table" /></div>
+            <div>10</div>
+          </div>
+          <div
+            class="col-3 bordered row justify-between q-px-sm rounded no-wrap"
+            style="border-radius: 5px"
+          >
+            <div><q-icon name="mdi-server-network" /></div>
+            <div>10</div>
+          </div>
+          <div
+            class="col-3 bordered row justify-between q-px-sm rounded no-wrap"
+            style="border-radius: 5px"
+          >
+            <div><q-icon name="mdi-shopping" /></div>
+            <div>10</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="q-pt-lg q-pb-sm row justify-between">
+      <div class="flex items-center">
+        <q-icon
+          size="xs"
+          name="mdi-calendar-month"
+          class="q-mr-sm rounded q-pa-xs"
+          style="color: var(--stone-6); background-color: var(--surface-3)"
+        />
+        {{ dateFormat(date) }}
+      </div>
+      <q-btn
+        @click.stop="$emit('viewDetail')"
+        unelevated
+        class="q-px-sm"
+        :label="$t('detail')"
+        style="background-color: var(--indigo-0); color: var(--blue-5)"
+      >
+        <q-icon
+          size="xs"
+          name="mdi-chevron-right"
+          class="rounded"
+          style="color: var(--blue-5)"
+        />
+      </q-btn>
     </div>
   </div>
 </template>
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 1868b0d3..42d5c910 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -510,10 +510,11 @@ watch(currentStatus, async () => {
             <ProductCardComponent
               v-if="productMode === 'type'"
               :title="v.name"
+              isType
               :subtitle="v.code"
               :date="new Date(v.updatedAt)"
               :status="v.status"
-              color="var(--purple-11)"
+              color="var(--purple-11-hsl)"
               @view-detail="
                 () => {
                   clearForm();
@@ -536,7 +537,7 @@ watch(currentStatus, async () => {
               :subtitle="v.code"
               :date="new Date(v.updatedAt)"
               :status="v.status"
-              color="var(--pink-6)"
+              color="var(--pink-6-hsl)"
               @view-detail="
                 () => {
                   clearForm();