#152 - added vacations

resources/js/Pages/Dashboard.vue

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

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

@@ -1,5 +1,7 @@
 <template>
-  <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"
@@ -21,9 +23,29 @@
         </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
-      :class="{ 'hello': isActive && !day.isWeekend }"
       @mouseover.passive="onMouseover"
       @mouseleave="onMouseleave"
     >
@@ -34,7 +56,7 @@
         {{ day.dayNumber }}
       </time>
     </div>
-  </template>
+  </div>
 </template>
 
 <script setup>
@@ -46,7 +68,7 @@ const props = defineProps({
     type: Object,
     required: true,
   },
-  holidaydescription: {
+  holidayDescription: {
     type: Function,
   },
 })
@@ -64,7 +86,7 @@ function onMouseleave() {
 }
 
 function getHolidayDescription(day) {
-  return props.holidaydescription(day)
+  return props.holidayDescription(day)
 }
 
 </script>

resources/js/Shared/Widgets/VacationCalendar.vue

@@ -126,7 +126,7 @@
             :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 }]"
-            :holidaydescription="getHolidayDescription"
+            :holiday-description="getHolidayDescription"
           />
         </div>
       </div>
@@ -146,6 +146,8 @@ import DateComponent from '@/Shared/Widgets/Calendar/DateComponent'
 
 const props = defineProps({
   holidays: Object,
+  approvedVacations: Object,
+  pendingVacations: Object,
 })
 
 let days = ref([])
@@ -223,13 +225,16 @@ const customCalendar = {
     return days
   },
   prepareDay(day) {
+    const isCurrentMonth = isInCurrentMonth(day)
     return {
       date: day.toISODate(),
       dayNumber: day.day,
-      isCurrentMonth: isInCurrentMonth(day),
+      isCurrentMonth: isCurrentMonth,
       isToday: isToday(day),
       isWeekend: isWeekend(day),
       isHoliday: isHoliday(day),
+      isVacation: isCurrentMonth && isVacation(day),
+      isPendingVacation: isCurrentMonth && isPendingVacation(day),
     }
   },
 }
@@ -336,6 +341,14 @@ 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
+}
 </script>
 
 <style lang="css">