Client - add button to clear workouts filters

2021-11-07 11:17:01 +01:00
parent d3b8ec7c89
commit a22dec457b
21 changed files with 57 additions and 22 deletions
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><!--[if IE]><link rel="icon" href="/favicon.ico"><![endif]--><link rel="stylesheet" href="/static/css/fork-awesome.min.css"><link rel="stylesheet" href="/static/css/leaflet.css"><title>FitTrackee</title><link href="/static/css/admin.9f104fd3.css" rel="prefetch"><link href="/static/css/main.0fb11713.css" rel="prefetch"><link href="/static/css/main~workouts.539c93e4.css" rel="prefetch"><link href="/static/css/profile.1e84a078.css" rel="prefetch"><link href="/static/css/reset.165584bc.css" rel="prefetch"><link href="/static/css/workouts.0c5cfad5.css" rel="prefetch"><link href="/static/js/admin.4047df15.js" rel="prefetch"><link href="/static/js/chunk-2d0c9189.c81458cc.js" rel="prefetch"><link href="/static/js/chunk-2d0cf391.020c75ea.js" rel="prefetch"><link href="/static/js/chunk-2d0da8f3.c8c3e7e8.js" rel="prefetch"><link href="/static/js/chunk-2d2248b6.d84473c1.js" rel="prefetch"><link href="/static/js/chunk-2d22523a.4b710d99.js" rel="prefetch"><link href="/static/js/main.265d6693.js" rel="prefetch"><link href="/static/js/main~workouts.aa540c70.js" rel="prefetch"><link href="/static/js/profile.7e87449f.js" rel="prefetch"><link href="/static/js/reset.98679f6c.js" rel="prefetch"><link href="/static/js/workouts.f98d0408.js" rel="prefetch"><link href="/static/css/app.b50ad746.css" rel="preload" as="style"><link href="/static/js/app.5434baf0.js" rel="preload" as="script"><link href="/static/js/chunk-vendors.c7e5773d.js" rel="preload" as="script"><link href="/static/css/app.b50ad746.css" rel="stylesheet"><link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png"><link rel="manifest" href="/manifest.json"><meta name="theme-color" content="#4DBA87"><meta name="apple-mobile-web-app-capable" content="no"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="apple-mobile-web-app-title" content="fittrackee_client"><link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png"><link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#4DBA87"><meta name="msapplication-TileImage" content="/img/icons/msapplication-icon-144x144.png"><meta name="msapplication-TileColor" content="#000000"></head><body><noscript><strong>We're sorry but FitTrackee doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/static/js/chunk-vendors.c7e5773d.js"></script><script src="/static/js/app.5434baf0.js"></script></body></html>
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><!--[if IE]><link rel="icon" href="/favicon.ico"><![endif]--><link rel="stylesheet" href="/static/css/fork-awesome.min.css"><link rel="stylesheet" href="/static/css/leaflet.css"><title>FitTrackee</title><link href="/static/css/admin.9f104fd3.css" rel="prefetch"><link href="/static/css/main.0fb11713.css" rel="prefetch"><link href="/static/css/main~workouts.539c93e4.css" rel="prefetch"><link href="/static/css/profile.1e84a078.css" rel="prefetch"><link href="/static/css/reset.165584bc.css" rel="prefetch"><link href="/static/css/workouts.368ff8e8.css" rel="prefetch"><link href="/static/js/admin.4047df15.js" rel="prefetch"><link href="/static/js/chunk-2d0c9189.c81458cc.js" rel="prefetch"><link href="/static/js/chunk-2d0cf391.020c75ea.js" rel="prefetch"><link href="/static/js/chunk-2d0da8f3.c8c3e7e8.js" rel="prefetch"><link href="/static/js/chunk-2d2248b6.d84473c1.js" rel="prefetch"><link href="/static/js/chunk-2d22523a.4b710d99.js" rel="prefetch"><link href="/static/js/main.265d6693.js" rel="prefetch"><link href="/static/js/main~workouts.aa540c70.js" rel="prefetch"><link href="/static/js/profile.7e87449f.js" rel="prefetch"><link href="/static/js/reset.98679f6c.js" rel="prefetch"><link href="/static/js/workouts.52ba33b8.js" rel="prefetch"><link href="/static/css/app.b50ad746.css" rel="preload" as="style"><link href="/static/js/app.1f820b50.js" rel="preload" as="script"><link href="/static/js/chunk-vendors.c7e5773d.js" rel="preload" as="script"><link href="/static/css/app.b50ad746.css" rel="stylesheet"><link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png"><link rel="manifest" href="/manifest.json"><meta name="theme-color" content="#4DBA87"><meta name="apple-mobile-web-app-capable" content="no"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="apple-mobile-web-app-title" content="fittrackee_client"><link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png"><link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#4DBA87"><meta name="msapplication-TileImage" content="/img/icons/msapplication-icon-144x144.png"><meta name="msapplication-TileColor" content="#000000"></head><body><noscript><strong>We're sorry but FitTrackee doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/static/js/chunk-vendors.c7e5773d.js"></script><script src="/static/js/app.1f820b50.js"></script></body></html>
@@ -64,7 +64,7 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
    "url": "/img/workouts/mountains.svg"
  },
  {
-    "revision": "362d14a4781f029d90962d9a0e2798af",
+    "revision": "d5b5aba0bf70bf6b00daa6f4a151dd8d",
    "url": "/index.html"
  },
  {
@@ -80,7 +80,7 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
    "url": "/static/css/admin.9f104fd3.css"
  },
  {
-    "revision": "4ccf34f938416a1f98c6",
+    "revision": "856998fdc8f720c6dea3",
    "url": "/static/css/app.b50ad746.css"
  },
  {
@@ -108,8 +108,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
    "url": "/static/css/reset.165584bc.css"
  },
  {
-    "revision": "a1a8fe166d947249a434",
-    "url": "/static/css/workouts.0c5cfad5.css"
+    "revision": "6163e12e51d7d18c9f41",
+    "url": "/static/css/workouts.368ff8e8.css"
  },
  {
    "revision": "e719f9244c69e28e7d00e725ca1e280e",
@@ -196,8 +196,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
    "url": "/static/js/admin.4047df15.js"
  },
  {
-    "revision": "4ccf34f938416a1f98c6",
-    "url": "/static/js/app.5434baf0.js"
+    "revision": "856998fdc8f720c6dea3",
+    "url": "/static/js/app.1f820b50.js"
  },
  {
    "revision": "bd7d183c9f68e5f4027d",
@@ -240,7 +240,7 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
    "url": "/static/js/reset.98679f6c.js"
  },
  {
-    "revision": "a1a8fe166d947249a434",
-    "url": "/static/js/workouts.f98d0408.js"
+    "revision": "6163e12e51d7d18c9f41",
+    "url": "/static/js/workouts.52ba33b8.js"
  }
 ]);
@@ -14,7 +14,7 @@
 importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");

 importScripts(
-  "/precache-manifest.548e1c3c4463fa6d9e835b2a5a45fd90.js"
+  "/precache-manifest.e58c9e28b2243026bdc28972a39db5d6.js"
 );

 workbox.core.setCacheNameDetails({prefix: "fittrackee_client"});
@@ -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>
@@ -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))
@@ -1,6 +1,7 @@
 {
  "BACK": "Back",
  "CANCEL": "Cancel",
+  "CLEAR_FILTER": "Clear filters",
  "DELETE_MY_ACCOUNT": "Delete my account",
  "DISABLE": "Disable",
  "EDIT": "Edit",
@@ -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",
@@ -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)
@@ -236,6 +236,24 @@ describe('getQuery w/ default values and input pagination payload', () => {
      { page: 3, per_page: 10, order: 'asc', order_by: 'workouts_count' }
    )
  })
+
+  it('returns query with only pagination keys', () => {
+    assert.deepEqual(
+      getQuery(
+        {
+          page: '3',
+          per_page: '10',
+          order: 'asc',
+          order_by: 'workouts_count',
+          sport_id: '1',
+        },
+        orderByList,
+        defaultOrderBy,
+        { query: inputQuery }
+      ),
+      { page: 3, per_page: 10, order: 'asc', order_by: 'workouts_count' }
+    )
+  })
 })

 describe('rangePagination', () => {