#157 - prepared clikable days for calendar of holidays

app/Domain/CalendarGenerator.php

@@ -42,6 +42,7 @@ class CalendarGenerator
                 "isToday" => $day->isToday(),
                 "isWeekend" => $day->isWeekend(),
                 "isHoliday" => $holidays->contains($day),
+                "isFuture" => $day->isToday() || $day >= Carbon::now(),
                 "vacations" => $vacationsForDay->pluck("user_id"),
                 "vacationTypes" => $vacationsForDay->pluck("vacationRequest.type", "user_id"),
             ];

resources/js/Composables/vacationTypeInfo.js

@@ -9,6 +9,7 @@ import CalendarCheckIcon from 'vue-material-design-icons/CalendarCheck.vue'
 import MedicalBagIcon from 'vue-material-design-icons/MedicalBag.vue'
 import CalendarRemoveIcon from 'vue-material-design-icons/CalendarRemove.vue'
 import HomeCityIcon from 'vue-material-design-icons/HomeCity.vue'
+import BookPlusIcon from 'vue-material-design-icons/BookPlus.vue'
 
 const types = [
   {
@@ -88,6 +89,13 @@ const types = [
     color: 'text-lime-500',
     border: 'border-lime-500',
   },
+  {
+    text: 'Złóż wniosek',
+    value: 'create',
+    icon: BookPlusIcon,
+    color: 'text-blumilk-700',
+    border: 'border-lime-500',
+  },
 ]
 
 export default function useVacationTypeInfo() {

resources/js/Pages/Calendar.vue

@@ -100,7 +100,9 @@
               v-for="day in calendar"
               :key="day.dayOfMonth"
               class="border border-gray-300"
-              :class="{ 'bg-blumilk-25': day.isToday, 'bg-red-100': day.isWeekend || day.isHoliday}"
+              :class="{ 'bg-blumilk-25': day.isToday, 'bg-red-100': day.isWeekend || day.isHoliday }"
+              @mouseover="setActiveBtn(user.id.toString() + '' + day.date)"
+              @mouseleave="unsetActiveBtn"
             >
               <div
                 v-if="day.vacations.includes(user.id)"
@@ -108,6 +110,18 @@
               >
                 <VacationTypeCalendarIcon :type="day.vacationTypes[user.id]" />
               </div>
+              <InertiaLink
+                v-else-if="isActiveBtn(user.id.toString() + '' + day.date) && !day.isWeekend && !day.isHoliday && day.isFuture"
+                href="/vacation/requests/create"
+                :data="{ 'start_date': day.date }"
+              >
+                <div class="flex justify-center items-center">
+                  <VacationTypeCalendarIcon
+                    type="create"
+                    class="text-blumilk-700"
+                  />
+                </div>
+              </InertiaLink>
             </td>
           </tr>
         </tbody>
@@ -118,7 +132,7 @@
 
 <script setup>
 import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/solid'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useMonthInfo } from '@/Composables/monthInfo'
 import VacationTypeCalendarIcon from '@/Shared/VacationTypeCalendarIcon'
 
@@ -132,6 +146,8 @@ const props = defineProps({
   can: Object,
 })
 
+let activeElement = ref(undefined)
+
 const { getMonths, findMonth } = useMonthInfo()
 
 const months = getMonths()
@@ -140,4 +156,17 @@ const currentMonth = computed(() => findMonth(props.current))
 const selectedMonth = computed(() => findMonth(props.selected))
 const previousMonth = computed(() => months[months.indexOf(selectedMonth.value) - 1])
 const nextMonth = computed(() => months[months.indexOf(selectedMonth.value) + 1])
+
+function isActiveBtn(key) {
+  return activeElement.value === key
+}
+
+function setActiveBtn(key) {
+  if(activeElement.value === undefined)
+    activeElement.value = key
+}
+
+function unsetActiveBtn() {
+  activeElement.value = undefined
+}
 </script>