feat: add active effect for quotation status box (#44)

src/pages/05_quotation/QuotationForm.vue

@@ -270,16 +270,20 @@ async function fetchStatus() {
     {
       title: 'ใบเสนอราคา',
       status: getStatus(quotationFormData.value.quotationStatus, -1, -1),
+      active: () => view.value === View.Quotation,
       handler: () => (view.value = View.Quotation),
     },
     {
       title: 'ลูกค้าตอบรับ',
       status: getStatus(quotationFormData.value.quotationStatus, 0, -1),
+      active: () => view.value === View.Accepted,
       handler: () => (view.value = View.Accepted),
     },
     {
       title: 'ใบแจ้งหนี้',
       status: getStatus(quotationFormData.value.quotationStatus, 4, 0),
+      active: () =>
+        view.value === View.Invoice || view.value === View.InvoicePre,
       handler: () => {
         view.value =
           quotationFormData.value.payCondition === 'Full' ||
@@ -291,6 +295,8 @@ async function fetchStatus() {
     {
       title: 'ชำระเงิน',
       status: getStatus(quotationFormData.value.quotationStatus, 4, 1),
+      active: () =>
+        view.value === View.Payment || view.value === View.PaymentPre,
       handler: () => {
         view.value =
           quotationFormData.value.payCondition === 'Full' ||
@@ -302,6 +308,7 @@ async function fetchStatus() {
     {
       title: 'ใบเสร็จรับเงิน',
       status: getStatus(quotationFormData.value.quotationStatus, 4, 1),
+      active: () => view.value === View.Receipt,
       handler: () => {
         fetchReceipt();
         view.value = View.Receipt;
@@ -310,6 +317,7 @@ async function fetchStatus() {
     {
       title: 'เสร็จสิ้น',
       status: getStatus(quotationFormData.value.quotationStatus, 5, 4),
+      active: () => view.value === View.Complete,
       handler: () => {
         view.value = View.Complete;
       },
@@ -889,7 +897,12 @@ function getStatus(
 }
 
 const statusQuotationForm = ref<
-  { title: string; status: 'done' | 'doing' | 'waiting'; handler: () => void }[]
+  {
+    title: string;
+    status: 'done' | 'doing' | 'waiting';
+    handler: () => void;
+    active?: () => boolean;
+  }[]
 >([]);
 
 enum View {
@@ -1001,16 +1014,22 @@ const view = ref<View>(View.Quotation);
             <button
               v-for="value in statusQuotationForm"
               :key="value.title"
-              class="q-pa-sm bordered status-color"
+              class="q-pa-sm bordered status-color row items-center"
-              :class="`status-color-${value.status}`"
+              :class="{
+                [`status-color-${value.status}`]: true,
+                'quotation-status-active': value.active?.(),
+              }"
               @click="value.status !== 'waiting' && value.handler()"
               style="min-width: 120px; cursor: pointer"
             >
-              <q-icon
+              <div class="q-px-sm">
-                class="icon-color"
+                <q-icon
-                :name="`${value.status === 'done' ? 'mdi-check-circle' : 'mdi-checkbox-blank-circle-outline'}`"
+                  class="icon-color quotation-status"
-              />
+                  style="border-radius: 50%"
-              {{ value.title }}
+                  :name="`${value.status === 'done' ? 'mdi-check-circle' : 'mdi-checkbox-blank-circle-outline'}`"
+                />
+              </div>
+              <div class="col text-left">{{ value.title }}</div>
             </button>
           </div>
           <template
@@ -2192,4 +2211,23 @@ const view = ref<View>(View.Quotation);
     color: hsla(var(--_color));
   }
 }
+
+.quotation-status-active {
+  opacity: 1;
+  font-weight: 600;
+  transition: 1s box-shadow ease-in-out;
+  animation: status 1s infinite;
+}
+
+@keyframes status {
+  0% {
+    box-shadow: 0x 0px 0px hsla(var(--_color) / 0.5);
+  }
+  50% {
+    box-shadow: 0px 0px 1px 4px hsla(var(--_color) / 0.2);
+  }
+  100% {
+    box-shadow: 0px 0px 4px 7px hsla(var(--_color) / 0);
+  }
+}
 </style>