Client - add button to clear workouts filters

fittrackee_client/src/components/Workouts/WorkoutsFilters.vue

@@ -151,6 +151,9 @@
         <button class="confirm" @click="onFilter">
           {{ $t('buttons.FILTER') }}
         </button>
+        <button class="confirm" @click="onClearFilter">
+          {{ $t('buttons.CLEAR_FILTER') }}
+        </button>
       </div>
     </div>
   </div>
@@ -202,6 +205,10 @@
         }
         router.push({ path: '/workouts', query: params })
       }
+      function onClearFilter() {
+        emit('filter')
+        router.push({ path: '/workouts', query: {} })
+      }
 
       watch(
         () => route.query,
@@ -210,7 +217,7 @@
         }
       )
 
-      return { translatedSports, onFilter, handleFilterChange }
+      return { translatedSports, onClearFilter, onFilter, handleFilterChange }
     },
   })
 </script>
@@ -262,10 +269,11 @@
     .form-button {
       display: flex;
       justify-content: center;
+      flex-wrap: wrap;
+      margin: $default-margin * 0.5;
 
       button {
-        margin: $default-padding * 2 $default-padding * 0.5 $default-padding
-          $default-padding * 0.5;
+        margin-top: $default-margin;
         width: 100%;
       }
     }
@@ -298,6 +306,7 @@
       }
 
       .form-button {
+        flex-wrap: initial;
         button {
           margin: $default-padding $default-padding * 0.5;
           width: 100%;
@@ -332,10 +341,17 @@
         }
       }
       .form-button {
+        flex-wrap: initial;
         button {
           margin: $default-padding $default-padding * 0.5;
         }
       }
     }
+
+    @media screen and (max-width: $x-small-limit) {
+      .form-button {
+        flex-wrap: wrap;
+      }
+    }
   }
 </style>

fittrackee_client/src/components/Workouts/WorkoutsList.vue

@@ -223,7 +223,6 @@
       function getWorkoutsQuery(newQuery: LocationQuery): TWorkoutsPayload {
         query = getQuery(newQuery, orderByList, defaultOrder.order_by, {
           defaultSort: defaultOrder.order,
-          query,
         })
         Object.keys(newQuery)
           .filter((k) => workoutsPayloadKeys.includes(k))

fittrackee_client/src/locales/en/buttons.json

@@ -1,6 +1,7 @@
 {
   "BACK": "Back",
   "CANCEL": "Cancel",
+  "CLEAR_FILTER": "Clear filters",
   "DELETE_MY_ACCOUNT": "Delete my account",
   "DISABLE": "Disable",
   "EDIT": "Edit",

fittrackee_client/src/locales/fr/buttons.json

@@ -1,6 +1,7 @@
 {
   "BACK": "Précédent",
   "CANCEL": "Annuler",
+  "CLEAR_FILTER": "Réinitialiser",
   "DELETE_MY_ACCOUNT": "Supprimer mon compte",
   "DISABLE": "Désactiver",
   "EDIT": "Modifier",

fittrackee_client/src/utils/api.ts

@@ -35,7 +35,7 @@ export const getQuery = (
 ): TPaginationPayload => {
   const queryOptions = options || {}
   const defaultSort = queryOptions.defaultSort || 'asc'
-  const query = queryOptions.query || <TPaginationPayload>{}
+  const query = <TPaginationPayload>{}
 
   query.page = getNumberQueryValue(locationQuery.page, defaultPage)
   query.per_page = getNumberQueryValue(locationQuery.per_page, defaultPerPage)