From 9e70383d3b852899605911d260d9af0ebdf0f3b7 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Fri, 8 Nov 2024 11:13:18 +0700
Subject: [PATCH] refactor: handle color badge

---
 src/components/05_quotation/TableQuotation.vue | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/05_quotation/TableQuotation.vue b/src/components/05_quotation/TableQuotation.vue
index 020ee483..2d561348 100644
--- a/src/components/05_quotation/TableQuotation.vue
+++ b/src/components/05_quotation/TableQuotation.vue
@@ -1,12 +1,18 @@
 <script lang="ts" setup>
 import { QTableProps } from 'quasar';
-import { QuotationPayload } from 'src/stores/quotations/types';
+import { dateFormat } from 'src/utils/datetime';
+
 import BadgeComponent from 'components/BadgeComponent.vue';
 import KebabAction from 'components/shared/KebabAction.vue';
-import { setLocale, calculateAge, dateFormat } from 'src/utils/datetime';
-import useOptionStore from 'src/stores/options';
 
-const optionStore = useOptionStore();
+const hslaColors: Record<string, string> = {
+  Issued: '--orange-5-hsl',
+  Accepted: '--pink-6-hsl',
+  Expired: '--cyan-7-hsl',
+  PaymentInProcess: '--purple-7-hsl',
+  PaymentSuccess: '--orange-11-hsl',
+  ProcessComplete: '--blue-10-hsl',
+};
 
 const props = withDefaults(
   defineProps<{
@@ -35,7 +41,7 @@ function quotationStatus(value: string) {
   if (value === 'Issued') return 'quotation.status.Issued';
   if (value === 'Accepted') return 'quotation.status.Accepted';
   if (value === 'Expired') return 'quotation.status.Expired';
-  if (value === 'PaymentInProcess') return 'quotation.status.PaymentInProcess';
+  if (value === 'PaymentInProcess') return 'quotation.status.Invoice';
   if (value === 'PaymentSuccess') return 'quotation.status.PaymentSuccess';
   if (value === 'ProcessComplete') return 'quotation.status.ProcessComplete';
   return '';
@@ -109,6 +115,7 @@ defineEmits<{
         <q-td v-if="visibleColumns.includes('status')">
           <BadgeComponent
             :title="$t(quotationStatus(props.row.quotationStatus))"
+            :hsla-color="hslaColors[props.row.quotationStatus] || ''"
           />
         </q-td>