Merge branch 'main' into #43-vacation-summary-for-employee
# Conflicts: # app/Infrastructure/Http/Controllers/HolidayController.php # app/Infrastructure/Http/Controllers/VacationLimitController.php # app/Infrastructure/Http/Controllers/VacationRequestController.php # composer.lock # resources/js/Pages/Holidays/Index.vue # resources/js/Pages/VacationRequest/Create.vue
This commit is contained in:
Adrian Hopek
@@ -7,7 +7,7 @@
|
||||
Kalendarz urlopów
|
||||
</h2>
|
||||
</div>
|
||||
<div>
|
||||
<div v-if="can.generateTimesheet">
|
||||
<a
|
||||
:href="`/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"
|
||||
@@ -164,6 +164,10 @@ export default {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
can: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const {getMonths, findMonth} = useMonthInfo()
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
Lista dni wolnych od pracy w danym roku
|
||||
</p>
|
||||
</div>
|
||||
<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"
|
||||
@@ -19,120 +19,123 @@
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-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"
|
||||
>
|
||||
Nazwa
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
Data
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
Dzień tygodnia
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
|
||||
/>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-100">
|
||||
<tr
|
||||
v-for="holiday in holidays.data"
|
||||
:key="holiday.id"
|
||||
class="hover:bg-blumilk-25"
|
||||
>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 font-semibold capitalize">
|
||||
{{ holiday.name }}
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{{ holiday.displayDate }}
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{{ holiday.dayOfWeek }}
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 text-right">
|
||||
<Menu
|
||||
as="div"
|
||||
class="relative inline-block text-left"
|
||||
<div class="border-t border-gray-200">
|
||||
<div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-100">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
<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"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</MenuButton>
|
||||
|
||||
<transition
|
||||
enter-active-class="transition ease-out duration-100"
|
||||
enter-from-class="transform opacity-0 scale-95"
|
||||
enter-to-class="transform opacity-100 scale-100"
|
||||
leave-active-class="transition ease-in duration-75"
|
||||
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">
|
||||
<div class="py-1">
|
||||
<MenuItem
|
||||
v-slot="{ active }"
|
||||
class="flex"
|
||||
>
|
||||
<InertiaLink
|
||||
: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"
|
||||
aria-hidden="true"
|
||||
/> Edytuj
|
||||
</InertiaLink>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
v-slot="{ active }"
|
||||
class="flex"
|
||||
>
|
||||
<InertiaLink
|
||||
as="button"
|
||||
method="delete"
|
||||
:preserve-scroll="true"
|
||||
: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"
|
||||
aria-hidden="true"
|
||||
/> Usuń
|
||||
</InertiaLink>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</MenuItems>
|
||||
</transition>
|
||||
</Menu>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
v-if="!holidays.data.length"
|
||||
>
|
||||
<td
|
||||
colspan="100%"
|
||||
class="text-center py-4 text-xl leading-5 text-gray-700"
|
||||
Nazwa
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
Data
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
Dzień tygodnia
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
|
||||
/>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-100">
|
||||
<tr
|
||||
v-for="holiday in holidays.data"
|
||||
:key="holiday.id"
|
||||
class="hover:bg-blumilk-25"
|
||||
>
|
||||
Brak danych
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 font-semibold capitalize">
|
||||
{{ holiday.name }}
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{{ holiday.displayDate }}
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{{ holiday.dayOfWeek }}
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 text-right">
|
||||
<Menu
|
||||
v-if="can.manageHolidays"
|
||||
as="div"
|
||||
class="relative inline-block 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"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</MenuButton>
|
||||
|
||||
<transition
|
||||
enter-active-class="transition ease-out duration-100"
|
||||
enter-from-class="transform opacity-0 scale-95"
|
||||
enter-to-class="transform opacity-100 scale-100"
|
||||
leave-active-class="transition ease-in duration-75"
|
||||
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">
|
||||
<div class="py-1">
|
||||
<MenuItem
|
||||
v-slot="{ active }"
|
||||
class="flex"
|
||||
>
|
||||
<InertiaLink
|
||||
: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"
|
||||
aria-hidden="true"
|
||||
/> Edytuj
|
||||
</InertiaLink>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
v-slot="{ active }"
|
||||
class="flex"
|
||||
>
|
||||
<InertiaLink
|
||||
as="button"
|
||||
method="delete"
|
||||
:preserve-scroll="true"
|
||||
: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"
|
||||
aria-hidden="true"
|
||||
/> Usuń
|
||||
</InertiaLink>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</MenuItems>
|
||||
</transition>
|
||||
</Menu>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
v-if="!holidays.data.length"
|
||||
>
|
||||
<td
|
||||
colspan="100%"
|
||||
class="text-center py-4 text-xl leading-5 text-gray-700"
|
||||
>
|
||||
Brak danych
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -157,6 +160,10 @@ export default {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
can: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
return {}
|
||||
|
||||
@@ -1,287 +1,291 @@
|
||||
<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="grid grid-cols-1 lg:col-span-2 bg-white shadow-md">
|
||||
<div class="lg:col-span-2 h-full bg-white shadow-md flex flex-col">
|
||||
<div class="p-4 sm:px-6">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
Złóż wniosek urlopowy
|
||||
</h2>
|
||||
</div>
|
||||
<form
|
||||
class="border-t border-gray-200 px-6"
|
||||
class="border-t border-gray-200 h-full px-6"
|
||||
@submit.prevent="createForm"
|
||||
>
|
||||
<div
|
||||
v-if="form.errors.vacationRequest"
|
||||
class="rounded-md bg-red-50 p-4 mt-2"
|
||||
>
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<XCircleIcon class="h-5 w-5 text-red-400" />
|
||||
<div class="h-full flex flex-col justify-between">
|
||||
<div>
|
||||
<div
|
||||
v-if="form.errors.vacationRequest"
|
||||
class="rounded-md bg-red-50 p-4 mt-2"
|
||||
>
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<XCircleIcon class="h-5 w-5 text-red-400" />
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-800">
|
||||
Wniosek nie mógł zostać utworzony
|
||||
</h3>
|
||||
<div class="mt-2 text-sm text-red-700">
|
||||
<span>{{ form.errors.vacationRequest }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-800">
|
||||
Wniosek nie mógł zostać utworzony
|
||||
</h3>
|
||||
<div class="mt-2 text-sm text-red-700">
|
||||
<span>{{ form.errors.vacationRequest }}</span>
|
||||
<Listbox
|
||||
v-if="can.createOnBehalfOfEmployee"
|
||||
v-model="form.user"
|
||||
as="div"
|
||||
class="sm:grid sm:grid-cols-3 py-4 items-center"
|
||||
>
|
||||
<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">
|
||||
<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 }"
|
||||
>
|
||||
<span 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>
|
||||
|
||||
<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-for="user in users.data"
|
||||
:key="user.id"
|
||||
v-slot="{ active, selected }"
|
||||
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"
|
||||
alt=""
|
||||
class="flex-shrink-0 h-6 w-6 rounded-full"
|
||||
>
|
||||
<span :class="[selected ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']">
|
||||
{{ user.name }}
|
||||
</span>
|
||||
</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>
|
||||
<p
|
||||
v-if="form.errors.type"
|
||||
class="mt-2 text-sm text-red-600"
|
||||
>
|
||||
{{ form.errors.type }}
|
||||
</p>
|
||||
</div>
|
||||
</Listbox>
|
||||
<Listbox
|
||||
v-model="form.type"
|
||||
as="div"
|
||||
class="sm:grid sm:grid-cols-3 py-4 items-center"
|
||||
>
|
||||
<ListboxLabel class="block text-sm font-medium text-gray-700">
|
||||
Rodzaj wniosku
|
||||
</ListboxLabel>
|
||||
<div class="mt-1 relative sm:mt-0 sm:col-span-2">
|
||||
<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 }"
|
||||
>
|
||||
<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>
|
||||
</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-for="type in vacationTypes"
|
||||
:key="type.value"
|
||||
v-slot="{ active, selected }"
|
||||
as="template"
|
||||
:value="type"
|
||||
>
|
||||
<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 }}
|
||||
</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" />
|
||||
</span>
|
||||
</li>
|
||||
</ListboxOption>
|
||||
</ListboxOptions>
|
||||
</transition>
|
||||
<p
|
||||
v-if="form.errors.type"
|
||||
class="mt-2 text-sm text-red-600"
|
||||
>
|
||||
{{ form.errors.type }}
|
||||
</p>
|
||||
</div>
|
||||
</Listbox>
|
||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||
<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">
|
||||
<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="{ '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"
|
||||
/>
|
||||
<p
|
||||
v-if="form.errors.from"
|
||||
class="mt-2 text-sm text-red-600"
|
||||
>
|
||||
{{ form.errors.from }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||
<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">
|
||||
<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="{ '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"
|
||||
/>
|
||||
<p
|
||||
v-if="form.errors.to"
|
||||
class="mt-2 text-sm text-red-600"
|
||||
>
|
||||
{{ form.errors.to }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||
<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"
|
||||
>
|
||||
{{ estimatedDays.length }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||
<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">
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="can.skipFlow"
|
||||
class="sm:grid sm:grid-cols-3 py-4 items-center"
|
||||
>
|
||||
<label
|
||||
for="flowSkipped"
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
Natychmiastowo zatwierdź wniosek
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<Switch
|
||||
id="flowSkipped"
|
||||
v-model="form.flowSkipped"
|
||||
:class="[form.flowSkipped ? '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']"
|
||||
>
|
||||
<span
|
||||
:class="[form.flowSkipped ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']"
|
||||
/>
|
||||
</Switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Listbox
|
||||
v-model="form.user"
|
||||
as="div"
|
||||
class="sm:grid sm:grid-cols-3 py-4 items-center"
|
||||
>
|
||||
<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">
|
||||
<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.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"
|
||||
>
|
||||
<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>
|
||||
|
||||
<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"
|
||||
<div class="flex justify-end py-3">
|
||||
<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"
|
||||
>
|
||||
<ListboxOption
|
||||
v-for="user in users.data"
|
||||
:key="user.id"
|
||||
v-slot="{ active, selected }"
|
||||
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"
|
||||
alt=""
|
||||
class="flex-shrink-0 h-6 w-6 rounded-full"
|
||||
>
|
||||
<span :class="[selected ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']">
|
||||
{{ user.name }}
|
||||
</span>
|
||||
</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>
|
||||
<p
|
||||
v-if="form.errors.type"
|
||||
class="mt-2 text-sm text-red-600"
|
||||
>
|
||||
{{ form.errors.type }}
|
||||
</p>
|
||||
</div>
|
||||
</Listbox>
|
||||
<Listbox
|
||||
v-model="form.type"
|
||||
as="div"
|
||||
class="sm:grid sm:grid-cols-3 py-4 items-center"
|
||||
>
|
||||
<ListboxLabel class="block text-sm font-medium text-gray-700">
|
||||
Rodzaj wniosku
|
||||
</ListboxLabel>
|
||||
<div class="mt-1 relative sm:mt-0 sm:col-span-2">
|
||||
<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 }"
|
||||
>
|
||||
<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>
|
||||
</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"
|
||||
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"
|
||||
>
|
||||
<ListboxOption
|
||||
v-for="type in vacationTypes"
|
||||
:key="type.value"
|
||||
v-slot="{ active, selected }"
|
||||
as="template"
|
||||
:value="type"
|
||||
>
|
||||
<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 }}
|
||||
</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" />
|
||||
</span>
|
||||
</li>
|
||||
</ListboxOption>
|
||||
</ListboxOptions>
|
||||
</transition>
|
||||
<p
|
||||
v-if="form.errors.type"
|
||||
class="mt-2 text-sm text-red-600"
|
||||
>
|
||||
{{ form.errors.type }}
|
||||
</p>
|
||||
</div>
|
||||
</Listbox>
|
||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||
<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">
|
||||
<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="{ '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"
|
||||
/>
|
||||
<p
|
||||
v-if="form.errors.from"
|
||||
class="mt-2 text-sm text-red-600"
|
||||
>
|
||||
{{ form.errors.from }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||
<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">
|
||||
<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="{ '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"
|
||||
/>
|
||||
<p
|
||||
v-if="form.errors.to"
|
||||
class="mt-2 text-sm text-red-600"
|
||||
>
|
||||
{{ form.errors.to }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||
<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"
|
||||
>
|
||||
{{ estimatedDays.length }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||
<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">
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||
<label
|
||||
for="flowSkipped"
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
Natychmiastowo zatwierdź wniosek
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<Switch
|
||||
id="flowSkipped"
|
||||
v-model="form.flowSkipped"
|
||||
:class="[form.flowSkipped ? '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']"
|
||||
>
|
||||
<span
|
||||
:class="[form.flowSkipped ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']"
|
||||
/>
|
||||
</Switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end py-3">
|
||||
<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"
|
||||
>
|
||||
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"
|
||||
>
|
||||
Zapisz
|
||||
</button>
|
||||
Zapisz
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 bg-white shadow-md h-full">
|
||||
<div>
|
||||
<div class="p-4 sm:px-6">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
Urlop wypoczynkowy
|
||||
</h2>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 px-6 pt-8">
|
||||
<VacationChart :stats="stats" />
|
||||
</div>
|
||||
<div class="bg-white shadow-md h-full">
|
||||
<div class="p-4 sm:px-6">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
Urlop wypoczynkowy
|
||||
</h2>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 px-6 pt-8">
|
||||
<VacationChart :stats="stats" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -329,10 +333,16 @@ export default {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
can: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const form = useForm({
|
||||
user: props.users.data.find(user => user.id === props.auth.user.id),
|
||||
user: props.can.createOnBehalfOfEmployee
|
||||
? props.users.data.find(user => user.id === props.auth.user.id)
|
||||
: props.auth.user,
|
||||
from: null,
|
||||
to: null,
|
||||
type: props.vacationTypes[0],
|
||||
@@ -403,12 +413,6 @@ export default {
|
||||
.then(res => this.estimatedDays = res.data)
|
||||
}
|
||||
},
|
||||
updateVacationStats(user) {
|
||||
console.log(user)
|
||||
axios.post('/api/get-vacations-stats')
|
||||
.then(res => this.stats = res.data)
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -110,7 +110,10 @@
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white shadow">
|
||||
<div
|
||||
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">
|
||||
Zaakceptuj wniosek jako osoba techniczna
|
||||
@@ -134,7 +137,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white shadow">
|
||||
<div
|
||||
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">
|
||||
Zaakceptuj wniosek jako osoba administracyjna
|
||||
@@ -157,7 +163,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white shadow">
|
||||
<div
|
||||
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">
|
||||
Odrzuć wniosek
|
||||
@@ -180,7 +189,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white shadow border border-red-500">
|
||||
<div
|
||||
v-if="can.cancel"
|
||||
class="bg-white shadow border border-red-500"
|
||||
>
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||
Anuluj wniosek
|
||||
@@ -246,6 +258,10 @@ export default {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
can: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
activities: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
|
||||
@@ -213,12 +213,12 @@
|
||||
>
|
||||
<img
|
||||
class="h-8 w-8 rounded-full"
|
||||
:src="user.avatar"
|
||||
:src="auth.user.avatar"
|
||||
alt="Avatar"
|
||||
>
|
||||
<span class="hidden ml-3 text-gray-700 text-sm font-medium lg:block">
|
||||
<span class="sr-only">Open user menu for </span>
|
||||
{{ user.name }}
|
||||
{{ auth.user.name }}
|
||||
</span>
|
||||
<ChevronDownIcon
|
||||
class="hidden flex-shrink-0 ml-1 h-5 w-5 text-gray-400 lg:block"
|
||||
@@ -324,23 +324,24 @@ export default {
|
||||
setup() {
|
||||
const sidebarOpen = ref(false)
|
||||
|
||||
const user = computed(() => usePage().props.value.auth.user)
|
||||
const auth = computed(() => usePage().props.value.auth)
|
||||
const years = computed(() => usePage().props.value.years)
|
||||
|
||||
const navigation = [
|
||||
{name: 'Wnioski urlopowe', href: '/vacation-requests', icon: CollectionIcon},
|
||||
{name: 'Kalendarz urlopów', href: '/vacation-calendar', icon: CalendarIcon},
|
||||
{name: 'Dni wolne', href: '/holidays', icon: StarIcon},
|
||||
{name: 'Limity urlopów', href: '/vacation-limits', icon: SunIcon},
|
||||
{name: 'Użytkownicy', href: '/users', icon: UserGroupIcon},
|
||||
]
|
||||
const navigation = computed(() =>
|
||||
[
|
||||
{name: 'Wnioski urlopowe', href: '/vacation-requests', icon: CollectionIcon, can: true},
|
||||
{name: 'Kalendarz urlopów', href: '/vacation-calendar', icon: CalendarIcon, can: true},
|
||||
{name: 'Dni wolne', href: '/holidays', icon: StarIcon, can: true},
|
||||
{name: 'Limity urlopów', href: '/vacation-limits', icon: SunIcon, can: auth.value.can.manageVacationLimits},
|
||||
{name: 'Użytkownicy', href: '/users', icon: UserGroupIcon, can: auth.value.can.manageUsers},
|
||||
].filter(item => item.can))
|
||||
|
||||
const userNavigation = [
|
||||
{name: 'Wyloguj się', href: '/logout', method: 'post', as: 'button'},
|
||||
]
|
||||
|
||||
return {
|
||||
user,
|
||||
auth,
|
||||
years,
|
||||
navigation,
|
||||
userNavigation,
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<v-chart
|
||||
style="height: 600px;"
|
||||
:autoresize="true"
|
||||
:option="option"
|
||||
/>
|
||||
</template>
|
||||
@@ -60,10 +61,20 @@ export default {
|
||||
{
|
||||
name: 'Urlop wypoczynkowy',
|
||||
type: 'pie',
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2,
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
position: 'inner',
|
||||
formatter: param => param.value !== 0 ? param.value : '' ,
|
||||
fontWeight: 'bold',
|
||||
fontSize: 16,
|
||||
color: '#FFFFFF',
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
data: [
|
||||
@@ -72,23 +83,6 @@ export default {
|
||||
{ value: props.stats.remaining, name: 'Pozostałe' },
|
||||
],
|
||||
radius: ['30%', '70%'],
|
||||
itemStyle : {
|
||||
normal: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2,
|
||||
label: {
|
||||
position: 'inner',
|
||||
formatter: param => param.value !== 0 ? param.value : '' ,
|
||||
fontWeight: 'bold',
|
||||
fontSize: 16,
|
||||
color: '#FFFFFF',
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}))
|
||||
|
||||
Reference in New Issue
Block a user