From 9590467d0f6a1170a6d8a47cff036446b7ffa646 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Tue, 7 Jan 2025 11:29:40 +0700
Subject: [PATCH] refactor: handle status canceled

---
 .../05_quotation/TableQuotation.vue           | 32 +++++++------------
 src/pages/05_quotation/constants.ts           |  1 +
 2 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/src/components/05_quotation/TableQuotation.vue b/src/components/05_quotation/TableQuotation.vue
index cf44a439..102558d6 100644
--- a/src/components/05_quotation/TableQuotation.vue
+++ b/src/components/05_quotation/TableQuotation.vue
@@ -33,16 +33,6 @@ function payCondition(value: string) {
   return '';
 }
 
-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.Invoice';
-  if (value === 'PaymentSuccess') return 'quotation.status.PaymentSuccess';
-  if (value === 'ProcessComplete') return 'quotation.status.ProcessComplete';
-  return '';
-}
-
 defineEmits<{
   (e: 'preview', data: any): void;
   (e: 'view', data: any): void;
@@ -109,21 +99,21 @@ defineEmits<{
         </q-td>
 
         <q-td v-if="visibleColumns.includes('status')">
-          <div class="row" style="min-width: 150px">
+          <div style="min-width: 150px">
             <BadgeComponent
-              :title="$t(quotationStatus(props.row.quotationStatus))"
+              :title="$t(`quotation.status.${props.row.quotationStatus}`)"
               :hsla-color="hslaColors[props.row.quotationStatus] || ''"
             />
 
-            <div v-if="props.row.urgent" class="q-ml-sm" style="font-size: 90%">
-              <BadgeComponent
-                icon="mdi-fire"
-                :title="$t('general.urgent2')"
-                hsla-color="--gray-1-hsl"
-                hsla-background="--red-8-hsl"
-                solid
-              />
-            </div>
+            <BadgeComponent
+              class="q-ml-xs"
+              icon="mdi-fire"
+              v-if="props.row.urgent"
+              :title="$t('general.urgent2')"
+              hsla-color="--gray-1-hsl"
+              hsla-background="--red-8-hsl"
+              solid
+            />
           </div>
         </q-td>
 
diff --git a/src/pages/05_quotation/constants.ts b/src/pages/05_quotation/constants.ts
index 12d5b702..b88b3bb3 100644
--- a/src/pages/05_quotation/constants.ts
+++ b/src/pages/05_quotation/constants.ts
@@ -135,4 +135,5 @@ export const hslaColors: Record<string, string> = {
   PaymentInProcess: '--purple-7-hsl',
   PaymentSuccess: '--green-8-hsl',
   ProcessComplete: '--blue-6-hsl',
+  Canceled: '--red-6-hsl',
 };