wip #VC

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)
 }

resources/js/Shared/Widgets/VacationCalendar.vue

@@ -2,7 +2,7 @@
   <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 }} {{ calendar.currents.year !== selectedYear ? calendar.currents.year : undefined }}
+        {{ calendarState.monthName }} {{ calendarState.isActualYear ? undefined : calendar.currents.year }}
       </h2>
       <div class="flex justify-center">
         <div class="flex items-center rounded-md shadow-sm md:items-stretch">
@@ -68,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 viewModes.all"
+                v-for="option in viewModes"
                 :key="option.key"
                 v-slot="{ active }"
               >
@@ -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()
@@ -161,14 +161,13 @@ const calendar = {
     month: selectedYear === currentDate.year ? currentDate.month : 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),
@@ -178,21 +177,21 @@ const calendarState = reactive({
 
 const customCalendar = {
   generateCalendar() {
-    console.log('Loaded!', DateTime.now())
-    const currentDate = DateTime.fromObject({
+    const date = 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)
+    days.value = this.generateCalendarData(date)
   },
-  generateCalendarData(start, end) {
-    if (calendarState.viewMode.isWeek)
-      return this.generateWeekData(start)
-    else if (calendarState.viewMode.isMonth)
-      return this.generateMonthData(start, end)
+  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) {
@@ -202,7 +201,6 @@ const customCalendar = {
     for (let day = startWeek; day < endWeek; day = day.plus({ day: 1 })) {
       days.push(this.prepareDay(day))
     }
-
     return days
   },
   generateMonthData(start, end) {
@@ -246,12 +244,20 @@ 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
 }