From fe639f264d026724fdf0a29759d2bbb7503892bc Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Tue, 7 Jun 2022 12:43:38 +0200
Subject: [PATCH] - fix to empty states (#163)

* #150 - changed the default colour for empty states

* #150 - added empty states for user requests

* #31 - amended text for empty states - employee
---
 resources/js/Pages/VacationRequest/Index.vue           | 10 +++++++++-
 resources/js/Shared/Feedbacks/EmptyState.vue           |  4 ++--
 .../js/Shared/Widgets/PendingVacationRequests.vue      |  2 +-
 resources/js/Shared/Widgets/UserVacationRequests.vue   |  4 ++--
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/resources/js/Pages/VacationRequest/Index.vue b/resources/js/Pages/VacationRequest/Index.vue
index 9db138d..ff6cbcc 100644
--- a/resources/js/Pages/VacationRequest/Index.vue
+++ b/resources/js/Pages/VacationRequest/Index.vue
@@ -176,7 +176,14 @@
               colspan="100%"
               class="py-4 text-xl leading-5 text-center text-gray-700"
             >
-              Brak danych
+              <EmptyState>
+                <template #title>
+                  Brak wniosków
+                </template>
+                <template #text>
+                  Nie znaleziono wniosków o danym statusie
+                </template>
+              </EmptyState>
             </td>
           </tr>
         </tbody>
@@ -195,6 +202,7 @@ import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } f
 import { reactive, watch } from 'vue'
 import { debounce } from 'lodash'
 import { Inertia } from '@inertiajs/inertia'
+import EmptyState from '@/Shared/Feedbacks/EmptyState'
 
 const props = defineProps({
   requests: Object,
diff --git a/resources/js/Shared/Feedbacks/EmptyState.vue b/resources/js/Shared/Feedbacks/EmptyState.vue
index 4467e65..6c03570 100644
--- a/resources/js/Shared/Feedbacks/EmptyState.vue
+++ b/resources/js/Shared/Feedbacks/EmptyState.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="text-center my-5">
+  <div class="text-center my-5 text-gray-500">
     <slot name="head">
       <SearchIcon class="mx-auto w-12 h-12" />
     </slot>
@@ -8,7 +8,7 @@
         No search result
       </slot>
     </h3>
-    <p class="text-sm text-gray-500">
+    <p class="text-sm">
       <slot name="text">
         Try a different search query
       </slot>
diff --git a/resources/js/Shared/Widgets/PendingVacationRequests.vue b/resources/js/Shared/Widgets/PendingVacationRequests.vue
index ab3941b..5c280c0 100644
--- a/resources/js/Shared/Widgets/PendingVacationRequests.vue
+++ b/resources/js/Shared/Widgets/PendingVacationRequests.vue
@@ -52,7 +52,7 @@
             </div>
           </li>
           <li v-if="! requests.length">
-            <EmptyState class="text-gray-700">
+            <EmptyState>
               <template #head>
                 <CollectionIcon class="mx-auto w-12 h-12" />
               </template>
diff --git a/resources/js/Shared/Widgets/UserVacationRequests.vue b/resources/js/Shared/Widgets/UserVacationRequests.vue
index bd0019d..65e15ff 100644
--- a/resources/js/Shared/Widgets/UserVacationRequests.vue
+++ b/resources/js/Shared/Widgets/UserVacationRequests.vue
@@ -38,7 +38,7 @@
           </li>
           <li v-if="! requests.length">
             <p class="py-2">
-              <EmptyState class="text-gray-700">
+              <EmptyState>
                 <template #head>
                   <CollectionIcon class="mx-auto w-12 h-12" />
                 </template>
@@ -46,7 +46,7 @@
                   Brak wniosków
                 </template>
                 <template #text>
-                  Nie ma oczekujących wniosków
+                  Nie utworzono jeszcze wniosku
                 </template>
               </EmptyState>
             </p>