* #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>
This commit is contained in:
GitHub
parent
3af92b2085
commit
4309e8104b
@ -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,
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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,
|
||||
|
||||
21
resources/js/Shared/Feedbacks/EmptyState.vue
Normal file
21
resources/js/Shared/Feedbacks/EmptyState.vue
Normal file
@ -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>
|
||||
@ -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,
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user