From 363779a2bc86c41bf6f445f454cb976b4ef24c1f Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Wed, 22 Jan 2025 14:03:14 +0700
Subject: [PATCH] feat: add ready status of request data

---
 src/components/StatCardComponent.vue           | 11 ++++++-----
 src/i18n/eng.ts                                |  1 +
 src/i18n/tha.ts                                |  3 ++-
 src/pages/08_request-list/MainPage.vue         |  6 ++++++
 src/pages/08_request-list/TableRequestList.vue |  1 +
 src/stores/request-list/index.ts               |  1 +
 src/stores/request-list/types.ts               |  1 +
 7 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/StatCardComponent.vue b/src/components/StatCardComponent.vue
index d39b4a5b..dfd57ed8 100644
--- a/src/components/StatCardComponent.vue
+++ b/src/components/StatCardComponent.vue
@@ -16,6 +16,7 @@ const props = withDefaults(
         | 'dark-orange'
         | 'cyan'
         | 'yellow'
+        | 'light-yellow'
         | 'red'
         | 'magenta'
         | 'blue'
@@ -45,11 +46,7 @@ const props = withDefaults(
     >
       <div class="stat-card__content row items-center q-pa-sm">
         <div class="col-4 text-center">
-          <q-avatar
-            size="lg"
-            style="background-color: hsla(0 0% 100% /0.2)"
-            text-color="white"
-          >
+          <q-avatar size="lg" style="background-color: hsla(0 0% 100% /0.2)">
             <Icon :icon="v.icon" width="24px" />
           </q-avatar>
         </div>
@@ -116,6 +113,10 @@ const props = withDefaults(
   --_color: var(--orange-4-hsl);
 }
 
+.stat-card__light-yellow {
+  --_color: var(--yellow-6-hsl);
+}
+
 .stat-card__orange {
   --_color: var(--orange-5-hsl);
 }
diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index f37ae4bc..6635eeb7 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -917,6 +917,7 @@ export default {
       },
 
       Pending: 'Pending',
+      Ready: 'Ready',
       InProgress: 'In Progress',
       Completed: 'Completed',
       Canceled: 'Canceled',
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index aedfe838..9e7d0644 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -908,7 +908,8 @@ export default {
         Canceled: 'ยกเลิก',
       },
       Pending: 'รอดำเนินการ',
-      InProgress: 'ดำเนินการ',
+      Ready: 'พร้อมดำเนินการ',
+      InProgress: 'กำลังดำเนินการ',
       Completed: 'เสร็จสิ้น',
       Canceled: 'ยกเลิก',
 
diff --git a/src/pages/08_request-list/MainPage.vue b/src/pages/08_request-list/MainPage.vue
index 7310c54b..98dd2d18 100644
--- a/src/pages/08_request-list/MainPage.vue
+++ b/src/pages/08_request-list/MainPage.vue
@@ -141,6 +141,12 @@ watch([() => pageState.inputSearch, () => pageState.statusFilter], () =>
                 label: 'requestList.status.Pending',
                 color: 'orange',
               },
+              {
+                icon: 'mdi:tag-check-outline',
+                count: stats[RequestDataStatus.Pending],
+                label: 'requestList.status.Ready',
+                color: 'light-yellow',
+              },
               {
                 icon: 'mdi-timer-sand',
                 count: stats[RequestDataStatus.InProgress],
diff --git a/src/pages/08_request-list/TableRequestList.vue b/src/pages/08_request-list/TableRequestList.vue
index 60170cd5..6211e893 100644
--- a/src/pages/08_request-list/TableRequestList.vue
+++ b/src/pages/08_request-list/TableRequestList.vue
@@ -173,6 +173,7 @@ function getEmployeeName(
             :hsla-color="
               {
                 [RequestDataStatus.Pending]: '--orange-5-hsl',
+                [RequestDataStatus.Ready]: '--yellow-6-hsl',
                 [RequestDataStatus.InProgress]: '--blue-6-hsl',
                 [RequestDataStatus.Completed]: '--green-8-hsl',
                 [RequestDataStatus.Canceled]: '--red-5-hsl',
diff --git a/src/stores/request-list/index.ts b/src/stores/request-list/index.ts
index 12e63e32..0bce74cb 100644
--- a/src/stores/request-list/index.ts
+++ b/src/stores/request-list/index.ts
@@ -23,6 +23,7 @@ export const useRequestList = defineStore('request-list', () => {
   const pageSize = ref<number>(30);
   const stats = ref<Record<RequestDataStatus, number>>({
     [RequestDataStatus.Pending]: 0,
+    [RequestDataStatus.Ready]: 0,
     [RequestDataStatus.InProgress]: 0,
     [RequestDataStatus.Completed]: 0,
     [RequestDataStatus.Canceled]: 0,
diff --git a/src/stores/request-list/types.ts b/src/stores/request-list/types.ts
index 6759ad5c..df1b5156 100644
--- a/src/stores/request-list/types.ts
+++ b/src/stores/request-list/types.ts
@@ -20,6 +20,7 @@ export type RequestData = {
 
 export enum RequestDataStatus {
   Pending = 'Pending',
+  Ready = 'Ready',
   InProgress = 'InProgress',
   Completed = 'Completed',
   Canceled = 'Canceled',