From 0409bd4c4a5ee911358760907b6b734fac7d7a3b Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 15 Aug 2024 11:13:42 +0700
Subject: [PATCH] refactor(04): disable price color

---
 src/pages/04_product-service/MainPage.vue | 68 ++++++++++++++++++-----
 1 file changed, 53 insertions(+), 15 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 25970c2e..7ee7f45f 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -2994,13 +2994,18 @@ watch(
                           "
                         >
                           <div
-                            class="row tags-color-green q-gutter-x-md no-wrap items-center text-right"
+                            class="row q-gutter-x-md no-wrap items-center text-right"
                           >
                             <div
-                              class="tags col-3 column ellipsis-2-lines"
+                              class="tags tags-color-orange col-3 column ellipsis-2-lines"
+                              :class="{
+                                disable: props.row.status === 'INACTIVE',
+                              }"
                               style="min-width: 50px"
                             >
-                              <div class="col-4">{{ $t('salePrice') }}</div>
+                              <div class="col-4 app-text-muted-2">
+                                {{ $t('salePrice') }}
+                              </div>
                               <div class="col-4 text-weight-bold">
                                 {{
                                   formatNumberDecimal(props.row.price || 0, 2)
@@ -3008,10 +3013,15 @@ watch(
                               </div>
                             </div>
                             <div
-                              class="tags col-3 column ellipsis-2-lines"
+                              class="tags tags-color-purple col-3 column ellipsis-2-lines"
+                              :class="{
+                                disable: props.row.status === 'INACTIVE',
+                              }"
                               style="min-width: 50px"
                             >
-                              <div class="col-4">{{ $t('agentPrice') }}</div>
+                              <div class="col-4 app-text-muted-2">
+                                {{ $t('agentPrice') }}
+                              </div>
                               <div class="col-4 text-weight-bold">
                                 {{
                                   formatNumberDecimal(
@@ -3022,10 +3032,13 @@ watch(
                               </div>
                             </div>
                             <div
-                              class="tags col-3 column ellipsis-2-lines"
+                              class="tags tags-color-pink col-3 column ellipsis-2-lines"
+                              :class="{
+                                disable: props.row.status === 'INACTIVE',
+                              }"
                               style="min-width: 50px"
                             >
-                              <div class="col-4">
+                              <div class="col-4 app-text-muted-2">
                                 {{ $t('processingPrice') }}
                               </div>
                               <div class="col-4 text-weight-bold">
@@ -4676,14 +4689,6 @@ watch(
   --_color: var(--teal-10-hsl);
 }
 
-.tags-color-green {
-  --_color-tag: var(--teal-10-hsl);
-}
-
-.dark .tags-color-green {
-  --_color-tag: var(--teal-8-hsl);
-}
-
 .dark .icon-color-purple {
   --_color: var(--violet-10-hsl);
 }
@@ -4696,6 +4701,34 @@ watch(
   --_color: var(--orange-6-hsl);
 }
 
+.tags-color-green {
+  --_color-tag: var(--teal-10-hsl);
+}
+
+.dark .tags-color-green {
+  --_color-tag: var(--teal-8-hsl);
+}
+
+.tags-color-orange {
+  --_color-tag: var(--orange-5-hsl);
+}
+
+.dark .tags-color-orange {
+  --_color-tag: var(--orange-6-hsl);
+}
+
+.tags-color-purple {
+  --_color-tag: var(--violet-11-hsl);
+}
+
+.dark .tags-color-purple {
+  --_color-tag: var(--violet-10-hsl);
+}
+
+.tags-color-pink {
+  --_color-tag: var(--pink-6-hsl);
+}
+
 .table__icon {
   background-color: hsla(var(--_color) / 0.15);
   color: hsla(var(--_color) / 1);
@@ -4737,6 +4770,11 @@ watch(
   background: hsla(var(--_color-tag) / 0.15);
   border-radius: var(--radius-2);
   padding-inline: var(--size-2);
+
+  &.disable {
+    filter: grayscale(100%);
+    opacity: 80%;
+  }
 }
 
 * :deep(.q-icon.mdi-play) {