#22 - wip

app/Domain/CalendarGenerator.php

@@ -0,0 +1,76 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Toby\Domain;
+
+use Carbon\CarbonImmutable;
+use Carbon\CarbonInterface;
+use Carbon\CarbonPeriod;
+use Illuminate\Support\Collection;
+use Toby\Domain\Enums\VacationRequestState;
+use Toby\Eloquent\Helpers\YearPeriodRetriever;
+use Toby\Eloquent\Models\Vacation;
+use Toby\Eloquent\Models\YearPeriod;
+
+class CalendarGenerator
+{
+    public function __construct(
+        protected YearPeriodRetriever $yearPeriodRetriever,
+    ) {
+    }
+
+    public function generate(YearPeriod $yearPeriod, string $month): array
+    {
+        $date = CarbonImmutable::create($yearPeriod->year, $this->monthNameToNumber($month));
+        $period = CarbonPeriod::create($date->startOfMonth(), $date->endOfMonth());
+        $holidays = $yearPeriod->holidays()->pluck("date");
+
+        return $this->generateCalendar($period, $holidays);
+    }
+
+    protected function monthNameToNumber($name): int
+    {
+        return match ($name) {
+            default => CarbonInterface::JANUARY,
+            "february" => CarbonInterface::FEBRUARY,
+            "march" => CarbonInterface::MARCH,
+            "april" => CarbonInterface::APRIL,
+            "may" => CarbonInterface::MAY,
+            "june" => CarbonInterface::JUNE,
+            "july" => CarbonInterface::JULY,
+            "august" => CarbonInterface::AUGUST,
+            "september" => CarbonInterface::SEPTEMBER,
+            "october" => CarbonInterface::OCTOBER,
+            "november" => CarbonInterface::NOVEMBER,
+            "december" => CarbonInterface::DECEMBER,
+        };
+    }
+
+    protected function generateCalendar(CarbonPeriod $period, Collection $holidays): array
+    {
+        $calendar = [];
+
+        foreach ($period as $day) {
+            $calendar[] = [
+                "date" => $day->toDateString(),
+                "dayOfMonth" => $day->translatedFormat("j"),
+                "dayOfWeek" => $day->translatedFormat("D"),
+                "isToday" => $day->isToday(),
+                "isWeekend" => $day->isWeekend(),
+                "isHoliday" => $holidays->contains($day),
+                "vacations" => $this->getVacationsForDay($day),
+            ];
+        }
+
+        return $calendar;
+    }
+
+    protected function getVacationsForDay(CarbonInterface $day): Collection
+    {
+        return Vacation::query()
+            ->whereDate("date", $day)
+            ->whereRelation("vacationRequest", "state", VacationRequestState::APPROVED->value)
+            ->pluck("user_id");
+    }
+}

app/Infrastructure/Http/Controllers/VacationCalendarController.php

@@ -4,63 +4,36 @@ declare(strict_types=1);
 
 namespace Toby\Infrastructure\Http\Controllers;
 
-use Carbon\CarbonImmutable;
 use Carbon\CarbonInterface;
-use Carbon\CarbonPeriod;
 use Illuminate\Http\Request;
+use Illuminate\Support\Carbon;
+use Illuminate\Support\Str;
 use Inertia\Response;
-use Toby\Domain\Enums\VacationRequestState;
+use Toby\Domain\CalendarGenerator;
 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(Request $request, YearPeriodRetriever $yearPeriodRetriever): Response
+    public function index(
-    {
+        Request $request,
-        $month = $request->query("month", "february");
+        YearPeriodRetriever $yearPeriodRetriever,
+        CalendarGenerator $calendarGenerator,
+    ): Response {
+        $month = Str::lower($request->query("month", Carbon::now()->englishMonth));
         $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")
             ->get();
 
-        $calendar = [];
+        $calendar = $calendarGenerator->generate($yearPeriod, $month);
-
-        foreach ($period as $day) {
-            $calendar[] = [
-                "date" => $day->toDateString(),
-                "dayOfMonth" => $day->translatedFormat("j"),
-                "dayOfWeek" => $day->translatedFormat("D"),
-                "isToday" => $day->isToday(),
-                "isWeekend" => $day->isWeekend(),
-                "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", [
             "calendar" => $calendar,
             "currentMonth" => $month,
-            "userVacations" => $userVacations,
+            "users" => UserResource::collection($users),
         ]);
     }
 

resources/js/Composables/statusInfo.js

@@ -0,0 +1,128 @@
+import {
+  CheckIcon as OutlineCheckIcon,
+  ClockIcon as OutlineClockIcon,
+  DocumentTextIcon as OutlineDocumentTextIcon,
+  ThumbDownIcon as OutlineThumbDownIcon,
+  ThumbUpIcon as OutlineThumbUpIcon,
+  XIcon as OutlineXIcon,
+} from '@heroicons/vue/outline'
+
+import {
+  CheckIcon as SolidCheckIcon,
+  ClockIcon as SolidClockIcon,
+  DocumentTextIcon as SolidDocumentTextIcon,
+  ThumbDownIcon as SolidThumbDownIcon,
+  ThumbUpIcon as SolidThumbUpIcon,
+  XIcon as SolidXIcon,
+} from '@heroicons/vue/solid'
+
+const statuses = [
+  {
+    text: 'Utworzony',
+    value: 'created',
+    outline: {
+      icon: OutlineDocumentTextIcon,
+      foreground: 'text-white',
+      background: 'bg-gray-400',
+    },
+    solid: {
+      icon: SolidDocumentTextIcon,
+      color: 'text-gray-400',
+    },
+  },
+  {
+    text: 'Czeka na akceptację od technicznego',
+    value: 'waiting_for_technical',
+    outline: {
+      icon: OutlineClockIcon,
+      foreground: 'text-white',
+      background: 'bg-amber-400',
+    },
+    solid: {
+      icon: SolidClockIcon,
+      color: 'text-amber-400',
+    },
+  },
+  {
+    text: 'Czeka na akceptację od administracyjnego',
+    value: 'waiting_for_administrative',
+    outline: {
+      icon: OutlineClockIcon,
+      foreground: 'text-white',
+      background: 'bg-amber-400',
+    },
+    solid: {
+      icon: SolidClockIcon,
+      color: 'text-amber-400',
+    },
+  },
+  {
+    text: 'Odrzucony',
+    value: 'rejected',
+    outline: {
+      icon: OutlineThumbDownIcon,
+      foreground: 'text-white',
+      background: 'bg-rose-600',
+    },
+    solid: {
+      icon: SolidThumbDownIcon,
+      color: 'text-rose-600',
+    },
+  },
+  {
+    text: 'Zaakceptowany przez technicznego',
+    value: 'accepted_by_technical',
+    outline: {
+      icon: OutlineThumbUpIcon,
+      foreground: 'text-white',
+      background: 'bg-green-500',
+    },
+    solid: {
+      icon: SolidThumbUpIcon,
+      color: 'text-green-500',
+    },
+  },
+  {
+    text: 'Zaakceptowany przez administracyjnego',
+    value: 'accepted_by_administrative',
+    outline: {
+      icon: OutlineThumbUpIcon,
+      foreground: 'text-white',
+      background: 'bg-green-500',
+    },
+    solid: {
+      icon: SolidThumbUpIcon,
+      color: 'text-green-500',
+    },
+  },
+  {
+    text: 'Zatwierdzony',
+    value: 'approved',
+    outline: {
+      icon: OutlineCheckIcon,
+      foreground: 'text-white',
+      background: 'bg-blumilk-500',
+    },
+    solid: {
+      icon: SolidCheckIcon,
+      color: 'text-blumilk-500',
+    },
+  },
+  {
+    text: 'Anulowany',
+    value: 'canceled',
+    outline: {
+      icon: OutlineXIcon,
+      foreground: 'text-white',
+      background: 'bg-gray-900',
+    },
+    solid: {
+      icon: SolidXIcon,
+      color: 'text-gray-900',
+    },
+  },
+]
+
+export function useStatusInfo(status) {
+  return statuses.find(statusInfo => statusInfo.value === status)
+}

resources/js/Pages/Calendar.vue

@@ -62,7 +62,7 @@
               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="{ 'text-blumilk-600 bg-blumilk-25 font-black': day.isToday}"
+              :class="{ 'text-blumilk-600 bg-blumilk-25 font-black': day.isToday }"
             >
               <div>
                 {{ day.dayOfMonth }}
@@ -75,21 +75,20 @@
         </thead>
         <tbody>
           <tr
-            v-for="userVacation in userVacations"
+            v-for="user in users.data"
-            :key="userVacation.user.id"
+            :key="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="userVacation.user.avatar"
+                    :src="user.avatar"
-                    alt=""
                   >
                 </span>
                 <div class="ml-3">
                   <div class="text-sm font-medium text-gray-900">
-                    {{ userVacation.user.name }}
+                    {{ user.name }}
                   </div>
                 </div>
               </div>
@@ -98,10 +97,10 @@
               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-500': userVacation.vacations.includes(day.date) }"
+              :class="{'bg-red-100': day.isWeekend || day.isHoliday, 'bg-blumilk-500': day.vacations.includes(user.id) }"
             >
               <div
-                v-if="userVacation.vacations.includes(day.date)"
+                v-if="day.vacations.includes(user.id)"
                 class="flex justify-center items-center"
               >
                 <svg
@@ -139,7 +138,7 @@ export default {
     ChevronDownIcon,
   },
   props: {
-    userVacations: {
+    users: {
       type: Object,
       default: () => null,
     },

resources/js/Pages/VacationRequest/Show.vue

@@ -18,6 +18,14 @@
                 {{ request.name }}
               </dd>
             </div>
+            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+              <dt class="text-sm font-medium text-gray-500">
+                Pracownik
+              </dt>
+              <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                {{ request.user.name }}
+              </dd>
+            </div>
             <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
               <dt class="text-sm font-medium text-gray-500">
                 Rodzaj urlopu

resources/js/Shared/Activity.vue

@@ -6,9 +6,9 @@
     />
     <div class="relative flex space-x-3">
       <div>
-        <span :class="[statusInfo.iconBackground, statusInfo.iconForeground, 'h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white']">
+        <span :class="[statusInfo.outline.background, statusInfo.outline.foreground, 'h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white']">
           <component
-            :is="statusInfo.icon"
+            :is="statusInfo.outline.icon"
             class="w-5 h-5 text-white"
           />
         </span>
@@ -32,8 +32,8 @@
 </template>
 
 <script>
-import {CheckIcon, ClockIcon, DocumentTextIcon, ThumbDownIcon, ThumbUpIcon, XIcon} from '@heroicons/vue/outline'
 import {computed} from 'vue'
+import {useStatusInfo} from '@/Composables/statusInfo'
 
 export default {
   name: 'VacationRequestActivity',
@@ -48,65 +48,7 @@ export default {
     },
   },
   setup(props) {
-    const statuses = [
+    const statusInfo = computed(() => useStatusInfo(props.activity.state))
-      {
-        text: 'Utworzony',
-        icon: DocumentTextIcon,
-        value: 'created',
-        iconForeground: 'text-white',
-        iconBackground: 'bg-gray-400',
-      },
-      {
-        text: 'Czeka na akceptację od technicznego',
-        icon: ClockIcon,
-        value: 'waiting_for_technical',
-        iconForeground: 'text-white',
-        iconBackground: 'bg-amber-400',
-      },
-      {
-        text: 'Czeka na akceptację od administracyjnego',
-        icon: ClockIcon,
-        value: 'waiting_for_administrative',
-        iconForeground: 'text-white',
-        iconBackground: 'bg-amber-400',
-      },
-      {
-        text: 'Odrzucony',
-        icon: ThumbDownIcon,
-        value: 'rejected',
-        iconForeground: 'text-white',
-        iconBackground: 'bg-rose-600',
-      },
-      {
-        text: 'Zaakceptowany przez technicznego',
-        icon: ThumbUpIcon,
-        value: 'accepted_by_technical',
-        iconForeground: 'text-white',
-        iconBackground: 'bg-green-500',
-      },
-      {
-        text: 'Zaakceptowany przez administracyjnego',
-        icon: ThumbUpIcon,
-        value: 'accepted_by_administrative',
-        iconForeground: 'text-white',
-        iconBackground: 'bg-green-500',
-      },
-      {
-        text: 'Zatwierdzony',
-        icon: CheckIcon,
-        value: 'approved',
-        iconForeground: 'text-white',
-        iconBackground: 'bg-blumilk-500',
-      },
-      {
-        text: 'Anulowany',
-        icon: XIcon,
-        value: 'canceled',
-        iconForeground: 'text-white',
-        iconBackground: 'bg-gray-900',
-      },
-    ]
-    const statusInfo = computed(() => statuses.find(status => status.value === props.activity.state))
 
     return {
       statusInfo,

resources/js/Shared/Status.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="flex items-center">
     <component
-      :is="statusInfo.icon"
+      :is="statusInfo.solid.icon"
-      :class="[statusInfo.color ,'w-5 h-5 mr-1']"
+      :class="[statusInfo.solid.color ,'w-5 h-5 mr-1']"
     />
     <span>{{ statusInfo.text }}</span>
   </div>
 </template>
 
 <script>
-import {CheckIcon, ClockIcon, DocumentTextIcon, ThumbDownIcon, ThumbUpIcon, XIcon} from '@heroicons/vue/solid'
 import {computed} from 'vue'
+import {useStatusInfo} from '@/Composables/statusInfo'
 
 export default {
   name: 'VacationRequestStatus',
@@ -25,57 +25,7 @@ export default {
     },
   },
   setup(props) {
-    const statuses = [
+    const statusInfo = computed(() => useStatusInfo(props.status))
-      {
-        text: 'Utworzony',
-        icon: DocumentTextIcon,
-        value: 'created',
-        color: 'text-gray-400',
-      },
-      {
-        text: 'Czeka na akceptację od technicznego',
-        icon: ClockIcon,
-        value: 'waiting_for_technical',
-        color: 'text-amber-400',
-      },
-      {
-        text: 'Czeka na akceptację od administracyjnego',
-        icon: ClockIcon,
-        value: 'waiting_for_administrative',
-        color: 'text-amber-400',
-      },
-      {
-        text: 'Odrzucony',
-        icon: ThumbDownIcon,
-        value: 'rejected',
-        color: 'text-rose-600',
-      },
-      {
-        text: 'Zaakceptowany przez technicznego',
-        icon: ThumbUpIcon,
-        value: 'accepted_by_technical',
-        color: 'text-green-500',
-      },
-      {
-        text: 'Zaakceptowany przez administracyjnego',
-        icon: ThumbUpIcon,
-        value: 'accepted_by_administrative',
-        color: 'text-green-500',
-      },
-      {
-        text: 'Zatwierdzony',
-        icon: CheckIcon,
-        value: 'approved',
-        color: 'text-blumilk-500',
-      },
-      {
-        text: 'Anulowany',
-        icon: XIcon,
-        value: 'canceled',
-        color: 'text-gray-900',
-      },
-    ]
-    const statusInfo = computed(() => statuses.find(status => status.value === props.status))
 
     return {
       statusInfo,