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

#152 - updated style and added icons

Browse Source
This commit is contained in:
Kamil Niemczycki 2022-07-07 00:15:06 +02:00
parent 0398b44141
commit 94350f8a82
Signed by: kamilniemczycki
GPG Key ID: 04D4E2012F969213
2 changed files with 31 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
resources/js/Shared/Widgets/Calendar/DayComponent.vue
View File

@ -13,7 +13,7 @@
} }
], ],
day.isHoliday && 'font-bold cursor-default', 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 <Popper
@ -38,7 +38,7 @@
</template> </template>
</Popper> </Popper>
<Popper <Popper
v-else-if="day.isPendingVacation" v-else-if="day.isVacation || day.isPendingVacation"
as="div" as="div"
open-delay="200" open-delay="200"
hover hover
@ -46,14 +46,21 @@
@mouseover.passive="onMouseover" @mouseover.passive="onMouseover"
@mouseleave="onMouseleave" @mouseleave="onMouseleave"
> >
<div class="flex justify-between">
<time <time
:datetime="day.date" :datetime="day.date"
:class="[ day.isToday && 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white' ]" :class="[ day.isToday && 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white' ]"
> >
{{ day.dayNumber }} {{ day.dayNumber }}
</time> </time>
<div class="hidden md:inline-block">
<VacationIcon
:type="day.getVacationType.value"
/>
</div>
</div>
<template #content> <template #content>
<VacationPopup :vacation="getVacationInfo(day)" /> <VacationPopup :vacation="day.getVacationInfo" />
</template> </template>
</Popper> </Popper>
<div <div
@ -89,6 +96,7 @@
import Popper from 'vue3-popper' import Popper from 'vue3-popper'
import { defineProps, ref } from 'vue' import { defineProps, ref } from 'vue'
import VacationPopup from '@/Shared/VacationPopup' import VacationPopup from '@/Shared/VacationPopup'
import VacationIcon from '@/Shared/VacationTypeCalendarIcon'
defineProps({ defineProps({
day: { day: {
@ -98,12 +106,6 @@ defineProps({
getHolidayDescription: { getHolidayDescription: {
type: Function, type: Function,
}, },
getVacationBorder: {
type: Function,
},
getVacationInfo: {
type: Function,
},
}) })
const isActive = ref(false) const isActive = ref(false)

20
resources/js/Shared/Widgets/VacationCalendar.vue
View File

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