resources/js/Pages/AnnualSummary.vue

@@ -39,7 +39,7 @@
                 offset-distance="0"
               >
                 <div :class="[day.isPendingVacation && 'mx-0.5']">
-                  <button :class="[day.isPendingVacation && `border-dashed`, `${getVacationBorder(day)} isolate bg-white w-full hover:bg-blumilk-25 border-b-4 py-1.5 font-medium focus:outline-blumilk-500`]">
+                  <button :class="[day.isPendingVacation && `border-dashed`, `${getVacationBorder(day)} isolate bg-white w-full hover:bg-blumilk-25 border-b-4 py-1.5 font-medium focus:outline-blumilk-500 cursor-default`]">
                     <time
                       :datetime="day.date.toISODate()"
                       :class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'mx-auto flex h-7 w-7 p-4 items-center justify-center']"
@@ -58,7 +58,7 @@
                 hover
                 offset-distance="0"
               >
-                <button class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent focus:outline-blumilk-500">
+                <button class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent focus:outline-blumilk-500 cursor-default">
                   <time
                     :datetime="day.date.toISODate()"
                     :class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'text-red-700 font-bold mx-auto flex h-7 w-7 p-4 items-center justify-center']"
@@ -73,16 +73,44 @@
                 </template>
               </Popper>
               <button
-                v-else
+                v-else-if="day.isWeekend"
-                class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent focus:outline-blumilk-500"
+                class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent focus:outline-blumilk-500 hover:bg-transparent cursor-not-allowed"
               >
                 <time
                   :datetime="day.date.toISODate()"
-                  :class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', day.isWeekend && 'text-red-700 font-bold', 'mx-auto flex h-7 w-7 p-4 items-center justify-center']"
+                  class="text-red-700 font-bold mx-auto flex h-7 w-7 p-4 items-center justify-center"
                 >
                   {{ day.date.day }}
                 </time>
               </button>
+              <template
+                v-else
+              >
+                <InertiaLink
+                  v-if="day.isFuture"
+                  href="/vacation/requests/create"
+                  :data="{ 'start_date': day.date.toISODate() }"
+                  class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent focus:outline-blumilk-500"
+                >
+                  <time
+                    :datetime="day.date.toISODate()"
+                    :class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'mx-auto flex h-7 w-7 p-4 items-center justify-center']"
+                  >
+                    {{ day.date.day }}
+                  </time>
+                </InertiaLink>
+                <button
+                  v-else
+                  class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent focus:outline-blumilk-500 hover:bg-transparent cursor-not-allowed"
+                >
+                  <time
+                    :datetime="day.date.toISODate()"
+                    class="mx-auto flex h-7 w-7 p-4 items-center justify-center"
+                  >
+                    {{ day.date.day }}
+                  </time>
+                </button>
+              </template>
             </template>
             <div
               v-else
@@ -101,6 +129,15 @@
   </div>
 </template>
 
+<style lang="css">
+.cursor-default {
+  cursor: auto;
+}
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+</style>
+
 <script setup>
 import { DateTime } from 'luxon'
 import useVacationTypeInfo from '@/Composables/vacationTypeInfo'
@@ -112,6 +149,7 @@ const props = defineProps({
   holidays: Object,
   vacations: Object,
   pendingVacations: Object,
+  overButtonDay: String,
 })
 
 const { findType } = useVacationTypeInfo()
@@ -141,6 +179,7 @@ for (let i = 1; i < 13; i++) {
       isVacation: isCurrentMonth && isVacation(day),
       isPendingVacation: isCurrentMonth && isPendingVacation(day),
       isHoliday: isHoliday(day),
+      isFuture: isFuture(day),
     })
   }
 
@@ -163,6 +202,10 @@ function isToday(date) {
   return DateTime.now().hasSame(date, 'year') && DateTime.now().hasSame(date, 'day')
 }
 
+function isFuture(date) {
+  return date.toISODate().toString() >= DateTime.now().toISODate().toString()
+}
+
 function isInCurrentMonth(date, currentMonth) {
   return currentMonth.hasSame(date, 'month')
 }