From 2f289cfaea216a2504d365378819327170b59234 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 15 Aug 2024 15:18:26 +0700
Subject: [PATCH] refactor(04): service work product price color

---
 .../WorkManagementComponent.vue               | 65 ++++++++++++++++---
 src/layouts/DrawerComponent.vue               |  1 -
 src/pages/04_product-service/MainPage.vue     |  8 +--
 3 files changed, 60 insertions(+), 14 deletions(-)

diff --git a/src/components/04_product-service/WorkManagementComponent.vue b/src/components/04_product-service/WorkManagementComponent.vue
index 528123a3..738d5df4 100644
--- a/src/components/04_product-service/WorkManagementComponent.vue
+++ b/src/components/04_product-service/WorkManagementComponent.vue
@@ -235,7 +235,7 @@ defineEmits<{
               <div
                 class="row col items-center justify-between full-width surface-1 q-py-md q-px-sm"
               >
-                <div class="row items-center col-9 no-wrap" v-if="productItems">
+                <div class="row items-center col-8 no-wrap" v-if="productItems">
                   <q-btn
                     v-if="!readonly"
                     id="btn-product-up"
@@ -302,8 +302,8 @@ defineEmits<{
                         </q-tooltip>
                       </span>
                       <div
-                        class="bordered q-px-sm"
-                        style="border-radius: 6px; max-width: 60px"
+                        class="bordered q-px-xs ellipsis"
+                        style="border-radius: 6px; max-width: 100px"
                       >
                         {{ product.code }}
                       </div>
@@ -311,17 +311,44 @@ defineEmits<{
                   </div>
                 </div>
 
-                <div class="row justify-end text-right col-3 q-pr-sm">
+                <div class="row justify-end text-right col q-pr-sm">
                   <span
-                    class="col-12 text-weight-bold text-h6"
+                    class="col-12 q-col-gutter-md row"
                     style="color: var(--teal-9)"
                   >
-                    ฿ {{ formatNumberDecimal(product.price, 2) }}
+                    <span class="col ellipsis price-orange text-weight-bold">
+                      <div class="text-caption app-text-muted-2">
+                        {{ $t('salePrice') }}
+                      </div>
+                      ฿{{ formatNumberDecimal(product.price, 2) }}
+                      <q-tooltip>
+                        ฿{{ formatNumberDecimal(product.price, 2) }}
+                      </q-tooltip>
+                    </span>
+                    <span class="col ellipsis price-purple text-weight-bold">
+                      <div class="text-caption app-text-muted-2">
+                        {{ $t('agentPrice') }}
+                      </div>
+                      ฿{{ formatNumberDecimal(product.agentPrice, 2) }}
+                      <q-tooltip>
+                        ฿{{ formatNumberDecimal(product.agentPrice, 2) }}
+                      </q-tooltip>
+                    </span>
+                    <span class="col ellipsis price-pink column">
+                      <div class="text-caption app-text-muted-2">
+                        {{ $t('processingPrice') }}
+                      </div>
+                      ฿{{ formatNumberDecimal(product.serviceCharge, 2) }}
+                      <q-tooltip>
+                        ฿{{ formatNumberDecimal(product.serviceCharge, 2) }}
+                      </q-tooltip>
+                    </span>
                   </span>
-                  <span class="col-9 text-caption app-text-muted-2">
+
+                  <span class="col-9 q-mt-sm text-caption app-text-muted-2">
                     {{ $t('processTime') }}
                   </span>
-                  <span class="col-3 text-caption app-text-muted-2">
+                  <span class="col-3 q-mt-sm text-caption app-text-muted-2">
                     {{ product.process }} {{ $t('day') }}
                   </span>
                 </div>
@@ -338,7 +365,9 @@ defineEmits<{
                 round
                 color="negative"
                 @click.stop="$emit('deleteProduct', productItems, index)"
-              />
+              >
+                <q-tooltip>{{ $t('delete') }}</q-tooltip>
+              </q-btn>
             </div>
           </div>
           <div v-else class="app-text-muted q-py-md q-px-lg">
@@ -381,4 +410,22 @@ defineEmits<{
   padding-top: 16px;
   min-width: 0px;
 }
+
+.price-orange {
+  color: var(--orange-5);
+  &.dark {
+    color: var(--orange-6);
+  }
+}
+
+.price-purple {
+  color: var(--violet-11);
+  &.dark {
+    color: var(--violet-10);
+  }
+}
+
+.price-pink {
+  color: var(--pink-6);
+}
 </style>
diff --git a/src/layouts/DrawerComponent.vue b/src/layouts/DrawerComponent.vue
index 5c306138..3309ada4 100644
--- a/src/layouts/DrawerComponent.vue
+++ b/src/layouts/DrawerComponent.vue
@@ -15,7 +15,6 @@ const role = ref();
 onMounted(async () => {
   const uid = getUserId();
   role.value = getRole();
-  console.log(role.value);
 
   if (!uid) return;
 
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 7149fe3e..e298536e 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -3012,7 +3012,7 @@ watch(
                                 {{ $t('salePrice') }}
                               </div>
                               <div class="col-4 text-weight-bold">
-                                {{
+                                ฿{{
                                   formatNumberDecimal(props.row.price || 0, 2)
                                 }}
                               </div>
@@ -3028,7 +3028,7 @@ watch(
                                 {{ $t('agentPrice') }}
                               </div>
                               <div class="col-4 text-weight-bold">
-                                {{
+                                ฿{{
                                   formatNumberDecimal(
                                     props.row.agentPrice || 0,
                                     2,
@@ -3046,8 +3046,8 @@ watch(
                               <div class="col-4 app-text-muted-2">
                                 {{ $t('processingPrice') }}
                               </div>
-                              <div class="col-4 text-weight-bold">
-                                {{
+                              <div class="col-4">
+                                ฿{{
                                   formatNumberDecimal(
                                     props.row.serviceCharge || 0,
                                     2,