refactoring #VC

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,52 +176,59 @@ const calendarState = reactive({
   isNext: computed(() => calendar.currents.month !== 12),
 })
 
-watch([calendar.viewMode, calendar.currents], () => {
+const customCalendar = {
-  loadCalendar()
+  generateCalendar() {
-})
+    console.log('Loaded!', DateTime.now())
-
+    const currentDate = DateTime.fromObject({
-loadCalendar()
-
-function loadCalendar() {
-  console.log('Loaded')
-  let focusDate = DateTime.fromObject({
       year: calendar.currents.year,
       month: calendar.currents.month,
     })
-  let start, end
+    const start = currentDate.startOf('month').startOf('week')
+    const end = currentDate.endOf('month').endOf('week')
 
-  if (calendar.viewMode.value === 'week') {
+    days.value = this.generateCalendarData(start, end)
-    if (currentDate.year === selectedYear)
+  },
-      focusDate = DateTime.fromObject({ weekNumber: calendar.currents.week })
+  generateCalendarData(start, end) {
-    else
+    if (calendarState.viewMode.isWeek)
-      focusDate = focusDate.plus({ week: calendar.currents.week - 1 })
+      return this.generateWeekData(start)
-    start = focusDate.startOf('week')
+    else if (calendarState.viewMode.isMonth)
-    end = focusDate.endOf('week')
+      return this.generateMonthData(start, end)
-  } else if (calendar.viewMode.value === 'month') {
+    return []
-    focusDate = focusDate.startOf('month')
+  },
-    start = focusDate.startOf('week')
+  generateWeekData(start) {
-    end = focusDate.endOf('month').endOf('week')
+    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))
     }
 
-  generateCalendarData(start, end, focusDate)
+    return days
-}
+  },
+  generateMonthData(start, end) {
+    let days = []
+    for (let day = start; day < end; day = day.plus({ day: 1 })) {
+      days.push(this.prepareDay(day))
+    }
 
-function generateCalendarData(startDate, endDate, focusDate) {
+    return days
-  const tmpDays = []
+  },
-  for (let day = startDate; day < endDate; day = day.plus({ day: 1 })) {
+  prepareDay(day) {
-    const isCurrentMonth = isInCurrentMonth(day, focusDate)
+    return {
-    const okIsToday = isToday(day)
-
-    tmpDays.push({
       date: day.toISODate(),
-      isCurrentMonth,
+      dayNumber: day.day,
-      isToday: okIsToday,
+      isCurrentMonth: isInCurrentMonth(day),
-    })
+      isToday: isToday(day),
     }
-
+  },
-  days.value = tmpDays
 }
 
+watch([calendar.viewMode, calendar.currents], () => {
+  customCalendar.generateCalendar()
+})
+
+customCalendar.generateCalendar()
+
 function toLast() {
   if (calendar.viewMode.value === 'week')
     addWeeks(-1)
@@ -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) {
+function isInCurrentMonth(date) {
-  return currentMonth.hasSame(date, 'month')
+  return calendar.currents.month === date.month
 }
 
 function isToday(date) {