#152 - added redirections

resources/js/Shared/ActiveComponent.js

@@ -1,39 +0,0 @@
-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/DayComponent.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="[ (day.isVacation || day.isPendingVacation) && 'border-b-2 border-dashed', day.isPendingVacation && 'border-lime-500', day.isVacation && 'border-blumilk-500' ]"
+    :class="[ (day.isVacation || day.isPendingVacation) && `border-b-2 border-dashed ${getVacationBorder(day)}` ]"
   >
     <Popper
       v-if="day.isHoliday"
@@ -39,13 +39,23 @@
         {{ 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>
+        <VacationPopup :vacation="getVacationInfo(day)" />
       </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"
     >
@@ -55,20 +65,27 @@
       >
         {{ day.dayNumber }}
       </time>
-    </div>
+    </InertiaLink>
   </div>
 </template>
 
 <script setup>
 import Popper from 'vue3-popper'
 import { defineProps, ref } from 'vue'
+import VacationPopup from '@/Shared/VacationPopup'
 
-const props = defineProps({
+defineProps({
   day: {
     type: Object,
     required: true,
   },
-  holidayDescription: {
+  getHolidayDescription: {
+    type: Function,
+  },
+  getVacationBorder: {
+    type: Function,
+  },
+  getVacationInfo: {
     type: Function,
   },
 })
@@ -84,9 +101,4 @@ function onMouseleave() {
   if (isActive.value)
     isActive.value = false
 }
-
-function getHolidayDescription(day) {
-  return props.holidayDescription(day)
-}
-
 </script>

resources/js/Shared/Widgets/VacationCalendar.vue

@@ -120,13 +120,15 @@
           class="w-full grid grid-cols-7 gap-px"
           :class="{ 'grid-rows-1': calendarState.viewMode.isWeek }"
         >
-          <DateComponent
+          <DayComponent
             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 }]"
-            :holiday-description="getHolidayDescription"
+            :get-holiday-description="getHolidayDescription"
+            :get-vacation-border="getVacationBorder"
+            :get-vacation-info="getVacationInfo"
           />
         </div>
       </div>
@@ -139,10 +141,11 @@ 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 DateComponent from '@/Shared/Widgets/Calendar/DateComponent'
+import DayComponent from '@/Shared/Widgets/Calendar/DayComponent'
 
 const props = defineProps({
   holidays: Object,
@@ -159,6 +162,7 @@ function getCurrentDate() {
 const currentDate = getCurrentDate()
 
 const months = useMonthInfo().getMonths()
+const { findType } = useVacationTypeInfo()
 const selectedYear = useCurrentYearPeriodInfo().year.value
 
 const calendar = {
@@ -349,6 +353,14 @@ 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">