From 52ebf888c7133ebd2ac7812be8c7362f779e6374 Mon Sep 17 00:00:00 2001 From: Kamil Niemczycki Date: Thu, 23 Jun 2022 13:46:49 +0200 Subject: [PATCH] refactoring #VC --- .../js/Shared/Widgets/VacationCalendar.vue | 103 ++++++++++-------- 1 file changed, 56 insertions(+), 47 deletions(-) diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue index 558e467..16468c0 100644 --- a/resources/js/Shared/Widgets/VacationCalendar.vue +++ b/resources/js/Shared/Widgets/VacationCalendar.vue @@ -159,7 +159,7 @@ 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), } @@ -176,51 +176,58 @@ const calendarState = reactive({ isNext: computed(() => calendar.currents.month !== 12), }) +const customCalendar = { + generateCalendar() { + console.log('Loaded!', DateTime.now()) + const currentDate = DateTime.fromObject({ + year: calendar.currents.year, + month: calendar.currents.month, + }) + const start = currentDate.startOf('month').startOf('week') + const end = currentDate.endOf('month').endOf('week') + + days.value = this.generateCalendarData(start, end) + }, + generateCalendarData(start, end) { + if (calendarState.viewMode.isWeek) + return this.generateWeekData(start) + else if (calendarState.viewMode.isMonth) + return this.generateMonthData(start, end) + 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.generateCalendar() }) -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.generateCalendar() function toLast() { if (calendar.viewMode.value === 'week') @@ -239,11 +246,13 @@ 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.week = selectedYear === currentDate.year ? currentDate.weekNumber : 1 + calendar.currents.weekPosition = 1 } function addWeeks(howMany = 1) { - calendar.currents.week += howMany + // calendar.currents.week += howMany + calendar.currents.weekPosition += howMany } function addMonths(howMany = 1) { @@ -255,8 +264,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) {