From 35285f81b9586e294b84cd126ef8bf1a54cc9a25 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 27 Dec 2024 10:44:15 +0700
Subject: [PATCH] feat: receive => add task order status display with gradient
 styling

---
 .../09_task-order/order_view/MainPage.vue     | 53 +++++++++++++++++++
 1 file changed, 53 insertions(+)

diff --git a/src/pages/09_task-order/order_view/MainPage.vue b/src/pages/09_task-order/order_view/MainPage.vue
index 31fa7873..30925126 100644
--- a/src/pages/09_task-order/order_view/MainPage.vue
+++ b/src/pages/09_task-order/order_view/MainPage.vue
@@ -736,6 +736,41 @@ watch([currentFormData.value.taskStatus], () => {
             />
           </nav>
 
+          <article
+            v-if="view === TaskOrderStatus.Complete"
+            class="row items-center surface-1 q-py-md rounded gradient-stat"
+          >
+            <span
+              class="row col rounded q-px-sm q-py-md q-mx-md positive"
+              style="border: 1px solid hsl(var(--positive-bg))"
+            >
+              {{ $t('taskOrder.status.Complete') }}
+              <span class="q-ml-auto">
+                {{
+                  fullTaskOrder?.taskList.filter(
+                    (t) => t.taskStatus === TaskStatus.Complete,
+                  ).length
+                }}
+              </span>
+            </span>
+            <span
+              class="row col rounded q-px-sm q-mr-md q-py-md negative"
+              style="border: 1px solid hsl(var(--negative-bg))"
+            >
+              {{ $t('taskOrder.status.Failed') }}
+              <span class="q-ml-auto">
+                {{
+                  fullTaskOrder?.taskList.filter(
+                    (t) =>
+                      t.taskStatus === TaskStatus.Redo ||
+                      t.taskStatus === TaskStatus.Failed ||
+                      t.taskStatus === TaskStatus.Canceled,
+                  ).length
+                }}
+              </span>
+            </span>
+          </article>
+
           <q-form
             ref="formDocument"
             @submit="
@@ -1147,4 +1182,22 @@ watch([currentFormData.value.taskStatus], () => {
     filter: invert(100%);
   }
 }
+
+.gradient-stat {
+  & .positive {
+    background-image: linear-gradient(
+      to right,
+      hsl(var(--positive-bg) / 0.15),
+      var(--surface-1)
+    );
+  }
+
+  & .negative {
+    background-image: linear-gradient(
+      to right,
+      hsl(var(--negative-bg) / 0.15),
+      var(--surface-1)
+    );
+  }
+}
 </style>