- vue composition api (#91)
* wip * fix Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
This commit is contained in:
Adrian Hopek
GitHub
42
resources/js/Shared/Widgets/AbsenceList.vue
Normal file
42
resources/js/Shared/Widgets/AbsenceList.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<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">
|
||||
Dzisiejsze nieobecności
|
||||
</h2>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 px-4 sm:px-6">
|
||||
<ul class="divide-y divide-gray-200">
|
||||
<li
|
||||
v-for="absence in absences"
|
||||
:key="absence.user.id"
|
||||
class="py-4 flex"
|
||||
>
|
||||
<img
|
||||
class="h-10 w-10 rounded-full"
|
||||
:src="absence.user.avatar"
|
||||
>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm font-medium text-gray-900">
|
||||
{{ absence.user.name }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500">
|
||||
{{ absence.user.email }}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="! absences.length">
|
||||
<p class="py-2">
|
||||
Brak danych
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
absences: Object,
|
||||
})
|
||||
</script>
|
||||
76
resources/js/Shared/Widgets/PendingVacationRequests.vue
Normal file
76
resources/js/Shared/Widgets/PendingVacationRequests.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<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>
|
||||
46
resources/js/Shared/Widgets/UpcomingHolidays.vue
Normal file
46
resources/js/Shared/Widgets/UpcomingHolidays.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<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">
|
||||
Najbliższe dni wolne
|
||||
</h2>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 px-4 pb-5 sm:px-6">
|
||||
<ul class="divide-y divide-gray-200">
|
||||
<li
|
||||
v-for="holiday in holidays"
|
||||
:key="holiday.id.id"
|
||||
class="py-4 flex"
|
||||
>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-900">
|
||||
{{ holiday.name }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500">
|
||||
{{ holiday.displayDate }}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="! holidays.length">
|
||||
<p class="py-2">
|
||||
Brak danych
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<InertiaLink
|
||||
href="/holidays"
|
||||
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>
|
||||
defineProps({
|
||||
holidays: Object,
|
||||
})
|
||||
</script>
|
||||
62
resources/js/Shared/Widgets/UserVacationRequests.vue
Normal file
62
resources/js/Shared/Widgets/UserVacationRequests.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<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>
|
||||
74
resources/js/Shared/Widgets/VacationStats.vue
Normal file
74
resources/js/Shared/Widgets/VacationStats.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<section class="grid grid-cols-2 gap-4">
|
||||
<div class="bg-white shadow-md p-4">
|
||||
<VacationChart :stats="stats" />
|
||||
</div>
|
||||
<div class="h-full">
|
||||
<div class="grid grid-cols-2 gap-4 h-full">
|
||||
<div class="px-4 py-5 bg-white shadow-md sm:p-6">
|
||||
<dd class="mt-1 text-4xl font-semibold text-blumilk-500">
|
||||
{{ stats.remaining }}
|
||||
</dd>
|
||||
<dt class="text-md font-medium text-gray-700 truncate">
|
||||
Pozostało
|
||||
</dt>
|
||||
<dt class="text-sm font-medium text-gray-500 mt-2">
|
||||
Dni do wykorzystania teraz.
|
||||
</dt>
|
||||
</div>
|
||||
<div class="px-4 py-5 bg-white shadow-md sm:p-6">
|
||||
<dd class="mt-1 text-4xl font-semibold text-blumilk-700">
|
||||
{{ stats.used }}
|
||||
</dd>
|
||||
<dt class="text-md font-medium text-gray-700 truncate">
|
||||
Dni wykorzystane
|
||||
</dt>
|
||||
<dt class="text-sm font-medium text-gray-500 mt-2">
|
||||
Dni, które zostały już wykorzystane na urlop wypoczynkowy.
|
||||
</dt>
|
||||
</div>
|
||||
<div class="px-4 py-5 bg-white shadow-md sm:p-6">
|
||||
<dt class="mt-1 text-4xl font-semibold text-blumilk-200">
|
||||
{{ stats.pending }}
|
||||
</dt>
|
||||
<dd class="text-md font-medium text-gray-500 truncate">
|
||||
Rozpatrywane
|
||||
</dd>
|
||||
<dt class="text-sm font-medium text-gray-500 mt-2">
|
||||
Dni czekające na akceptację przełożonych.
|
||||
</dt>
|
||||
</div>
|
||||
<div class="px-4 py-5 bg-white shadow-md sm:p-6">
|
||||
<dt class="mt-1 text-4xl font-semibold text-gray-900">
|
||||
{{ stats.limit }}
|
||||
</dt>
|
||||
<dd class="text-md font-medium text-gray-500 truncate">
|
||||
Limit urlopu
|
||||
</dd>
|
||||
<dt class="text-sm font-medium text-gray-500 mt-2">
|
||||
Twój roczny limit urlopu wypoczynkowego.
|
||||
</dt>
|
||||
</div>
|
||||
<div class="px-4 py-5 bg-white shadow-md sm:p-6 col-span-2">
|
||||
<dt class="mt-1 text-4xl font-semibold text-gray-900">
|
||||
{{ stats.other }}
|
||||
</dt>
|
||||
<dd class="text-md font-medium text-gray-500 truncate">
|
||||
Inne urlopy
|
||||
</dd>
|
||||
<dt class="text-sm font-medium text-gray-500 mt-2">
|
||||
Urlopy bezpłatne, okolicznościowe, zwolnienia lekarskie, itd., które zostały już zatwierdzone.
|
||||
</dt>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import VacationChart from '@/Shared/VacationChart'
|
||||
|
||||
defineProps({
|
||||
stats: Object,
|
||||
})
|
||||
</script>
|
||||
35
resources/js/Shared/Widgets/Welcome.vue
Normal file
35
resources/js/Shared/Widgets/Welcome.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<section>
|
||||
<div class=" bg-white overflow-hidden shadow">
|
||||
<div class="bg-white p-6">
|
||||
<div class="sm:flex sm:items-center sm:justify-between">
|
||||
<div class="sm:flex sm:space-x-5">
|
||||
<div class="flex-shrink-0">
|
||||
<img
|
||||
class="mx-auto h-20 w-20 rounded-full"
|
||||
:src="user.avatar"
|
||||
>
|
||||
</div>
|
||||
<div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
|
||||
<p class="text-sm font-medium text-gray-600">
|
||||
Cześć,
|
||||
</p>
|
||||
<p class="text-xl font-bold text-gray-900 sm:text-2xl">
|
||||
{{ user.name }}
|
||||
</p>
|
||||
<p class="text-sm font-medium text-gray-600">
|
||||
{{ user.role }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
user: Object,
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user