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

updated calendar

Browse Source
This commit is contained in:
Kamil Niemczycki 2022-06-06 08:31:01 +02:00
parent 4240680d60
commit d4c5e55409
1 changed files with 11 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
resources/js/Pages/Calendar.vue
View File

@ -101,8 +101,8 @@
:key="day.dayOfMonth" :key="day.dayOfMonth"
class="border border-gray-300" 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 + '+' + day.date)" @mouseover="setActiveDay(user.id + '+' + day.date)"
@mouseleave="unsetActiveBtn" @mouseleave="unsetActiveDay"
> >
<div <div
v-if="day.vacations.includes(user.id)" v-if="day.vacations.includes(user.id)"
@ -111,23 +111,11 @@
<VacationTypeCalendarIcon :type="day.vacationTypes[user.id]" /> <VacationTypeCalendarIcon :type="day.vacationTypes[user.id]" />
</div> </div>
<template <template
v-else-if="isActiveBtn(user.id + '+' + day.date) && !day.isWeekend && !day.isHoliday && day.isFuture && (auth.user.id === user.id || can.createOnBehalfOfEmployee)" v-else-if="isActiveDay(user.id + '+' + day.date) && !day.isWeekend && !day.isHoliday && day.isFuture && (auth.user.id === user.id || can.createOnBehalfOfEmployee)"
> >
<InertiaLink <InertiaLink
v-if="can.createOnBehalfOfEmployee"
href="/vacation/requests/create" href="/vacation/requests/create"
:data="{ 'user': user.id, 'start_date': day.date }" :data="linkParameters(user, day)"
>
<div class="flex justify-center items-center">
<VacationTypeCalendarIcon
type="create"
/>
</div>
</InertiaLink>
<InertiaLink
v-else
href="/vacation/requests/create"
:data="{ 'start_date': day.date }"
> >
<div class="flex justify-center items-center"> <div class="flex justify-center items-center">
<VacationTypeCalendarIcon <VacationTypeCalendarIcon
@ -160,8 +148,6 @@ const props = defineProps({
can: Object, can: Object,
}) })
console.log(props.auth.user)
let activeElement = ref(undefined) let activeElement = ref(undefined)
const { getMonths, findMonth } = useMonthInfo() const { getMonths, findMonth } = useMonthInfo()
@ -173,16 +159,20 @@ const selectedMonth = computed(() => findMonth(props.selected))
const previousMonth = computed(() => months[months.indexOf(selectedMonth.value) - 1]) const previousMonth = computed(() => months[months.indexOf(selectedMonth.value) - 1])
const nextMonth = computed(() => months[months.indexOf(selectedMonth.value) + 1]) const nextMonth = computed(() => months[months.indexOf(selectedMonth.value) + 1])
function isActiveBtn(key) { function isActiveDay(key) {
return activeElement.value === key return activeElement.value === key
} }
function setActiveBtn(key) { function setActiveDay(key) {
if(activeElement.value === undefined) if(activeElement.value === undefined)
activeElement.value = key activeElement.value = key
} }
function unsetActiveBtn() { function unsetActiveDay() {
activeElement.value = undefined activeElement.value = undefined
} }
function linkParameters(user, day) {
return props.can.createOnBehalfOfEmployee ? { user: user.id, start_date: day.date } : { start_date: day.date }
}
</script> </script>