From 957e90aff6e53a95a6b98572be06aabae403fc2c Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Sat, 5 Aug 2023 00:08:47 +0200
Subject: [PATCH] - add empty states

---
 resources/js/Pages/CV/Index.vue              |  9 ++++--
 resources/js/Pages/Messages/Index.vue        | 20 +++++++++----
 resources/js/Share/CategoriesList.vue        |  8 ++++-
 resources/js/Share/Components/EmptyState.vue | 31 ++++++++++++++++++++
 resources/js/Share/ProjectsList.vue          |  9 ++++--
 5 files changed, 65 insertions(+), 12 deletions(-)
 create mode 100644 resources/js/Share/Components/EmptyState.vue

diff --git a/resources/js/Pages/CV/Index.vue b/resources/js/Pages/CV/Index.vue
index 089008f..51d0369 100644
--- a/resources/js/Pages/CV/Index.vue
+++ b/resources/js/Pages/CV/Index.vue
@@ -1,4 +1,6 @@
 <script setup>
+import EmptyState from '@/Share/Components/EmptyState.vue';
+
 defineProps({
     cvs: {
         type: Object,
@@ -82,9 +84,10 @@ function copySlug(slug) {
                     </InertiaLink>
                 </tbody>
             </table>
-            <div v-else>
-                Pusta lista
-            </div>
+            <EmptyState v-else :icon="['fas', 'file']">
+                <template #title>Nie znaleziono</template>
+                <template #text>Nie dodano jeszcze CV do listy.</template>
+            </EmptyState>
         </div>
     </div>
 </template>
diff --git a/resources/js/Pages/Messages/Index.vue b/resources/js/Pages/Messages/Index.vue
index ad21843..f47becc 100644
--- a/resources/js/Pages/Messages/Index.vue
+++ b/resources/js/Pages/Messages/Index.vue
@@ -1,4 +1,6 @@
 <script setup>
+import EmptyState from '@/Share/Components/EmptyState.vue';
+
 defineProps({
     messages: {
         type: Object,
@@ -10,8 +12,15 @@ defineProps({
 <template>
     <InertiaHead title="Wiadomości" />
     <div class="p-4">
-        <header class="pb-4">
-            <h1 class="text-3xl font-roboto font-light">Wiadomości</h1>
+        <header class="flex justify-between items-center pb-4">
+            <div class="flex items-center gap-2">
+                <InertiaLink
+                    as="button"
+                    href="/dashboard"
+                    class="px-2 text-xl text-gray-700 hover:text-black"
+                    title="Wróc do dashboard"><FontAwesomeIcon :icon="['fas', 'caret-left']" /></InertiaLink>
+                <h1 class="text-3xl font-roboto font-light">Wiadomości</h1>
+            </div>
         </header>
         <div class="overflow-x-auto">
             <table v-if="messages.data.length" class="table-fixed w-full min-w-[600px] border-separate border-spacing-y-2 cursor-pointer">
@@ -47,9 +56,10 @@ defineProps({
                     </InertiaLink>
                 </tbody>
             </table>
-            <div v-else>
-                Lista pusta!
-            </div>
+            <EmptyState v-else :icon="['fas', 'message']">
+                <template #title>Brak wiadomości</template>
+                <template #text>Nie przesłano jeszcze żadnej wiadomości.</template>
+            </EmptyState>
         </div>
     </div>
 </template>
diff --git a/resources/js/Share/CategoriesList.vue b/resources/js/Share/CategoriesList.vue
index c0fac8f..bb14dc3 100644
--- a/resources/js/Share/CategoriesList.vue
+++ b/resources/js/Share/CategoriesList.vue
@@ -1,4 +1,6 @@
 <script setup>
+import EmptyState from '@/Share/Components/EmptyState.vue';
+
 defineProps({
     categories: {
         type: Array,
@@ -16,7 +18,7 @@ defineProps({
                 href="/dashboard/category/create"
                 class="bg-blue-400 hover:bg-blue-500 text-white px-2.5 py-1 rounded-full"><FontAwesomeIcon :icon="['fas', 'plus']" /></InertiaLink>
         </header>
-        <ul class="flex flex-col gap-2">
+        <ul v-if="categories.length" class="flex flex-col gap-2">
             <li
                 v-for="(category, key) in categories"
                 :key="key"
@@ -38,5 +40,9 @@ defineProps({
                 </div>
             </li>
         </ul>
+        <EmptyState v-else :icon="['fas', 'list']">
+            <template #title>Brak kategorii</template>
+            <template #text>Nie dodano jeszcze żadnej kategorii.</template>
+        </EmptyState>
     </section>
 </template>
diff --git a/resources/js/Share/Components/EmptyState.vue b/resources/js/Share/Components/EmptyState.vue
new file mode 100644
index 0000000..d30c7fb
--- /dev/null
+++ b/resources/js/Share/Components/EmptyState.vue
@@ -0,0 +1,31 @@
+<script setup>
+defineProps({
+    icon: {
+        type: String,
+        defaut: ['far', 'folder-open'],
+    },
+    showDescription: {
+        type: Boolean,
+        default: true,
+    },
+});
+</script>
+
+<template>
+    <div class="text-center my-5 text-gray-500">
+        <slot name="head">
+            <FontAwesomeIcon :icon="icon" class="mx-auto w-12 h-12" />
+        </slot>
+        <h3 class="mt-2 text-sm font-medium">
+            <slot name="title">Brak danych</slot>
+        </h3>
+        <p
+            v-if="showDescription"
+            class="text-sm"
+        >
+            <slot name="text">
+                Nie znaleziono danych.
+            </slot>
+        </p>
+    </div>
+</template>
diff --git a/resources/js/Share/ProjectsList.vue b/resources/js/Share/ProjectsList.vue
index f82ba94..b0a4e84 100644
--- a/resources/js/Share/ProjectsList.vue
+++ b/resources/js/Share/ProjectsList.vue
@@ -1,4 +1,6 @@
 <script setup>
+import EmptyState from '@/Share/Components/EmptyState.vue';
+
 defineProps({
     projects: {
         type: Array,
@@ -38,8 +40,9 @@ defineProps({
                 </div>
             </li>
         </ul>
-        <div v-else>
-            Empty
-        </div>
+        <EmptyState v-else :icon="['fas', 'bars-progress']">
+            <template #title>Brak projektów</template>
+            <template #text>Nie dodano jeszcze żadnego projektu.</template>
+        </EmptyState>
     </section>
 </template>