#99 - ui changes
This commit is contained in:
Adrian Hopek
parent
08421b8a69
commit
fe1d86789d
@ -103,9 +103,9 @@ class User extends Authenticatable
|
||||
}
|
||||
|
||||
return $query
|
||||
->where("first_name", "ILIKE", $text)
|
||||
->orWhere("last_name", "ILIKE", $text)
|
||||
->orWhere("email", "ILIKE", $text);
|
||||
->where("first_name", "ILIKE", "%{$text}%")
|
||||
->orWhere("last_name", "ILIKE", "%{$text}%")
|
||||
->orWhere("email", "ILIKE", "%{$text}%");
|
||||
}
|
||||
|
||||
public function scopeWithVacationLimitIn(Builder $query, YearPeriod $yearPeriod): Builder
|
||||
|
||||
@ -113,7 +113,7 @@ class VacationRequestController extends Controller
|
||||
"users" => UserResource::collection($users),
|
||||
"filters" => [
|
||||
"status" => $status,
|
||||
"user" => $user,
|
||||
"user" => (int)$user,
|
||||
],
|
||||
]);
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
18
public/img/logo-white.svg
Normal file
18
public/img/logo-white.svg
Normal file
@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="247.56mm" height="84.867mm" version="1.1" viewBox="0 0 247.56 84.867" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="translate(-24.251 -29.695)">
|
||||
<text transform="matrix(.28744 0 0 .28614 -24.649 -29.82)" fill="#ffffff" font-family="sans-serif" font-size="133.33px" style="line-height:1.25;shape-inside:url(#rect1079);white-space:pre" xml:space="preserve"><tspan x="485.27344" y="426.98435"><tspan font-family="'Noto Sans'" font-weight="bold">blumilk</tspan></tspan></text>
|
||||
<rect x="49.391" y="55.396" width="36.399" height="31.455" fill="none" stroke-width=".26458"/>
|
||||
<rect x="78.629" y="48.576" width="11.849" height="22.76" fill="none" stroke-width=".26458"/>
|
||||
<rect x="34.217" y="41.501" width="52.169" height="17.731" fill="none" stroke-width=".28432"/>
|
||||
<rect x="29.563" y="50.338" width="21.5" height="59.423" fill="none" stroke-width=".43534"/>
|
||||
<rect x="51.948" y="83.526" width="37.677" height="24.976" fill="none" stroke-width=".25616"/>
|
||||
<path d="m30.841 107.97h18.175v-53.797l-8.9598-9.4978-9.2153 9.5215zm21.47 6.5913h-24.765c-1.8203 0-3.2956-1.476-3.2956-3.2956v-58.402c0-0.85478 0.33302-1.6771 0.92745-2.2909l12.542-12.959c0.62618-0.64734 1.4817-0.99236 2.389-1.004 0.89994 6e-3 1.7582 0.37959 2.3756 1.034l12.224 12.959c0.57644 0.61101 0.89747 1.4199 0.89747 2.2613v58.402c0 1.8196-1.475 3.2956-3.2953 3.2956" fill="#fff"/>
|
||||
<path d="m91.783 114.55h-39.526c-1.8196 0-3.2953-1.4746-3.2953-3.2942v-56.774c0-1.8196 1.4757-3.2956 3.2953-3.2956 1.8203 0 3.2957 1.476 3.2957 3.2956v53.479h32.935v-19.798l-8.3273-8.4141c-0.62195-0.629-0.96555-1.4803-0.95215-2.365 0.012-0.88335 0.37924-1.7254 1.0192-2.3357l8.2603-7.8835v-14.892c0-1.8203 1.4757-3.2956 3.2957-3.2956 1.8203 0 3.2949 1.4753 3.2949 3.2956v16.302c0 0.90064-0.36759 1.7625-1.0195 2.3837l-6.8534 6.5405 6.9201 6.9914c0.61066 0.61736 0.95285 1.4503 0.95285 2.3181v24.447c0 1.8196-1.4746 3.2942-3.2949 3.2942" fill="#fff"/>
|
||||
<path d="m91.785 55.564c-0.95638 0-1.9053-0.41381-2.5573-1.2146l-9.615-11.809-38.795 0.049h-0.0042c-1.8186 0-3.2921-1.4714-3.2953-3.2907-0.0025-1.8189 1.4714-3.2956 3.2911-3.2985l40.363-0.0529h0.0056c0.98883 0 1.9283 0.44661 2.5538 1.2153l10.606 13.025c1.1497 1.4125 0.93768 3.4876-0.47308 4.6369-0.61207 0.49777-1.349 0.73978-2.0793 0.73978" fill="#fff"/>
|
||||
<path d="m81.455 42.589h-40.642c-1.8203 0-3.2953-1.475-3.2953-3.2949v-6.3034c0-1.82 1.475-3.2956 3.2953-3.2956h40.642c1.8196 0 3.2942 1.4757 3.2942 3.2956v6.3034c0 1.82-1.4746 3.2949-3.2942 3.2949" fill="#fff"/>
|
||||
<path d="m55.657 80.088c0-27.744-3.53e-4 -27.811-0.24152-28.455-0.24946-0.66676-0.39359-0.82818-6.5083-7.2892l-1.6452-1.7384h32.308l8.8511 10.869v13.63l-3.9188 3.7465c-2.1553 2.0606-4.1251 3.9568-4.3772 4.2139-0.66375 0.67676-0.94174 1.3731-0.94517 2.3675-0.0049 1.4251 0.0387 1.4818 4.8994 6.3692l4.3418 4.3656v19.731h-32.764z" fill="none" stroke-width=".11786"/>
|
||||
<path d="m30.911 81.056 0.0038-26.842 4.5152-4.6554c2.4834-2.5604 4.565-4.6554 4.626-4.6554 0.06091 0 2.0846 2.0913 4.4971 4.6472l4.3863 4.6472v53.7h-18.032z" fill="none" stroke-width=".11786"/>
|
||||
<rect x="262.33" y="89.057" width="11.698" height="3.2982" fill="#fff" stroke-width=".31054"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
@ -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 leading-6 text-center font-medium text-gray-900">
|
||||
Kalendarz urlopów
|
||||
</h2>
|
||||
<div class="ml-5 flex items-center rounded-md shadow-sm md:items-stretch">
|
||||
<div class="ml-3 flex items-center 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 items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 px-2 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
|
||||
>
|
||||
<ChevronLeftIcon class="h-5 w-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 items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 px-2 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
|
||||
>
|
||||
<ChevronLeftIcon class="h-5 w-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 border-t border-b border-gray-300 bg-white px-2 text-sm font-medium flex items-center text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block"
|
||||
>
|
||||
Dzisiaj
|
||||
</InertiaLink>
|
||||
@ -32,13 +32,13 @@
|
||||
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 items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 px-2 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
|
||||
>
|
||||
<ChevronRightIcon class="h-5 w-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 items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 px-2 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
|
||||
>
|
||||
<ChevronRightIcon class="h-5 w-5" />
|
||||
</span>
|
||||
@ -47,7 +47,7 @@
|
||||
<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 text-center ml-3 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"
|
||||
>
|
||||
Pobierz plik Excel
|
||||
</a>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -5,9 +5,6 @@
|
||||
<h2 class="text-lg leading-6 font-medium 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"
|
||||
|
||||
@ -5,9 +5,6 @@
|
||||
<h2 class="text-lg leading-6 font-medium 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"
|
||||
|
||||
@ -6,16 +6,13 @@
|
||||
<h2 class="text-lg leading-6 font-medium 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"
|
||||
>
|
||||
Dodaj dzień wolny
|
||||
Dodaj dzień
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
@ -26,25 +23,25 @@
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider 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="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider 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="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider 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="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
/>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@ -5,9 +5,6 @@
|
||||
<h2 class="text-lg leading-6 font-medium 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"
|
||||
@ -116,7 +113,7 @@
|
||||
<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.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
|
||||
: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">
|
||||
|
||||
@ -5,9 +5,6 @@
|
||||
<h2 class="text-lg leading-6 font-medium 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"
|
||||
|
||||
@ -4,16 +4,13 @@
|
||||
<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
|
||||
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 text-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"
|
||||
>
|
||||
Dodaj użytkownika
|
||||
</InertiaLink>
|
||||
@ -39,37 +36,37 @@
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider 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="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider 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="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider 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="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider 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="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider 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="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
/>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@ -6,44 +6,41 @@
|
||||
<h2 class="text-lg leading-6 font-medium 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">
|
||||
<form @submit.prevent="submitVacationDays">
|
||||
<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 border-b">
|
||||
<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="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider 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="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider 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="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider 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="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider 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="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
>
|
||||
Dostępne dni w roku
|
||||
</th>
|
||||
@ -120,16 +117,16 @@
|
||||
</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 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>
|
||||
</template>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<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="xl: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
|
||||
@ -43,7 +43,7 @@
|
||||
<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 }"
|
||||
: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
|
||||
@ -129,44 +129,39 @@
|
||||
</div>
|
||||
</div>
|
||||
<Listbox
|
||||
v-model="form.type"
|
||||
v-model="form.vacationType"
|
||||
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
|
||||
Rodzaj urlopu
|
||||
</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="block truncate">{{ form.vacationType.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"
|
||||
>
|
||||
<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-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
|
||||
@ -271,7 +266,7 @@
|
||||
>
|
||||
Natychmiastowo zatwierdź wniosek
|
||||
</label>
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div class="mt-2 sm:mt-0 sm:col-span-2">
|
||||
<Switch
|
||||
id="flowSkipped"
|
||||
v-model="form.flowSkipped"
|
||||
@ -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 = [
|
||||
|
||||
@ -2,11 +2,9 @@
|
||||
<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 leading-6 font-medium text-gray-900">
|
||||
Moje wnioski urlopowe
|
||||
</h2>
|
||||
<div>
|
||||
<InertiaLink
|
||||
href="/vacation/requests/create"
|
||||
@ -16,13 +14,13 @@
|
||||
</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 md:flex relative shadow divide-x divide-gray-200">
|
||||
<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="md:hidden px-4 py-4 grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4">
|
||||
<Listbox
|
||||
v-model="form.status"
|
||||
as="div"
|
||||
>
|
||||
<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 h-10 max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:outline-none focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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="h-5 w-5" />
|
||||
</span>
|
||||
</li>
|
||||
</ListboxOption>
|
||||
</ListboxOptions>
|
||||
</transition>
|
||||
</div>
|
||||
</Listbox>
|
||||
</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-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider 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="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider 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="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider 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="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider 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="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider 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="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
>
|
||||
Status
|
||||
</th>
|
||||
@ -134,12 +189,16 @@
|
||||
</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>
|
||||
|
||||
@ -16,200 +16,194 @@
|
||||
</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="px-4 py-4 grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4">
|
||||
<Listbox
|
||||
v-model="form.user"
|
||||
as="div"
|
||||
>
|
||||
<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 h-10 max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:outline-none focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300"
|
||||
>
|
||||
<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="flex-shrink-0 h-6 w-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="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-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="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"
|
||||
>
|
||||
<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="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>
|
||||
</div>
|
||||
</Listbox>
|
||||
<Listbox
|
||||
v-model="form.status"
|
||||
as="div"
|
||||
>
|
||||
<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 h-10 max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:outline-none focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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="h-5 w-5" />
|
||||
</span>
|
||||
</li>
|
||||
</ListboxOption>
|
||||
</ListboxOptions>
|
||||
</transition>
|
||||
</div>
|
||||
</Listbox>
|
||||
</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-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
|
||||
class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider 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="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider 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="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider 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="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider 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="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider 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="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider 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="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
|
||||
>
|
||||
Status
|
||||
</th>
|
||||
@ -232,10 +226,9 @@
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
|
||||
<div class="flex">
|
||||
<img
|
||||
class="h-10 w-10 rounded-full"
|
||||
:src="request.user.avatar"
|
||||
>
|
||||
<div class="h-10 w-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 }}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
:years="years"
|
||||
/>
|
||||
<main class="lg:ml-64 flex flex-col flex-1 py-8">
|
||||
<div class="px-4">
|
||||
<div class="lg:px-4">
|
||||
<slot />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -49,11 +49,13 @@
|
||||
</div>
|
||||
</TransitionChild>
|
||||
<div class="flex-shrink-0 flex items-center px-4">
|
||||
<InertiaLink href="/">
|
||||
<InertiaLink
|
||||
href="/"
|
||||
@click="sidebarOpen = false;"
|
||||
>
|
||||
<img
|
||||
class="h-8 w-auto"
|
||||
src="/img/logo-white.png"
|
||||
alt="Workflow"
|
||||
src="/img/logo-white.svg"
|
||||
>
|
||||
</InertiaLink>
|
||||
</div>
|
||||
@ -61,7 +63,8 @@
|
||||
<div class="px-2 space-y-1">
|
||||
<InertiaLink
|
||||
href="/"
|
||||
:class="[$page.component === 'Dashboard' ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md']"
|
||||
:class="[$page.component === 'Dashboard' ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md']"
|
||||
@click="sidebarOpen = false;"
|
||||
>
|
||||
<HomeIcon class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200" />
|
||||
Strona główna
|
||||
@ -74,6 +77,7 @@
|
||||
:key="item.name"
|
||||
:href="item.href"
|
||||
:class="[$page.component === item.component ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-base font-medium rounded-md']"
|
||||
@click="sidebarOpen = false;"
|
||||
>
|
||||
<component
|
||||
:is="item.icon"
|
||||
@ -95,9 +99,8 @@
|
||||
<div class="flex items-center flex-shrink-0 px-4">
|
||||
<InertiaLink href="/">
|
||||
<img
|
||||
class="h-8 w-auto"
|
||||
src="/img/logo-white.png"
|
||||
alt="Workflow"
|
||||
src="/img/logo-white.svg"
|
||||
class="w-auto h-10 text-red-600 fil-red-600"
|
||||
>
|
||||
</InertiaLink>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<section class="grid grid-cols-2 gap-4">
|
||||
<div class="bg-white shadow-md p-4">
|
||||
<section class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="hidden md:block bg-white shadow-md p-4">
|
||||
<VacationChart :stats="stats" />
|
||||
</div>
|
||||
<div class="h-full">
|
||||
|
||||
@ -41,5 +41,6 @@ Flatpickr.setDefaults({
|
||||
enableTime: false,
|
||||
altFormat: 'd.m.Y',
|
||||
altInput: true,
|
||||
disableMobile: true,
|
||||
})
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ use Toby\Infrastructure\Http\Controllers\Api\CalculateUserVacationStatsControlle
|
||||
use Toby\Infrastructure\Http\Controllers\Api\CalculateVacationDaysController;
|
||||
|
||||
Route::middleware("auth:sanctum")->group(function (): void {
|
||||
Route::post("calculate-vacation-days", CalculateVacationDaysController::class);
|
||||
Route::post("calculate-vacation-stats", CalculateUserVacationStatsController::class);
|
||||
Route::post("calculate-unavailable-days", CalculateUserUnavailableDaysController::class);
|
||||
Route::post("vacation/calculate-days", CalculateVacationDaysController::class);
|
||||
Route::post("vacation/calculate-stats", CalculateUserVacationStatsController::class);
|
||||
Route::post("vacation/calculate-unavailable-days", CalculateUserUnavailableDaysController::class);
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user