#152 - wip
This commit is contained in:
parent
db874d4395
commit
7893282385
@ -1,30 +1,55 @@
|
||||
<template>
|
||||
<section class="bg-white shadow-md">
|
||||
<div class="flex items-center justify-between p-4 sm:px-6">
|
||||
<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">
|
||||
Kalendarz
|
||||
{{ calendarState.monthName }} {{ calendar.currents.year !== selectedYear ? calendar.currents.year : undefined }}
|
||||
</h2>
|
||||
<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 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50">
|
||||
<span class="sr-only">Previous month</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">Today</button>
|
||||
<span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden" />
|
||||
<button type="button" class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50">
|
||||
<span class="sr-only">Next month</span>
|
||||
<ChevronRightIcon class="h-5 w-5" aria-hidden="true" />
|
||||
</button>
|
||||
<div class="flex justify-center">
|
||||
<div class="flex items-center rounded-md shadow-sm md:items-stretch">
|
||||
<button
|
||||
v-if="calendarState.isPrevious"
|
||||
type="button"
|
||||
class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
|
||||
@click="toLast"
|
||||
>
|
||||
<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"
|
||||
:class="{ 'rounded-l-md border border-r-0': !calendarState.isPrevious, 'rounded-r-md border border-l-0': !calendarState.isNext }"
|
||||
@click="resetCalendar"
|
||||
>
|
||||
Dziś
|
||||
</button>
|
||||
<span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden" />
|
||||
<button
|
||||
v-if="calendarState.isNext"
|
||||
type="button"
|
||||
class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
|
||||
@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="relative"
|
||||
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"
|
||||
>
|
||||
{{ viewMode.name }}
|
||||
{{ calendarState.viewMode.details.name }}
|
||||
<ChevronDownIcon
|
||||
class="ml-2 h-5 w-5 text-gray-400"
|
||||
aria-hidden="true"
|
||||
@ -43,7 +68,7 @@
|
||||
<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 viewModeOptions"
|
||||
v-for="option in viewModes.all"
|
||||
:key="option.key"
|
||||
v-slot="{ active }"
|
||||
>
|
||||
@ -51,9 +76,9 @@
|
||||
: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.name }}
|
||||
{{ option.shortcut }}
|
||||
<CheckIcon
|
||||
v-if="option.key === viewMode.key"
|
||||
v-if="option.is(calendar.viewMode)"
|
||||
class="ml-2 w-5 h-5 text-blumilk-500"
|
||||
/>
|
||||
</button>
|
||||
@ -65,7 +90,7 @@
|
||||
</div>
|
||||
<div class="ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
|
||||
<div
|
||||
v-if="viewMode.key === 'month'"
|
||||
v-if="calendarState.viewMode.isMonth"
|
||||
class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none"
|
||||
>
|
||||
<div class="bg-white py-2">
|
||||
@ -91,12 +116,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto">
|
||||
<div :class="[viewMode.key === 'week' ? 'grid-rows-1' : 'grid-rows-5', 'w-full grid grid-cols-7 gap-px']">
|
||||
<div :class="[calendarState.viewMode.isWeek ? 'grid-rows-1' : 'grid-rows-5', 'w-full grid grid-cols-7 gap-px']">
|
||||
<div
|
||||
v-for="(day, index) in days"
|
||||
:key="index"
|
||||
class="flex flex-col"
|
||||
:class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', viewMode.key === 'week' && index !== 0 && (index % 5 === 0 || index % 6 === 0) ? 'bg-red-100' : undefined, viewMode.key === 'week' ? 'day' : undefined, 'relative py-2 px-3']"
|
||||
:class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', calendarState.viewMode.isWeek && index !== 0 && (index % 5 === 0 || index % 6 === 0) ? 'bg-red-100' : undefined, calendarState.viewMode.isWeek ? 'day' : 'month-day', 'relative py-2 px-3']"
|
||||
>
|
||||
<time
|
||||
:datetime="day.date"
|
||||
@ -114,65 +139,76 @@
|
||||
<script setup>
|
||||
import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/solid'
|
||||
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
|
||||
import { ref, watch, computed } from 'vue'
|
||||
import { ref, watch, computed, reactive } from 'vue'
|
||||
import { DateTime } from 'luxon'
|
||||
import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
|
||||
import { useMonthInfo } from '@/Composables/monthInfo'
|
||||
import viewModes from '@/Shared/Widgets/VacationCalendar/ViewModeOptions'
|
||||
|
||||
let days = ref([])
|
||||
const months = useMonthInfo().getMonths()
|
||||
function getCurrentDate() {
|
||||
const { year, month, weekNumber } = DateTime.now()
|
||||
return { year, month, weekNumber }
|
||||
}
|
||||
const selectedYear = useCurrentYearPeriodInfo().year.value
|
||||
const currentDate = getCurrentDate()
|
||||
let viewModeOptions = [
|
||||
{ key: 'week', name: 'Week view' },
|
||||
{ key: 'month', name: 'Month view' },
|
||||
]
|
||||
|
||||
const calendar = {
|
||||
viewMode: ref('week'),
|
||||
currents: ref({
|
||||
currents: reactive({
|
||||
year: selectedYear,
|
||||
month: selectedYear === currentDate.year ? currentDate.month : 1,
|
||||
week: selectedYear === currentDate.year ? currentDate.weekNumber : 1,
|
||||
}),
|
||||
toPreviousActive: computed(() => calendar.currents.month !== 1),
|
||||
}
|
||||
console.log(calendar, selectedYear, currentDate)
|
||||
watch(() => calendar.viewMode.value, () => {
|
||||
loadMonth()
|
||||
|
||||
const calendarState = reactive({
|
||||
viewMode: {
|
||||
isWeek: computed(() => calendar.viewMode.value === 'week'),
|
||||
isMonth: computed(() => calendar.viewMode.value === 'month'),
|
||||
details: computed(() => viewModes.find(calendar.viewMode.value)),
|
||||
},
|
||||
monthName: computed(() => months[calendar.currents.month - 1]?.name),
|
||||
isActualYear: computed(() => calendar.currents.year !== selectedYear),
|
||||
isPrevious: computed(() => calendar.currents.month !== 1),
|
||||
isNext: computed(() => calendar.currents.month !== 12),
|
||||
})
|
||||
|
||||
const viewMode = computed(() => {
|
||||
const key = calendar.viewMode.value
|
||||
return {
|
||||
key,
|
||||
name: viewModeOptions.find((obj) => obj.key === key)?.name,
|
||||
}
|
||||
watch([calendar.viewMode, calendar.currents], () => {
|
||||
loadCalendar()
|
||||
})
|
||||
|
||||
loadMonth()
|
||||
|
||||
function loadMonth() {
|
||||
const tmpDays = []
|
||||
loadCalendar()
|
||||
|
||||
function loadCalendar() {
|
||||
console.log('Loaded')
|
||||
let focusDate = DateTime.fromObject({
|
||||
year: calendar.currents.value.year,
|
||||
month: calendar.currents.value.month,
|
||||
year: calendar.currents.year,
|
||||
month: calendar.currents.month,
|
||||
})
|
||||
let start, end
|
||||
|
||||
if (viewMode.value.key === 'week') {
|
||||
if (calendar.viewMode.value === 'week') {
|
||||
if (currentDate.year === selectedYear)
|
||||
focusDate = DateTime.fromObject({ weekNumber: calendar.currents.value.week })
|
||||
focusDate = DateTime.fromObject({ weekNumber: calendar.currents.week })
|
||||
else
|
||||
focusDate = focusDate.plus({ week: calendar.currents.week - 1 })
|
||||
start = focusDate.startOf('week')
|
||||
end = focusDate.endOf('week')
|
||||
} else if (viewMode.value.key === 'month') {
|
||||
} else if (calendar.viewMode.value === 'month') {
|
||||
focusDate = focusDate.startOf('month')
|
||||
start = focusDate.startOf('week')
|
||||
end = focusDate.endOf('month').endOf('week')
|
||||
}
|
||||
|
||||
for (let day = start; day < end; day = day.plus({ day: 1 })) {
|
||||
generateCalendarData(start, end, focusDate)
|
||||
}
|
||||
|
||||
function generateCalendarData(startDate, endDate, focusDate) {
|
||||
const tmpDays = []
|
||||
for (let day = startDate; day < endDate; day = day.plus({ day: 1 })) {
|
||||
const isCurrentMonth = isInCurrentMonth(day, focusDate)
|
||||
const okIsToday = isToday(day)
|
||||
|
||||
@ -186,7 +222,36 @@ function loadMonth() {
|
||||
days.value = tmpDays
|
||||
}
|
||||
|
||||
function toLast() {
|
||||
if (calendar.viewMode.value === 'week')
|
||||
addWeeks(-1)
|
||||
else
|
||||
addMonths(-1)
|
||||
}
|
||||
|
||||
function toNext() {
|
||||
if (calendar.viewMode.value === 'week') {
|
||||
addWeeks()
|
||||
} else
|
||||
addMonths()
|
||||
}
|
||||
|
||||
function resetCalendar() {
|
||||
calendar.currents.year = selectedYear
|
||||
calendar.currents.month = selectedYear === currentDate.year ? currentDate.month : 1
|
||||
calendar.currents.week = selectedYear === currentDate.year ? currentDate.weekNumber : 1
|
||||
}
|
||||
|
||||
function addWeeks(howMany = 1) {
|
||||
calendar.currents.week += howMany
|
||||
}
|
||||
|
||||
function addMonths(howMany = 1) {
|
||||
calendar.currents.month += howMany
|
||||
}
|
||||
|
||||
function updateViewMode(type) {
|
||||
resetCalendar()
|
||||
calendar.viewMode.value = type
|
||||
}
|
||||
|
||||
@ -220,13 +285,20 @@ function isToday(date) {
|
||||
content: "Pt";
|
||||
}
|
||||
|
||||
.day:nth-of-type(7n - 1):before,
|
||||
.day:nth-of-type(7n):before {
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.day:nth-of-type(7n - 1):before {
|
||||
content: "Sb";
|
||||
color: red;
|
||||
}
|
||||
|
||||
.day:nth-of-type(7n):before {
|
||||
content: "Nd";
|
||||
color: red;
|
||||
}
|
||||
|
||||
.month-day:nth-of-type(7n - 1), .month-day:nth-of-type(7n) {
|
||||
background-color: #fee2e2;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,13 @@
|
||||
function isViewModeKey(key) {
|
||||
return this.key === key.value
|
||||
}
|
||||
|
||||
const modes = [
|
||||
{ key: 'week', name: 'Widok tygodnia', shortcut: 'Tydzień', is: isViewModeKey },
|
||||
{ key: 'month', name: 'Widok miesiąca', shortcut: 'Miesiąc', is: isViewModeKey },
|
||||
]
|
||||
|
||||
export default {
|
||||
all: modes,
|
||||
find: whereMode => modes.find(mode => mode.key === whereMode),
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user