- small improvements

app/Infrastructure/Http/Controllers/DashboardController.php

@@ -12,8 +12,11 @@ use Toby\Domain\UserVacationStatsRetriever;
 use Toby\Domain\VacationRequestStatesRetriever;
 use Toby\Domain\VacationTypeConfigRetriever;
 use Toby\Eloquent\Helpers\YearPeriodRetriever;
+use Toby\Eloquent\Models\Holiday;
+use Toby\Eloquent\Models\Vacation;
 use Toby\Eloquent\Models\VacationRequest;
 use Toby\Infrastructure\Http\Resources\HolidayResource;
+use Toby\Infrastructure\Http\Resources\SimpleVacationRequestResource;
 use Toby\Infrastructure\Http\Resources\VacationRequestResource;
 use Toby\Infrastructure\Http\Resources\VacationResource;
 
@@ -54,6 +57,22 @@ class DashboardController extends Controller
             ->limit(3)
             ->get();
 
+        $allHolidays = $yearPeriod->holidays;
+
+        $approvedVacations = $request->user()
+            ->vacations()
+            ->with("vacationRequest.vacations")
+            ->whereBelongsTo($yearPeriod)
+            ->approved()
+            ->get();
+
+        $pendingVacations = $request->user()
+            ->vacations()
+            ->with("vacationRequest.vacations")
+            ->whereBelongsTo($yearPeriod)
+            ->pending()
+            ->get();
+
         $limit = $vacationStatsRetriever->getVacationDaysLimit($user, $yearPeriod);
         $used = $vacationStatsRetriever->getUsedVacationDays($user, $yearPeriod);
         $pending = $vacationStatsRetriever->getPendingVacationDays($user, $yearPeriod);
@@ -66,6 +85,19 @@ class DashboardController extends Controller
             "remoteDays" => VacationResource::collection($remoteDays),
             "vacationRequests" => VacationRequestResource::collection($vacationRequests),
             "holidays" => HolidayResource::collection($holidays),
+            "allHolidays" => $allHolidays->mapWithKeys(
+                fn(Holiday $holiday): array => [$holiday->date->toDateString() => $holiday->name],
+            ),
+            "approvedVacations" => $approvedVacations->mapWithKeys(
+                fn(Vacation $vacation): array => [
+                    $vacation->date->toDateString() => new SimpleVacationRequestResource($vacation->vacationRequest),
+                ],
+            ),
+            "pendingVacations" => $pendingVacations->mapWithKeys(
+                fn(Vacation $vacation): array => [
+                    $vacation->date->toDateString() => new SimpleVacationRequestResource($vacation->vacationRequest),
+                ],
+            ),
             "stats" => [
                 "limit" => $limit,
                 "remaining" => $remaining,

resources/js/Pages/Dashboard.vue

@@ -3,7 +3,11 @@
   <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" />
-      <VacationCalendar />
+      <VacationCalendar
+        :holidays="allHolidays"
+        :approved-vacations="approvedVacations"
+        :pending-vacations="pendingVacations"
+      />
       <VacationStats :stats="stats" />
     </div>
     <div class="grid grid-cols-1 gap-4">
@@ -50,5 +54,8 @@ defineProps({
   can: Object,
   stats: Object,
   years: Object,
+  allHolidays: Object,
+  approvedVacations: Object,
+  pendingVacations: Object,
 })
 </script>

resources/js/Shared/Widgets/Calendar/DayComponent.vue

@@ -0,0 +1,120 @@
+<template>
+  <div
+    class="box-border"
+    :class="[
+      day.isCurrentMonth ? {
+        'bg-red-100': day.isWeekend,
+        'bg-white hover:bg-blumilk-25': !day.isWeekend && !day.isHoliday,
+        'bg-red-100 text-red-800': day.isHoliday || day.isWeekend
+      } : [
+        'bg-gray-50 text-gray-500',
+        {
+          'bg-red-50': day.isWeekend
+        }
+      ],
+      day.isHoliday && 'font-bold cursor-default',
+      (day.isPendingVacation) && `border-b-4 border-dashed ${day.getVacationType.border}`,
+      (day.isVacation) && `border-b-4 ${day.getVacationType.border}`
+    ]"
+  >
+    <Popper
+      v-if="day.isHoliday"
+      as="div"
+      open-delay="200"
+      hover
+      offset-distance="0"
+      @mouseover.passive="onMouseover"
+      @mouseleave="onMouseleave"
+    >
+      <time
+        :datetime="day.date"
+        :class="[ day.isToday && 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white' ]"
+      >
+        {{ day.dayNumber }}
+      </time>
+      <template #content>
+        <div class="py-2 px-6 text-sm font-semibold text-left text-gray-700 bg-white rounded-lg border border-gray-400">
+          {{ day.getHolidayInfo }}
+        </div>
+      </template>
+    </Popper>
+    <Popper
+      v-else-if="day.isVacation || day.isPendingVacation"
+      as="div"
+      open-delay="200"
+      hover
+      offset-distance="0"
+      @mouseover.passive="onMouseover"
+      @mouseleave="onMouseleave"
+    >
+      <div class="flex justify-between">
+        <time
+          :datetime="day.date"
+          :class="[ day.isToday && 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white' ]"
+        >
+          {{ day.dayNumber }}
+        </time>
+        <div class="hidden md:inline-block">
+          <VacationIcon
+            :type="day.getVacationType.value"
+          />
+        </div>
+      </div>
+      <template #content>
+        <VacationPopup :vacation="day.getVacationInfo" />
+      </template>
+    </Popper>
+    <div
+      v-else-if="day.isWeekend"
+      class="text-red-800"
+    >
+      <time
+        :datetime="day.date"
+        class="cursor-default"
+        :class="{ 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white': day.isToday }"
+      >
+        {{ day.dayNumber }}
+      </time>
+    </div>
+    <InertiaLink
+      v-else
+      href="/vacation/requests/create"
+      :data="{ 'from_date': day.date }"
+      @mouseover.passive="onMouseover"
+      @mouseleave="onMouseleave"
+    >
+      <time
+        :datetime="day.date"
+        :class="{ 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white': day.isToday }"
+      >
+        {{ day.dayNumber }}
+      </time>
+    </InertiaLink>
+  </div>
+</template>
+
+<script setup>
+import Popper from 'vue3-popper'
+import { defineProps, ref } from 'vue'
+import VacationPopup from '@/Shared/VacationPopup'
+import VacationIcon from '@/Shared/VacationTypeCalendarIcon'
+
+defineProps({
+  day: {
+    type: Object,
+    required: true,
+  },
+})
+
+const isActive = ref(false)
+
+function onMouseover() {
+  if (!isActive.value)
+    isActive.value = true
+}
+
+function onMouseleave() {
+  if (isActive.value)
+    isActive.value = false
+}
+</script>

resources/js/Shared/Widgets/VacationCalendar.vue

@@ -7,10 +7,10 @@
       <div class="flex justify-center">
         <div class="flex items-center rounded-md shadow-sm md:items-stretch">
           <button
-            v-if="calendarState.isPrevious"
             type="button"
-            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"
-            @click="toLast"
+            class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 py-2 pl-3 pr-4 text-gray-400 focus:relative md:w-9 md:px-2"
+            :class="[ calendarState.isPrevious ? 'bg-white hover:text-gray-500 md:hover:bg-gray-50' : 'bg-gray-100' ]"
+            @click="toPrevious"
           >
             <span class="sr-only">Poprzedni {{ calendarState.viewMode.details.shortcut }}</span>
             <ChevronLeftIcon
@@ -21,16 +21,18 @@
           <button
             type="button"
             class="hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block"
-            :class="{ 'rounded-l-md border border-r-0': !calendarState.isPrevious, 'rounded-r-md border border-l-0': !calendarState.isNext }"
             @click="goToToday"
           >
-            Dziś
+            Dzisiaj
           </button>
-          <span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden" />
+          <span
+            class="relative -mx-px h-5 w-px bg-gray-300 md:hidden z-10"
+          />
           <button
-            v-if="calendarState.isNext"
             type="button"
-            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 py-2 pl-4 pr-3 text-gray-400 focus:relative md:w-9 md:px-2"
+            :class="[ calendarState.isNext ? 'bg-white hover:text-gray-500 md:hover:bg-gray-50' : 'bg-gray-100' ]"
+            :disabled="!calendarState.isNext"
             @click="toNext"
           >
             <span class="sr-only">Następny {{ calendarState.viewMode.details.shortcut }}</span>
@@ -49,7 +51,8 @@
           type="button"
           class="flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
         >
-          {{ calendarState.viewMode.details.name }}
+          <span class="md:hidden">{{ calendarState.viewMode.details.shortcut }}</span>
+          <span class="hidden md:inline-block">{{ calendarState.viewMode.details.name }}</span>
           <ChevronDownIcon
             class="ml-2 h-5 w-5 text-gray-400"
             aria-hidden="true"
@@ -93,25 +96,25 @@
         v-if="calendarState.viewMode.isMonth"
         class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none"
       >
-        <div class="bg-white py-2">
+        <div class="py-2 bg-white">
           Pn
         </div>
-        <div class="bg-white py-2">
+        <div class="py-2 bg-white">
           Wt
         </div>
-        <div class="bg-white py-2">
+        <div class="py-2 bg-white">
           Śr
         </div>
-        <div class="bg-white py-2">
+        <div class="py-2 bg-white">
           Cz
         </div>
-        <div class="bg-white py-2">
+        <div class="py-2 bg-white">
           Pt
         </div>
-        <div class="bg-red-100 py-2">
+        <div class="py-2 bg-red-100 text-red-800">
           Sb
         </div>
-        <div class="bg-red-100 py-2">
+        <div class="py-2 bg-red-100 text-red-800">
           Nd
         </div>
       </div>
@@ -120,19 +123,13 @@
           class="w-full grid grid-cols-7 gap-px"
           :class="{ 'grid-rows-1': calendarState.viewMode.isWeek }"
         >
-          <div
+          <DayComponent
             v-for="(day, index) in days"
             :key="index"
-            class="flex flex-col"
-            :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', calendarState.viewMode.isWeek && index !== 0 && (index % 5 === 0 || index % 6 === 0) ? 'bg-red-100' : undefined, calendarState.viewMode.isWeek ? 'day' : 'month-day', 'relative py-2 px-3']"
-          >
-            <time
-              :datetime="day.date"
-              :class="day.isToday ? 'flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white' : undefined"
-            >
-              {{ day.date.split('-').pop().replace(/^0/, '') }}
-            </time>
-          </div>
+            :day="day"
+            class="flex flex-col relative py-2 px-3"
+            :class="{ 'day': calendarState.viewMode.isWeek }"
+          />
         </div>
       </div>
     </div>
@@ -144,19 +141,31 @@ import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import { ref, watch, computed, reactive } from 'vue'
 import { DateTime } from 'luxon'
+import useVacationTypeInfo from '@/Composables/vacationTypeInfo'
 import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
 import { useMonthInfo } from '@/Composables/monthInfo'
 import { viewModes, find as findViewMode } from '@/Shared/Widgets/Calendar/ViewModeOptions'
+import DayComponent from '@/Shared/Widgets/Calendar/DayComponent'
+
+const props = defineProps({
+  holidays: Object,
+  approvedVacations: Object,
+  pendingVacations: Object,
+})
 
 let days = ref([])
-const months = useMonthInfo().getMonths()
+
 function getCurrentDate() {
   const { year, month, weekNumber } = DateTime.now()
   return { year, month, week: weekNumber }
 }
-const selectedYear = useCurrentYearPeriodInfo().year.value
 const currentDate = getCurrentDate()
 
+const months = useMonthInfo().getMonths()
+const { findType } = useVacationTypeInfo()
+const selectedYear = useCurrentYearPeriodInfo().year.value
+const weeksInYear = DateTime.fromObject({ year: selectedYear, month: 12, day: 31 }).weekNumber
+
 const calendar = {
   viewMode: ref('week'),
   currents: reactive({
@@ -175,7 +184,7 @@ const calendarState = reactive({
   monthName: computed(() => months[calendar.currents.month - 1]?.name),
   isActualYear: computed(() => calendar.currents.year === DateTime.now().year),
   isPrevious: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 1 : calendar.currents.week > 0),
-  isNext: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 12 : calendar.currents.week < DateTime.fromObject({ year: selectedYear, month: 12, day: 31 }).weekNumber),
+  isNext: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 12 : calendar.currents.week < weeksInYear),
 })
 
 const customCalendar = {
@@ -221,11 +230,23 @@ const customCalendar = {
     return days
   },
   prepareDay(day) {
-    return {
+    const isCurrentMonth = isInCurrentMonth(day)
+    const startDay = {
       date: day.toISODate(),
+      isVacation: isCurrentMonth && isVacation(day),
+      isPendingVacation: isCurrentMonth && isPendingVacation(day),
+      isHoliday: isHoliday(day),
+    }
+
+    return {
+      ...startDay,
       dayNumber: day.day,
-      isCurrentMonth: isInCurrentMonth(day),
+      isCurrentMonth,
       isToday: isToday(day),
+      isWeekend: isWeekend(day),
+      getHolidayInfo: startDay.isHoliday ? getHolidayInfo(startDay) : undefined,
+      getVacationType: startDay.isVacation || startDay.isPendingVacation ? getVacationType(startDay) : undefined,
+      getVacationInfo: startDay.isVacation || startDay.isPendingVacation ? getVacationInfo(startDay) : undefined,
     }
   },
 }
@@ -236,18 +257,22 @@ watch([calendar.viewMode, calendar.currents], () => {
 
 customCalendar.loadCalendar()
 
-function toLast() {
-  if (calendar.viewMode.value === 'week')
-    minusWeek()
-  else
-    minusMonth()
+function toPrevious() {
+  if (calendarState.isPrevious) {
+    if (calendar.viewMode.value === 'week')
+      minusWeek()
+    else
+      minusMonth()
+  }
 }
 
 function toNext() {
-  if (calendar.viewMode.value === 'week')
-    addWeek()
-  else
-    addMonth()
+  if (calendarState.isNext) {
+    if (calendar.viewMode.value === 'week')
+      addWeek()
+    else
+      addMonth()
+  }
 }
 
 function resetCalendar(config = {}) {
@@ -256,7 +281,7 @@ function resetCalendar(config = {}) {
 
   calendar.currents.year = isUndefined(config.year) ? selectedYear : config.month
   calendar.currents.month = calendarState.isActualYear || !isUndefined(config.year) ? currentMonth : 1
-  calendar.currents.week = calendarState.isActualYear || !isUndefined(config.year) ? currentWeek : 1
+  calendar.currents.week = calendarState.isActualYear || !isUndefined(config.week) ? currentWeek : 0
 }
 
 function isUndefined(value) {
@@ -307,7 +332,7 @@ function goToToday() {
 
 function updateViewMode(type) {
   if (type === 'month')
-    resetCalendar({ week: 1 })
+    resetCalendar({ week: 0 })
   else
     resetCalendar()
   calendar.viewMode.value = type
@@ -317,9 +342,37 @@ function isInCurrentMonth(date) {
   return calendar.currents.month === date.month
 }
 
+function isWeekend(date) {
+  return date.weekday === 6 || date.weekday === 7
+}
+
 function isToday(date) {
   return date.toISODate() === DateTime.local().toISODate()
 }
+
+function isHoliday(date) {
+  return props.holidays[date.toISODate()] !== undefined
+}
+
+function getHolidayInfo(day) {
+  return props.holidays[day.date]
+}
+
+function isVacation(date) {
+  return props.approvedVacations[date.toISODate()] !== undefined
+}
+
+function isPendingVacation(date) {
+  return props.pendingVacations[date.toISODate()] !== undefined
+}
+
+function getVacationType(day) {
+  return findType(getVacationInfo(day).type)
+}
+
+function getVacationInfo(day) {
+  return day.isVacation ? props.approvedVacations[day.date] : props.pendingVacations[day.date]
+}
 </script>
 
 <style lang="css">
@@ -343,11 +396,6 @@ function isToday(date) {
   content: "Pt";
 }
 
-.day:nth-of-type(7n - 1):before,
-.day:nth-of-type(7n):before {
-  color: #991b1b;
-}
-
 .day:nth-of-type(7n - 1):before {
   content: "Sb";
 }
@@ -355,8 +403,4 @@ function isToday(date) {
 .day:nth-of-type(7n):before {
   content: "Nd";
 }
-
-.month-day:nth-of-type(7n - 1), .month-day:nth-of-type(7n) {
-  background-color: #fee2e2;
-}
 </style>