Client - display more workouts in timeline

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

@@ -1,8 +1,8 @@
 <template>
-  <div class="timeline">
+  <div id="timeline">
     <div class="section-title">{{ t('workouts.LATEST_WORKOUTS') }}</div>
     <WorkoutCard
-      v-for="index in [...Array(displayedWorkoutsCount).keys()]"
+      v-for="index in [...Array(workoutsToDisplayCount()).keys()]"
       :workout="workouts.length > 0 ? workouts[index] : null"
       :sport="
         workouts.length > 0
@@ -15,6 +15,11 @@
     <div v-if="workouts.length === 0" class="no-workouts">
       {{ t('workouts.NO_WORKOUTS') }}
     </div>
+    <div v-if="moreWorkoutsExist" class="more-workouts">
+      <button @click="loadMoreWorkouts">
+        {{ t('workouts.LOAD_MORE_WORKOUT') }}
+      </button>
+    </div>
   </div>
 </template>
 
@@ -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<IWorkout[]> = computed(
         () => store.getters[WORKOUTS_STORE.GETTERS.USER_WORKOUTS]
       )
+      const moreWorkoutsExist: ComputedRef<boolean> = 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,
+      }
     },
   })
 </script>
@@ -76,8 +108,15 @@
 <style lang="scss" scoped>
   @import '~@/scss/base';
 
-  .no-workouts {
+  #timeline {
-    margin-bottom: $default-margin * 2;
+    margin-bottom: 20px;
-    padding: $default-padding;
+    .no-workouts {
+      margin-bottom: $default-margin * 2;
+      padding: $default-padding;
+    }
+    .more-workouts {
+      display: flex;
+      justify-content: center;
+    }
   }
 </style>

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;

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",

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",

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

fittrackee_client/src/store/modules/workouts/mutations.ts

@@ -19,7 +19,7 @@ export const mutations: MutationTree<IWorkoutsState> & TWorkoutsMutations = {
     state: IWorkoutsState,
     workouts: IWorkout[]
   ) {
-    state.user_workouts = workouts
+    state.user_workouts = state.user_workouts.concat(workouts)
   },
   [WORKOUTS_STORE.MUTATIONS.SET_WORKOUT](
     state: IWorkoutsState,