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

#99 - ui changes (#100)

Browse Source 
* #99 - ui changes

* #99 - logo fix

* #99 - tailwind plugin for eslint

* #99 - fix

* #99 - fix

* #99 - fix pagination

* #99 - fix logo

Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
This commit is contained in:
Adrian Hopek
2022-03-31 10:12:33 +02:00
committed by GitHub
parent 08421b8a69
commit b49fcadbba
38 changed files with 758 additions and 667 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
resources/js/Pages/Calendar.vue
View File

@@ -3,28 +3,28 @@
<div class="bg-white shadow-md">
<div class="flex justify-between items-center p-4 sm:px-6">
<div class="flex items-center">
<h2 class="text-lg leading-6 font-medium text-gray-900">
<h2 class="text-lg font-medium leading-6 text-center text-gray-900">
Kalendarz urlopów
</h2>
<div class="ml-5 flex items-center rounded-md shadow-sm md:items-stretch">
<div class="flex items-center ml-3 rounded-md shadow-sm md:items-stretch">
<InertiaLink
v-if="previousMonth"
as="button"
:href="`/vacation/calendar/${previousMonth.value}`"
class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-l-md border border-r-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
>
<ChevronLeftIcon class="h-5 w-5" />
<ChevronLeftIcon class="w-5 h-5" />
</InertiaLink>
<span
v-else
class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-l-md border border-r-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
>
<ChevronLeftIcon class="h-5 w-5" />
<ChevronLeftIcon class="w-5 h-5" />
</span>
<InertiaLink
as="button"
:href="`/vacation/calendar/${currentMonth.value}`"
class="hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium flex items-center text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block"
class="hidden focus:relative items-center p-2 text-sm font-medium text-gray-700 hover:text-gray-900 bg-white hover:bg-gray-50 border-y border-gray-300 md:flex"
>
Dzisiaj
</InertiaLink>
@@ -32,32 +32,32 @@
v-if="nextMonth"
as="button"
:href="`/vacation/calendar/${nextMonth.value}`"
class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-r-md border border-l-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
>
<ChevronRightIcon class="h-5 w-5" />
<ChevronRightIcon class="w-5 h-5" />
</InertiaLink>
<span
v-else
class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-r-md border border-l-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
>
<ChevronRightIcon class="h-5 w-5" />
<ChevronRightIcon class="w-5 h-5" />
</span>
</div>
</div>
<div v-if="can.generateTimesheet">
<a
:href="`/vacation/timesheet/${selectedMonth.value}`"
class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
class="block py-3 px-4 ml-3 text-sm font-medium leading-4 text-center text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
>
Pobierz plik Excel
</a>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-center text-sm border border-gray-300">
<table class="w-full text-sm text-center border border-gray-300">
<thead>
<tr>
<th class="w-64 py-2 border text-lg font-semibold text-gray-800 border-gray-300">
<th class="py-2 w-64 text-lg font-semibold text-gray-800 border border-gray-300">
<div class="flex justify-center items-center">
{{ selectedMonth.name }} {{ years.selected.year }}
</div>
@@ -65,13 +65,13 @@
<th
v-for="day in calendar"
:key="day.dayOfMonth"
class="border border-gray-300 text-lg font-semibold text-gray-900 py-2 px-2"
class="p-2 text-lg font-semibold text-gray-900 border border-gray-300"
style="min-width: 46px;"
:class="{ 'bg-red-100 text-red-800': day.isWeekend || day.isHoliday, 'text-blumilk-600 bg-blumilk-25': day.isToday }"
>
<div>
{{ day.dayOfMonth }}
<p class="font-normal mt-1 text-sm capitalize">
<p class="mt-1 text-sm font-normal capitalize">
{{ day.dayOfWeek }}
</p>
</div>
@@ -83,9 +83,9 @@
v-for="user in users.data"
:key="user.id"
>
<th class="border border-gray-300 py-2 px-2">
<th class="p-2 border border-gray-300">
<div class="flex justify-start items-center">
<span class="inline-flex items-center justify-center h-8 w-8 rounded-full">
<span class="inline-flex justify-center items-center w-8 h-8 rounded-full">
<img :src="user.avatar">
</span>
<div class="ml-3">

4
resources/js/Pages/Dashboard.vue
View File

@@ -1,7 +1,7 @@
<template>
<InertiaHead title="Strona główna" />
<div class="grid grid-cols-1 gap-4 items-start lg:grid-cols-3 lg:gap-8">
<div class="grid grid-cols-1 gap-4 lg:col-span-2">
<div class="grid grid-cols-1 gap-4 items-start xl:grid-cols-3 xl:gap-8">
<div class="grid grid-cols-1 gap-4 xl:col-span-2">
<Welcome :user="auth.user" />
<VacationStats :stats="stats" />
</div>

12
resources/js/Pages/Error.vue
View File

@@ -1,24 +1,24 @@
<template>
<InertiaHead :title="error.title" />
<div class="min-h-full px-4 py-16 sm:px-6 sm:py-24 md:grid md:place-items-center lg:px-8">
<div class="max-w-max mx-auto">
<div class="py-16 px-4 min-h-full sm:py-24 sm:px-6 md:grid md:place-items-center lg:px-8">
<div class="mx-auto max-w-max">
<main class="sm:flex">
<p class="text-4xl font-extrabold text-blumilk-600 sm:text-5xl">
{{ error.code }}
</p>
<div class="sm:ml-6">
<div class="sm:border-l sm:border-gray-200 sm:pl-6">
<h1 class="text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
<div class="sm:pl-6 sm:border-l sm:border-gray-200">
<h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl">
{{ error.title }}
</h1>
<p class="mt-1 text-base text-gray-500">
{{ error.message }}
</p>
</div>
<div class="mt-10 flex space-x-3 sm:border-l sm:border-transparent sm:pl-6">
<div class="flex mt-10 space-x-3 sm:pl-6 sm:border-l sm:border-transparent">
<InertiaLink
href="/"
class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
>
Wróć do strony głównej
</InertiaLink>

23
resources/js/Pages/Holidays/Create.vue
View File

@@ -2,30 +2,27 @@
<InertiaHead title="Dodaj dzień wolny" />
<div class="bg-white shadow-md">
<div class="p-4 sm:px-6">
<h2 class="text-lg leading-6 font-medium text-gray-900">
<h2 class="text-lg font-medium leading-6 text-gray-900">
Dodaj dzień wolny
</h2>
<p class="mt-1 text-sm text-gray-500">
Użytkownik nie będzie miał możliwości wzięcia urlopu w dzień wolny.
</p>
</div>
<form
class="border-t border-gray-200 px-6"
class="px-6 border-t border-gray-200"
@submit.prevent="createHoliday"
>
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
<div class="items-center py-4 sm:grid sm:grid-cols-3">
<label
for="name"
class="block text-sm font-medium text-gray-700 sm:mt-px"
>
Nazwa
</label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<div class="mt-1 sm:col-span-2 sm:mt-0">
<input
id="name"
v-model="form.name"
type="text"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
>
<p
@@ -36,20 +33,20 @@
</p>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
<div class="items-center py-4 sm:grid sm:grid-cols-3">
<label
for="date"
class="block text-sm font-medium text-gray-700 sm:mt-px"
>
Data
</label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<div class="mt-1 sm:col-span-2 sm:mt-0">
<FlatPickr
id="date"
v-model="form.date"
placeholder="Wybierz datę"
:config="{minDate, maxDate}"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.date, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.date }"
/>
<p
@@ -64,14 +61,14 @@
<div class="space-x-3">
<InertiaLink
href="/holidays"
class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
class="py-2 px-4 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 focus:ring-offset-2 shadow-sm"
>
Anuluj
</InertiaLink>
<button
type="submit"
:disabled="form.processing"
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
>
Zapisz
</button>

23
resources/js/Pages/Holidays/Edit.vue
View File

@@ -2,30 +2,27 @@
<InertiaHead title="Edytuj dzień wolny" />
<div class="bg-white shadow-md">
<div class="p-4 sm:px-6">
<h2 class="text-lg leading-6 font-medium text-gray-900">
<h2 class="text-lg font-medium leading-6 text-gray-900">
Edytuj dzień wolny
</h2>
<p class="mt-1 text-sm text-gray-500">
Użytkownik nie będzie miał możliwości wzięcia urlopu w dzień wolny.
</p>
</div>
<form
class="border-t border-gray-200 px-6"
class="px-6 border-t border-gray-200"
@submit.prevent="editHoliday"
>
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
<div class="items-center py-4 sm:grid sm:grid-cols-3">
<label
for="name"
class="block text-sm font-medium text-gray-700 sm:mt-px"
>
Nazwa
</label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<div class="mt-1 sm:col-span-2 sm:mt-0">
<input
id="name"
v-model="form.name"
type="text"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.name, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.name }"
>
<p
@@ -36,19 +33,19 @@
</p>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
<div class="items-center py-4 sm:grid sm:grid-cols-3">
<label
for="date"
class="block text-sm font-medium text-gray-700 sm:mt-px"
>
Data
</label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<div class="mt-1 sm:col-span-2 sm:mt-0">
<FlatPickr
id="date"
v-model="form.date"
placeholder="Wybierz datę"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.date, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.date }"
/>
<p
@@ -63,14 +60,14 @@
<div class="space-x-3">
<InertiaLink
href="/holidays"
class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
class="py-2 px-4 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 focus:ring-offset-2 shadow-sm"
>
Anuluj
</InertiaLink>
<button
type="submit"
:disabled="form.processing"
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
>
Zapisz
</button>

41
resources/js/Pages/Holidays/Index.vue
View File

@@ -3,48 +3,45 @@
<div class="bg-white shadow-md">
<div class="flex justify-between items-center p-4 sm:px-6">
<div>
<h2 class="text-lg leading-6 font-medium text-gray-900">
<h2 class="text-lg font-medium leading-6 text-gray-900">
Dni wolne od pracy
</h2>
<p class="mt-1 text-sm text-gray-500">
Lista dni wolnych od pracy w danym roku
</p>
</div>
<div v-if="can.manageHolidays">
<InertiaLink
href="holidays/create"
class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
>
Dodaj dzień wolny
Dodaj dzień
</InertiaLink>
</div>
</div>
<div class="border-t border-gray-200">
<div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
<div class="overflow-auto xl:overflow-visible">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Nazwa
</th>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Data
</th>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Dzień tygodnia
</th>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
/>
</tr>
</thead>
@@ -54,24 +51,24 @@
:key="holiday.id"
class="hover:bg-blumilk-25"
>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 font-semibold capitalize">
<td class="p-4 text-sm font-semibold text-gray-500 capitalize whitespace-nowrap">
{{ holiday.name }}
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ holiday.displayDate }}
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ holiday.dayOfWeek }}
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 text-right">
<td class="p-4 text-sm text-right text-gray-500 whitespace-nowrap">
<Menu
v-if="can.manageHolidays"
as="div"
class="relative inline-block text-left"
class="inline-block relative text-left"
>
<MenuButton class="rounded-full flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blumilk-500">
<MenuButton class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100">
<DotsVerticalIcon
class="h-5 w-5"
class="w-5 h-5"
aria-hidden="true"
/>
</MenuButton>
@@ -84,7 +81,7 @@
leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95"
>
<MenuItems class="origin-top-right absolute right-0 mt-2 w-56 z-10 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
<MenuItems class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right">
<div class="py-1">
<MenuItem
v-slot="{ active }"
@@ -94,7 +91,7 @@
:href="`/holidays/${holiday.id}/edit`"
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
>
<PencilIcon class="mr-2 h-5 w-5 text-blue-500" /> Edytuj
<PencilIcon class="mr-2 w-5 h-5 text-blue-500" /> Edytuj
</InertiaLink>
</MenuItem>
<MenuItem
@@ -108,7 +105,7 @@
:href="`/holidays/${holiday.id}`"
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
>
<TrashIcon class="mr-2 h-5 w-5 text-red-500" /> Usuń
<TrashIcon class="mr-2 w-5 h-5 text-red-500" /> Usuń
</InertiaLink>
</MenuItem>
</div>
@@ -120,7 +117,7 @@
<tr v-if="!holidays.data.length">
<td
colspan="100%"
class="text-center py-4 text-xl leading-5 text-gray-700"
class="py-4 text-xl leading-5 text-center text-gray-700"
>
Brak danych
</td>

22
resources/js/Pages/Login.vue
View File

@@ -10,23 +10,23 @@
>
<div
v-if="errors.oauth"
class="absolute inset-x-2 top-2 sm:mx-auto sm:w-full sm:max-w-md bg-red-500 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden"
class="overflow-hidden absolute inset-x-2 top-2 bg-red-500 rounded-lg ring-1 ring-black ring-opacity-5 shadow-lg pointer-events-auto sm:mx-auto sm:w-full sm:max-w-md"
>
<div class="p-4">
<div class="flex items-center">
<div class="w-0 flex-1 flex justify-between">
<ExclamationIcon class="h-5 w-5 mr-1 text-white" />
<p class="w-0 flex-1 text-sm font-medium text-white">
<div class="flex flex-1 justify-between w-0">
<ExclamationIcon class="mr-1 w-5 h-5 text-white" />
<p class="flex-1 w-0 text-sm font-medium text-white">
{{ errors.oauth }}
</p>
</div>
<div class="ml-4 flex-shrink-0 flex">
<div class="flex shrink-0 ml-4">
<button
class="bg-red-500 rounded-md inline-flex text-red-100 hover:text-red-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600"
class="inline-flex text-red-100 hover:text-red-400 bg-red-500 rounded-md focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-offset-2"
@click="delete errors.oauth"
>
<span class="sr-only">Close</span>
<XIcon class="h-5 w-5" />
<XIcon class="w-5 h-5" />
</button>
</div>
</div>
@@ -34,20 +34,20 @@
</div>
</transition>
<div
class="sm:mx-auto sm:w-full sm:max-w-md text-white space-y-4 flex flex-col items-center rounded-lg px-4 py-8"
class="flex flex-col items-center py-8 px-4 space-y-4 text-white rounded-lg sm:mx-auto sm:w-full sm:max-w-md"
dusk="login-link"
>
<img
class="mx-auto h-50 w-auto"
class="mx-auto w-auto h-50"
src="img/logo.png"
>
<a
href="/login/google/start"
class="inline-flex justify-center items-center py-2 px-6 rounded-md shadow-sm bg-blumilk-500 text-md font-medium text-white hover:bg-blumilk-700"
class="inline-flex justify-center items-center py-2 px-6 font-medium text-white bg-blumilk-500 hover:bg-blumilk-700 rounded-md shadow-sm text-md"
>
Zaloguj się za pomocą Google
<svg
class="w-5 h-5 ml-2"
class="ml-2 w-5 h-5"
fill="currentColor"
viewBox="0 0 24 24"
>

20
resources/js/Pages/MonthlyUsage.vue
View File

@@ -3,23 +3,23 @@
<div class="bg-white shadow-md">
<div class="flex justify-between items-center p-4 sm:px-6">
<div class="flex items-center">
<h2 class="text-lg leading-6 font-medium text-gray-900">
<h2 class="text-lg font-medium leading-6 text-gray-900">
Wykorzystanie miesięczne urlopu wypoczynkowego
</h2>
</div>
</div>
<div class="border-t border-gray-200">
<div class="overflow-x-auto xl:overflow-x-visible overflow-y-hidden">
<div class="overflow-x-auto overflow-y-hidden xl:overflow-x-visible">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="w-64 px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider text-left">
<th class="py-3 px-6 w-64 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase">
Pracownik
</th>
<th
v-for="month in months"
:key="month"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider text-center"
class="py-3 px-6 text-xs font-semibold tracking-wider text-center text-gray-500 uppercase"
:class="{'bg-blumilk-50': isCurrentMonth(month)}"
style="min-width: 46px;"
>
@@ -27,7 +27,7 @@
{{ month.shortcut }}
</span>
</th>
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider text-center">
<th class="py-3 px-6 text-xs font-semibold tracking-wider text-center text-gray-500 uppercase">
Wykorzystanie urlopu
</th>
</tr>
@@ -38,11 +38,11 @@
:key="item.user.id"
class="hover:bg-blumilk-25"
>
<th class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 font-semibold capitalize">
<th class="p-4 text-sm font-semibold text-gray-500 capitalize whitespace-nowrap">
<div class="flex justify-start items-center">
<span class="inline-flex items-center justify-center h-10 w-10 rounded-full">
<span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
<img
class="h-10 w-10 rounded-full"
class="w-10 h-10 rounded-full"
:src="item.user.avatar"
>
</span>
@@ -58,12 +58,12 @@
<td
v-for="month in months"
:key="month.value"
class="px-4 py-4 text-sm text-gray-500 font-semibold text-center"
class="p-4 text-sm font-semibold text-center text-gray-500"
:class="{'bg-blumilk-25': isCurrentMonth(month)}"
>
{{ item.months[month.value] ?? '-' }}
</td>
<td class="px-4 py-4 text-sm text-gray-500 font-semibold text-center">
<td class="p-4 text-sm font-semibold text-center text-gray-500">
<div style="min-width: 300px;">
<VacationBar :stats="{ used: item.stats.used, pending: item.stats.pending, remaining: item.stats.remaining }" />
</div>

71
resources/js/Pages/Users/Create.vue
View File

@@ -2,30 +2,27 @@
<InertiaHead title="Dodawanie użytkownika" />
<div class="bg-white shadow-md">
<div class="p-4 sm:px-6">
<h2 class="text-lg leading-6 font-medium text-gray-900">
<h2 class="text-lg font-medium leading-6 text-gray-900">
Dodaj użytkownika
</h2>
<p class="mt-1 text-sm text-gray-500">
Tylko dodani użytkownicy będą mogli zalogować się do aplikacji.
</p>
</div>
<form
class="border-t border-gray-200 px-6"
class="px-6 border-t border-gray-200"
@submit.prevent="createUser"
>
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
<div class="items-center py-4 sm:grid sm:grid-cols-3">
<label
for="firstName"
class="block text-sm font-medium text-gray-700 sm:mt-px"
>
Imię
</label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<div class="mt-1 sm:col-span-2 sm:mt-0">
<input
id="firstName"
v-model="form.firstName"
type="text"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.firstName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.firstName }"
>
<p
@@ -36,19 +33,19 @@
</p>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
<div class="items-center py-4 sm:grid sm:grid-cols-3">
<label
for="lastName"
class="block text-sm font-medium text-gray-700 sm:mt-px"
>
Nazwisko
</label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<div class="mt-1 sm:col-span-2 sm:mt-0">
<input
id="lastName"
v-model="form.lastName"
type="text"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.lastName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.lastName }"
>
<p
@@ -59,19 +56,19 @@
</p>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
<div class="items-center py-4 sm:grid sm:grid-cols-3">
<label
for="email"
class="block text-sm font-medium text-gray-700 sm:mt-px"
>
Adres e-mail
</label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<div class="mt-1 sm:col-span-2 sm:mt-0">
<input
id="email"
v-model="form.email"
type="email"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.email, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.email }"
>
<p
@@ -82,19 +79,19 @@
</p>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
<div class="items-center py-4 sm:grid sm:grid-cols-3">
<label
for="position"
class="block text-sm font-medium text-gray-700 sm:mt-px"
>
Stanowisko
</label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<div class="mt-1 sm:col-span-2 sm:mt-0">
<input
id="position"
v-model="form.position"
type="text"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.position, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.position }"
>
<p
@@ -108,19 +105,19 @@
<Listbox
v-model="form.role"
as="div"
class="sm:grid sm:grid-cols-3 py-4 items-center"
class="items-center py-4 sm:grid sm:grid-cols-3"
>
<ListboxLabel class="block text-sm font-medium text-gray-700">
Rola
</ListboxLabel>
<div class="mt-1 relative sm:mt-0 sm:col-span-2">
<div class="relative mt-1 sm:col-span-2 sm:mt-0">
<ListboxButton
class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.role, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.role }"
>
<span class="block truncate">{{ form.role.label }}</span>
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<SelectorIcon class="h-5 w-5 text-gray-400" />
<span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
<SelectorIcon class="w-5 h-5 text-gray-400" />
</span>
</ListboxButton>
<transition
@@ -128,7 +125,7 @@
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<ListboxOptions class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
<ListboxOptions class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm">
<ListboxOption
v-for="role in roles"
:key="role.value"
@@ -145,7 +142,7 @@
v-if="selected"
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
>
<CheckIcon class="h-5 w-5" />
<CheckIcon class="w-5 h-5" />
</span>
</li>
</ListboxOption>
@@ -162,19 +159,19 @@
<Listbox
v-model="form.employmentForm"
as="div"
class="sm:grid sm:grid-cols-3 py-4 items-center"
class="items-center py-4 sm:grid sm:grid-cols-3"
>
<ListboxLabel class="block text-sm font-medium text-gray-700">
Forma zatrudnienia
</ListboxLabel>
<div class="mt-1 relative sm:mt-0 sm:col-span-2">
<div class="relative mt-1 sm:col-span-2 sm:mt-0">
<ListboxButton
class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1"
class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
>
<span class="block truncate">{{ form.employmentForm.label }}</span>
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<SelectorIcon class="h-5 w-5 text-gray-400" />
<span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
<SelectorIcon class="w-5 h-5 text-gray-400" />
</span>
</ListboxButton>
@@ -183,7 +180,7 @@
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<ListboxOptions class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
<ListboxOptions class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm">
<ListboxOption
v-for="employmentForm in employmentForms"
:key="employmentForm.value"
@@ -200,7 +197,7 @@
v-if="selected"
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
>
<CheckIcon class="h-5 w-5" />
<CheckIcon class="w-5 h-5" />
</span>
</li>
</ListboxOption>
@@ -214,19 +211,19 @@
</p>
</div>
</Listbox>
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
<div class="items-center py-4 sm:grid sm:grid-cols-3">
<label
for="employment_date"
class="block text-sm font-medium text-gray-700 sm:mt-px"
>
Data zatrudnienia
</label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<div class="mt-1 sm:col-span-2 sm:mt-0">
<FlatPickr
id="employment_date"
v-model="form.employmentDate"
placeholder="Wybierz datę"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentDate, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentDate }"
/>
<p
@@ -241,14 +238,14 @@
<div class="space-x-3">
<InertiaLink
href="/users"
class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
class="py-2 px-4 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 focus:ring-offset-2 shadow-sm"
>
Anuluj
</InertiaLink>
<button
type="submit"
:disabled="form.processing"
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
>
Zapisz
</button>

69
resources/js/Pages/Users/Edit.vue
View File

@@ -2,30 +2,27 @@
<InertiaHead title="Edycja użytkownika" />
<div class="bg-white shadow-md">
<div class="p-4 sm:px-6">
<h2 class="text-lg leading-6 font-medium text-gray-900">
<h2 class="text-lg font-medium leading-6 text-gray-900">
Edytuj użytkownika
</h2>
<p class="mt-1 text-sm text-gray-500">
Edytuj dane użytkownika, takie jak e-mail czy formę zatrudnienia.
</p>
</div>
<form
class="border-t border-gray-200 px-6"
class="px-6 border-t border-gray-200"
@submit.prevent="editUser"
>
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
<div class="items-center py-4 sm:grid sm:grid-cols-3">
<label
for="firstName"
class="block text-sm font-medium text-gray-700 sm:mt-px"
>
Imię
</label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<div class="mt-1 sm:col-span-2 sm:mt-0">
<input
id="firstName"
v-model="form.firstName"
type="text"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.firstName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.firstName }"
>
<p
@@ -36,19 +33,19 @@
</p>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
<div class="items-center py-4 sm:grid sm:grid-cols-3">
<label
for="lastName"
class="block text-sm font-medium text-gray-700 sm:mt-px"
>
Nazwisko
</label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<div class="mt-1 sm:col-span-2 sm:mt-0">
<input
id="lastName"
v-model="form.lastName"
type="text"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.lastName, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.lastName }"
>
<p
@@ -59,19 +56,19 @@
</p>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
<div class="items-center py-4 sm:grid sm:grid-cols-3">
<label
for="email"
class="block text-sm font-medium text-gray-700 sm:mt-px"
>
Adres e-mail
</label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<div class="mt-1 sm:col-span-2 sm:mt-0">
<input
id="email"
v-model="form.email"
type="email"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.email, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.email }"
>
<p
@@ -82,19 +79,19 @@
</p>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
<div class="items-center py-4 sm:grid sm:grid-cols-3">
<label
for="position"
class="block text-sm font-medium text-gray-700 sm:mt-px"
>
Stanowisko
</label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<div class="mt-1 sm:col-span-2 sm:mt-0">
<input
id="position"
v-model="form.position"
type="text"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.position, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.position }"
>
<p
@@ -108,19 +105,19 @@
<Listbox
v-model="form.role"
as="div"
class="sm:grid sm:grid-cols-3 py-4 items-center"
class="items-center py-4 sm:grid sm:grid-cols-3"
>
<ListboxLabel class="block text-sm font-medium text-gray-700">
Rola
</ListboxLabel>
<div class="mt-1 relative sm:mt-0 sm:col-span-2">
<div class="relative mt-1 sm:col-span-2 sm:mt-0">
<ListboxButton
class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1"
class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
>
<span class="block truncate">{{ form.role.label }}</span>
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<SelectorIcon class="h-5 w-5 text-gray-400" />
<span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
<SelectorIcon class="w-5 h-5 text-gray-400" />
</span>
</ListboxButton>
<transition
@@ -129,7 +126,7 @@
leave-to-class="opacity-0"
>
<ListboxOptions
class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
>
<ListboxOption
v-for="role in roles"
@@ -149,7 +146,7 @@
v-if="selected"
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
>
<CheckIcon class="h-5 w-5" />
<CheckIcon class="w-5 h-5" />
</span>
</li>
</ListboxOption>
@@ -166,19 +163,19 @@
<Listbox
v-model="form.employmentForm"
as="div"
class="sm:grid sm:grid-cols-3 py-4 items-center"
class="items-center py-4 sm:grid sm:grid-cols-3"
>
<ListboxLabel class="block text-sm font-medium text-gray-700">
Forma zatrudnienia
</ListboxLabel>
<div class="mt-1 relative sm:mt-0 sm:col-span-2">
<div class="relative mt-1 sm:col-span-2 sm:mt-0">
<ListboxButton
class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1"
class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
>
<span class="block truncate">{{ form.employmentForm.label }}</span>
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<SelectorIcon class="h-5 w-5 text-gray-400" />
<span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
<SelectorIcon class="w-5 h-5 text-gray-400" />
</span>
</ListboxButton>
<transition
@@ -187,7 +184,7 @@
leave-to-class="opacity-0"
>
<ListboxOptions
class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
>
<ListboxOption
v-for="employmentForm in employmentForms"
@@ -207,7 +204,7 @@
v-if="selected"
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
>
<CheckIcon class="h-5 w-5" />
<CheckIcon class="w-5 h-5" />
</span>
</li>
</ListboxOption>
@@ -221,19 +218,19 @@
</p>
</div>
</Listbox>
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
<div class="items-center py-4 sm:grid sm:grid-cols-3">
<label
for="employment_date"
class="block text-sm font-medium text-gray-700 sm:mt-px"
>
Data zatrudnienia
</label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<div class="mt-1 sm:col-span-2 sm:mt-0">
<FlatPickr
id="employment_date"
v-model="form.employmentDate"
placeholder="Wybierz datę"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentDate, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentDate }"
/>
<p
@@ -248,14 +245,14 @@
<div class="space-x-3">
<InertiaLink
href="/users"
class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
class="py-2 px-4 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 focus:ring-offset-2 shadow-sm"
>
Anuluj
</InertiaLink>
<button
type="submit"
:disabled="form.processing"
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
>
Zapisz
</button>

69
resources/js/Pages/Users/Index.vue
View File

@@ -3,73 +3,70 @@
<div class="bg-white shadow-md">
<div class="flex justify-between items-center p-4 sm:px-6">
<div>
<h2 class="text-lg leading-6 font-medium text-gray-900">
Użytkownicy w organizacji
<h2 class="text-lg font-medium leading-6 text-gray-900">
Użytkownicy
</h2>
<p class="mt-1 text-sm text-gray-500">
Lista użytkowników w organizacji.
</p>
</div>
<div>
<InertiaLink
href="users/create"
class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-center text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
>
Dodaj użytkownika
</InertiaLink>
</div>
</div>
<div class="border-t border-gray-200">
<div class="px-4 py-3">
<div class="py-3 px-4">
<div class="relative max-w-md">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<SearchIcon class="h-5 w-5 text-gray-400" />
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
<SearchIcon class="w-5 h-5 text-gray-400" />
</div>
<input
v-model.trim="search"
type="search"
class="block w-full bg-white border border-gray-300 rounded-md py-2 pl-10 pr-3 text-sm placeholder-gray-500 focus:outline-none focus:text-gray-900 focus:placeholder-gray-400 focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm mt-1"
class="block py-2 pr-3 pl-10 mt-1 w-full text-sm placeholder:text-gray-500 focus:text-gray-900 focus:placeholder:text-gray-400 bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 sm:text-sm"
placeholder="Szukaj"
>
</div>
</div>
<div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
<div class="overflow-auto xl:overflow-visible">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Imię i nazwisko
</th>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Rola
</th>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Stanowisko
</th>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Forma zatrudnienia
</th>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Data rozpoczęcia
</th>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
/>
</tr>
</thead>
@@ -79,43 +76,43 @@
:key="user.id"
:class="{ 'bg-red-50': user.deleted, 'hover:bg-blumilk-25': !user.deleted }"
>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<div class="flex">
<span class="inline-flex items-center justify-center h-10 w-10 rounded-full">
<span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
<img
class="h-10 w-10 rounded-full"
class="w-10 h-10 rounded-full"
:src="user.avatar"
>
</span>
<div class="ml-3">
<p class="text-sm font-medium break-all text-gray-900">
<p class="text-sm font-medium text-gray-900 break-all">
{{ user.name }}
</p>
<p class="text-sm break-all text-gray-500">
<p class="text-sm text-gray-500 break-all">
{{ user.email }}
</p>
</div>
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ user.role }}
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ user.position }}
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ user.employmentForm }}
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ user.employmentDate }}
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 text-right">
<td class="p-4 text-sm text-right text-gray-500 whitespace-nowrap">
<Menu
as="div"
class="relative inline-block text-left"
class="inline-block relative text-left"
>
<MenuButton class="rounded-full flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blumilk-500">
<DotsVerticalIcon class="h-5 w-5" />
<MenuButton class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100">
<DotsVerticalIcon class="w-5 h-5" />
</MenuButton>
<transition
@@ -126,7 +123,7 @@
leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95"
>
<MenuItems class="origin-top-right absolute right-0 mt-2 w-56 z-10 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
<MenuItems class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right">
<div
v-if="!user.deleted"
class="py-1"
@@ -139,7 +136,7 @@
:href="`/users/${user.id}/edit`"
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'font-medium block px-4 py-2 text-sm']"
>
<PencilIcon class="mr-2 h-5 w-5 text-blue-500" /> Edytuj
<PencilIcon class="mr-2 w-5 h-5 text-blue-500" /> Edytuj
</InertiaLink>
</MenuItem>
<MenuItem
@@ -153,7 +150,7 @@
:href="`/users/${user.id}`"
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
>
<TrashIcon class="mr-2 h-5 w-5 text-red-500" /> Usuń
<TrashIcon class="mr-2 w-5 h-5 text-red-500" /> Usuń
</InertiaLink>
</MenuItem>
</div>
@@ -172,7 +169,7 @@
:href="`/users/${user.id}/restore`"
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
>
<RefreshIcon class="mr-2 h-5 w-5 text-green-500" /> Przywróć
<RefreshIcon class="mr-2 w-5 h-5 text-green-500" /> Przywróć
</InertiaLink>
</MenuItem>
</div>
@@ -186,15 +183,15 @@
>
<td
colspan="100%"
class="text-center py-4 text-xl leading-5 text-gray-700"
class="py-4 text-xl leading-5 text-center text-gray-700"
>
Brak danych
</td>
</tr>
</tbody>
</table>
<Pagination :pagination="users.meta" />
</div>
<Pagination :pagination="users.meta" />
</div>
</div>
</template>

67
resources/js/Pages/VacationLimits.vue
View File

@@ -3,47 +3,44 @@
<div class="bg-white shadow-md">
<div class="flex justify-between items-center p-4 sm:px-6">
<div>
<h2 class="text-lg leading-6 font-medium text-gray-900">
<h2 class="text-lg font-medium leading-6 text-gray-900">
Dostępne dni urlopu dla użytkowników
</h2>
<p class="mt-1 text-sm text-gray-500">
Zarządzaj dostępnymi dniami urlopów dla użytkowników.
</p>
</div>
</div>
<div class="border-t border-gray-200">
<div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
<form @submit.prevent="submitVacationDays">
<table class="min-w-full divide-y divide-gray-200 border-b">
<form @submit.prevent="submitVacationDays">
<div class="overflow-auto xl:overflow-visible">
<table class="min-w-full border-b divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Imię i nazwisko
</th>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Forma zatrudnienia
</th>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Posiada urlop?
</th>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Pozostałe dni z poprzedniego roku
</th>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Dostępne dni w roku
</th>
@@ -55,28 +52,28 @@
:key="item.id"
class="hover:bg-blumilk-25"
>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<div class="flex">
<span class="inline-flex items-center justify-center h-10 w-10 rounded-full">
<span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
<img
class="h-10 w-10 rounded-full"
class="w-10 h-10 rounded-full"
:src="item.user.avatar"
>
</span>
<div class="ml-3">
<p class="text-sm font-medium break-all text-gray-900">
<p class="text-sm font-medium text-gray-900 break-all">
{{ item.user.name }}
</p>
<p class="text-sm break-all text-gray-500">
<p class="text-sm text-gray-500 break-all">
{{ item.user.email }}
</p>
</div>
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ item.user.employmentForm }}
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<Switch
v-model="item.hasVacation"
:class="[item.hasVacation ? 'bg-blumilk-500' : 'bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500']"
@@ -86,18 +83,18 @@
/>
</Switch>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
<div class="mt-1 sm:mt-0 sm:col-span-2 w-full max-w-lg bg-gray-50 border border-gray-300 rounded-md px-4 py-2 inline-flex items-center text-gray-500 sm:text-sm">
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<div class="inline-flex items-center py-2 px-4 mt-1 w-full max-w-lg text-gray-500 bg-gray-50 rounded-md border border-gray-300 sm:col-span-2 sm:mt-0 sm:text-sm">
{{ item.remainingLastYear }}
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
<div class="mt-1 sm:mt-0 sm:col-span-2">
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<div class="mt-1 sm:col-span-2 sm:mt-0">
<input
v-model="item.days"
type="number"
min="0"
class="block w-full shadow-sm rounded-md sm:text-sm disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none disabled:cursor-not-allowed"
class="block w-full disabled:text-slate-500 disabled:bg-slate-50 rounded-md disabled:border-slate-200 shadow-sm disabled:shadow-none disabled:cursor-not-allowed sm:text-sm"
:disabled="!item.hasVacation"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`items.${index}.days`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`items.${index}.days`] }"
>
@@ -113,23 +110,23 @@
<tr v-if="!form.items.length">
<td
colspan="100%"
class="text-center py-4 text-xl leading-5 text-gray-700"
class="py-4 text-xl leading-5 text-center text-gray-700"
>
Brak danych
</td>
</tr>
</tbody>
</table>
<div class="flex justify-end py-3 px-4">
<button
type="submit"
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
>
Zapisz
</button>
</div>
</form>
</div>
</div>
<div class="flex justify-end py-3 px-4">
<button
type="submit"
class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
>
Zapisz
</button>
</div>
</form>
</div>
</div>
</template>

127
resources/js/Pages/VacationRequest/Create.vue
View File

@@ -1,25 +1,25 @@
<template>
<InertiaHead title="Złóż wniosek urlopowy" />
<div class="grid grid-cols-1 gap-4 items-start lg:grid-cols-3 lg:gap-8">
<div class="lg:col-span-2 h-full bg-white shadow-md flex flex-col">
<div class="grid grid-cols-1 gap-4 items-start xl:grid-cols-3 xl:gap-8">
<div class="flex flex-col h-full bg-white shadow-md xl:col-span-2">
<div class="p-4 sm:px-6">
<h2 class="text-lg leading-6 font-medium text-gray-900">
<h2 class="text-lg font-medium leading-6 text-gray-900">
Złóż wniosek urlopowy
</h2>
</div>
<form
class="border-t border-gray-200 h-full px-6"
class="px-6 h-full border-t border-gray-200"
@submit.prevent="createForm"
>
<div class="h-full flex flex-col justify-around">
<div class="flex flex-col justify-around h-full">
<div>
<div
v-if="form.errors.vacationRequest"
class="rounded-md bg-red-50 p-4 mt-2"
class="p-4 mt-2 bg-red-50 rounded-md"
>
<div class="flex">
<div class="flex-shrink-0">
<XCircleIcon class="h-5 w-5 text-red-400" />
<div class="shrink-0">
<XCircleIcon class="w-5 h-5 text-red-400" />
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-red-800">
@@ -35,25 +35,25 @@
v-if="can.createOnBehalfOfEmployee"
v-model="form.user"
as="div"
class="sm:grid sm:grid-cols-3 py-4 items-center"
class="items-center py-4 sm:grid sm:grid-cols-3"
>
<ListboxLabel class="block text-sm font-medium text-gray-700">
Osoba składająca wniosek
</ListboxLabel>
<div class="mt-1 relative sm:mt-0 sm:col-span-2">
<div class="relative mt-1 sm:col-span-2 sm:mt-0">
<ListboxButton
class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.type, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }"
class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.user, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.user }"
>
<span class="flex items-center">
<img
:src="form.user.avatar"
class="flex-shrink-0 h-6 w-6 rounded-full"
class="shrink-0 w-6 h-6 rounded-full"
>
<span class="ml-3 block truncate">{{ form.user.name }}</span>
<span class="block ml-3 truncate">{{ form.user.name }}</span>
</span>
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<SelectorIcon class="h-5 w-5 text-gray-400" />
<span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
<SelectorIcon class="w-5 h-5 text-gray-400" />
</span>
</ListboxButton>
@@ -63,7 +63,7 @@
leave-to-class="opacity-0"
>
<ListboxOptions
class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
>
<ListboxOption
v-for="user in users.data"
@@ -77,7 +77,7 @@
<img
:src="user.avatar"
alt=""
class="flex-shrink-0 h-6 w-6 rounded-full"
class="shrink-0 w-6 h-6 rounded-full"
>
<span :class="[selected ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']">
{{ user.name }}
@@ -88,7 +88,7 @@
v-if="selected"
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
>
<CheckIcon class="h-5 w-5" />
<CheckIcon class="w-5 h-5" />
</span>
</li>
</ListboxOption>
@@ -104,7 +104,7 @@
</Listbox>
<div
v-else
class="sm:grid sm:grid-cols-3 py-4 items-center"
class="items-center py-4 sm:grid sm:grid-cols-3"
>
<label
for="date_from"
@@ -112,11 +112,11 @@
>
Osoba składająca wniosek
</label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<div class="mt-1 sm:col-span-2 sm:mt-0">
<div class="flex justify-start items-center">
<span class="inline-flex items-center justify-center h-10 w-10 rounded-full">
<span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
<img
class="h-10 w-10 rounded-full"
class="w-10 h-10 rounded-full"
:src="auth.user.avatar"
>
</span>
@@ -129,51 +129,46 @@
</div>
</div>
<Listbox
v-model="form.type"
v-model="form.vacationType"
as="div"
class="sm:grid sm:grid-cols-3 py-4 items-center"
class="items-center py-4 sm:grid sm:grid-cols-3"
>
<ListboxLabel class="block text-sm font-medium text-gray-700">
Rodzaj wniosku
Rodzaj urlopu
</ListboxLabel>
<div class="mt-1 relative sm:mt-0 sm:col-span-2">
<div class="relative mt-1 sm:col-span-2 sm:mt-0">
<ListboxButton
class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1"
class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.type, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }"
>
<span class="block truncate">{{ form.type.label }}</span>
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<SelectorIcon class="h-5 w-5 text-gray-400" />
<span class="block truncate">{{ form.vacationType.label }}</span>
<span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
<SelectorIcon class="w-5 h-5 text-gray-400" />
</span>
</ListboxButton>
<transition
leave-active-class="transition ease-in duration-100"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<ListboxOptions
class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
>
<ListboxOptions class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm">
<ListboxOption
v-for="type in vacationTypes"
:key="type.value"
v-for="vacationType in vacationTypes"
:key="vacationType.value"
v-slot="{ active, selected }"
as="template"
:value="type"
:value="vacationType"
>
<li
:class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
>
<li :class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
<span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
{{ type.label }}
{{ vacationType.label }}
</span>
<span
v-if="selected"
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
>
<CheckIcon class="h-5 w-5" />
<CheckIcon class="w-5 h-5" />
</span>
</li>
</ListboxOption>
@@ -187,20 +182,20 @@
</p>
</div>
</Listbox>
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
<div class="items-center py-4 sm:grid sm:grid-cols-3">
<label
for="date_from"
class="block text-sm font-medium text-gray-700 sm:mt-px"
>
Planowany urlop od
</label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<div class="mt-1 sm:col-span-2 sm:mt-0">
<FlatPickr
id="date_from"
v-model="form.from"
:config="fromInputConfig"
placeholder="Wybierz datę"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.from, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.from }"
@on-change="onFromChange"
/>
@@ -212,20 +207,20 @@
</p>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
<div class="items-center py-4 sm:grid sm:grid-cols-3">
<label
for="date_from"
class="block text-sm font-medium text-gray-700 sm:mt-px"
>
Planowany urlop do
</label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<div class="mt-1 sm:col-span-2 sm:mt-0">
<FlatPickr
id="date_to"
v-model="form.to"
:config="toInputConfig"
placeholder="Wybierz datę"
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
class="block w-full max-w-lg rounded-md shadow-sm sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.to, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.to }"
@on-change="onToChange"
/>
@@ -237,33 +232,33 @@
</p>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
<div class="items-center py-4 sm:grid sm:grid-cols-3">
<span class="block text-sm font-medium text-gray-700 sm:mt-px">Liczba dni urlopu</span>
<div
class="mt-1 sm:mt-0 sm:col-span-2 w-full max-w-lg bg-gray-50 border border-gray-300 rounded-md px-4 py-2 inline-flex items-center text-gray-500 sm:text-sm"
class="inline-flex items-center py-2 px-4 mt-1 w-full max-w-lg text-gray-500 bg-gray-50 rounded-md border border-gray-300 sm:col-span-2 sm:mt-0 sm:text-sm"
>
{{ estimatedDays.length }}
</div>
</div>
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
<div class="items-center py-4 sm:grid sm:grid-cols-3">
<label
for="comment"
class="block text-sm font-medium text-gray-700"
>
Komentarz
</label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<div class="mt-1 sm:col-span-2 sm:mt-0">
<textarea
id="comment"
v-model="form.comment"
rows="4"
class="shadow-sm focus:ring-blumilk-500 focus:border-blumilk-500 block w-full max-w-lg sm:text-sm border-gray-300 rounded-md"
class="block w-full max-w-lg rounded-md border-gray-300 focus:border-blumilk-500 focus:ring-blumilk-500 shadow-sm sm:text-sm"
/>
</div>
</div>
<div
v-if="can.skipFlow"
class="sm:grid sm:grid-cols-3 py-4 items-center"
class="items-center py-4 sm:grid sm:grid-cols-3"
>
<label
for="flowSkipped"
@@ -271,7 +266,7 @@
>
Natychmiastowo zatwierdź wniosek
</label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<div class="mt-2 sm:col-span-2 sm:mt-0">
<Switch
id="flowSkipped"
v-model="form.flowSkipped"
@@ -288,14 +283,14 @@
<div class="space-x-3">
<InertiaLink
href="/vacation/requests"
class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
class="py-2 px-4 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 focus:ring-offset-2 shadow-sm"
>
Anuluj
</InertiaLink>
<button
type="submit"
:disabled="form.processing"
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
>
Zapisz
</button>
@@ -304,9 +299,9 @@
</div>
</form>
</div>
<div class="bg-white shadow-md h-full">
<div class="h-full bg-white shadow-md">
<div class="p-4 sm:px-6">
<h2 class="text-lg leading-6 font-medium text-gray-900">
<h2 class="text-lg font-medium leading-6 text-gray-900">
<span v-if="auth.user.id !== form.user.id">
Urlop wypoczynkowy, dane dla: {{ form.user.name }}
</span>
@@ -315,7 +310,7 @@
</span>
</h2>
</div>
<div class="border-t border-gray-200 px-6 pt-8">
<div class="px-6 pt-8 border-t border-gray-200">
<VacationChart :stats="stats" />
</div>
</div>
@@ -346,7 +341,7 @@ const form = useForm({
: props.auth.user,
from: null,
to: null,
type: props.vacationTypes[0],
vacationType: props.vacationTypes[0],
comment: null,
flowSkipped: false,
})
@@ -385,7 +380,7 @@ function createForm() {
form
.transform(data => ({
...data,
type: data.type.value,
type: data.vacationType.value,
user: data.user.id,
}))
.post('/vacation/requests')
@@ -418,20 +413,20 @@ function resetForm() {
async function refreshEstimatedDays(from, to) {
if (from && to) {
const res = await axios.post('/api/calculate-vacation/days', { from, to })
const res = await axios.post('/api/vacation/calculate-days', { from, to })
estimatedDays.value = res.data
}
}
async function refreshVacationStats(user) {
const res = await axios.post('/api/calculate-vacation/stats', { user: user.id })
const res = await axios.post('/api/vacation/calculate-stats', { user: user.id })
stats.value = res.data
}
async function refreshUnavailableDays(user) {
const res = await axios.post('/api/calculate-unavailable-days', { user: user.id })
const res = await axios.post('/api/vacation/calculate-unavailable-days', { user: user.id })
const unavailableDays = res.data
fromInputConfig.disable = [

133
resources/js/Pages/VacationRequest/Index.vue
View File

@@ -2,27 +2,25 @@
<InertiaHead title="Moje wnioski urlopowe" />
<div class="bg-white shadow-md">
<div class="flex justify-between items-center p-4 sm:px-6">
<div>
<h2 class="text-lg leading-6 font-medium text-gray-900">
Moje wnioski urlopowe
</h2>
</div>
<h2 class="text-lg font-medium leading-6 text-gray-900">
Moje wnioski urlopowe
</h2>
<div>
<InertiaLink
href="/vacation/requests/create"
class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
>
Dodaj wniosek
</InertiaLink>
</div>
</div>
<div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
<nav class="relative shadow flex divide-x divide-gray-200 border-t border-gray-200">
<InertiaLink
<div class="border-t border-gray-200">
<div class="hidden relative divide-x divide-gray-200 shadow md:flex">
<button
v-for="(status, index) in statuses"
:key="index"
:data="{ status: status.value }"
:class="[status.value === filters.status ? 'text-blumilk-600 font-semibold' : 'hover:bg-blumilk-25 text-gray-700 focus:z-10', 'group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-sm font-medium text-center']"
@click="form.status = status"
>
<span>{{ status.name }}</span>
<span
@@ -31,45 +29,102 @@
>
{{ stats[status.value] }}
</span>
<span :class="[status.value === filters.status ? 'bg-blumilk-500' : 'bg-transparent', 'absolute inset-x-0 bottom-0 h-0.5']" />
</InertiaLink>
</nav>
<span
:class="[status.value === filters.status ? 'bg-blumilk-500' : 'bg-transparent', 'absolute inset-x-0 bottom-0 h-0.5']"
/>
</button>
</div>
<div class="grid grid-cols-1 gap-2 p-4 md:hidden md:grid-cols-2 md:gap-4">
<Listbox
v-model="form.status"
as="div"
>
<ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
Status
</ListboxLabel>
<div class="relative mt-1 sm:mt-0">
<ListboxButton
class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
>
<span class="flex items-center">
{{ form.status.name }}
</span>
<span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
<SelectorIcon class="w-5 h-5 text-gray-400" />
</span>
</ListboxButton>
<transition
leave-active-class="transition ease-in duration-100"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<ListboxOptions
class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
>
<ListboxOption
v-for="status in statuses"
:key="status.value"
v-slot="{ active, selected }"
as="template"
:value="status"
>
<li
:class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
>
{{ status.name }}
<span
v-if="selected"
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
>
<CheckIcon class="w-5 h-5" />
</span>
</li>
</ListboxOption>
</ListboxOptions>
</transition>
</div>
</Listbox>
</div>
</div>
<div class="overflow-auto xl:overflow-visible">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th
scope="col"
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Numer
</th>
<th
scope="col"
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Rodzaj urlopu
</th>
<th
scope="col"
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Od
</th>
<th
scope="col"
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Do
</th>
<th
scope="col"
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Dni urlopu
</th>
<th
scope="col"
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Status
</th>
@@ -80,9 +135,9 @@
<tr
v-for="request in requests.data"
:key="request.id"
class="hover:bg-blumilk-25 relative"
class="relative hover:bg-blumilk-25"
>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<InertiaLink
:href="`/vacation/requests/${request.id}`"
class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline"
@@ -90,22 +145,22 @@
{{ request.name }}
</InertiaLink>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
<td class="p-4 text-sm font-medium text-gray-500 whitespace-nowrap">
<VacationType :type="request.type" />
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ request.from }}
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ request.to }}
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ request.days.length }}
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<Status :status="request.state" />
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<InertiaLink
:href="`/vacation/requests/${request.id}`"
class="flex justify-around"
@@ -121,25 +176,29 @@
<tr v-if="! requests.data.length">
<td
colspan="100%"
class="text-center py-4 text-xl leading-5 text-gray-700"
class="py-4 text-xl leading-5 text-center text-gray-700"
>
Brak danych
</td>
</tr>
</tbody>
</table>
<Pagination :pagination="requests.meta" />
</div>
<Pagination :pagination="requests.meta" />
</div>
</template>
<script setup>
import { ChevronRightIcon } from '@heroicons/vue/solid'
import { ChevronRightIcon, SelectorIcon, CheckIcon } from '@heroicons/vue/solid'
import Status from '@/Shared/Status'
import VacationType from '@/Shared/VacationType'
import Pagination from '@/Shared/Pagination'
import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
import { reactive, watch } from 'vue'
import { debounce } from 'lodash'
import { Inertia } from '@inertiajs/inertia'
defineProps({
const props = defineProps({
requests: Object,
stats: Object,
filters: Object,
@@ -163,4 +222,16 @@ const statuses = [
value: 'failed',
},
]
const form = reactive({
status: statuses.find(status => status.value === props.filters.status) ?? statuses[0],
})
watch(form, debounce(() => {
Inertia.get('/vacation/requests/me', { status: form.status.value }, {
preserveState: true,
replace: false,
})
}, 300))
</script>

327
resources/js/Pages/VacationRequest/IndexForApprovers.vue
View File

@@ -3,213 +3,207 @@
<div class="bg-white shadow-md">
<div class="flex justify-between items-center p-4 sm:px-6">
<div>
<h2 class="text-lg leading-6 font-medium text-gray-900">
<h2 class="text-lg font-medium leading-6 text-gray-900">
Wnioski urlopowe
</h2>
</div>
<div>
<InertiaLink
href="/vacation/requests/create"
class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
>
Dodaj wniosek
</InertiaLink>
</div>
</div>
<div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
<div class="border-t border-gray-200">
<div class="px-4 grid grid-cols-2 gap-4">
<div>
<Listbox
v-model="form.user"
as="div"
class="py-4 items-center"
<div class="border-t border-gray-200">
<div class="grid grid-cols-1 gap-2 p-4 md:grid-cols-2 md:gap-4">
<Listbox
v-model="form.user"
as="div"
>
<ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
Pracownik
</ListboxLabel>
<div class="relative mt-1 sm:mt-0">
<ListboxButton
class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
>
<ListboxLabel class="block text-sm font-medium text-gray-700 mb-2">
Pracownik
</ListboxLabel>
<div class="mt-1 relative sm:mt-0">
<ListboxButton
class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300"
<span v-if="form.user === null">
Wszyscy
</span>
<span
v-else
class="flex items-center"
>
<img
:src="form.user.avatar"
class="shrink-0 w-6 h-6 rounded-full"
>
<span v-if="form.user === null">
Wszyscy
</span>
<span
v-else
class="flex items-center"
>
<img
:src="form.user.avatar"
class="flex-shrink-0 h-6 w-6 rounded-full"
>
<span class="ml-3 block truncate">{{ form.user.name }}</span>
</span>
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<SelectorIcon class="h-5 w-5 text-gray-400" />
</span>
</ListboxButton>
<span class="block ml-3 truncate">{{ form.user.name }}</span>
</span>
<span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
<SelectorIcon class="w-5 h-5 text-gray-400" />
</span>
</ListboxButton>
<transition
leave-active-class="transition ease-in duration-100"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<ListboxOptions
class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
>
<ListboxOption
v-slot="{ active }"
as="template"
:value="null"
>
<li
:class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
>
<div class="flex items-center">
Wszyscy pracownicy
</div>
<span
v-if="form.user === null"
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
>
<CheckIcon class="h-5 w-5" />
</span>
</li>
</ListboxOption>
<ListboxOption
v-for="user in users.data"
:key="user.id"
v-slot="{ active }"
as="template"
:value="user"
>
<li
:class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
>
<div class="flex items-center">
<img
:src="user.avatar"
class="flex-shrink-0 h-6 w-6 rounded-full"
>
<span
:class="[form.user?.id === user.id ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']"
>
{{ user.name }}
</span>
</div>
<span
v-if="form.user?.id === user.id"
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
>
<CheckIcon class="h-5 w-5" />
</span>
</li>
</ListboxOption>
</ListboxOptions>
</transition>
</div>
</Listbox>
</div>
<div>
<Listbox
v-model="form.status"
as="div"
class="py-4 items-center"
<transition
leave-active-class="transition ease-in duration-100"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<ListboxLabel class="block text-sm font-medium text-gray-700 mb-2">
Status
</ListboxLabel>
<div class="mt-1 relative sm:mt-0">
<ListboxButton
class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300"
<ListboxOptions
class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
>
<ListboxOption
v-slot="{ active }"
as="template"
:value="null"
>
<span class="flex items-center">
{{ form.status.name }}
</span>
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<SelectorIcon class="h-5 w-5 text-gray-400" />
</span>
</ListboxButton>
<transition
leave-active-class="transition ease-in duration-100"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<ListboxOptions
class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
<li
:class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
>
<ListboxOption
v-for="status in statuses"
:key="status.value"
v-slot="{ active, selected }"
as="template"
:value="status"
>
<li
:class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
>
{{ status.name }}
<div class="flex items-center">
Wszyscy
</div>
<span
v-if="selected"
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
>
<CheckIcon class="h-5 w-5" />
</span>
</li>
</ListboxOption>
</ListboxOptions>
</transition>
</div>
</Listbox>
<span
v-if="form.user === null"
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
>
<CheckIcon class="w-5 h-5" />
</span>
</li>
</ListboxOption>
<ListboxOption
v-for="user in users.data"
:key="user.id"
v-slot="{ active }"
as="template"
:value="user"
>
<li
:class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
>
<div class="flex items-center">
<img
:src="user.avatar"
class="shrink-0 w-6 h-6 rounded-full"
>
<span
:class="[form.user?.id === user.id ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']"
>
{{ user.name }}
</span>
</div>
<span
v-if="form.user?.id === user.id"
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
>
<CheckIcon class="w-5 h-5" />
</span>
</li>
</ListboxOption>
</ListboxOptions>
</transition>
</div>
</div>
</Listbox>
<Listbox
v-model="form.status"
as="div"
>
<ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
Status
</ListboxLabel>
<div class="relative mt-1 sm:mt-0">
<ListboxButton
class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
>
<span class="flex items-center">
{{ form.status.name }}
</span>
<span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
<SelectorIcon class="w-5 h-5 text-gray-400" />
</span>
</ListboxButton>
<transition
leave-active-class="transition ease-in duration-100"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<ListboxOptions
class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
>
<ListboxOption
v-for="status in statuses"
:key="status.value"
v-slot="{ active, selected }"
as="template"
:value="status"
>
<li
:class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
>
{{ status.name }}
<span
v-if="selected"
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
>
<CheckIcon class="w-5 h-5" />
</span>
</li>
</ListboxOption>
</ListboxOptions>
</transition>
</div>
</Listbox>
</div>
</div>
<div class="overflow-auto xl:overflow-visible">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th
scope="col"
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Numer
</th>
<th
scope="col"
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Pracownik
</th>
<th
scope="col"
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Rodzaj urlopu
</th>
<th
scope="col"
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Od
</th>
<th
scope="col"
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Do
</th>
<th
scope="col"
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Dni urlopu
</th>
<th
scope="col"
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Status
</th>
@@ -220,9 +214,9 @@
<tr
v-for="request in requests.data"
:key="request.id"
class="hover:bg-blumilk-25 relative"
class="relative hover:bg-blumilk-25"
>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<InertiaLink
:href="`/vacation/requests/${request.id}`"
class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline"
@@ -230,12 +224,11 @@
{{ request.name }}
</InertiaLink>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
<td class="p-4 text-sm font-medium text-gray-500 whitespace-nowrap">
<div class="flex">
<img
class="h-10 w-10 rounded-full"
:src="request.user.avatar"
>
<div class="w-10 h-10 rounded-full">
<img :src="request.user.avatar">
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">
{{ request.user.name }}
@@ -246,22 +239,22 @@
</div>
</div>
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
<td class="p-4 text-sm font-medium text-gray-500 whitespace-nowrap">
<VacationType :type="request.type" />
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ request.from }}
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ request.to }}
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
{{ request.days.length }}
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<Status :status="request.state" />
</td>
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="p-4 text-sm text-gray-500 whitespace-nowrap">
<InertiaLink
:href="`/vacation/requests/${request.id}`"
class="flex justify-around"
@@ -277,15 +270,15 @@
<tr v-if="! requests.data.length">
<td
colspan="100%"
class="text-center py-4 text-xl leading-5 text-gray-700"
class="py-4 text-xl leading-5 text-center text-gray-700"
>
Brak danych
</td>
</tr>
</tbody>
</table>
<Pagination :pagination="requests.meta" />
</div>
<Pagination :pagination="requests.meta" />
</div>
</template>

92
resources/js/Pages/VacationRequest/Show.vue
View File

@@ -1,31 +1,31 @@
<template>
<InertiaHead :title="`Wniosek ${request.name}`" />
<div class="grid grid-cols-1 gap-6 xl:grid-flow-col-dense xl:grid-cols-3">
<div class="space-y-6 xl:col-start-1 xl:col-span-2">
<div class="grid grid-cols-1 gap-6 xl:grid-cols-3 xl:grid-flow-col-dense">
<div class="space-y-6 xl:col-span-2 xl:col-start-1">
<div class="bg-white shadow-md">
<div class="px-4 py-5 sm:px-6">
<h3 class="text-lg leading-6 font-medium text-gray-900">
<div class="py-5 px-4 sm:px-6">
<h3 class="text-lg font-medium leading-6 text-gray-900">
Informacje na temat wniosku
</h3>
</div>
<div class="border-t border-gray-200 px-4 py-5 sm:p-0">
<div class="py-5 px-4 border-t border-gray-200 sm:p-0">
<dl class="sm:divide-y sm:divide-gray-200">
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
<dt class="text-sm font-medium text-gray-500">
Nr wniosku
</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
{{ request.name }}
</dd>
</div>
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500 flex items-center">
<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
<dt class="flex items-center text-sm font-medium text-gray-500">
Pracownik
</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<div class="flex">
<img
class="h-10 w-10 rounded-full"
class="w-10 h-10 rounded-full"
:src="request.user.avatar"
>
<div class="ml-3">
@@ -39,27 +39,27 @@
</div>
</dd>
</div>
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
<dt class="text-sm font-medium text-gray-500">
Rodzaj urlopu
</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<VacationType :type="request.type" />
</dd>
</div>
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
<dt class="text-sm font-medium text-gray-500">
Obecny status
</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<Status :status="request.state" />
</dd>
</div>
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
<dt class="text-sm font-medium text-gray-500">
Data
</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<template v-if="request.days.length > 1">
{{ request.from }} - {{ request.to }}
</template>
@@ -71,35 +71,35 @@
</span>
</dd>
</div>
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
<dt class="text-sm font-medium text-gray-500">
Komentarz
</dt>
<dd
v-if="request.comment != null"
class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"
class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0"
>
{{ request.comment }}
</dd>
<dd
v-else
class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"
class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0"
>
-
</dd>
</div>
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500 flex items-center">
<div class="py-5 px-4 bg-white sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="flex items-center text-sm font-medium text-gray-500">
Załączniki
</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<ul class="border border-gray-200 rounded-md divide-y divide-gray-200">
<li class="pl-3 pr-4 py-3 flex items-center justify-between text-sm">
<div class="w-0 flex-1 flex items-center">
<PaperClipIcon class="flex-shrink-0 h-5 w-5 text-gray-400" />
<span class="ml-2 flex-1 w-0 truncate"> wniosek_urlopowy.pdf </span>
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<ul class="rounded-md border border-gray-200 divide-y divide-gray-200">
<li class="flex justify-between items-center py-3 pr-4 pl-3 text-sm">
<div class="flex flex-1 items-center w-0">
<PaperClipIcon class="shrink-0 w-5 h-5 text-gray-400" />
<span class="flex-1 ml-2 w-0 truncate"> wniosek_urlopowy.pdf </span>
</div>
<div class="ml-4 flex-shrink-0">
<div class="shrink-0 ml-4">
<a
:href="`/vacation/requests/${request.id}/download`"
target="_blank"
@@ -119,8 +119,8 @@
v-if="can.acceptAsTechnical"
class="bg-white shadow"
>
<div class="px-4 py-5 sm:p-6">
<h3 class="text-lg leading-6 font-medium text-gray-900">
<div class="py-5 px-4 sm:p-6">
<h3 class="text-lg font-medium leading-6 text-gray-900">
Zaakceptuj wniosek jako osoba techniczna
</h3>
<div class="mt-2 max-w-xl text-sm text-gray-500">
@@ -135,7 +135,7 @@
method="post"
as="button"
preserve-scroll
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
>
Zaakceptuj wniosek
</InertiaLink>
@@ -146,8 +146,8 @@
v-if="can.acceptAsAdministrative"
class="bg-white shadow"
>
<div class="px-4 py-5 sm:p-6">
<h3 class="text-lg leading-6 font-medium text-gray-900">
<div class="py-5 px-4 sm:p-6">
<h3 class="text-lg font-medium leading-6 text-gray-900">
Zaakceptuj wniosek jako osoba administracyjna
</h3>
<div class="mt-2 max-w-xl text-sm text-gray-500">
@@ -161,7 +161,7 @@
method="post"
as="button"
preserve-scroll
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
>
Zaakceptuj wniosek
</InertiaLink>
@@ -172,8 +172,8 @@
v-if="can.reject"
class="bg-white shadow"
>
<div class="px-4 py-5 sm:p-6">
<h3 class="text-lg leading-6 font-medium text-gray-900">
<div class="py-5 px-4 sm:p-6">
<h3 class="text-lg font-medium leading-6 text-gray-900">
Odrzuć wniosek
</h3>
<div class="mt-2 max-w-xl text-sm text-gray-500">
@@ -187,7 +187,7 @@
method="post"
as="button"
preserve-scroll
class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
class="inline-flex justify-center items-center py-2 px-4 font-medium text-red-700 bg-red-100 hover:bg-red-200 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:text-sm"
>
Odrzuć wniosek
</InertiaLink>
@@ -196,10 +196,10 @@
</div>
<div
v-if="can.cancel"
class="bg-white shadow border border-red-500"
class="bg-white border border-red-500 shadow"
>
<div class="px-4 py-5 sm:p-6">
<h3 class="text-lg leading-6 font-medium text-gray-900">
<div class="py-5 px-4 sm:p-6">
<h3 class="text-lg font-medium leading-6 text-gray-900">
Anuluj wniosek
</h3>
<div class="mt-2 max-w-xl text-sm text-gray-500">
@@ -213,7 +213,7 @@
method="post"
as="button"
preserve-scroll
class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
class="inline-flex justify-center items-center py-2 px-4 font-medium text-red-700 bg-red-100 hover:bg-red-200 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:text-sm"
>
Anuluj wniosek
</InertiaLink>
@@ -221,14 +221,14 @@
</div>
</div>
</div>
<div class="xl:col-start-3 xl:col-span-1 space-y-6">
<div class="space-y-6 xl:col-span-1 xl:col-start-3">
<div class="bg-white shadow-md">
<div class="px-4 py-5 sm:px-6">
<h3 class="text-lg leading-6 font-medium text-gray-900">
<div class="py-5 px-4 sm:px-6">
<h3 class="text-lg font-medium leading-6 text-gray-900">
Historia wniosku
</h3>
</div>
<div class="border-t border-gray-200 px-4 py-4">
<div class="p-4 border-t border-gray-200">
<ul>
<li
v-for="(activity, index) in activities.data"