#152 - added vacations

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

@@ -0,0 +1,92 @@
+<template>
+  <div
+    :class="[ (day.isVacation || day.isPendingVacation) && 'border-b-2 border-dashed', day.isPendingVacation && 'border-lime-500', day.isVacation && 'border-blumilk-500' ]"
+  >
+    <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', 'text-red-600' ]"
+      >
+        {{ 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">
+          {{ getHolidayDescription(day) }}
+        </div>
+      </template>
+    </Popper>
+    <Popper
+      v-else-if="day.isPendingVacation"
+      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">
+          {{ getHolidayDescription(day) }}
+        </div>
+      </template>
+    </Popper>
+    <div
+      v-else
+      @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>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Popper from 'vue3-popper'
+import { defineProps, ref } from 'vue'
+
+const props = defineProps({
+  day: {
+    type: Object,
+    required: true,
+  },
+  holidayDescription: {
+    type: Function,
+  },
+})
+
+const isActive = ref(false)
+
+function onMouseover() {
+  if (!isActive.value)
+    isActive.value = true
+}
+
+function onMouseleave() {
+  if (isActive.value)
+    isActive.value = false
+}
+
+function getHolidayDescription(day) {
+  return props.holidayDescription(day)
+}
+
+</script>

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

@@ -1,120 +0,0 @@
-<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 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"
+            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"
           >
             <span class="sr-only">Poprzedni {{ calendarState.viewMode.details.shortcut }}</span>
             <ChevronLeftIcon
@@ -21,18 +21,16 @@
           <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"
           >
-            Dzisiaj
+            Dziś
           </button>
-          <span
-            class="relative -mx-px h-5 w-px bg-gray-300 md:hidden z-10"
-          />
+          <span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden" />
           <button
+            v-if="calendarState.isNext"
             type="button"
-            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"
+            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"
             @click="toNext"
           >
             <span class="sr-only">Następny {{ calendarState.viewMode.details.shortcut }}</span>
@@ -51,8 +49,7 @@
           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"
         >
-          <span class="md:hidden">{{ calendarState.viewMode.details.shortcut }}</span>
-          <span class="hidden md:inline-block">{{ calendarState.viewMode.details.name }}</span>
+          {{ calendarState.viewMode.details.name }}
           <ChevronDownIcon
             class="ml-2 h-5 w-5 text-gray-400"
             aria-hidden="true"
@@ -96,25 +93,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="py-2 bg-white">
+        <div class="bg-white py-2">
           Pn
         </div>
-        <div class="py-2 bg-white">
+        <div class="bg-white py-2">
           Wt
         </div>
-        <div class="py-2 bg-white">
+        <div class="bg-white py-2">
           Śr
         </div>
-        <div class="py-2 bg-white">
+        <div class="bg-white py-2">
           Cz
         </div>
-        <div class="py-2 bg-white">
+        <div class="bg-white py-2">
           Pt
         </div>
-        <div class="py-2 bg-red-100 text-red-800">
+        <div class="bg-red-100 py-2">
           Sb
         </div>
-        <div class="py-2 bg-red-100 text-red-800">
+        <div class="bg-red-100 py-2">
           Nd
         </div>
       </div>
@@ -123,12 +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': calendarState.viewMode.isWeek }"
+            :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 }]"
+            :holiday-description="getHolidayDescription"
           />
         </div>
       </div>
@@ -141,11 +139,10 @@ 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,
@@ -162,9 +159,7 @@ function getCurrentDate() {
 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'),
@@ -184,7 +179,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 < weeksInYear),
+  isNext: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 12 : calendar.currents.week < DateTime.fromObject({ year: selectedYear, month: 12, day: 31 }).weekNumber),
 })
 
 const customCalendar = {
@@ -231,22 +226,15 @@ const customCalendar = {
   },
   prepareDay(day) {
     const isCurrentMonth = isInCurrentMonth(day)
-    const startDay = {
-      date: day.toISODate(),
-      isVacation: isCurrentMonth && isVacation(day),
-      isPendingVacation: isCurrentMonth && isPendingVacation(day),
-      isHoliday: isHoliday(day),
-    }
-
     return {
-      ...startDay,
+      date: day.toISODate(),
       dayNumber: day.day,
-      isCurrentMonth,
+      isCurrentMonth: 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,
+      isHoliday: isHoliday(day),
+      isVacation: isCurrentMonth && isVacation(day),
+      isPendingVacation: isCurrentMonth && isPendingVacation(day),
     }
   },
 }
@@ -257,22 +245,18 @@ watch([calendar.viewMode, calendar.currents], () => {
 
 customCalendar.loadCalendar()
 
-function toPrevious() {
-  if (calendarState.isPrevious) {
-    if (calendar.viewMode.value === 'week')
-      minusWeek()
-    else
-      minusMonth()
-  }
+function toLast() {
+  if (calendar.viewMode.value === 'week')
+    minusWeek()
+  else
+    minusMonth()
 }
 
 function toNext() {
-  if (calendarState.isNext) {
-    if (calendar.viewMode.value === 'week')
-      addWeek()
-    else
-      addMonth()
-  }
+  if (calendar.viewMode.value === 'week')
+    addWeek()
+  else
+    addMonth()
 }
 
 function resetCalendar(config = {}) {
@@ -354,7 +338,7 @@ function isHoliday(date) {
   return props.holidays[date.toISODate()] !== undefined
 }
 
-function getHolidayInfo(day) {
+function getHolidayDescription(day) {
   return props.holidays[day.date]
 }
 
@@ -365,14 +349,6 @@ function isVacation(date) {
 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">