Client - display previous and next months on calendar

fittrackee_client/src/components/Dashboard/UserCalendar/CalendarCells.vue

@@ -25,7 +25,15 @@
 
 <script lang="ts">
   import { addDays, format, isSameDay, isSameMonth, isToday } from 'date-fns'
-  import { defineComponent, PropType, toRefs } from 'vue'
+  import {
+    PropType,
+    Ref,
+    defineComponent,
+    ref,
+    toRefs,
+    watch,
+    onMounted,
+  } from 'vue'
 
   import CalendarWorkouts from '@/components/Dashboard/UserCalendar/CalendarWorkouts.vue'
   import { ISport } from '@/types/sports'
@@ -68,16 +76,22 @@
       },
     },
     setup(props) {
-      const rows = []
+      const rows: Ref<Date[][]> = ref([])
       let { startDate, endDate, weekStartingMonday } = toRefs(props)
-      let day = startDate.value
-      while (day <= endDate.value) {
-        const days = []
-        for (let i = 0; i < 7; i++) {
-          days.push(day)
-          day = addDays(day, 1)
+
+      onMounted(() => getDays())
+
+      function getDays() {
+        rows.value = []
+        let day = startDate.value
+        while (day <= endDate.value) {
+          const days: Date[] = []
+          for (let i = 0; i < 7; i++) {
+            days.push(day)
+            day = addDays(day, 1)
+          }
+          rows.value.push(days)
         }
-        rows.push(days)
       }
 
       function isWeekEnd(day: number): boolean {
@@ -100,6 +114,11 @@
         return []
       }
 
+      watch(
+        () => props.currentDay,
+        () => getDays()
+      )
+
       return { rows, format, isSameMonth, isToday, isWeekEnd, filterWorkouts }
     },
   })

fittrackee_client/src/components/Dashboard/UserCalendar/CalendarHeader.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="calendar-header">
-    <div class="calendar-arrow calendar-arrow-left">
+    <div
+      class="calendar-arrow calendar-arrow-left"
+      @click="emit('displayPreviousMonth')"
+    >
       <i class="fa fa-chevron-left" aria-hidden="true" />
     </div>
     <div class="calendar-month">
@@ -8,7 +11,10 @@
         {{ format(day, 'MMM yyyy', localeOptions) }}
       </span>
     </div>
-    <div class="calendar-arrow calendar-arrow-right">
+    <div
+      class="calendar-arrow calendar-arrow-right"
+      @click="emit('displayNextMonth')"
+    >
       <i class="fa fa-chevron-right" aria-hidden="true" />
     </div>
   </div>
@@ -29,8 +35,9 @@
         required: true,
       },
     },
-    setup() {
-      return { format }
+    emits: ['displayNextMonth', 'displayPreviousMonth'],
+    setup(props, { emit }) {
+      return { emit, format }
     },
   })
 </script>
@@ -48,9 +55,11 @@
     }
     .calendar-arrow-left {
       text-align: left;
+      cursor: pointer;
     }
     .calendar-arrow-right {
       text-align: right;
+      cursor: pointer;
     }
     .calendar-month {
       font-weight: bold;

fittrackee_client/src/components/Dashboard/UserCalendar/index.vue

@@ -2,7 +2,12 @@
   <div id="user-calendar">
     <Card class="calendar-card">
       <template #content>
-        <CalendarHeader :day="day" locale-options="enGB" />
+        <CalendarHeader
+          :day="day"
+          locale-options="enGB"
+          @displayNextMonth="displayNextMonth"
+          @displayPreviousMonth="displayPreviousMonth"
+        />
         <CalendarDays :start-date="calendarDates.start" locale-options="enGB" />
         <CalendarCells
           :currentDay="day"
@@ -19,12 +24,13 @@
 </template>
 
 <script lang="ts">
-  import { format } from 'date-fns'
+  import { addMonths, format, subMonths } from 'date-fns'
   import {
     ComputedRef,
     PropType,
     computed,
     defineComponent,
+    ref,
     onBeforeMount,
   } from 'vue'
 
@@ -60,24 +66,47 @@
     setup(props) {
       const store = useStore()
 
-      onBeforeMount(() =>
-        store.dispatch(WORKOUTS_STORE.ACTIONS.GET_CALENDAR_WORKOUTS, apiParams)
-      )
+      onBeforeMount(() => getCalendarWorkouts())
 
       const dateFormat = 'yyyy-MM-dd'
-      const day = new Date()
-      const calendarDates = getCalendarStartAndEnd(day, props.user.weekm)
-      const apiParams: IWorkoutsPayload = {
-        from: format(calendarDates.start, dateFormat),
-        to: format(calendarDates.end, dateFormat),
-        order: 'desc',
-        per_page: 100,
-      }
+      let day = ref(new Date())
+      let calendarDates = ref(
+        getCalendarStartAndEnd(day.value, props.user.weekm)
+      )
       const calendarWorkouts: ComputedRef<IWorkout[]> = computed(
         () => store.getters[WORKOUTS_STORE.GETTERS.CALENDAR_WORKOUTS]
       )
 
-      return { day, calendarDates, calendarWorkouts }
+      function getCalendarWorkouts() {
+        calendarDates.value = getCalendarStartAndEnd(
+          day.value,
+          props.user.weekm
+        )
+        const apiParams: IWorkoutsPayload = {
+          from: format(calendarDates.value.start, dateFormat),
+          to: format(calendarDates.value.end, dateFormat),
+          order: 'desc',
+          per_page: 100,
+        }
+        store.dispatch(WORKOUTS_STORE.ACTIONS.GET_CALENDAR_WORKOUTS, apiParams)
+      }
+
+      function displayNextMonth() {
+        day.value = addMonths(day.value, 1)
+        getCalendarWorkouts()
+      }
+      function displayPreviousMonth() {
+        day.value = subMonths(day.value, 1)
+        getCalendarWorkouts()
+      }
+
+      return {
+        day,
+        calendarDates,
+        calendarWorkouts,
+        displayNextMonth,
+        displayPreviousMonth,
+      }
     },
   })
 </script>