#22 - wip

app/Eloquent/Models/User.php

@@ -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) {

app/Infrastructure/Http/Controllers/VacationCalendarController.php

@@ -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,
+        };
+    }
 }

resources/js/Pages/Calendar.vue

@@ -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ń
+                    {{ selectedMonth.name }}
-                    <ChevronDownIcon
+                    <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" />
-                      class="-mr-1 ml-2 h-5 w-5"
-                      aria-hidden="true"
-                    />
                   </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>
+                      <MenuItem
-                        <a
+                        v-for="(month, index) in months"
-                          href="#"
+                        :key="index"
-                          class="text-gray-900 block px-4 py-2 text-sm"
+                        v-slot="{ active }"
-                        >Styczeń</a>
+                      >
-                      </MenuItem>
+                        <InertiaLink
-                      <MenuItem>
+                          href="/vacation-calendar"
-                        <a
+                          :data="{ month: month.value }"
-                          href="#"
+                          :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex w-full font-normal px-4 py-2 text-sm']"
-                          class="text-gray-900 block px-4 py-2 text-sm"
+                        >
-                        >Luty</a>
+                          {{ month.name }}
-                      </MenuItem>
+                          <CheckIcon
-                      <MenuItem>
+                            v-if="currentMonth === month.value"
-                        <a
+                            class="h-5 w-5 text-blumilk-500 ml-2"
-                          href="#"
+                          />
-                          class="text-gray-900 block px-4 py-2 text-sm"
+                        </InertiaLink>
-                        >Marzec</a>
                       </MenuItem>
                     </div>
                   </MenuItems>
@@ -63,43 +59,63 @@
               </Menu>
             </th>
             <th
-              v-for="i in 31"
+              v-for="day in calendar"
-              :key="i"
+              :key="day.dayOfMonth"
-              class="border border-gray-300 font-semibold text-gray-900 py-4 px-2 bg-gray-50"
+              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 }}
+              <div>
-              <p class="text-gray-800 font-normal mt-1">
+                {{ day.dayOfMonth }}
-                Pt
+                <p class="font-normal mt-1 text-sm capitalize">
-              </p>
+                  {{ day.dayOfWeek }}
+                </p>
+              </div>
             </th>
           </tr>
         </thead>
         <tbody>
           <tr
-            v-for="user in users.data"
+            v-for="userVacation in userVacations"
-            :key="user.id"
+            :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"
+              v-for="day in calendar"
-              :key="i"
+              :key="day.dayOfMonth"
-              class="border border-gray-300 bg-blumilk-25"
+              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>

resources/js/Shared/Layout/AppLayout.vue

@@ -1,22 +1,19 @@
 <template>
-    <div class="min-h-full">
+  <div class="min-h-full">
-        <MainMenu />
+    <MainMenu />
-        <main class="lg:ml-64 flex flex-col flex-1 py-8">
+    <main class="lg:ml-64 flex flex-col flex-1 py-8">
-            <div>
+      <div>
-<!--                <div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8 lg:max-w-7xl">-->
+        <slot />
-                <div>
+      </div>
-                    <slot />
+    </main>
-                </div>
+  </div>
-            </div>
-        </main>
-    </div>
 </template>
 
 <script>
-import MainMenu from '@/Shared/MainMenu';
+import MainMenu from '@/Shared/MainMenu'
 
 export default {
-    name: 'AppLayout',
+  name: 'AppLayout',
-    components: {MainMenu},
+  components: {MainMenu},
-};
+}
 </script>

resources/js/Shared/MainMenu.vue

@@ -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>{{
+                <span class="hidden ml-3 text-gray-700 text-sm font-medium lg:block">
-                  user.name
+                  <span class="sr-only">Open user menu for </span>
-                }}</span>
+                  {{ user.name }}
+                </span>
                 <ChevronDownIcon
                   class="hidden flex-shrink-0 ml-1 h-5 w-5 text-gray-400 lg:block"
                   aria-hidden="true"