#152 - added holidays

app/Infrastructure/Http/Controllers/DashboardController.php

@@ -13,10 +13,8 @@ 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;
 
@@ -59,20 +57,6 @@ class DashboardController extends Controller
 
         $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);
@@ -88,16 +72,6 @@ class DashboardController extends Controller
             "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

@@ -5,8 +5,6 @@
       <Welcome :user="auth.user" />
       <VacationCalendar
         :holidays="allHolidays"
-        :approved-vacations="approvedVacations"
-        :pending-vacations="pendingVacations"
       />
       <VacationStats :stats="stats" />
     </div>
@@ -55,7 +53,5 @@ defineProps({
   stats: Object,
   years: Object,
   allHolidays: Object,
-  approvedVacations: Object,
-  pendingVacations: Object,
 })
 </script>

resources/js/Shared/ActiveComponent.js

@@ -0,0 +1,39 @@
+import { h, ref } from 'vue'
+
+const ActiveComponent = function(props, { attrs, slots }) {
+  const key = props.pkey
+  const isActive = ref(false)
+
+  function onMouseover() {
+    console.log('activated ' + key)
+    isActive.value = true
+  }
+
+  function onMouseleave() {
+    console.log('disabled ' + key)
+    isActive.value = false
+  }
+
+  return h(props.as, {
+    ...attrs,
+    class: 'hello',
+    onMouseover,
+    onMouseleave,
+  }, [
+    slots,
+    slots.default({ isActive }),
+  ])
+}
+
+ActiveComponent.props = {
+  as: {
+    type: String,
+    default: 'div',
+  },
+  pkey: {
+    type: Number,
+    required: true,
+  },
+}
+
+export default ActiveComponent

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

@@ -1,7 +1,5 @@
 <template>
-  <div
+  <template>
-    :class="[ (day.isVacation || day.isPendingVacation) && `border-b-2 border-dashed ${getVacationBorder(day)}` ]"
-  >
     <Popper
       v-if="day.isHoliday"
       as="div"
@@ -23,27 +21,11 @@
         </div>
       </template>
     </Popper>
-    <Popper
+    <div
-      v-else-if="day.isPendingVacation"
+      v-else
-      as="div"
+      :class="{ 'hello': isActive && !day.isWeekend }"
-      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>
-        <VacationPopup :vacation="getVacationInfo(day)" />
-      </template>
-    </Popper>
-    <div
-      v-else-if="day.isWeekend"
     >
       <time
         :datetime="day.date"
@@ -52,40 +34,19 @@
         {{ day.dayNumber }}
       </time>
     </div>
-    <InertiaLink
+  </template>
-      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'
 
-defineProps({
+const props = defineProps({
   day: {
     type: Object,
     required: true,
   },
-  getHolidayDescription: {
+  holidaydescription: {
-    type: Function,
-  },
-  getVacationBorder: {
-    type: Function,
-  },
-  getVacationInfo: {
     type: Function,
   },
 })
@@ -101,4 +62,9 @@ function onMouseleave() {
   if (isActive.value)
     isActive.value = false
 }
-</script>
+
+function getHolidayDescription(day) {
+  return props.holidaydescription(day)
+}
+
+</script>

resources/js/Shared/Widgets/VacationCalendar.vue

@@ -120,15 +120,13 @@
           class="w-full grid grid-cols-7 gap-px"
           :class="{ 'grid-rows-1': calendarState.viewMode.isWeek }"
         >
-          <DayComponent
+          <DateComponent
             v-for="(day, index) in days"
             :key="index"
             :day="day"
             class="flex flex-col relative py-2 px-3"
             :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', { 'hover:bg-blumilk-25': day.isCurrentMonth && !day.isWeekend }, { 'day': calendarState.viewMode.isWeek }, { 'bg-red-100': day.isCurrentMonth && day.isWeekend }, { 'bg-red-50': !day.isCurrentMonth && day.isWeekend }, { 'text-red-800': day.isWeekend }]"
-            :get-holiday-description="getHolidayDescription"
+            :holidaydescription="getHolidayDescription"
-            :get-vacation-border="getVacationBorder"
-            :get-vacation-info="getVacationInfo"
           />
         </div>
       </div>
@@ -141,16 +139,13 @@ 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'
+import DateComponent from '@/Shared/Widgets/Calendar/DateComponent'
 
 const props = defineProps({
   holidays: Object,
-  approvedVacations: Object,
-  pendingVacations: Object,
 })
 
 let days = ref([])
@@ -162,7 +157,6 @@ function getCurrentDate() {
 const currentDate = getCurrentDate()
 
 const months = useMonthInfo().getMonths()
-const { findType } = useVacationTypeInfo()
 const selectedYear = useCurrentYearPeriodInfo().year.value
 
 const calendar = {
@@ -229,16 +223,13 @@ const customCalendar = {
     return days
   },
   prepareDay(day) {
-    const isCurrentMonth = isInCurrentMonth(day)
     return {
       date: day.toISODate(),
       dayNumber: day.day,
-      isCurrentMonth: isCurrentMonth,
+      isCurrentMonth: isInCurrentMonth(day),
       isToday: isToday(day),
       isWeekend: isWeekend(day),
       isHoliday: isHoliday(day),
-      isVacation: isCurrentMonth && isVacation(day),
-      isPendingVacation: isCurrentMonth && isPendingVacation(day),
     }
   },
 }
@@ -345,22 +336,6 @@ function isHoliday(date) {
 function getHolidayDescription(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 getVacationBorder(day) {
-  return findType(getVacationInfo(day).type)?.border
-}
-
-function getVacationInfo(day) {
-  return day.isVacation ? props.approvedVacations[day.date] : props.pendingVacations[day.date]
-}
 </script>
 
 <style lang="css">