kamilniemczycki/toby
1
0
Fork 0
Code Issues Pull Requests 2 Projects Releases Activity

#150 - empty states (#160)

Browse Source 
* #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:
Kamil Niemczycki
2022-06-02 10:37:41 +02:00
committed by GitHub
parent 3af92b2085
commit 4309e8104b
9 changed files with 115 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
resources/js/Shared/Widgets/PendingVacationRequests.vue
View File

@@ -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,

19
resources/js/Shared/Widgets/UserVacationRequests.vue
View File

@@ -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,