toby/resources/js/Shared/Widgets/PendingVacationRequests.vue
Adrian Hopek 08421b8a69
- small changes (#98)
* - added some test

* - cr fix

* wip

* wip

* Update resources/js/Shared/MainMenu.vue

Co-authored-by: Ewelina Lasowy <56546832+EwelinaLasowy@users.noreply.github.com>

* fix

Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
Co-authored-by: Ewelina Lasowy <56546832+EwelinaLasowy@users.noreply.github.com>
2022-03-30 10:33:18 +02:00

77 lines
2.5 KiB
Vue

<template>
<section class="bg-white shadow-md">
<div class="p-4 sm:px-6">
<h2 class="text-lg leading-6 font-medium text-gray-900">
Wnioski oczekujące na akcje
</h2>
</div>
<div class="border-t border-gray-200 pb-5 px-4 sm:px-6">
<div class="flow-root mt-6">
<ul class="-my-5 divide-y divide-gray-200">
<li
v-for="request in requests"
:key="request.id"
class="py-5"
>
<div class="relative focus-within:ring-2 focus-within:ring-blumilk-500">
<h3 class="text-sm font-semibold text-blumilk-600 hover:text-blumilk-500">
<InertiaLink
:href="`/vacation/requests/${request.id}`"
class="hover:underline focus:outline-none"
>
<span class="absolute inset-0" />
Wniosek o {{ findType(request.type).text.toLowerCase() }}
[{{ request.name }}]
</InertiaLink>
</h3>
<p class="mt-1 text-sm text-gray-600">
{{ request.from }} - {{ request.to }}
</p>
<div class="mt-3 text-sm text-gray-600">
<div class="flex">
<img
class="h-10 w-10 rounded-full"
:src="request.user.avatar"
>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">
{{ request.user.name }}
</p>
<p class="text-sm text-gray-500">
{{ request.user.email }}
</p>
</div>
</div>
</div>
</div>
</li>
<li v-if="! requests.length">
<p class="py-2">
Brak danych
</p>
</li>
</ul>
</div>
<div class="mt-6">
<InertiaLink
href="/vacation/requests"
:data="{status: 'waiting_for_action'}"
class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blumilk-500"
>
Zobacz wszystkie
</InertiaLink>
</div>
</div>
</section>
</template>
<script setup>
import useVacationTypeInfo from '@/Composables/vacationTypeInfo'
defineProps({
requests: Object,
})
const { findType } = useVacationTypeInfo()
</script>