408 lines
13 KiB
Vue
408 lines
13 KiB
Vue
<template>
|
|
<section class="bg-white shadow-md">
|
|
<div class="grid grid-cols-3 grid-rows-1 items-center justify-center p-4 sm:px-6">
|
|
<h2 class="text-lg font-medium leading-6 text-gray-900">
|
|
{{ calendarState.monthName }} {{ !calendarState.isActualYear ? calendar.currents.year : undefined }}
|
|
</h2>
|
|
<div class="flex justify-center">
|
|
<div class="flex items-center rounded-md shadow-sm md:items-stretch">
|
|
<button
|
|
type="button"
|
|
class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 py-2 pl-3 pr-4 text-gray-400 focus:relative md:w-9 md:px-2"
|
|
:class="[ calendarState.isPrevious ? 'bg-white hover:text-gray-500 md:hover:bg-gray-50' : 'bg-gray-100' ]"
|
|
@click="toPrevious"
|
|
>
|
|
<span class="sr-only">Poprzedni {{ calendarState.viewMode.details.shortcut }}</span>
|
|
<ChevronLeftIcon
|
|
class="h-5 w-5"
|
|
aria-hidden="true"
|
|
/>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block"
|
|
@click="goToToday"
|
|
>
|
|
Dzisiaj
|
|
</button>
|
|
<span
|
|
class="relative -mx-px h-5 w-px bg-gray-300 md:hidden z-10"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 py-2 pl-4 pr-3 text-gray-400 focus:relative md:w-9 md:px-2"
|
|
:class="[ calendarState.isNext ? 'bg-white hover:text-gray-500 md:hover:bg-gray-50' : 'bg-gray-100' ]"
|
|
:disabled="!calendarState.isNext"
|
|
@click="toNext"
|
|
>
|
|
<span class="sr-only">Następny {{ calendarState.viewMode.details.shortcut }}</span>
|
|
<ChevronRightIcon
|
|
class="h-5 w-5"
|
|
aria-hidden="true"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<Menu
|
|
as="div"
|
|
class="flex justify-end relative"
|
|
>
|
|
<MenuButton
|
|
type="button"
|
|
class="flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
|
|
>
|
|
<span class="md:hidden">{{ calendarState.viewMode.details.shortcut }}</span>
|
|
<span class="hidden md:inline-block">{{ calendarState.viewMode.details.name }}</span>
|
|
<ChevronDownIcon
|
|
class="ml-2 h-5 w-5 text-gray-400"
|
|
aria-hidden="true"
|
|
/>
|
|
</MenuButton>
|
|
|
|
<transition
|
|
class="z-10"
|
|
enter-active-class="transition ease-out duration-100"
|
|
enter-from-class="transform opacity-0 scale-95"
|
|
enter-to-class="transform opacity-100 scale-100"
|
|
leave-active-class="transition ease-in duration-75"
|
|
leave-from-class="transform opacity-100 scale-100"
|
|
leave-to-class="transform opacity-0 scale-95"
|
|
>
|
|
<MenuItems class="absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
|
<div class="py-1">
|
|
<MenuItem
|
|
v-for="option in viewModes"
|
|
:key="option.key"
|
|
v-slot="{ active }"
|
|
>
|
|
<button
|
|
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex px-4 py-2 text-sm text-left w-full']"
|
|
@click="updateViewMode(option.key)"
|
|
>
|
|
{{ option.shortcut }}
|
|
<CheckIcon
|
|
v-if="option.is(calendar.viewMode)"
|
|
class="ml-2 w-5 h-5 text-blumilk-500"
|
|
/>
|
|
</button>
|
|
</MenuItem>
|
|
</div>
|
|
</MenuItems>
|
|
</transition>
|
|
</Menu>
|
|
</div>
|
|
<div class="border border-gray-300 lg:flex lg:flex-auto lg:flex-col">
|
|
<div
|
|
v-if="calendarState.viewMode.isMonth"
|
|
class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-300 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none"
|
|
>
|
|
<div class="py-2 bg-white">
|
|
Pon
|
|
</div>
|
|
<div class="py-2 bg-white">
|
|
Wt
|
|
</div>
|
|
<div class="py-2 bg-white">
|
|
Śr
|
|
</div>
|
|
<div class="py-2 bg-white">
|
|
Czw
|
|
</div>
|
|
<div class="py-2 bg-white">
|
|
Pt
|
|
</div>
|
|
<div class="py-2 bg-red-100 text-red-800">
|
|
Sob
|
|
</div>
|
|
<div class="py-2 bg-red-100 text-red-800">
|
|
Ndz
|
|
</div>
|
|
</div>
|
|
<div class="flex bg-gray-300 text-xs leading-6 text-gray-700 lg:flex-auto">
|
|
<div
|
|
class="w-full grid grid-cols-7 gap-px"
|
|
:class="{ 'grid-rows-1': calendarState.viewMode.isWeek }"
|
|
>
|
|
<DayComponent
|
|
v-for="(day, index) in days"
|
|
:key="index"
|
|
:day="day"
|
|
class="flex flex-col relative py-3 px-3"
|
|
:class="{ 'day': calendarState.viewMode.isWeek }"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/solid'
|
|
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
|
|
import { ref, watch, computed, reactive } from 'vue'
|
|
import { DateTime } from 'luxon'
|
|
import useVacationTypeInfo from '@/Composables/vacationTypeInfo'
|
|
import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
|
|
import { useMonthInfo } from '@/Composables/monthInfo'
|
|
import { viewModes, find as findViewMode } from '@/Shared/Widgets/Calendar/ViewModeOptions'
|
|
import DayComponent from '@/Shared/Widgets/Calendar/DayComponent'
|
|
|
|
const props = defineProps({
|
|
holidays: Object,
|
|
approvedVacations: Object,
|
|
pendingVacations: Object,
|
|
})
|
|
|
|
let days = ref([])
|
|
|
|
function getCurrentDate() {
|
|
const { year, month, weekNumber } = DateTime.now()
|
|
return { year, month, week: weekNumber }
|
|
}
|
|
const currentDate = getCurrentDate()
|
|
|
|
const months = useMonthInfo().getMonths()
|
|
const { findType } = useVacationTypeInfo()
|
|
const selectedYear = useCurrentYearPeriodInfo().year.value
|
|
const weeksInYear = DateTime.fromObject({ year: selectedYear, month: 12, day: 31 }).weekNumber
|
|
|
|
const calendar = {
|
|
viewMode: ref(localStorage.getItem('calendarViewMode') ?? 'week'),
|
|
currents: reactive({
|
|
year: selectedYear,
|
|
month: selectedYear === currentDate.year ? currentDate.month : 1,
|
|
week: selectedYear === currentDate.year ? currentDate.week : 0,
|
|
}),
|
|
}
|
|
|
|
const calendarState = reactive({
|
|
viewMode: {
|
|
isWeek: computed(() => calendar.viewMode.value === 'week'),
|
|
isMonth: computed(() => calendar.viewMode.value === 'month'),
|
|
details: computed(() => findViewMode(calendar.viewMode.value)),
|
|
},
|
|
monthName: computed(() => months[calendar.currents.month - 1]?.name),
|
|
isActualYear: computed(() => calendar.currents.year === DateTime.now().year),
|
|
isPrevious: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 1 : calendar.currents.week > 0),
|
|
isNext: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 12 : calendar.currents.week < weeksInYear),
|
|
})
|
|
|
|
const customCalendar = {
|
|
loadCalendar() {
|
|
const date = DateTime.fromObject({
|
|
year: calendar.currents.year,
|
|
month: calendarState.viewMode.isMonth ? calendar.currents.month : 1,
|
|
day: 1,
|
|
})
|
|
days.value = this.generateCalendarData(date)
|
|
},
|
|
generateCalendarData(date) {
|
|
const firstMonthDay = date.startOf('month')
|
|
const lastMonthDay = date.endOf('month')
|
|
|
|
if (calendarState.viewMode.isWeek) {
|
|
return this.generateWeekData(firstMonthDay.startOf('week'))
|
|
} else if (calendarState.viewMode.isMonth) {
|
|
return this.generateMonthData(firstMonthDay.startOf('week'), lastMonthDay.endOf('week'))
|
|
}
|
|
return []
|
|
},
|
|
generateWeekData(start) {
|
|
let days = [], startWeek
|
|
if (calendar.currents.month === 1 && calendar.currents.week === 0)
|
|
startWeek = DateTime.fromObject({ year: calendar.currents.year, month: 1, day: 1 }).startOf('week')
|
|
else if (calendarState.isActualYear)
|
|
startWeek = DateTime.fromObject({ weekNumber: calendar.currents.week })
|
|
else
|
|
startWeek = start.plus({ week: calendar.currents.week })
|
|
const endWeek = startWeek.endOf('week')
|
|
for (let day = startWeek; day < endWeek; day = day.plus({ day: 1 })) {
|
|
days.push(this.prepareDay(day))
|
|
}
|
|
return days
|
|
},
|
|
generateMonthData(start, end) {
|
|
let days = []
|
|
for (let day = start; day < end; day = day.plus({ day: 1 })) {
|
|
days.push(this.prepareDay(day))
|
|
}
|
|
|
|
return days
|
|
},
|
|
prepareDay(day) {
|
|
const isCurrentMonth = isInCurrentMonth(day)
|
|
const startDay = {
|
|
date: day.toISODate(),
|
|
isVacation: isCurrentMonth && isVacation(day),
|
|
isPendingVacation: isCurrentMonth && isPendingVacation(day),
|
|
isHoliday: isHoliday(day),
|
|
}
|
|
|
|
return {
|
|
...startDay,
|
|
dayNumber: day.day,
|
|
isCurrentMonth,
|
|
isToday: isToday(day),
|
|
isWeekend: isWeekend(day),
|
|
getHolidayInfo: startDay.isHoliday ? getHolidayInfo(startDay) : undefined,
|
|
getVacationType: startDay.isVacation || startDay.isPendingVacation ? getVacationType(startDay) : undefined,
|
|
getVacationInfo: startDay.isVacation || startDay.isPendingVacation ? getVacationInfo(startDay) : undefined,
|
|
}
|
|
},
|
|
}
|
|
|
|
watch([calendar.viewMode, calendar.currents], () => {
|
|
customCalendar.loadCalendar()
|
|
})
|
|
|
|
customCalendar.loadCalendar()
|
|
|
|
function toPrevious() {
|
|
if (calendarState.isPrevious) {
|
|
if (calendar.viewMode.value === 'week')
|
|
minusWeek()
|
|
else
|
|
minusMonth()
|
|
}
|
|
}
|
|
|
|
function toNext() {
|
|
if (calendarState.isNext) {
|
|
if (calendar.viewMode.value === 'week')
|
|
addWeek()
|
|
else
|
|
addMonth()
|
|
}
|
|
}
|
|
|
|
function resetCalendar(config = {}) {
|
|
const currentMonth = isUndefined(config.month) ? currentDate.month : config.month
|
|
const currentWeek = isUndefined(config.week) ? currentDate.week : config.week
|
|
|
|
calendar.currents.year = isUndefined(config.year) ? selectedYear : config.month
|
|
calendar.currents.month = calendarState.isActualYear || !isUndefined(config.year) ? currentMonth : 1
|
|
calendar.currents.week = calendarState.isActualYear || !isUndefined(config.week) ? currentWeek : 0
|
|
}
|
|
|
|
function isUndefined(value) {
|
|
return value === undefined
|
|
}
|
|
|
|
function addWeek(minus = false) {
|
|
const howMany = minus ? -1: 1
|
|
let nextMonth, date = DateTime.fromObject({
|
|
year: calendar.currents.year,
|
|
month: 1,
|
|
day: 1,
|
|
})
|
|
|
|
date = date.plus({ week: calendar.currents.week + howMany })
|
|
|
|
const startWeekDay = date.startOf('week'), endWeekDay = date.endOf('week')
|
|
nextMonth = howMany > 0 ? startWeekDay.month : endWeekDay.month
|
|
if (howMany < 0 && endWeekDay.day === endWeekDay.daysInMonth)
|
|
calendar.currents.week--
|
|
else if (howMany > 0 && startWeekDay.day === 1)
|
|
calendar.currents.week++
|
|
|
|
if (nextMonth !== calendar.currents.month) {
|
|
calendar.currents.month = calendar.currents.week > 1 ? nextMonth : 1
|
|
if (calendar.currents.week === 1)
|
|
calendar.currents.week = 0
|
|
return
|
|
}
|
|
calendar.currents.week += howMany
|
|
}
|
|
|
|
function minusWeek() {
|
|
addWeek(true)
|
|
}
|
|
|
|
function addMonth(minus = false) {
|
|
calendar.currents.month += minus ? -1 : 1
|
|
}
|
|
|
|
function minusMonth() {
|
|
addMonth(true)
|
|
}
|
|
|
|
function goToToday() {
|
|
resetCalendar({ year: currentDate.year, months: currentDate.month, week: currentDate.week })
|
|
}
|
|
|
|
function updateViewMode(type) {
|
|
if (type === 'month')
|
|
resetCalendar({ week: 0 })
|
|
else
|
|
resetCalendar()
|
|
calendar.viewMode.value = type
|
|
localStorage.setItem('calendarViewMode', type)
|
|
}
|
|
|
|
function isInCurrentMonth(date) {
|
|
return calendar.currents.month === date.month
|
|
}
|
|
|
|
function isWeekend(date) {
|
|
return date.weekday === 6 || date.weekday === 7
|
|
}
|
|
|
|
function isToday(date) {
|
|
return date.toISODate() === DateTime.local().toISODate()
|
|
}
|
|
|
|
function isHoliday(date) {
|
|
return props.holidays[date.toISODate()] !== undefined
|
|
}
|
|
|
|
function getHolidayInfo(day) {
|
|
return props.holidays[day.date]
|
|
}
|
|
|
|
function isVacation(date) {
|
|
return props.approvedVacations[date.toISODate()] !== undefined
|
|
}
|
|
|
|
function isPendingVacation(date) {
|
|
return props.pendingVacations[date.toISODate()] !== undefined
|
|
}
|
|
|
|
function getVacationType(day) {
|
|
return findType(getVacationInfo(day).type)
|
|
}
|
|
|
|
function getVacationInfo(day) {
|
|
return day.isVacation ? props.approvedVacations[day.date] : props.pendingVacations[day.date]
|
|
}
|
|
</script>
|
|
|
|
<style lang="css">
|
|
.day:nth-of-type(7n - 6):before {
|
|
content: "Pon";
|
|
}
|
|
|
|
.day:nth-of-type(7n - 5):before {
|
|
content: "Wt";
|
|
}
|
|
|
|
.day:nth-of-type(7n - 4):before {
|
|
content: "Śr";
|
|
}
|
|
|
|
.day:nth-of-type(7n - 3):before {
|
|
content: "Czw";
|
|
}
|
|
|
|
.day:nth-of-type(7n - 2):before {
|
|
content: "Pt";
|
|
}
|
|
|
|
.day:nth-of-type(7n - 1):before {
|
|
content: "Sob";
|
|
}
|
|
|
|
.day:nth-of-type(7n):before {
|
|
content: "Ndz";
|
|
}
|
|
</style>
|