#23 - wip

app/Http/Controllers/VacationDaysController.php

@@ -0,0 +1,40 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Toby\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Carbon;
+use Inertia\Response;
+use Toby\Http\Resources\VacationLimitResource;
+use Toby\Http\Resources\YearPeriodResource;
+use Toby\Models\YearPeriod;
+
+class VacationDaysController extends Controller
+{
+    public function edit(Request $request): Response
+    {
+        $year = $request->query("year", Carbon::now()->year);
+
+        /** @var YearPeriod $yearPeriod */
+        $yearPeriod = YearPeriod::query()->where("year", $year)->firstOrFail();
+        $previousYearPeriod = YearPeriod::query()->where("year", $year - 1)->first();
+        $nextYearPeriod = YearPeriod::query()->where("year", $year + 1)->first();
+
+
+        return inertia("VacationDays", [
+            "vacationLimits" => VacationLimitResource::collection($yearPeriod->vacationLimits()->with("user")->get()),
+            "yearPeriods" => [
+                "prev" => $previousYearPeriod ? new YearPeriodResource($previousYearPeriod) : null,
+                "current" => new YearPeriodResource($yearPeriod),
+                "next" => $nextYearPeriod ? new YearPeriodResource($nextYearPeriod) : null,
+            ],
+        ]);
+    }
+
+    public function update(Request $request)
+    {
+        dump($request->get("items"));
+    }
+}

app/Http/Resources/UserResource.php

@@ -8,7 +8,7 @@ use Illuminate\Http\Resources\Json\JsonResource;
 
 class UserResource extends JsonResource
 {
-    public static $wrap = false;
+    public static $wrap = null;
 
     public function toArray($request): array
     {

app/Http/Resources/VacationLimitResource.php

@@ -0,0 +1,21 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Toby\Http\Resources;
+
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class VacationLimitResource extends JsonResource
+{
+    public static $wrap = null;
+
+    public function toArray($request): array
+    {
+        return [
+            "user" => new UserResource($this->user),
+            "hasVacation" => $this->has_vacation,
+            "days" => $this->days,
+        ];
+    }
+}

app/Http/Resources/YearPeriodResource.php

@@ -0,0 +1,20 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Toby\Http\Resources;
+
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class YearPeriodResource extends JsonResource
+{
+    public static $wrap = false;
+
+    public function toArray($request): array
+    {
+        return [
+            "id" => $this->id,
+            "year" => $this->year,
+        ];
+    }
+}

app/Models/VacationLimit.php

@@ -0,0 +1,35 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Toby\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+/**
+ * @property int $id
+ * @property User $user
+ * @property YearPeriod $yearPeriod
+ * @property bool $has_vacation
+ * @property int $days
+ */
+class VacationLimit extends Model
+{
+    use HasFactory;
+
+    protected $casts = [
+        "has_vacation" => "boolean",
+    ];
+
+    public function user(): BelongsTo
+    {
+        return $this->belongsTo(User::class);
+    }
+
+    public function yearPeriod(): BelongsTo
+    {
+        return $this->belongsTo(YearPeriod::class);
+    }
+}

app/Models/YearPeriod.php

@@ -7,10 +7,13 @@ namespace Toby\Models;
 use Carbon\Carbon;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\HasMany;
+use Illuminate\Support\Collection;
 
 /**
  * @property int $id
  * @property int $year
+ * @property Collection $vacationLimits
  */
 class YearPeriod extends Model
 {
@@ -27,4 +30,9 @@ class YearPeriod extends Model
 
         return $year;
     }
+
+    public function vacationLimits(): HasMany
+    {
+        return $this->hasMany(VacationLimit::class);
+    }
 }

database/factories/VacationLimitFactory.php

@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+use Toby\Models\User;
+use Toby\Models\YearPeriod;
+
+class VacationLimitFactory extends Factory
+{
+    public function definition(): array
+    {
+        $hasVacation = $this->faker->boolean(75);
+
+        return [
+            "user_id" => User::factory(),
+            "year_period_id" => YearPeriod::factory(),
+            "has_vacation" => $hasVacation,
+            "days" => $hasVacation ? $this->faker->numberBetween(20, 26) : null,
+        ];
+    }
+}

database/migrations/2022_01_19_140630_create_vacation_limits_table.php

@@ -0,0 +1,28 @@
+<?php
+
+declare(strict_types=1);
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+use Toby\Models\User;
+use Toby\Models\YearPeriod;
+
+return new class() extends Migration {
+    public function up(): void
+    {
+        Schema::create('vacation_limits', function (Blueprint $table): void {
+            $table->id();
+            $table->foreignIdFor(User::class)->constrained()->cascadeOnDelete();
+            $table->foreignIdFor(YearPeriod::class)->constrained()->cascadeOnDelete();
+            $table->boolean("has_vacation")->default(false);
+            $table->integer("days")->nullable();
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('vacation_limits');
+    }
+};

database/seeders/DatabaseSeeder.php

@@ -7,6 +7,7 @@ namespace Database\Seeders;
 use Illuminate\Database\Seeder;
 use Illuminate\Support\Carbon;
 use Toby\Models\User;
+use Toby\Models\VacationLimit;
 use Toby\Models\YearPeriod;
 
 class DatabaseSeeder extends Seeder
@@ -18,11 +19,23 @@ class DatabaseSeeder extends Seeder
             "email" => env("LOCAL_EMAIL_FOR_LOGIN_VIA_GOOGLE"),
         ])->create();
 
-        YearPeriod::factory([
-            "year" => Carbon::now()->year,
-        ])->create();
-        YearPeriod::factory([
-            "year" => Carbon::now()->year + 1,
-        ])->create();
+        $users = User::all();
+
+        YearPeriod::factory()
+            ->count(3)
+            ->sequence(
+                ["year" => Carbon::now()->year - 1],
+                ["year" => Carbon::now()->year],
+                ["year" => Carbon::now()->year + 1],
+            )
+            ->afterCreating(function (YearPeriod $yearPeriod) use ($users) {
+                foreach ($users as $user) {
+                    VacationLimit::factory()
+                        ->for($yearPeriod)
+                        ->for($user)
+                        ->create();
+                }
+            })
+        ->create();
     }
 }

resources/js/Pages/VacationDays.vue

@@ -0,0 +1,218 @@
+<template>
+    <InertiaHead title="Użytkownicy" />
+    <div class="bg-white sm:rounded-lg 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">
+                    Dostępne dni urlopu dla użytkowników
+                </h2>
+                <p class="mt-1 text-sm text-gray-500">
+                    Zarządzaj dostepnymi dniami urlopów dla użytkowników.
+                </p>
+            </div>
+            <div class="ml-4">
+                <span class="relative z-0 inline-flex shadow-sm rounded-md">
+                    <InertiaLink
+                        v-if="yearPeriods.prev"
+                        :preserve-scroll="true"
+                        replace
+                        href="/vacation-days"
+                        :data="{year: yearPeriods.prev.year}"
+                        class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500"
+                    >
+                        <ChevronLeftIcon class="h-5 w-5" />
+                    </InertiaLink>
+                    <span
+                        v-else
+                        class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500"
+                    >
+                        <ChevronLeftIcon class="h-5 w-5" />
+                    </span>
+                    <span class="-ml-px relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500">
+                        {{ yearPeriods.current.year }}
+                    </span>
+                    <InertiaLink
+                        v-if="yearPeriods.next"
+                        :preserve-scroll="true"
+                        href="/vacation-days"
+                        replace
+                        :data="{year: yearPeriods.next.year}"
+                        class="-ml-px relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500"
+                    >
+                        <ChevronRightIcon class="h-5 w-5" />
+                    </InertiaLink>
+                    <span
+                        v-else
+                        class="-ml-px relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500"
+                    >
+                        <ChevronRightIcon class="h-5 w-5" />
+                    </span>
+                </span>
+            </div>
+        </div>
+        <div class="border-t border-gray-200">
+            <div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
+                <form @submit.prevent="submitVacationDays">
+                    <table class="min-w-full divide-y divide-gray-200">
+                        <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"
+                                >
+                                    Imię i nazwisko
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+                                >
+                                    Forma zatrudnienia
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+                                >
+                                    Posiada urlop?
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+                                >
+                                    Dostępne dni w roku
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-white divide-y divide-gray-100">
+                            <tr
+                                v-for="item in form.items"
+                                :key="item.id"
+                                class="hover:bg-blumilk-25"
+                            >
+                                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+                                    <div class="flex">
+                                        <span
+                                            class="inline-flex items-center justify-center h-10 w-10 rounded-full"
+                                        >
+                                            <img
+                                                class="h-10 w-10 rounded-full"
+                                                :src="item.user.avatar"
+                                                alt=""
+                                            >
+                                        </span>
+                                        <div class="ml-3">
+                                            <p class="text-sm font-medium break-all text-gray-900">
+                                                {{ item.user.name }}
+                                            </p>
+                                            <p class="text-sm break-all text-gray-500">
+                                                {{ item.user.email }}
+                                            </p>
+                                        </div>
+                                    </div>
+                                </td>
+                                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+                                    {{ item.user.employmentForm }}
+                                </td>
+                                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+                                    <Switch
+                                        v-model="item.hasVacation"
+                                        :class="[item.hasVacation ? 'bg-blumilk-500' : 'bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500']"
+                                    >
+                                        <span
+                                            :class="[item.hasVacation ? '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>
+                                </td>
+                                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+                                    <div class="mt-1 sm:mt-0 sm:col-span-2">
+                                        <input
+                                            v-model="item.days"
+                                            type="number"
+                                            min="0"
+                                            class="block w-full 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': false, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': true }"
+                                        >
+                                        <p
+                                            v-if="false"
+                                            class="mt-2 text-sm text-red-600"
+                                        >
+                                            {{ form.errors.name }}
+                                        </p>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr
+                                v-if="!form.items.length"
+                            >
+                                <td
+                                    colspan="100%"
+                                    class="text-center py-4 text-xl leading-5 text-gray-700"
+                                >
+                                    Brak danych
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <div class="flex justify-end py-3 px-4">
+                        <div class="space-x-3">
+                            <InertiaLink
+                                href="/users"
+                                class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+                            >
+                                Anuluj
+                            </InertiaLink>
+                            <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>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { Switch } from '@headlessui/vue';
+import {ChevronLeftIcon, ChevronRightIcon} from '@heroicons/vue/solid';
+import {useForm} from '@inertiajs/inertia-vue3';
+
+export default {
+    name: 'VacationDays',
+    components: {
+        Switch,
+        ChevronLeftIcon,
+        ChevronRightIcon,
+    },
+    props: {
+        vacationLimits: {
+            type: Object,
+            default: () => null,
+        },
+        yearPeriods: {
+            type: Object,
+            default: () => null,
+        },
+    },
+    setup(props) {
+        const form = useForm({
+            items: props.vacationLimits.data,
+        });
+
+        return {
+            form,
+        };
+    },
+    methods: {
+        submitVacationDays() {
+            this.form
+                .transform(data => ({
+                    data,
+                }))
+                .put('/vacation-days');
+        },
+    },
+};
+</script>

resources/js/Shared/MainMenu.vue

@@ -266,10 +266,11 @@ export default {
     },
     setup() {
         const user = computed(() => usePage().props.value.auth.user);
+
         const navigation = [
             {name: 'Strona główna', href: '/', current: true},
             {name: 'Użytkownicy', href: '/users', current: false},
-            {name: 'Resources', href: '#', current: false},
+            {name: 'Dostępne urlopy', href: '/vacation-days', current: false},
             {name: 'Company Directory', href: '#', current: false},
             {name: 'Openings', href: '#', current: false},
         ];

routes/web.php

@@ -6,6 +6,7 @@ use Illuminate\Support\Facades\Route;
 use Toby\Http\Controllers\GoogleController;
 use Toby\Http\Controllers\LogoutController;
 use Toby\Http\Controllers\UserController;
+use Toby\Http\Controllers\VacationDaysController;
 
 Route::middleware("auth")->group(function (): void {
     Route::get("/", fn() => inertia("Dashboard"))->name("dashboard");
@@ -13,6 +14,9 @@ Route::middleware("auth")->group(function (): void {
 
     Route::resource("users", UserController::class);
     Route::post("users/{user}/restore", [UserController::class, "restore"])->withTrashed();
+
+    Route::get("/vacation-days", [VacationDaysController::class, "edit"])->name("vacation.days");
+    Route::put("/vacation-days", [VacationDaysController::class, "update"]);
 });
 
 Route::middleware("guest")->group(function (): void {