Client - get workouts filters from route query

fittrackee_client/src/components/Workouts/WorkoutsFilters.vue

@@ -5,18 +5,32 @@
         <div class="form-items-group">
           <div class="form-item">
             <label> {{ $t('workouts.FROM') }}: </label>
-            <input name="from" type="date" @change="handleFilterChange" />
+            <input
+              name="from"
+              type="date"
+              :value="$route.query.from"
+              @change="handleFilterChange"
+            />
           </div>
           <div class="form-item">
             <label> {{ $t('workouts.TO') }}: </label>
-            <input name="to" type="date" @change="handleFilterChange" />
+            <input
+              name="to"
+              type="date"
+              :value="$route.query.to"
+              @change="handleFilterChange"
+            />
           </div>
         </div>
 
         <div class="form-items-group">
           <div class="form-item">
             <label> {{ $t('workouts.SPORT', 1) }}:</label>
-            <select name="sport_id" @change="handleFilterChange">
+            <select
+              name="sport_id"
+              :value="$route.query.sport_id"
+              @change="handleFilterChange"
+            >
               <option value="" />
               <option
                 v-for="sport in translatedSports.filter((s) =>
@@ -40,6 +54,7 @@
                 type="number"
                 min="0"
                 step="1"
+                :value="$route.query.distance_from"
                 @change="handleFilterChange"
               />
               <span>{{ $t('workouts.TO') }}</span>
@@ -48,6 +63,7 @@
                 type="number"
                 min="0"
                 step="1"
+                :value="$route.query.distance_to"
                 @change="handleFilterChange"
               />
             </div>
@@ -60,6 +76,7 @@
             <div class="form-inputs-group">
               <input
                 name="duration_from"
+                :value="$route.query.duration_from"
                 @change="handleFilterChange"
                 pattern="^([0-9]*[0-9]):([0-5][0-9])$"
                 placeholder="hh:mm"
@@ -68,6 +85,7 @@
               <span>{{ $t('workouts.TO') }}</span>
               <input
                 name="duration_to"
+                :value="$route.query.duration_to"
                 @change="handleFilterChange"
                 pattern="^([0-9]*[0-9]):([0-5][0-9])$"
                 placeholder="hh:mm"
@@ -84,6 +102,7 @@
               <input
                 min="0"
                 name="ave_speed_from"
+                :value="$route.query.ave_speed_from"
                 @change="handleFilterChange"
                 step="1"
                 type="number"
@@ -92,6 +111,7 @@
               <input
                 min="0"
                 name="ave_speed_to"
+                :value="$route.query.ave_speed_to"
                 @change="handleFilterChange"
                 step="1"
                 type="number"
@@ -108,6 +128,7 @@
               <input
                 min="0"
                 name="max_speed_from"
+                :value="$route.query.max_speed_from"
                 @change="handleFilterChange"
                 step="1"
                 type="number"
@@ -116,6 +137,7 @@
               <input
                 min="0"
                 name="max_speed_to"
+                :value="$route.query.max_speed_to"
                 @change="handleFilterChange"
                 step="1"
                 type="number"
@@ -137,6 +159,7 @@
 <script lang="ts">
   import { computed, ComputedRef, defineComponent, PropType } from 'vue'
   import { useI18n } from 'vue-i18n'
+  import { useRouter } from 'vue-router'
 
   import { ISport } from '@/types/sports'
   import { IUserProfile } from '@/types/user'
@@ -154,9 +177,11 @@
         required: true,
       },
     },
-    emits: ['filter', 'filtersUpdate'],
+    emits: ['filter'],
     setup(props, { emit }) {
       const { t } = useI18n()
+      const router = useRouter()
+
       const translatedSports: ComputedRef<ISport[]> = computed(() =>
         translateSports(props.sports, t)
       )
@@ -170,7 +195,8 @@
         }
       }
       function onFilter() {
-        emit('filter', { ...params })
+        emit('filter')
+        router.push({ path: '/workouts', query: params })
       }
 
       return { translatedSports, onFilter, handleFilterChange }

fittrackee_client/src/components/Workouts/WorkoutsList.vue

@@ -108,6 +108,7 @@
     capitalize,
     onBeforeMount,
   } from 'vue'
+  import { LocationQuery, useRoute } from 'vue-router'
 
   import StaticMap from '@/components/Common/StaticMap.vue'
   import NoWorkouts from '@/components/Workouts/NoWorkouts.vue'
@@ -126,10 +127,6 @@
       StaticMap,
     },
     props: {
-      params: {
-        type: Object as PropType<Record<string, string>>,
-        required: true,
-      },
       user: {
         type: Object as PropType<IUserProfile>,
         required: true,
@@ -138,8 +135,10 @@
         type: Object as PropType<ITranslatedSport[]>,
       },
     },
-    setup(props) {
+    setup() {
       const store = useStore()
+      const route = useRoute()
+
       const workouts: ComputedRef<IWorkout[]> = computed(
         () => store.getters[WORKOUTS_STORE.GETTERS.USER_WORKOUTS]
       )
@@ -147,23 +146,23 @@
       const page = ref(1)
 
       onBeforeMount(() => {
-        loadWorkouts()
+        loadWorkouts(route.query)
       })
 
-      function loadWorkouts() {
+      function loadWorkouts(newQuery: LocationQuery) {
         page.value = 1
         store.dispatch(WORKOUTS_STORE.ACTIONS.GET_USER_WORKOUTS, {
           page: page.value,
           per_page,
           ...defaultOrder,
-          ...props.params,
+          ...newQuery,
         })
       }
 
       watch(
-        () => props.params,
-        async () => {
-          loadWorkouts()
+        () => route.query,
+        async (newQuery) => {
+          loadWorkouts(newQuery)
         }
       )
 

fittrackee_client/src/views/workouts/WorkoutsView.vue

@@ -5,7 +5,7 @@
         <WorkoutsFilters
           :sports="translatedSports"
           :authUser="authUser"
-          @filter="updateParams"
+          @filter="toggleFilters"
         />
       </div>
       <div class="display-filters">
@@ -20,18 +20,14 @@
         </div>
       </div>
       <div class="list-container">
-        <WorkoutsList
-          :user="authUser"
-          :params="params"
-          :sports="translatedSports"
-        />
+        <WorkoutsList :user="authUser" :sports="translatedSports" />
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-  import { ComputedRef, Ref, computed, defineComponent, ref } from 'vue'
+  import { ComputedRef, computed, defineComponent, ref } from 'vue'
   import { useI18n } from 'vue-i18n'
 
   import WorkoutsFilters from '@/components/Workouts/WorkoutsFilters.vue'
@@ -60,13 +56,8 @@
       const translatedSports: ComputedRef<ITranslatedSport[]> = computed(() =>
         translateSports(sports.value, t)
       )
-      const params: Ref<Record<string, string>> = ref({})
       const hiddenFilters = ref(true)
 
-      function updateParams(filters: Record<string, string>) {
-        params.value = filters
-        hiddenFilters.value = true
-      }
       function toggleFilters() {
         hiddenFilters.value = !hiddenFilters.value
       }
@@ -74,10 +65,8 @@
       return {
         authUser,
         hiddenFilters,
-        params,
         translatedSports,
         toggleFilters,
-        updateParams,
       }
     },
   })