#22 - wip
This commit is contained in:
Adrian Hopek
parent
75506dfb6d
commit
753d4bb296
@ -28,6 +28,7 @@ use Toby\Domain\Enums\Role;
|
||||
* @property Carbon $employment_date
|
||||
* @property Collection $vacationLimits
|
||||
* @property Collection $vacationRequests
|
||||
* @property Collection $vacations
|
||||
*/
|
||||
class User extends Authenticatable
|
||||
{
|
||||
@ -57,6 +58,11 @@ class User extends Authenticatable
|
||||
return $this->hasMany(VacationRequest::class);
|
||||
}
|
||||
|
||||
public function vacations(): HasMany
|
||||
{
|
||||
return $this->hasMany(Vacation::class);
|
||||
}
|
||||
|
||||
public function scopeSearch(Builder $query, ?string $text): Builder
|
||||
{
|
||||
if ($text === null) {
|
||||
|
||||
@ -4,21 +4,85 @@ declare(strict_types=1);
|
||||
|
||||
namespace Toby\Infrastructure\Http\Controllers;
|
||||
|
||||
use Carbon\CarbonImmutable;
|
||||
use Carbon\CarbonInterface;
|
||||
use Carbon\CarbonPeriod;
|
||||
use Illuminate\Database\Eloquent\Relations\BelongsTo;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Arr;
|
||||
use Inertia\Response;
|
||||
use Toby\Domain\Enums\VacationRequestState;
|
||||
use Toby\Eloquent\Helpers\YearPeriodRetriever;
|
||||
use Toby\Eloquent\Models\User;
|
||||
use Toby\Eloquent\Models\Vacation;
|
||||
use Toby\Infrastructure\Http\Resources\UserResource;
|
||||
|
||||
class VacationCalendarController extends Controller
|
||||
{
|
||||
public function index(): Response
|
||||
public function index(Request $request, YearPeriodRetriever $yearPeriodRetriever): Response
|
||||
{
|
||||
$month = $request->query("month", "february");
|
||||
$yearPeriod = $yearPeriodRetriever->selected();
|
||||
$date = CarbonImmutable::create($yearPeriod->year, $this->monthNameToNumber($month));
|
||||
$period = CarbonPeriod::create($date->startOfMonth(), $date->endOfMonth());
|
||||
$holidays = $yearPeriod->holidays()->pluck("date");
|
||||
$users = User::query()
|
||||
->with([
|
||||
"vacations" => fn($query) => $query
|
||||
->whereBetween("date", [$period->start, $period->end])
|
||||
->whereRelation("vacationRequest", "state", VacationRequestState::APPROVED->value)
|
||||
])
|
||||
->orderBy("last_name")
|
||||
->orderBy("first_name")
|
||||
->paginate();
|
||||
|
||||
$calendar = [];
|
||||
|
||||
foreach ($period as $day) {
|
||||
$calendar[] = [
|
||||
"date" => $day->toDateString(),
|
||||
"dayOfMonth" => $day->translatedFormat("j"),
|
||||
"dayOfWeek" => $day->translatedFormat("D"),
|
||||
"isToday" => $day->isToday(),
|
||||
"isWeekend" => $day->isWeekend(),
|
||||
"isVacation" => Arr::random([false, false, false, false, true]),
|
||||
"isHoliday" => $holidays->contains($day),
|
||||
];
|
||||
}
|
||||
|
||||
$userVacations = [];
|
||||
|
||||
/** @var User $user */
|
||||
foreach ($users as $user) {
|
||||
$userVacations[] = [
|
||||
"user" => new UserResource($user),
|
||||
"vacations" => $user->vacations->map(fn (Vacation $vacation) => $vacation->date->toDateString()),
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
return inertia("Calendar", [
|
||||
"users" => UserResource::collection($users),
|
||||
"calendar" => $calendar,
|
||||
"currentMonth" => $month,
|
||||
"userVacations" => $userVacations,
|
||||
]);
|
||||
}
|
||||
|
||||
protected function monthNameToNumber(?string $name): int
|
||||
{
|
||||
return match($name) {
|
||||
default => CarbonInterface::JANUARY,
|
||||
"february" => CarbonInterface::FEBRUARY,
|
||||
"march" => CarbonInterface::MARCH,
|
||||
"april" => CarbonInterface::APRIL,
|
||||
"may" => CarbonInterface::MAY,
|
||||
"june" => CarbonInterface::JUNE,
|
||||
"julu" => CarbonInterface::JULY,
|
||||
"august" => CarbonInterface::AUGUST,
|
||||
"septemter" => CarbonInterface::SEPTEMBER,
|
||||
"october" => CarbonInterface::OCTOBER,
|
||||
"november" => CarbonInterface::NOVEMBER,
|
||||
"december" => CarbonInterface::DECEMBER,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
</h2>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-center border border-gray-300">
|
||||
<table class="w-full text-center table-fixed text-sm border border-gray-300">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-64 py-2 border border-gray-300">
|
||||
@ -17,13 +17,10 @@
|
||||
>
|
||||
<div>
|
||||
<MenuButton
|
||||
class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blumilk-500"
|
||||
class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white 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"
|
||||
>
|
||||
Styczeń
|
||||
<ChevronDownIcon
|
||||
class="-mr-1 ml-2 h-5 w-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ selectedMonth.name }}
|
||||
<ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" />
|
||||
</MenuButton>
|
||||
</div>
|
||||
|
||||
@ -36,26 +33,25 @@
|
||||
leave-to-class="transform opacity-0 scale-95"
|
||||
>
|
||||
<MenuItems
|
||||
class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
class="origin-top-right absolute right-0 mt-2 w-32 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
>
|
||||
<div class="py-1">
|
||||
<MenuItem>
|
||||
<a
|
||||
href="#"
|
||||
class="text-gray-900 block px-4 py-2 text-sm"
|
||||
>Styczeń</a>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<a
|
||||
href="#"
|
||||
class="text-gray-900 block px-4 py-2 text-sm"
|
||||
>Luty</a>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<a
|
||||
href="#"
|
||||
class="text-gray-900 block px-4 py-2 text-sm"
|
||||
>Marzec</a>
|
||||
<MenuItem
|
||||
v-for="(month, index) in months"
|
||||
:key="index"
|
||||
v-slot="{ active }"
|
||||
>
|
||||
<InertiaLink
|
||||
href="/vacation-calendar"
|
||||
:data="{ month: month.value }"
|
||||
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex w-full font-normal px-4 py-2 text-sm']"
|
||||
>
|
||||
{{ month.name }}
|
||||
<CheckIcon
|
||||
v-if="currentMonth === month.value"
|
||||
class="h-5 w-5 text-blumilk-500 ml-2"
|
||||
/>
|
||||
</InertiaLink>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</MenuItems>
|
||||
@ -63,43 +59,63 @@
|
||||
</Menu>
|
||||
</th>
|
||||
<th
|
||||
v-for="i in 31"
|
||||
:key="i"
|
||||
class="border border-gray-300 font-semibold text-gray-900 py-4 px-2 bg-gray-50"
|
||||
v-for="day in calendar"
|
||||
:key="day.dayOfMonth"
|
||||
class="border border-gray-300 text-lg font-semibold text-gray-900 py-4 px-2"
|
||||
:class="{ 'bg-blumilk-500 text-white': day.isToday}"
|
||||
>
|
||||
{{ i }}
|
||||
<p class="text-gray-800 font-normal mt-1">
|
||||
Pt
|
||||
</p>
|
||||
<div>
|
||||
{{ day.dayOfMonth }}
|
||||
<p class="font-normal mt-1 text-sm capitalize">
|
||||
{{ day.dayOfWeek }}
|
||||
</p>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="user in users.data"
|
||||
:key="user.id"
|
||||
v-for="userVacation in userVacations"
|
||||
:key="userVacation.user.id"
|
||||
>
|
||||
<th class="border border-gray-300 py-2 px-4">
|
||||
<div class="flex justify-start items-center">
|
||||
<span class="inline-flex items-center justify-center h-10 w-10 rounded-full">
|
||||
<img
|
||||
class="h-10 w-10 rounded-full"
|
||||
:src="user.avatar"
|
||||
:src="userVacation.user.avatar"
|
||||
alt=""
|
||||
>
|
||||
</span>
|
||||
<div class="ml-3">
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
{{ user.name }}
|
||||
{{ userVacation.user.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<td
|
||||
v-for="i in 31"
|
||||
:key="i"
|
||||
class="border border-gray-300 bg-blumilk-25"
|
||||
/>
|
||||
v-for="day in calendar"
|
||||
:key="day.dayOfMonth"
|
||||
class="border border-gray-300"
|
||||
:class="{'bg-gray-100': day.isWeekend, 'bg-green-100': day.isHoliday, 'bg-blumilk-200': userVacation.vacations.includes(day.date) }"
|
||||
>
|
||||
<div
|
||||
v-if="userVacation.vacations.includes(day.date)"
|
||||
class="flex justify-center items-center"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M115.38 136.9l102.11 37.18c35.19-81.54 86.21-144.29 139-173.7-95.88-4.89-188.78 36.96-248.53 111.8-6.69 8.4-2.66 21.05 7.42 24.72zm132.25 48.16l238.48 86.83c35.76-121.38 18.7-231.66-42.63-253.98-7.4-2.7-15.13-4-23.09-4-58.02.01-128.27 69.17-172.76 171.15zM521.48 60.5c6.22 16.3 10.83 34.6 13.2 55.19 5.74 49.89-1.42 108.23-18.95 166.98l102.62 37.36c10.09 3.67 21.31-3.43 21.57-14.17 2.32-95.69-41.91-187.44-118.44-245.36zM560 447.98H321.06L386 269.5l-60.14-21.9-72.9 200.37H16c-8.84 0-16 7.16-16 16.01v32.01C0 504.83 7.16 512 16 512h544c8.84 0 16-7.17 16-16.01v-32.01c0-8.84-7.16-16-16-16z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -109,7 +125,8 @@
|
||||
|
||||
<script>
|
||||
import {Menu, MenuButton, MenuItem, MenuItems} from '@headlessui/vue'
|
||||
import {ChevronDownIcon} from '@heroicons/vue/solid'
|
||||
import {CheckIcon, ChevronDownIcon} from '@heroicons/vue/solid'
|
||||
import {computed} from 'vue'
|
||||
|
||||
export default {
|
||||
name: 'VacationCalendar',
|
||||
@ -118,13 +135,81 @@ export default {
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuItems,
|
||||
CheckIcon,
|
||||
ChevronDownIcon,
|
||||
},
|
||||
props: {
|
||||
users: {
|
||||
userVacations: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
calendar: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
currentMonth: {
|
||||
type: String,
|
||||
default: () => 'january',
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const months = [
|
||||
{
|
||||
'name': 'Styczeń',
|
||||
'value': 'january',
|
||||
},
|
||||
{
|
||||
'name': 'Luty',
|
||||
'value': 'february',
|
||||
},
|
||||
{
|
||||
'name': 'Marzec',
|
||||
'value': 'march',
|
||||
},
|
||||
{
|
||||
'name': 'Kwiecień',
|
||||
'value': 'april',
|
||||
},
|
||||
{
|
||||
'name': 'Maj',
|
||||
'value': 'may',
|
||||
},
|
||||
{
|
||||
'name': 'Czerwiec',
|
||||
'value': 'june',
|
||||
},
|
||||
{
|
||||
'name': 'Lipiec',
|
||||
'value': 'july',
|
||||
},
|
||||
{
|
||||
'name': 'Sierpień',
|
||||
'value': 'august',
|
||||
},
|
||||
{
|
||||
'name': 'Wrzesień',
|
||||
'value': 'september',
|
||||
},
|
||||
{
|
||||
'name': 'Październik',
|
||||
'value': 'october',
|
||||
},
|
||||
{
|
||||
'name': 'Listopad',
|
||||
'value': 'november',
|
||||
},
|
||||
{
|
||||
'name': 'Grudzień',
|
||||
'value': 'december',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedMonth = computed(() => months.find(month => month.value === props.currentMonth))
|
||||
|
||||
return {
|
||||
months,
|
||||
selectedMonth,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,22 +1,19 @@
|
||||
<template>
|
||||
<div class="min-h-full">
|
||||
<MainMenu />
|
||||
<main class="lg:ml-64 flex flex-col flex-1 py-8">
|
||||
<div>
|
||||
<!-- <div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8 lg:max-w-7xl">-->
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<div class="min-h-full">
|
||||
<MainMenu />
|
||||
<main class="lg:ml-64 flex flex-col flex-1 py-8">
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MainMenu from '@/Shared/MainMenu';
|
||||
import MainMenu from '@/Shared/MainMenu'
|
||||
|
||||
export default {
|
||||
name: 'AppLayout',
|
||||
components: {MainMenu},
|
||||
};
|
||||
name: 'AppLayout',
|
||||
components: {MainMenu},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -110,7 +110,6 @@
|
||||
|
||||
<!-- Static sidebar for desktop -->
|
||||
<div class="hidden lg:flex lg:w-64 lg:flex-col lg:fixed lg:inset-y-0">
|
||||
<!-- Sidebar component, swap this element with another sidebar if you like -->
|
||||
<div class="flex flex-col flex-grow bg-blumilk-700 pt-5 pb-4 overflow-y-auto">
|
||||
<div class="flex items-center flex-shrink-0 px-4">
|
||||
<InertiaLink href="/">
|
||||
@ -248,9 +247,10 @@
|
||||
:src="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
|
||||
}}</span>
|
||||
<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 }}
|
||||
</span>
|
||||
<ChevronDownIcon
|
||||
class="hidden flex-shrink-0 ml-1 h-5 w-5 text-gray-400 lg:block"
|
||||
aria-hidden="true"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user