#152 - updated style and added icons

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

@@ -13,7 +13,7 @@
         }
       ],
       day.isHoliday && 'font-bold cursor-default',
-      (day.isVacation || day.isPendingVacation) && `border-b-4 border-dashed ${getVacationBorder(day)}`
+      (day.isPendingVacation) && `border-b-4 border-dashed ${day.getVacationType.border} md:border-blumilk-600`
     ]"
   >
     <Popper
@@ -38,7 +38,7 @@
       </template>
     </Popper>
     <Popper
-      v-else-if="day.isPendingVacation"
+      v-else-if="day.isVacation || day.isPendingVacation"
       as="div"
       open-delay="200"
       hover
@@ -46,14 +46,21 @@
       @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>
+      <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="getVacationInfo(day)" />
+        <VacationPopup :vacation="day.getVacationInfo" />
       </template>
     </Popper>
     <div
@@ -89,6 +96,7 @@
 import Popper from 'vue3-popper'
 import { defineProps, ref } from 'vue'
 import VacationPopup from '@/Shared/VacationPopup'
+import VacationIcon from '@/Shared/VacationTypeCalendarIcon'
 
 defineProps({
   day: {
@@ -98,12 +106,6 @@ defineProps({
   getHolidayDescription: {
     type: Function,
   },
-  getVacationBorder: {
-    type: Function,
-  },
-  getVacationInfo: {
-    type: Function,
-  },
 })
 
 const isActive = ref(false)

resources/js/Shared/Widgets/VacationCalendar.vue

@@ -133,8 +133,6 @@
             class="flex flex-col relative py-2 px-3"
             :class="{ 'day': calendarState.viewMode.isWeek }"
             :get-holiday-description="getHolidayDescription"
-            :get-vacation-border="getVacationBorder"
-            :get-vacation-info="getVacationInfo"
           />
         </div>
       </div>
@@ -237,15 +235,21 @@ const customCalendar = {
   },
   prepareDay(day) {
     const isCurrentMonth = isInCurrentMonth(day)
-    return {
+    const startDay = {
       date: day.toISODate(),
+      isVacation: isCurrentMonth && isVacation(day),
+      isPendingVacation: isCurrentMonth && isPendingVacation(day),
+    }
+
+    return {
+      ...startDay,
       dayNumber: day.day,
-      isCurrentMonth: isCurrentMonth,
+      isCurrentMonth,
       isToday: isToday(day),
       isWeekend: isWeekend(day),
       isHoliday: isHoliday(day),
-      isVacation: isCurrentMonth && isVacation(day),
-      isPendingVacation: isCurrentMonth && isPendingVacation(day),
+      getVacationType: startDay.isVacation || startDay.isPendingVacation ? getVacationType(startDay) : undefined,
+      getVacationInfo: startDay.isVacation || startDay.isPendingVacation ? getVacationInfo(startDay) : undefined,
     }
   },
 }
@@ -365,6 +369,10 @@ function getVacationBorder(day) {
   return findType(getVacationInfo(day).type)?.border
 }
 
+function getVacationType(day) {
+  return findType(getVacationInfo(day).type)
+}
+
 function getVacationInfo(day) {
   return day.isVacation ? props.approvedVacations[day.date] : props.pendingVacations[day.date]
 }