From 4309e8104bace34b717e824eadd251b733f892c4 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Thu, 2 Jun 2022 10:37:41 +0200
Subject: [PATCH] #150 - empty states (#160)

* #150 - added base for empty states

* #150 - added empty states to subpages

* #150 - added empty states for the widget: vacation requests

disabled "see more" button when no results are available

* Update resources/js/Pages/Holidays/Index.vue

Removed emoji from text

Co-authored-by: Krzysztof Rewak <krzysztof.rewak@gmail.com>

* #150 - added empty state for key page

* #150 - added empty state for user vacation request widget

* #31 - title corrected

Co-authored-by: Krzysztof Rewak <krzysztof.rewak@gmail.com>
---
 resources/js/Pages/Holidays/Index.vue         | 10 +++++++-
 resources/js/Pages/Keys.vue                   | 15 ++++++++++--
 resources/js/Pages/Resumes/Index.vue          | 10 +++++++-
 resources/js/Pages/Technologies.vue           | 12 ++++++++--
 resources/js/Pages/Users/Index.vue            | 10 +++++++-
 .../VacationRequest/IndexForApprovers.vue     | 10 +++++++-
 resources/js/Shared/Feedbacks/EmptyState.vue  | 21 +++++++++++++++++
 .../Widgets/PendingVacationRequests.vue       | 23 +++++++++++++++----
 .../Shared/Widgets/UserVacationRequests.vue   | 19 +++++++++++++--
 9 files changed, 115 insertions(+), 15 deletions(-)
 create mode 100644 resources/js/Shared/Feedbacks/EmptyState.vue

diff --git a/resources/js/Pages/Holidays/Index.vue b/resources/js/Pages/Holidays/Index.vue
index ac621f5..a62ebd7 100644
--- a/resources/js/Pages/Holidays/Index.vue
+++ b/resources/js/Pages/Holidays/Index.vue
@@ -119,7 +119,14 @@
                 colspan="100%"
                 class="py-4 text-xl leading-5 text-center text-gray-700"
               >
-                Brak danych
+                <EmptyState>
+                  <template #title>
+                    Brak dni wolnych od pracy
+                  </template>
+                  <template #text>
+                    Brak wpisów dotyczących dni wolnych
+                  </template>
+                </EmptyState>
               </td>
             </tr>
           </tbody>
@@ -132,6 +139,7 @@
 <script setup>
 import { DotsVerticalIcon, PencilIcon, TrashIcon } from '@heroicons/vue/solid'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+import EmptyState from '@/Shared/Feedbacks/EmptyState'
 
 defineProps({
   holidays: Object,
diff --git a/resources/js/Pages/Keys.vue b/resources/js/Pages/Keys.vue
index 5c158fa..83a8bac 100644
--- a/resources/js/Pages/Keys.vue
+++ b/resources/js/Pages/Keys.vue
@@ -156,7 +156,17 @@
                 colspan="100%"
                 class="py-4 text-xl leading-5 text-center text-gray-700"
               >
-                Brak danych
+                <EmptyState class="text-gray-700">
+                  <template #head>
+                    <KeyIcon class="mx-auto w-12 h-12" />
+                  </template>
+                  <template #title>
+                    Brak kluczy
+                  </template>
+                  <template #text>
+                    Nie dodano ani jednego klucza
+                  </template>
+                </EmptyState>
               </td>
             </tr>
           </tbody>
@@ -307,7 +317,7 @@
 </template>
 
 <script setup>
-import { DotsVerticalIcon, TrashIcon, CheckIcon, SelectorIcon } from '@heroicons/vue/solid'
+import { DotsVerticalIcon, TrashIcon, CheckIcon, SelectorIcon, KeyIcon } from '@heroicons/vue/solid'
 import DominoMaskIcon from 'vue-material-design-icons/DominoMask.vue'
 import HandshakeIcon from 'vue-material-design-icons/Handshake.vue'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
@@ -315,6 +325,7 @@ import { computed, ref } from 'vue'
 import { Dialog, DialogOverlay, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
 import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
 import { useForm } from '@inertiajs/inertia-vue3'
+import EmptyState from '@/Shared/Feedbacks/EmptyState'
 
 const props = defineProps({
   keys: Object,
diff --git a/resources/js/Pages/Resumes/Index.vue b/resources/js/Pages/Resumes/Index.vue
index c5fd574..42caee1 100644
--- a/resources/js/Pages/Resumes/Index.vue
+++ b/resources/js/Pages/Resumes/Index.vue
@@ -175,7 +175,14 @@
                 colspan="100%"
                 class="py-4 text-xl leading-5 text-center text-gray-700"
               >
-                Brak danych
+                <EmptyState>
+                  <template #title>
+                    Brak CV
+                  </template>
+                  <template #text>
+                    Brak wpisów dotyczących CV
+                  </template>
+                </EmptyState>
               </td>
             </tr>
           </tbody>
@@ -191,6 +198,7 @@ import { DotsVerticalIcon } from '@heroicons/vue/outline'
 import { DownloadIcon, PencilIcon, TrashIcon } from '@heroicons/vue/solid'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import Pagination from '@/Shared/Pagination'
+import EmptyState from '@/Shared/Feedbacks/EmptyState'
 
 defineProps({
   resumes: Object,
diff --git a/resources/js/Pages/Technologies.vue b/resources/js/Pages/Technologies.vue
index b9b0a4a..f578cc4 100644
--- a/resources/js/Pages/Technologies.vue
+++ b/resources/js/Pages/Technologies.vue
@@ -1,5 +1,5 @@
 <template>
-  <InertiaHead title="Klucze" />
+  <InertiaHead title="Technologie" />
   <div class="bg-white shadow-md">
     <div class="flex justify-between items-center p-4 sm:px-6">
       <div>
@@ -92,7 +92,14 @@
                 colspan="100%"
                 class="py-4 text-xl leading-5 text-center text-gray-700"
               >
-                Brak danych
+                <EmptyState>
+                  <template #title>
+                    Brak technologii
+                  </template>
+                  <template #text>
+                    Brak wpisów dotyczących technologii
+                  </template>
+                </EmptyState>
               </td>
             </tr>
           </tbody>
@@ -200,6 +207,7 @@ import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import { ref } from 'vue'
 import { Dialog, DialogOverlay, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
 import { useForm } from '@inertiajs/inertia-vue3'
+import EmptyState from '@/Shared/Feedbacks/EmptyState'
 
 defineProps({
   technologies: Object,
diff --git a/resources/js/Pages/Users/Index.vue b/resources/js/Pages/Users/Index.vue
index 074189a..4cf1d27 100644
--- a/resources/js/Pages/Users/Index.vue
+++ b/resources/js/Pages/Users/Index.vue
@@ -194,7 +194,14 @@
                 colspan="100%"
                 class="py-4 text-xl leading-5 text-center text-gray-700"
               >
-                Brak danych
+                <EmptyState>
+                  <template #title>
+                    Nie znaleziono użytkownika
+                  </template>
+                  <template #text>
+                    Spróbuj sformułować zapytanie inaczej
+                  </template>
+                </EmptyState>
               </td>
             </tr>
           </tbody>
@@ -214,6 +221,7 @@ import { DotsVerticalIcon, PencilIcon, BanIcon, RefreshIcon } from '@heroicons/v
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import { DateTime } from 'luxon'
 import Pagination from '@/Shared/Pagination'
+import EmptyState from '@/Shared/Feedbacks/EmptyState'
 
 const props = defineProps({
   users: Object,
diff --git a/resources/js/Pages/VacationRequest/IndexForApprovers.vue b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
index 7f746d8..d4303af 100644
--- a/resources/js/Pages/VacationRequest/IndexForApprovers.vue
+++ b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
@@ -346,7 +346,14 @@
               colspan="100%"
               class="py-4 text-xl leading-5 text-center text-gray-700"
             >
-              Brak danych
+              <EmptyState>
+                <template #title>
+                  Brak wniosków o urlop
+                </template>
+                <template #text>
+                  Spróbuj sformułować zapytanie inaczej
+                </template>
+              </EmptyState>
             </td>
           </tr>
         </tbody>
@@ -365,6 +372,7 @@ import { debounce } from 'lodash'
 import { Inertia } from '@inertiajs/inertia'
 import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
 import Pagination from '@/Shared/Pagination'
+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
new file mode 100644
index 0000000..4467e65
--- /dev/null
+++ b/resources/js/Shared/Feedbacks/EmptyState.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="text-center my-5">
+    <slot name="head">
+      <SearchIcon class="mx-auto w-12 h-12" />
+    </slot>
+    <h3 class="mt-2 text-sm font-medium">
+      <slot name="title">
+        No search result
+      </slot>
+    </h3>
+    <p class="text-sm text-gray-500">
+      <slot name="text">
+        Try a different search query
+      </slot>
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { SearchIcon } from '@heroicons/vue/solid'
+</script>
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,
diff --git a/resources/js/Shared/Widgets/UserVacationRequests.vue b/resources/js/Shared/Widgets/UserVacationRequests.vue
index b942779..bd0019d 100644
--- a/resources/js/Shared/Widgets/UserVacationRequests.vue
+++ b/resources/js/Shared/Widgets/UserVacationRequests.vue
@@ -38,12 +38,25 @@
           </li>
           <li v-if="! requests.length">
             <p class="py-2">
-              Brak danych
+              <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>
             </p>
           </li>
         </ul>
       </div>
-      <div class="mt-6">
+      <div
+        v-if="requests.length"
+        class="mt-6"
+      >
         <InertiaLink
           href="/vacation/requests/me"
           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"
@@ -58,6 +71,8 @@
 <script setup>
 import Status from '@/Shared/Status'
 import VacationType from '@/Shared/VacationType'
+import EmptyState from '@/Shared/Feedbacks/EmptyState'
+import { CollectionIcon } from '@heroicons/vue/solid'
 
 defineProps({
   requests: Object,