63 lines
2.0 KiB
Vue
63 lines
2.0 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">
|
|
Twoje wnioski
|
|
</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>
|
|
<p class="mt-2 text-sm text-gray-600">
|
|
<Status :status="request.state" />
|
|
</p>
|
|
</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/me"
|
|
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>
|