2021-09-05 17:43:14 +02:00
|
|
|
<template>
|
|
|
|
<div id="user-calendar">
|
2021-10-05 19:02:08 +02:00
|
|
|
<div class="calendar-card box">
|
|
|
|
<CalendarHeader
|
|
|
|
:day="day"
|
|
|
|
locale-options="enGB"
|
|
|
|
@displayNextMonth="displayNextMonth"
|
|
|
|
@displayPreviousMonth="displayPreviousMonth"
|
|
|
|
/>
|
|
|
|
<CalendarDays :start-date="calendarDates.start" locale-options="enGB" />
|
|
|
|
<CalendarCells
|
|
|
|
:currentDay="day"
|
|
|
|
:end-date="calendarDates.end"
|
|
|
|
:sports="sports"
|
|
|
|
:start-date="calendarDates.start"
|
|
|
|
:timezone="user.timezone"
|
|
|
|
:workouts="calendarWorkouts"
|
|
|
|
:weekStartingMonday="user.weekm"
|
|
|
|
/>
|
|
|
|
</div>
|
2021-09-05 17:43:14 +02:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
2021-09-29 17:35:21 +02:00
|
|
|
import { addMonths, format, subMonths } from 'date-fns'
|
2021-09-05 17:43:14 +02:00
|
|
|
import {
|
2021-09-27 13:06:17 +02:00
|
|
|
ComputedRef,
|
2021-09-05 17:43:14 +02:00
|
|
|
PropType,
|
2021-09-27 13:06:17 +02:00
|
|
|
computed,
|
2021-09-05 17:43:14 +02:00
|
|
|
defineComponent,
|
2021-09-29 17:35:21 +02:00
|
|
|
ref,
|
2021-09-05 17:43:14 +02:00
|
|
|
onBeforeMount,
|
|
|
|
} from 'vue'
|
|
|
|
|
2021-09-27 13:06:17 +02:00
|
|
|
import CalendarCells from '@/components/Dashboard/UserCalendar/CalendarCells.vue'
|
2021-09-05 17:43:14 +02:00
|
|
|
import CalendarDays from '@/components/Dashboard/UserCalendar/CalendarDays.vue'
|
|
|
|
import CalendarHeader from '@/components/Dashboard/UserCalendar/CalendarHeader.vue'
|
2021-09-27 13:06:17 +02:00
|
|
|
import { WORKOUTS_STORE } from '@/store/constants'
|
|
|
|
import { ISport } from '@/types/sports'
|
2021-09-05 17:43:14 +02:00
|
|
|
import { IAuthUserProfile } from '@/types/user'
|
|
|
|
import { IWorkout, IWorkoutsPayload } from '@/types/workouts'
|
|
|
|
import { useStore } from '@/use/useStore'
|
|
|
|
import { getCalendarStartAndEnd } from '@/utils/dates'
|
|
|
|
|
|
|
|
export default defineComponent({
|
|
|
|
name: 'UserCalendar',
|
|
|
|
components: {
|
2021-09-27 13:06:17 +02:00
|
|
|
CalendarCells,
|
2021-09-05 17:43:14 +02:00
|
|
|
CalendarDays,
|
|
|
|
CalendarHeader,
|
|
|
|
},
|
|
|
|
props: {
|
2021-09-27 13:06:17 +02:00
|
|
|
sports: {
|
|
|
|
type: Object as PropType<ISport[]>,
|
|
|
|
required: true,
|
|
|
|
},
|
2021-09-05 17:43:14 +02:00
|
|
|
user: {
|
|
|
|
type: Object as PropType<IAuthUserProfile>,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
setup(props) {
|
|
|
|
const store = useStore()
|
2021-09-27 13:06:17 +02:00
|
|
|
|
2021-09-29 17:35:21 +02:00
|
|
|
onBeforeMount(() => getCalendarWorkouts())
|
2021-09-27 13:06:17 +02:00
|
|
|
|
2021-09-05 17:43:14 +02:00
|
|
|
const dateFormat = 'yyyy-MM-dd'
|
2021-09-29 17:35:21 +02:00
|
|
|
let day = ref(new Date())
|
|
|
|
let calendarDates = ref(
|
|
|
|
getCalendarStartAndEnd(day.value, props.user.weekm)
|
|
|
|
)
|
2021-09-05 17:43:14 +02:00
|
|
|
const calendarWorkouts: ComputedRef<IWorkout[]> = computed(
|
|
|
|
() => store.getters[WORKOUTS_STORE.GETTERS.CALENDAR_WORKOUTS]
|
|
|
|
)
|
|
|
|
|
2021-09-29 17:35:21 +02:00
|
|
|
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,
|
|
|
|
}
|
2021-09-05 17:43:14 +02:00
|
|
|
},
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
@import '~@/scss/base';
|
|
|
|
#user-calendar {
|
|
|
|
.calendar-card {
|
|
|
|
padding: 0;
|
2021-09-08 19:31:28 +02:00
|
|
|
|
|
|
|
.card-content {
|
|
|
|
padding: 0;
|
|
|
|
}
|
2021-09-05 17:43:14 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|