From 4e16f363ac7a6148548321465e4c135fc43c008f Mon Sep 17 00:00:00 2001 From: Kamil Niemczycki Date: Thu, 23 Jun 2022 20:46:17 +0200 Subject: [PATCH] #152 - optimization --- .../ViewModeOptions.js | 7 +- .../js/Shared/Widgets/VacationCalendar.vue | 119 ++++++++++-------- 2 files changed, 70 insertions(+), 56 deletions(-) rename resources/js/Shared/Widgets/{VacationCalendar => Calendar}/ViewModeOptions.js (65%) diff --git a/resources/js/Shared/Widgets/VacationCalendar/ViewModeOptions.js b/resources/js/Shared/Widgets/Calendar/ViewModeOptions.js similarity index 65% rename from resources/js/Shared/Widgets/VacationCalendar/ViewModeOptions.js rename to resources/js/Shared/Widgets/Calendar/ViewModeOptions.js index 4f7370a..a04d99d 100644 --- a/resources/js/Shared/Widgets/VacationCalendar/ViewModeOptions.js +++ b/resources/js/Shared/Widgets/Calendar/ViewModeOptions.js @@ -2,12 +2,11 @@ function isViewModeKey(key) { return this.key === key.value } -const modes = [ +export const viewModes = [ { 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), +export function find(modeKey) { + return viewModes.find(mode => mode.key === modeKey) } diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue index 558e467..6aa90e0 100644 --- a/resources/js/Shared/Widgets/VacationCalendar.vue +++ b/resources/js/Shared/Widgets/VacationCalendar.vue @@ -2,7 +2,7 @@

- {{ calendarState.monthName }} {{ calendar.currents.year !== selectedYear ? calendar.currents.year : undefined }} + {{ calendarState.monthName }} {{ calendarState.isActualYear ? undefined : calendar.currents.year }}

@@ -68,7 +68,7 @@
@@ -143,7 +143,7 @@ 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' +import { viewModes, find as findViewMode } from '@/Shared/Widgets/Calendar/ViewModeOptions' let days = ref([]) const months = useMonthInfo().getMonths() @@ -159,16 +159,15 @@ const calendar = { currents: reactive({ year: selectedYear, month: selectedYear === currentDate.year ? currentDate.month : 1, - week: selectedYear === currentDate.year ? currentDate.weekNumber : 1, + weekPosition: 0, }), - toPreviousActive: computed(() => calendar.currents.month !== 1), } const calendarState = reactive({ viewMode: { isWeek: computed(() => calendar.viewMode.value === 'week'), isMonth: computed(() => calendar.viewMode.value === 'month'), - details: computed(() => viewModes.find(calendar.viewMode.value)), + details: computed(() => findViewMode(calendar.viewMode.value)), }, monthName: computed(() => months[calendar.currents.month - 1]?.name), isActualYear: computed(() => calendar.currents.year !== selectedYear), @@ -176,51 +175,57 @@ const calendarState = reactive({ isNext: computed(() => calendar.currents.month !== 12), }) +const customCalendar = { + loadCalendar() { + const date = DateTime.fromObject({ + year: calendar.currents.year, + month: calendar.currents.month, + }) + 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 = [] + const startWeek = start.plus({ week: calendar.currents.weekPosition }) + 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) { + return { + date: day.toISODate(), + dayNumber: day.day, + isCurrentMonth: isInCurrentMonth(day), + isToday: isToday(day), + } + }, +} + watch([calendar.viewMode, calendar.currents], () => { - loadCalendar() + customCalendar.loadCalendar() }) -loadCalendar() - -function loadCalendar() { - console.log('Loaded') - let focusDate = DateTime.fromObject({ - year: calendar.currents.year, - month: calendar.currents.month, - }) - let start, end - - if (calendar.viewMode.value === 'week') { - if (currentDate.year === selectedYear) - 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 (calendar.viewMode.value === 'month') { - focusDate = focusDate.startOf('month') - start = focusDate.startOf('week') - end = focusDate.endOf('month').endOf('week') - } - - 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) - - tmpDays.push({ - date: day.toISODate(), - isCurrentMonth, - isToday: okIsToday, - }) - } - - days.value = tmpDays -} +customCalendar.loadCalendar() function toLast() { if (calendar.viewMode.value === 'week') @@ -239,11 +244,21 @@ function toNext() { function resetCalendar() { calendar.currents.year = selectedYear calendar.currents.month = selectedYear === currentDate.year ? currentDate.month : 1 - calendar.currents.week = selectedYear === currentDate.year ? currentDate.weekNumber : 1 + calendar.currents.weekPosition = 1 } function addWeeks(howMany = 1) { - calendar.currents.week += howMany + const date = DateTime.fromObject({ + year: calendar.currents.year, + month: calendar.currents.month, + }) + const nextMonth = date.plus({ week: calendar.currents.weekPosition }).month + if (calendarState.viewMode.isWeek && nextMonth !== calendar.currents.month) { + calendar.currents.month = nextMonth + calendar.currents.weekPosition = 0 + return + } + calendar.currents.weekPosition += howMany } function addMonths(howMany = 1) { @@ -255,8 +270,8 @@ function updateViewMode(type) { calendar.viewMode.value = type } -function isInCurrentMonth(date, currentMonth) { - return currentMonth.hasSame(date, 'month') +function isInCurrentMonth(date) { + return calendar.currents.month === date.month } function isToday(date) {