kamilniemczycki/toby
1
0
Fork 0
Code Issues Pull Requests 2 Projects Releases Activity

#157 - more interactive calendar #162

Merged
kamilniemczycki merged 20 commits from #157-expansion-calendar into main 2022-06-08 11:02:38 +02:00
Conversation 10 Commits 20 Files Changed 6 +48 -5
1 changed files with 48 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 34a5827aeb - Show all commits

53
resources/js/Pages/AnnualSummary.vue
View File

@@ -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
class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent focus:outline-blumilk-500"
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 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')
}