From 8175081df7cf31f39d2aebb0caf27f503ad1bfa1 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 21 Jan 2025 11:21:09 +0700
Subject: [PATCH] feat: add inactive status styling and update status
 validation logic

---
 src/pages/09_task-order/TaskStatusComponent.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/pages/09_task-order/TaskStatusComponent.vue b/src/pages/09_task-order/TaskStatusComponent.vue
index 8ac8cec3..e77056d6 100644
--- a/src/pages/09_task-order/TaskStatusComponent.vue
+++ b/src/pages/09_task-order/TaskStatusComponent.vue
@@ -81,7 +81,7 @@ function hideIcon() {
       "
       class="text-capitalize text-weight-regular product-status rounded"
       :class="{
-        'hide-icon q-pr-md': hideIcon(),
+        'hide-icon q-pr-md inactive': hideIcon(),
         warning:
           currStatus?.value === TaskStatus.Pending ||
           currStatus?.value === TaskStatus.InProgress,
@@ -95,7 +95,9 @@ function hideIcon() {
           currStatus?.value === TaskStatus.Canceled ||
           currStatus?.value === TaskStatus.Restart,
         'pointer-events-none': {
-          order: !['Success', 'Failed', 'Validate'].includes(status || ''),
+          order: !['Success', 'Failed', 'Validate', 'Redo'].includes(
+            status || '',
+          ),
           receive: status !== TaskStatus.InProgress,
         }[type ?? 'order'],
       }"
@@ -171,6 +173,10 @@ function hideIcon() {
   &.negative {
     --_color: var(--negative-bg);
   }
+  &.inactive {
+    --_color: var(--stone-7-hsl);
+    opacity: 0.7;
+  }
 }
 
 .pointer-events-none {