122 lines
3.1 KiB
Vue
Raw Normal View History

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">
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,
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
onBeforeMount(() => getCalendarWorkouts())
2021-09-27 13:06:17 +02:00
2021-09-05 17:43:14 +02:00
const dateFormat = 'yyyy-MM-dd'
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]
)
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;
.card-content {
padding: 0;
}
2021-09-05 17:43:14 +02:00
}
}
</style>