#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

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="[ (day.isVacation || day.isPendingVacation) && `border-b-2 border-dashed ${getVacationBorder(day)}` ]"
+    :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"
@@ -39,23 +39,13 @@
         {{ day.dayNumber }}
       </time>
       <template #content>
-        <VacationPopup :vacation="getVacationInfo(day)" />
+        <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-if="day.isWeekend"
-    >
-      <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>
-    <InertiaLink
       v-else
-      href="/vacation/requests/create"
-      :data="{ 'from_date': day.date }"
       @mouseover.passive="onMouseover"
       @mouseleave="onMouseleave"
     >
@@ -65,27 +55,20 @@
       >
         {{ day.dayNumber }}
       </time>
-    </InertiaLink>
+    </div>
   </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: {
-    type: Function,
-  },
-  getVacationBorder: {
-    type: Function,
-  },
-  getVacationInfo: {
+  holidayDescription: {
     type: Function,
   },
 })
@@ -101,4 +84,9 @@ function onMouseleave() {
   if (isActive.value)
     isActive.value = false
 }
+
+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"
-            :get-vacation-border="getVacationBorder"
-            :get-vacation-info="getVacationInfo"
+            :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,7 +159,6 @@ function getCurrentDate() {
 const currentDate = getCurrentDate()
 
 const months = useMonthInfo().getMonths()
-const { findType } = useVacationTypeInfo()
 const selectedYear = useCurrentYearPeriodInfo().year.value
 
 const calendar = {
@@ -353,14 +349,6 @@ function isVacation(date) {
 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">