From a498c24e1eb96901fcd4776f598a46bae1826051 Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Mon, 28 Oct 2024 14:53:31 +0700
Subject: [PATCH] feat: add dynamic color to quotation form info

---
 src/pages/05_quotation/QuotationForm.vue     |  1 +
 src/pages/05_quotation/QuotationFormInfo.vue | 40 +++++++++++++-------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 198bf810..e6540f31 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -1108,6 +1108,7 @@ const view = ref<View>(View.Quotation);
                 <SwitchItem :value="view">
                   <template #[View.Quotation]>
                     <QuotationFormInfo
+                      :type="view"
                       v-model:pay-type="quotationFormData.payCondition"
                       v-model:pay-bank="payBank"
                       v-model:pay-split-count="quotationFormData.paySplitCount"
diff --git a/src/pages/05_quotation/QuotationFormInfo.vue b/src/pages/05_quotation/QuotationFormInfo.vue
index 6f4dd11b..a0afd2f1 100644
--- a/src/pages/05_quotation/QuotationFormInfo.vue
+++ b/src/pages/05_quotation/QuotationFormInfo.vue
@@ -13,9 +13,22 @@ import SelectInput from 'src/components/shared/SelectInput.vue';
 import { storeToRefs } from 'pinia';
 import { precisionRound } from 'src/utils/arithmetic';
 
+enum View {
+  Quotation,
+  Accepted,
+  InvoicePre,
+  Invoice,
+  PaymentPre,
+  Payment,
+  ReceiptPre,
+  Receipt,
+  Complete,
+}
+
 defineProps<{
   readonly?: boolean;
   quotationNo?: string;
+  view?: View;
   data?: {
     total: number;
     discount: number;
@@ -209,12 +222,10 @@ watch(
 </script>
 
 <template>
-  <AppBox no-padding bordered class="row">
+  <AppBox no-padding bordered class="row main-color">
     <div class="col bordered-r">
-      <div
-        class="bordered-b q-px-md q-py-sm row bg-color-orange-light items-center"
-      >
-        <div class="icon-wrapper bg-color-orange q-mr-sm">
+      <div class="bordered-b q-px-md q-py-sm row bg-color-light items-center">
+        <div class="icon-wrapper bg-color q-mr-sm">
           <q-icon name="mdi-bank-outline" />
         </div>
         <span class="text-weight-bold">
@@ -342,10 +353,8 @@ watch(
       </div>
     </div>
     <div class="col">
-      <div
-        class="bordered-b q-px-md q-py-sm row bg-color-orange-light items-center"
-      >
-        <div class="icon-wrapper bg-color-orange q-mr-sm">
+      <div class="bordered-b q-px-md q-py-sm row bg-color-light items-center">
+        <div class="icon-wrapper bg-color q-mr-sm">
           <Icon icon="iconoir:coins" />
         </div>
         <span class="text-weight-bold">
@@ -467,21 +476,24 @@ watch(
   height: 25px;
 }
 
-.bg-color-orange {
+.main-color {
   --_color: var(--yellow-7-hsl);
+}
+
+.bg-color {
   color: white;
   background: hsla(var(--_color));
 }
 
-.dark .bg-color-orange {
+.dark .bg-color {
   --_color: var(--orange-6-hsl);
 }
 
-.bg-color-orange-light {
-  --_color: var(--yellow-7-hsl);
+.bg-color-light {
   background: hsla(var(--_color) / 0.1);
 }
-.dark .bg-color-orange {
+
+.dark .bg-color-light {
   --_color: var(--orange-6-hsl / 0.2);
 }