From 06571e84ef44879bcf35d3689b0b06d0d22d20c2 Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Thu, 13 Jun 2024 15:59:09 +0700
Subject: [PATCH] fix: cart UI on dialog footer

---
 .../TotalProductCardComponent.vue               |  4 ++--
 src/components/FormDialog.vue                   |  8 ++++++--
 src/pages/04_product-service/MainPage.vue       | 17 +++++++++++++++++
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/components/04_product-service/TotalProductCardComponent.vue b/src/components/04_product-service/TotalProductCardComponent.vue
index f29a033a..16fe0cc0 100644
--- a/src/components/04_product-service/TotalProductCardComponent.vue
+++ b/src/components/04_product-service/TotalProductCardComponent.vue
@@ -16,7 +16,6 @@ const addedProduct = ref<boolean>(false);
             padding="sm"
             class="absolute-top-right dots-btn app-text-muted"
             icon="mdi-dots-vertical"
-            style="z-index: 99"
             size="sm"
             @click.stop=""
           >
@@ -78,7 +77,8 @@ const addedProduct = ref<boolean>(false);
       <div class="row justify-between items-center q-mb-xs">
         <div>
           <q-icon
-            name="mdi-clock-outline surface-0 rounded q-pa-xs app-text-muted"
+            name="mdi-clock-outline"
+            class="surface-0 rounded q-pa-xs app-text-muted"
             size="20px"
           />
           14 วัน
diff --git a/src/components/FormDialog.vue b/src/components/FormDialog.vue
index 5fef3356..cdf903ca 100644
--- a/src/components/FormDialog.vue
+++ b/src/components/FormDialog.vue
@@ -108,13 +108,17 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
           </q-tabs>
         </div>
         <div
-          class="row q-pa-lg"
+          class="row q-pa-lg scroll"
           :class="{
             dark: $q.dark.isActive,
             'surface-2': !employee,
             'surface-tab': employee,
           }"
-          :style="$q.screen.gt.sm ? '' : 'overflow-y: auto; max-height: 75vh'"
+          :style="
+            $q.screen.gt.sm
+              ? 'max-height: 75vh'
+              : 'overflow-y: auto; max-height: 75vh'
+          "
         >
           <!-- prepend -->
           <div
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index d1abf410..272cdfa2 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -609,6 +609,23 @@ watch(productMode, () => (inputSearch.value = ''));
     "
     :close="() => {}"
   >
+    <template #footer>
+      <div class="row items-center q-gutter-md">
+        <q-icon name="mdi-cart" class="app-text-muted" size="sm" />
+        <div class="relative-position" style="bottom: 15px; right: 25px">
+          <div
+            class="absolute bg-red text-white flex justify-center text-center rounded items-center"
+            style="width: 16px; height: 16px; font-size: 11px"
+          >
+            2
+          </div>
+        </div>
+        <div>
+          รวมสินค้าทั้งหมด
+          <div class="text-bold" style="color: var(--green-10)">฿ 2,400</div>
+        </div>
+      </div>
+    </template>
     <TotalProductComponent />
   </FormDialog>
 </template>