From 538830a5a16498d6e3c209a7b0f5071ea771fd75 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Wed, 1 Jun 2022 13:21:07 +0200
Subject: [PATCH] #150 - added empty states for the widget: vacation requests

disabled "see more" button when no results are available
---
 .../Widgets/PendingVacationRequests.vue       | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/resources/js/Shared/Widgets/PendingVacationRequests.vue b/resources/js/Shared/Widgets/PendingVacationRequests.vue
index 4c287da..ab3941b 100644
--- a/resources/js/Shared/Widgets/PendingVacationRequests.vue
+++ b/resources/js/Shared/Widgets/PendingVacationRequests.vue
@@ -52,16 +52,27 @@
             </div>
           </li>
           <li v-if="! requests.length">
-            <p class="py-2">
-              Brak danych
-            </p>
+            <EmptyState class="text-gray-700">
+              <template #head>
+                <CollectionIcon class="mx-auto w-12 h-12" />
+              </template>
+              <template #title>
+                Brak wniosków
+              </template>
+              <template #text>
+                Nie ma oczekujących wniosków
+              </template>
+            </EmptyState>
           </li>
         </ul>
       </div>
-      <div class="mt-6">
+      <div
+        v-if="requests.length"
+        class="mt-6"
+      >
         <InertiaLink
           href="/vacation/requests"
-          :data="{status: 'waiting_for_action'}"
+          :data="{ status: 'waiting_for_action' }"
           class="flex justify-center items-center py-2 px-4 w-full text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 shadow-sm"
         >
           Zobacz wszystkie
@@ -73,6 +84,8 @@
 
 <script setup>
 import VacationType from '@/Shared/VacationType'
+import EmptyState from '@/Shared/Feedbacks/EmptyState'
+import { CollectionIcon } from '@heroicons/vue/solid'
 
 defineProps({
   requests: Object,