diff --git a/fittrackee_client/src/components/Dashboard/Timeline/index.vue b/fittrackee_client/src/components/Dashboard/Timeline/index.vue index 6825901e..9cb577af 100644 --- a/fittrackee_client/src/components/Dashboard/Timeline/index.vue +++ b/fittrackee_client/src/components/Dashboard/Timeline/index.vue @@ -1,8 +1,8 @@ @@ -24,6 +29,7 @@ PropType, computed, defineComponent, + ref, onBeforeMount, } from 'vue' import { useI18n } from 'vue-i18n' @@ -54,21 +60,47 @@ const store = useStore() const { t } = useI18n() + let page = ref(1) const per_page = 5 - const displayedWorkoutsCount = + onBeforeMount(() => loadWorkouts()) + + const initWorkoutsCount = props.user.nb_workouts >= per_page ? per_page : props.user.nb_workouts - onBeforeMount(() => - store.dispatch(WORKOUTS_STORE.ACTIONS.GET_USER_WORKOUTS, { - page: 1, - per_page, - }) - ) const workouts: ComputedRef = computed( () => store.getters[WORKOUTS_STORE.GETTERS.USER_WORKOUTS] ) + const moreWorkoutsExist: ComputedRef = computed(() => + workouts.value.length > 0 + ? workouts.value[workouts.value.length - 1].previous_workout !== null + : false + ) - return { displayedWorkoutsCount, per_page, workouts, t } + function loadWorkouts() { + store.dispatch(WORKOUTS_STORE.ACTIONS.GET_USER_WORKOUTS, { + page: page.value, + per_page, + }) + } + function loadMoreWorkouts() { + page.value += 1 + loadWorkouts() + } + function workoutsToDisplayCount() { + return workouts.value.length > initWorkoutsCount + ? workouts.value.length + : initWorkoutsCount + } + + return { + initWorkoutsCount, + moreWorkoutsExist, + per_page, + workouts, + t, + loadMoreWorkouts, + workoutsToDisplayCount, + } }, }) @@ -76,8 +108,15 @@ diff --git a/fittrackee_client/src/components/User/LoginOrRegisterForm.vue b/fittrackee_client/src/components/User/LoginOrRegisterForm.vue index 22a8efa8..653da78b 100644 --- a/fittrackee_client/src/components/User/LoginOrRegisterForm.vue +++ b/fittrackee_client/src/components/User/LoginOrRegisterForm.vue @@ -156,6 +156,11 @@ button { margin: $default-margin; + border: solid 1px var(--app-color); + + &:disabled { + border-color: var(--disabled-color); + } } @media screen and (max-width: $medium-limit) { margin-top: $default-margin; diff --git a/fittrackee_client/src/locales/en/workouts.json b/fittrackee_client/src/locales/en/workouts.json index 96f236d3..34d5c037 100644 --- a/fittrackee_client/src/locales/en/workouts.json +++ b/fittrackee_client/src/locales/en/workouts.json @@ -11,6 +11,7 @@ "END": "end", "KM": "km", "LATEST_WORKOUTS": "Latest workouts", + "LOAD_MORE_WORKOUT": "Load more workouts", "MAX_ALTITUDE": "max. altitude", "MAX_SPEED": "max. speed", "MIN_ALTITUDE": "min. altitude", diff --git a/fittrackee_client/src/locales/fr/workouts.json b/fittrackee_client/src/locales/fr/workouts.json index ee1b14df..d7e4e296 100644 --- a/fittrackee_client/src/locales/fr/workouts.json +++ b/fittrackee_client/src/locales/fr/workouts.json @@ -11,6 +11,7 @@ "END": "fin", "KM": "km", "LATEST_WORKOUTS": "Séances récentes", + "LOAD_MORE_WORKOUT": "Charger les séances suivantes", "MAX_ALTITUDE": "altitude max", "MAX_SPEED": "vitesse max", "MIN_ALTITUDE": "altitude min", diff --git a/fittrackee_client/src/scss/base.scss b/fittrackee_client/src/scss/base.scss index f6d6dfba..6671647b 100644 --- a/fittrackee_client/src/scss/base.scss +++ b/fittrackee_client/src/scss/base.scss @@ -43,7 +43,7 @@ label { button { background: var(--app-background-color); - border: solid 1px var(--app-color); + border: solid 1px var(--input-border-color); border-radius: $border-radius; box-shadow: 2px 2px 2px var(--app-shadow-color); color: var(--app-color); diff --git a/fittrackee_client/src/store/modules/workouts/mutations.ts b/fittrackee_client/src/store/modules/workouts/mutations.ts index 4e1e51e5..d866ad68 100644 --- a/fittrackee_client/src/store/modules/workouts/mutations.ts +++ b/fittrackee_client/src/store/modules/workouts/mutations.ts @@ -19,7 +19,7 @@ export const mutations: MutationTree & TWorkoutsMutations = { state: IWorkoutsState, workouts: IWorkout[] ) { - state.user_workouts = workouts + state.user_workouts = state.user_workouts.concat(workouts) }, [WORKOUTS_STORE.MUTATIONS.SET_WORKOUT]( state: IWorkoutsState,