From 3f835bd2f09856e75d97ada4ebf119e252a689cc Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Tue, 24 Dec 2024 13:47:41 +0700
Subject: [PATCH] refactor: handle status canceled

---
 src/pages/08_request-list/ProductExpansion.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/pages/08_request-list/ProductExpansion.vue b/src/pages/08_request-list/ProductExpansion.vue
index 2e534b25..e0932ded 100644
--- a/src/pages/08_request-list/ProductExpansion.vue
+++ b/src/pages/08_request-list/ProductExpansion.vue
@@ -116,6 +116,9 @@ defineProps<{
                   $q.screen.gt.xs &&
                   (status?.workStatus === RequestWorkStatus.Ended ||
                     status?.workStatus === RequestWorkStatus.Completed),
+                canceled:
+                  $q.screen.gt.xs &&
+                  status?.workStatus === RequestWorkStatus.Canceled,
               }"
               :style="
                 $q.screen.xs &&
@@ -170,6 +173,9 @@ defineProps<{
                 complete:
                   status?.workStatus === RequestWorkStatus.Ended ||
                   status?.workStatus === RequestWorkStatus.Completed,
+                canceled:
+                  $q.screen.gt.xs &&
+                  status?.workStatus === RequestWorkStatus.Canceled,
               }"
             >
               {{
@@ -240,6 +246,9 @@ defineProps<{
   &.complete {
     --_color: var(--green-5-hsl);
   }
+  &.canceled {
+    --_color: var(--red-5-hsl);
+  }
 }
 
 .product-status-text {
@@ -257,5 +266,8 @@ defineProps<{
   &.complete {
     --_color: var(--green-5-hsl);
   }
+  &.canceled {
+    --_color: var(--red-5-hsl);
+  }
 }
 </style>