From 286b4175b72c04974b90ae03ea659ba9ec0a154a Mon Sep 17 00:00:00 2001
From: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
Date: Wed, 16 Mar 2022 13:27:39 +0100
Subject: [PATCH 1/3] #72 - UX improvement

---
 resources/js/Pages/VacationRequest/Index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/Pages/VacationRequest/Index.vue b/resources/js/Pages/VacationRequest/Index.vue
index 600dec2..cd42557 100644
--- a/resources/js/Pages/VacationRequest/Index.vue
+++ b/resources/js/Pages/VacationRequest/Index.vue
@@ -22,7 +22,7 @@
           v-for="(status, index) in statuses"
           :key="index"
           :data="{ status: status.value }"
-          :class="[status.value === filters.status ? 'text-gray-900' : '', 'text-gray-500 hover:text-gray-700 group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-sm font-medium text-center hover:bg-gray-50 focus:z-10']"
+          :class="[status.value === filters.status ? 'text-blumilk-600 font-semibold' : 'hover:bg-blumilk-25 text-gray-700 focus:z-10', 'group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-sm font-medium text-center']"
         >
           <span>{{ status.name }}</span>
           <span :class="[status.value === filters.status ? 'bg-blumilk-500' : 'bg-transparent', 'absolute inset-x-0 bottom-0 h-0.5']" />
-- 
2.52.0


From 02677af2defd45586c466bf10225323bf1332978 Mon Sep 17 00:00:00 2001
From: Adrian Hopek <adrian.hopek@blumilk.pl>
Date: Wed, 16 Mar 2022 13:56:16 +0100
Subject: [PATCH 2/3] #72 - wip

---
 .../Controllers/VacationRequestController.php | 24 +++++++++++++++++++
 resources/js/Pages/VacationRequest/Index.vue  | 15 ++++++++++++
 2 files changed, 39 insertions(+)

diff --git a/app/Infrastructure/Http/Controllers/VacationRequestController.php b/app/Infrastructure/Http/Controllers/VacationRequestController.php
index 84ce8e5..80a2cca 100644
--- a/app/Infrastructure/Http/Controllers/VacationRequestController.php
+++ b/app/Infrastructure/Http/Controllers/VacationRequestController.php
@@ -43,8 +43,32 @@ class VacationRequestController extends Controller
             ->states(VacationRequestStatesRetriever::filterByStatusGroup($status, $request->user()))
             ->paginate();
 
+        $pending = $request->user()
+            ->vacationRequests()
+            ->where("year_period_id", $yearPeriodRetriever->selected()->id)
+            ->states(VacationRequestStatesRetriever::pendingStates())
+            ->count();
+
+        $success = $request->user()
+            ->vacationRequests()
+            ->where("year_period_id", $yearPeriodRetriever->selected()->id)
+            ->states(VacationRequestStatesRetriever::successStates())
+            ->count();
+
+        $failed = $request->user()
+            ->vacationRequests()
+            ->where("year_period_id", $yearPeriodRetriever->selected()->id)
+            ->states(VacationRequestStatesRetriever::failedStates())
+            ->count();
+
         return inertia("VacationRequest/Index", [
             "requests" => VacationRequestResource::collection($vacationRequests),
+            "stats" => [
+                "all" => $pending + $success + $failed,
+                "pending" => $pending,
+                "success" => $success,
+                "failed" => $failed,
+            ],
             "filters" => [
                 "status" => $status,
             ],
diff --git a/resources/js/Pages/VacationRequest/Index.vue b/resources/js/Pages/VacationRequest/Index.vue
index cd42557..dcdad8a 100644
--- a/resources/js/Pages/VacationRequest/Index.vue
+++ b/resources/js/Pages/VacationRequest/Index.vue
@@ -25,6 +25,12 @@
           :class="[status.value === filters.status ? 'text-blumilk-600 font-semibold' : 'hover:bg-blumilk-25 text-gray-700 focus:z-10', 'group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-sm font-medium text-center']"
         >
           <span>{{ status.name }}</span>
+          <span
+            v-if="stats[status.value]"
+            :class="[status.value === filters.status ? 'bg-blumilk-50 text-blumilk-600' : 'bg-gray-100 text-gray-600', 'hidden ml-3 py-0.5 px-2.5 rounded-full text-xs font-semibold md:inline-block']"
+          >
+            {{ stats[status.value] }}
+          </span>
           <span :class="[status.value === filters.status ? 'bg-blumilk-500' : 'bg-transparent', 'absolute inset-x-0 bottom-0 h-0.5']" />
         </InertiaLink>
       </nav>
@@ -210,6 +216,15 @@ export default {
       type: Object,
       default: () => null,
     },
+    stats: {
+      type: Object,
+      default: () => ({
+        all: 0,
+        pending: 0,
+        success: 0,
+        failed: 0,
+      }),
+    },
     filters: {
       type: Object,
       default: () => null,
-- 
2.52.0


From de4bc4e131b97a759801b9e6af7cfaf09857ed3f Mon Sep 17 00:00:00 2001
From: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
Date: Wed, 16 Mar 2022 14:03:34 +0100
Subject: [PATCH 3/3] #72 - UX improvement fix

---
 resources/js/Pages/VacationRequest/Index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/Pages/VacationRequest/Index.vue b/resources/js/Pages/VacationRequest/Index.vue
index dcdad8a..9477123 100644
--- a/resources/js/Pages/VacationRequest/Index.vue
+++ b/resources/js/Pages/VacationRequest/Index.vue
@@ -27,7 +27,7 @@
           <span>{{ status.name }}</span>
           <span
             v-if="stats[status.value]"
-            :class="[status.value === filters.status ? 'bg-blumilk-50 text-blumilk-600' : 'bg-gray-100 text-gray-600', 'hidden ml-3 py-0.5 px-2.5 rounded-full text-xs font-semibold md:inline-block']"
+            :class="[status.value === filters.status ? 'bg-blumilk-50 text-blumilk-600' : 'bg-gray-100 text-gray-600', 'hidden ml-3 py-0.5 px-2.5 rounded-full text-xs font-semibold 2xl:inline-block']"
           >
             {{ stats[status.value] }}
           </span>
-- 
2.52.0