From cc65b6584015591b1df2d8b4e9a1351d50a95fe7 Mon Sep 17 00:00:00 2001
From: Jonathan <jonathan.courat@bag-era.fr>
Date: Sat, 18 Sep 2021 23:01:37 +0200
Subject: [PATCH 1/8] Implement id instead of index to manage routes

---
 src/components/RouteBlock.vue           | 30 ++++++++--------
 src/components/RouteBlockCollection.vue |  4 +--
 src/store/routeCollection.js            | 48 +++++++++++++++----------
 3 files changed, 46 insertions(+), 36 deletions(-)

diff --git a/src/components/RouteBlock.vue b/src/components/RouteBlock.vue
index 6c94823..4e966d5 100644
--- a/src/components/RouteBlock.vue
+++ b/src/components/RouteBlock.vue
@@ -28,7 +28,7 @@
       class="request-response">
     </textarea>
     <button @click="fetchData">🏃🏽 RUN</button>
-    <button @click="deleteRoute">💣 DELETE</button>
+    <button @dblclick="deleteRoute">💣 DELETE</button>
   </div>
 </template>
 
@@ -39,7 +39,7 @@ import axios from 'axios';
 export default {
   name: 'RouteBlock',
   props: {
-    idx: {
+    id: {
       type: Number,
       required: true,
     },
@@ -57,11 +57,11 @@ export default {
     }),
     routeVerb: {
       get() {
-        return this.$store.getters.routeData(this.idx).routeVerb;
+        return this.$store.getters.routeData(this.id).routeVerb;
       },
       set(value) {
         const data = {
-          idx: this.idx,
+          id: this.id,
           routeVerb: value,
         };
 
@@ -70,11 +70,11 @@ export default {
     },
     routePath: {
       get() {
-        return this.$store.getters.routeData(this.idx).routePath;
+        return this.$store.getters.routeData(this.id).routePath;
       },
       set(value) {
         const data = {
-          idx: this.idx,
+          id: this.id,
           routePath: value,
         };
 
@@ -83,11 +83,11 @@ export default {
     },
     routeBody: {
       get() {
-        return this.$store.getters.routeData(this.idx).routeBody;
+        return this.$store.getters.routeData(this.id).routeBody;
       },
       set(value) {
         const data = {
-          idx: this.idx,
+          id: this.id,
           routeBody: value,
         };
 
@@ -97,14 +97,14 @@ export default {
     apiResponse: {
       get() {
         const key = this.$store.getters.displayOnlyKey;
-        if (key && this.$store.getters.routeData(this.idx).apiResponse[key]) {
-          return this.$store.getters.routeData(this.idx).apiResponse[key];
+        if (key && this.$store.getters.routeData(this.id).apiResponse[key]) {
+          return this.$store.getters.routeData(this.id).apiResponse[key];
         }
-        return this.$store.getters.routeData(this.idx).apiResponse;
+        return this.$store.getters.routeData(this.id).apiResponse;
       },
       set(value) {
         const data = {
-          idx: this.idx,
+          id: this.id,
           apiResponse: value,
         };
 
@@ -112,7 +112,7 @@ export default {
       },
     },
     apiResponseStatus() {
-      return this.$store.getters.routeDataStatus(this.idx);
+      return this.$store.getters.routeDataStatus(this.id);
     },
     apiResponseAsText() {
       if (this.apiResponse === '') { return null; }
@@ -150,10 +150,10 @@ export default {
         });
     },
     cleanResponse() {
-      this.$store.dispatch('CLEAN_RESPONSE', this.idx);
+      this.$store.dispatch('CLEAN_RESPONSE', this.id);
     },
     deleteRoute() {
-      this.$store.dispatch('DELETE_ROUTE', this.idx);
+      this.$store.dispatch('DELETE_ROUTE', this.id);
     },
   },
 };
diff --git a/src/components/RouteBlockCollection.vue b/src/components/RouteBlockCollection.vue
index 8c682e1..26ea246 100644
--- a/src/components/RouteBlockCollection.vue
+++ b/src/components/RouteBlockCollection.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="route-block-collection">
-    <div v-for="(_, idx) in routeCollection" :key="idx">
-      <RouteBlock :idx="idx"/>
+    <div v-for="(route) in routeCollection" :key="route.id">
+      <RouteBlock :id="route.id"/>
     </div>
     <button @click="addRoute">➕ ADD ROUTE</button>
   </div>
diff --git a/src/store/routeCollection.js b/src/store/routeCollection.js
index ca80299..290dbdd 100644
--- a/src/store/routeCollection.js
+++ b/src/store/routeCollection.js
@@ -17,50 +17,60 @@ export default {
   state: () => ({ ...INITIAL_STATE }),
   getters: {
     routeCollection: (state) => state.routeCollection,
-    routeData: (state) => (idx) => state.routeCollection[idx],
-    routeDataStatus: (state) => (idx) => state.routeCollection[idx]?.apiResponse?.status || 0,
+    routeData: (state) => (id) => state.routeCollection.find((r) => r.id === id),
+    routeDataStatus: (state) => (id) => {
+      const idx = state.routeCollection.findIndex((r) => r.id === id);
+      return state.routeCollection[idx]?.apiResponse?.status || 0;
+    },
     defaultRoute: (state) => state.defaultRoute,
   },
   mutations: {
     ADD_ROUTE(state) {
-      state.routeCollection.push({ ...state.defaultRoute });
+      state.routeCollection.push({ ...state.defaultRoute, id: new Date().getTime() });
     },
     UPDATE_ROUTE(state, data) {
-      const payload = state.routeCollection[data.idx];
+      const idx = state.routeCollection.findIndex((r) => r.id === data.id);
+      const payload = state.routeCollection[idx];
       payload.routeVerb = data.routeVerb;
       payload.routePath = data.routePath;
       payload.routeBody = data.routeBody;
-      Vue.set(state.routeCollection, data.idx, payload);
+      Vue.set(state.routeCollection, idx, payload);
     },
-    DELETE_ROUTE(state, idx) {
+    DELETE_ROUTE(state, id) {
+      const idx = state.routeCollection.findIndex((r) => r.id === id);
       state.routeCollection.splice(idx, 1);
     },
     UPDATE_ROUTE_VERB(state, data) {
-      const payload = state.routeCollection[data.idx];
+      const idx = state.routeCollection.findIndex((r) => r.id === data.id);
+      const payload = state.routeCollection[idx];
       payload.routeVerb = data.routeVerb;
-      Vue.set(state.routeCollection, data.idx, payload);
+      Vue.set(state.routeCollection, idx, payload);
     },
     UPDATE_ROUTE_PATH(state, data) {
-      const payload = state.routeCollection[data.idx];
+      const idx = state.routeCollection.findIndex((r) => r.id === data.id);
+      const payload = state.routeCollection[idx];
       payload.routePath = data.routePath;
-      Vue.set(state.routeCollection, data.idx, payload);
+      Vue.set(state.routeCollection, idx, payload);
     },
     UPDATE_ROUTE_BODY(state, data) {
-      const payload = state.routeCollection[data.idx];
+      const idx = state.routeCollection.findIndex((r) => r.id === data.id);
+      const payload = state.routeCollection[idx];
       payload.routeBody = data.routeBody === ''
         ? '{\n}'
         : data.routeBody;
-      Vue.set(state.routeCollection, data.idx, payload);
+      Vue.set(state.routeCollection, idx, payload);
     },
     UPDATE_ROUTE_RESPONSE(state, data) {
-      const payload = state.routeCollection[data.idx];
+      const idx = state.routeCollection.findIndex((r) => r.id === data.id);
+      const payload = state.routeCollection[idx];
       payload.apiResponse = data.apiResponse;
-      Vue.set(state.routeCollection, data.idx, payload);
+      Vue.set(state.routeCollection, idx, payload);
     },
     SET_COLLECTION_FROM_FILE(state, data) {
       state.routeCollection = data;
     },
-    CLEAN_RESPONSE(state, idx) {
+    CLEAN_RESPONSE(state, id) {
+      const idx = state.routeCollection.findIndex((r) => r.id === id);
       const payload = state.routeCollection[idx];
       payload.apiResponse = '';
       Vue.set(state.routeCollection, idx, payload);
@@ -73,14 +83,14 @@ export default {
     UPDATE_ROUTE({ commit }, data) {
       commit('UPDATE_ROUTE', data);
     },
-    DELETE_ROUTE({ commit }, idx) {
-      commit('DELETE_ROUTE', idx);
+    DELETE_ROUTE({ commit }, id) {
+      commit('DELETE_ROUTE', id);
     },
     SET_COLLECTION_FROM_FILE({ commit }, data) {
       commit('SET_COLLECTION_FROM_FILE', data);
     },
-    CLEAN_RESPONSE({ commit }, idx) {
-      commit('CLEAN_RESPONSE', idx);
+    CLEAN_RESPONSE({ commit }, id) {
+      commit('CLEAN_RESPONSE', id);
     },
   },
 };
-- 
GitLab


From 547a10c9d3af360aa8573ed13fe3e56156dbc985 Mon Sep 17 00:00:00 2001
From: Jonathan <jonathan.courat@bag-era.fr>
Date: Sun, 19 Sep 2021 00:03:42 +0200
Subject: [PATCH 2/8] Filter by routeVerb

---
 src/components/Dashboard.vue            | 29 ++++++++++++++++------
 src/components/DashboardCard.vue        | 33 +++++++++++++++++++++++--
 src/components/RouteBlockCollection.vue | 12 ++++++++-
 src/store/routeCollection.js            | 16 ++++++++++++
 4 files changed, 80 insertions(+), 10 deletions(-)

diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue
index 3a3f09c..278e789 100644
--- a/src/components/Dashboard.vue
+++ b/src/components/Dashboard.vue
@@ -1,13 +1,28 @@
 <template>
   <div class="dashboard">
     <DashboardCard :value="totalRoutes" legend="TOTAL ROUTES"/>
-    <DashboardCard :value="requestOK" legend="REQUEST OK" light="#30d230"/>
-    <DashboardCard :value="requestKO" legend="REQUEST KO" light="red"/>
-    <DashboardCard :value="requestNotStarted" legend="NOT STARTED" light="grey"/>
-    <DashboardCard :value="totalGet" legend="GET"/>
-    <DashboardCard :value="totalPut" legend="PUT"/>
-    <DashboardCard :value="totalPatch" legend="PATCH"/>
-    <DashboardCard :value="totalPost" legend="POST"/>
+    <DashboardCard
+      :value="requestOK"
+      legend="REQUEST OK"
+      light="#30d230"
+      :filter="['status', 'OK']"
+    />
+    <DashboardCard
+      :value="requestKO"
+      legend="REQUEST KO"
+      light="red"
+      :filter="['status', 'KO']"
+    />
+    <DashboardCard
+      :value="requestNotStarted"
+      legend="NOT STARTED"
+      light="grey"
+      :filter="['status', 'NOP']"
+    />
+    <DashboardCard :value="totalGet" legend="GET" :filter="['routeVerb', 'get']"/>
+    <DashboardCard :value="totalPut" legend="PUT" :filter="['routeVerb', 'put']"/>
+    <DashboardCard :value="totalPatch" legend="PATCH" :filter="['routeVerb', 'patch']"/>
+    <DashboardCard :value="totalPost" legend="POST" :filter="['routeVerb', 'post']"/>
   </div>
 </template>
 
diff --git a/src/components/DashboardCard.vue b/src/components/DashboardCard.vue
index d05f015..021f1a9 100644
--- a/src/components/DashboardCard.vue
+++ b/src/components/DashboardCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="dashboard-card">
+    <div class="dashboard-card" :class="{notFiltered: !isFiltered}" @click="filterBlock">
       <div v-if="light" class="color-status" :style="mocolor"></div>
       <div class="data-value">{{ value }}</div>
       <div class="data-legend">{{ legend }}</div>
@@ -9,8 +9,10 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
+
 export default {
-  name: 'Dashboard',
+  name: 'DashboardCard',
   props: {
     value: {
       type: [String, Number],
@@ -24,6 +26,9 @@ export default {
       type: String,
       default: '',
     },
+    filter: {
+      type: Array,
+    },
   },
   computed: {
     mocolor() {
@@ -31,6 +36,22 @@ export default {
         '--light-color': this.light,
       };
     },
+    ...mapGetters({
+      filterStore: 'filter',
+    }),
+    isFiltered() {
+      return this.filter === undefined
+        || this.filterStore.routeVerb.length === 0
+        || this.filterStore.routeVerb.includes(this.filter[1]);
+    },
+  },
+  methods: {
+    filterBlock() {
+      if (this.filter === undefined) {
+        return;
+      }
+      this.$store.dispatch('ADD_FILTER', this.filter);
+    },
   },
 };
 </script>
@@ -48,6 +69,10 @@ export default {
   margin-top: 1em;
 }
 
+.dashboard-card:hover {
+  cursor: pointer;
+}
+
 .data-value {
   font-size: 2em;
   font-weight: 100;
@@ -68,4 +93,8 @@ export default {
   height: 2px;
   width: var(--unit-2);
 }
+
+.notFiltered {
+  opacity: 0.5;
+}
 </style>
diff --git a/src/components/RouteBlockCollection.vue b/src/components/RouteBlockCollection.vue
index 26ea246..1bce33b 100644
--- a/src/components/RouteBlockCollection.vue
+++ b/src/components/RouteBlockCollection.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="route-block-collection">
-    <div v-for="(route) in routeCollection" :key="route.id">
+    <div v-for="(route) in filteredCollection" :key="route.id">
       <RouteBlock :id="route.id"/>
     </div>
     <button @click="addRoute">➕ ADD ROUTE</button>
@@ -19,7 +19,17 @@ export default {
   computed: {
     ...mapGetters({
       routeCollection: 'routeCollection',
+      filter: 'filter',
     }),
+    filteredCollection() {
+      if (this.filter.routeVerb.length === 0) {
+        return this.routeCollection;
+      }
+      const filtered = this.routeCollection.filter(
+        (r) => this.filter.routeVerb.includes(r.routeVerb),
+      );
+      return filtered;
+    },
   },
   methods: {
     addRoute() {
diff --git a/src/store/routeCollection.js b/src/store/routeCollection.js
index 290dbdd..4e36136 100644
--- a/src/store/routeCollection.js
+++ b/src/store/routeCollection.js
@@ -11,6 +11,9 @@ export const INITIAL_STATE = {
     routeBody: '{\n}',
     apiResponse: '',
   },
+  filter: {
+    routeVerb: [],
+  },
 };
 
 export default {
@@ -23,6 +26,7 @@ export default {
       return state.routeCollection[idx]?.apiResponse?.status || 0;
     },
     defaultRoute: (state) => state.defaultRoute,
+    filter: (state) => state.filter,
   },
   mutations: {
     ADD_ROUTE(state) {
@@ -75,6 +79,15 @@ export default {
       payload.apiResponse = '';
       Vue.set(state.routeCollection, idx, payload);
     },
+    ADD_FILTER(state, filter) {
+      const [k, v] = filter;
+      if (state.filter[k].includes(v)) {
+        const idx = state.filter[k].findIndex((elm) => elm === v);
+        state.filter[k].splice(idx, 1);
+      } else {
+        state.filter[k].push(v);
+      }
+    },
   },
   actions: {
     ADD_ROUTE({ commit }) {
@@ -92,5 +105,8 @@ export default {
     CLEAN_RESPONSE({ commit }, id) {
       commit('CLEAN_RESPONSE', id);
     },
+    ADD_FILTER({ commit }, filter) {
+      commit('ADD_FILTER', filter);
+    },
   },
 };
-- 
GitLab


From 7ba0b1592e537c7050554d14b8f7f851144ee404 Mon Sep 17 00:00:00 2001
From: Jonathan <jonathan.courat@bag-era.fr>
Date: Sun, 19 Sep 2021 12:31:32 +0200
Subject: [PATCH 3/8] Clean routeCollection store file

---
 src/store/routeCollection.js | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/src/store/routeCollection.js b/src/store/routeCollection.js
index 4e36136..e3ad2e5 100644
--- a/src/store/routeCollection.js
+++ b/src/store/routeCollection.js
@@ -18,20 +18,31 @@ export const INITIAL_STATE = {
 
 export default {
   state: () => ({ ...INITIAL_STATE }),
+  // --------------------------------------------------------------------------------
+  //                                   GUETTERS
+  // --------------------------------------------------------------------------------
   getters: {
     routeCollection: (state) => state.routeCollection,
+
     routeData: (state) => (id) => state.routeCollection.find((r) => r.id === id),
+
     routeDataStatus: (state) => (id) => {
       const idx = state.routeCollection.findIndex((r) => r.id === id);
       return state.routeCollection[idx]?.apiResponse?.status || 0;
     },
+
     defaultRoute: (state) => state.defaultRoute,
+
     filter: (state) => state.filter,
   },
+  // --------------------------------------------------------------------------------
+  //                                   MUTATIONS
+  // --------------------------------------------------------------------------------
   mutations: {
     ADD_ROUTE(state) {
       state.routeCollection.push({ ...state.defaultRoute, id: new Date().getTime() });
     },
+
     UPDATE_ROUTE(state, data) {
       const idx = state.routeCollection.findIndex((r) => r.id === data.id);
       const payload = state.routeCollection[idx];
@@ -40,22 +51,26 @@ export default {
       payload.routeBody = data.routeBody;
       Vue.set(state.routeCollection, idx, payload);
     },
+
     DELETE_ROUTE(state, id) {
       const idx = state.routeCollection.findIndex((r) => r.id === id);
       state.routeCollection.splice(idx, 1);
     },
+
     UPDATE_ROUTE_VERB(state, data) {
       const idx = state.routeCollection.findIndex((r) => r.id === data.id);
       const payload = state.routeCollection[idx];
       payload.routeVerb = data.routeVerb;
       Vue.set(state.routeCollection, idx, payload);
     },
+
     UPDATE_ROUTE_PATH(state, data) {
       const idx = state.routeCollection.findIndex((r) => r.id === data.id);
       const payload = state.routeCollection[idx];
       payload.routePath = data.routePath;
       Vue.set(state.routeCollection, idx, payload);
     },
+
     UPDATE_ROUTE_BODY(state, data) {
       const idx = state.routeCollection.findIndex((r) => r.id === data.id);
       const payload = state.routeCollection[idx];
@@ -64,21 +79,25 @@ export default {
         : data.routeBody;
       Vue.set(state.routeCollection, idx, payload);
     },
+
     UPDATE_ROUTE_RESPONSE(state, data) {
       const idx = state.routeCollection.findIndex((r) => r.id === data.id);
       const payload = state.routeCollection[idx];
       payload.apiResponse = data.apiResponse;
       Vue.set(state.routeCollection, idx, payload);
     },
+
     SET_COLLECTION_FROM_FILE(state, data) {
       state.routeCollection = data;
     },
+
     CLEAN_RESPONSE(state, id) {
       const idx = state.routeCollection.findIndex((r) => r.id === id);
       const payload = state.routeCollection[idx];
       payload.apiResponse = '';
       Vue.set(state.routeCollection, idx, payload);
     },
+
     ADD_FILTER(state, filter) {
       const [k, v] = filter;
       if (state.filter[k].includes(v)) {
@@ -89,22 +108,30 @@ export default {
       }
     },
   },
+  // --------------------------------------------------------------------------------
+  //                                   ACTIONS
+  // --------------------------------------------------------------------------------
   actions: {
     ADD_ROUTE({ commit }) {
       commit('ADD_ROUTE');
     },
+
     UPDATE_ROUTE({ commit }, data) {
       commit('UPDATE_ROUTE', data);
     },
+
     DELETE_ROUTE({ commit }, id) {
       commit('DELETE_ROUTE', id);
     },
+
     SET_COLLECTION_FROM_FILE({ commit }, data) {
       commit('SET_COLLECTION_FROM_FILE', data);
     },
+
     CLEAN_RESPONSE({ commit }, id) {
       commit('CLEAN_RESPONSE', id);
     },
+
     ADD_FILTER({ commit }, filter) {
       commit('ADD_FILTER', filter);
     },
-- 
GitLab


From 3cdb959f91711c741577fd7c914edce82fed85ce Mon Sep 17 00:00:00 2001
From: Jonathan <jonathan.courat@bag-era.fr>
Date: Sun, 19 Sep 2021 13:14:57 +0200
Subject: [PATCH 4/8] Add get filter status && routeVerb combination

---
 src/components/DashboardCard.vue        |  5 +++--
 src/components/RouteBlockCollection.vue | 21 +++++++++++++++++++--
 src/store/routeCollection.js            |  1 +
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/components/DashboardCard.vue b/src/components/DashboardCard.vue
index 021f1a9..21e2064 100644
--- a/src/components/DashboardCard.vue
+++ b/src/components/DashboardCard.vue
@@ -41,8 +41,9 @@ export default {
     }),
     isFiltered() {
       return this.filter === undefined
-        || this.filterStore.routeVerb.length === 0
-        || this.filterStore.routeVerb.includes(this.filter[1]);
+        || (this.filterStore.routeVerb.length === 0 && this.filterStore.status.length === 0)
+        || this.filterStore.routeVerb.includes(this.filter[1])
+        || this.filterStore.status.includes(this.filter[1]);
     },
   },
   methods: {
diff --git a/src/components/RouteBlockCollection.vue b/src/components/RouteBlockCollection.vue
index 1bce33b..646f662 100644
--- a/src/components/RouteBlockCollection.vue
+++ b/src/components/RouteBlockCollection.vue
@@ -22,11 +22,18 @@ export default {
       filter: 'filter',
     }),
     filteredCollection() {
-      if (this.filter.routeVerb.length === 0) {
+      if (this.filter.routeVerb.length === 0 && this.filter.status.length === 0) {
         return this.routeCollection;
       }
       const filtered = this.routeCollection.filter(
-        (r) => this.filter.routeVerb.includes(r.routeVerb),
+        (r) => (
+          this.filter.routeVerb.includes(r.routeVerb)
+          || this.filter.routeVerb.length === 0
+        )
+        && (
+          this.getStatusEvaluation(this.filter.status, r.apiResponse)
+          || this.filter.status.length === 0
+        ),
       );
       return filtered;
     },
@@ -35,6 +42,16 @@ export default {
     addRoute() {
       this.$store.dispatch('ADD_ROUTE');
     },
+    getStatusEvaluation(statusFilter, res) {
+      const resStatus = res.status ?? undefined;
+      let statusIs = 'NOP';
+      if (resStatus < 400) {
+        statusIs = 'OK';
+      } else if (resStatus > 400) {
+        statusIs = 'KO';
+      }
+      return statusFilter.includes(statusIs);
+    },
   },
 };
 </script>
diff --git a/src/store/routeCollection.js b/src/store/routeCollection.js
index e3ad2e5..4baf94a 100644
--- a/src/store/routeCollection.js
+++ b/src/store/routeCollection.js
@@ -13,6 +13,7 @@ export const INITIAL_STATE = {
   },
   filter: {
     routeVerb: [],
+    status: [],
   },
 };
 
-- 
GitLab


From 07fa4ee01e7a903c8739fc6f4c83bfee0471aa8e Mon Sep 17 00:00:00 2001
From: Jonathan <jonathan.courat@bag-era.fr>
Date: Sun, 19 Sep 2021 14:23:37 +0200
Subject: [PATCH 5/8] Add filter reinit

---
 src/components/Dashboard.vue     |  7 ++++++-
 src/components/DashboardCard.vue |  7 +++++--
 src/store/routeCollection.js     | 19 +++++++++++++++++++
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue
index 278e789..e324dcc 100644
--- a/src/components/Dashboard.vue
+++ b/src/components/Dashboard.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="dashboard">
-    <DashboardCard :value="totalRoutes" legend="TOTAL ROUTES"/>
+    <DashboardCard
+      :value="totalRoutes"
+      legend="TOTAL ROUTES"
+      :filter="['reinit', 'all']"
+    />
     <DashboardCard
       :value="requestOK"
       legend="REQUEST OK"
@@ -38,6 +42,7 @@ export default {
   computed: {
     ...mapGetters({
       routeCollection: 'routeCollection',
+      isFilterOn: 'isFilterOn',
     }),
     totalRoutes() {
       return this.routeCollection.length;
diff --git a/src/components/DashboardCard.vue b/src/components/DashboardCard.vue
index 21e2064..58038fb 100644
--- a/src/components/DashboardCard.vue
+++ b/src/components/DashboardCard.vue
@@ -49,9 +49,12 @@ export default {
   methods: {
     filterBlock() {
       if (this.filter === undefined) {
-        return;
+        console.info('Not a filter');
+      } else if (this.filter[0] === 'reinit') {
+        this.$store.dispatch('REINIT_FILTER');
+      } else {
+        this.$store.dispatch('ADD_FILTER', this.filter);
       }
-      this.$store.dispatch('ADD_FILTER', this.filter);
     },
   },
 };
diff --git a/src/store/routeCollection.js b/src/store/routeCollection.js
index 4baf94a..a63748a 100644
--- a/src/store/routeCollection.js
+++ b/src/store/routeCollection.js
@@ -35,6 +35,16 @@ export default {
     defaultRoute: (state) => state.defaultRoute,
 
     filter: (state) => state.filter,
+
+    isFilterOn: (state) => {
+      let isOn = false;
+      Object.keys(state.filter).forEach((k) => {
+        if (state.filter[k].length > 0) {
+          isOn = true;
+        }
+      });
+      return isOn;
+    },
   },
   // --------------------------------------------------------------------------------
   //                                   MUTATIONS
@@ -108,6 +118,11 @@ export default {
         state.filter[k].push(v);
       }
     },
+
+    REINIT_FILTER(state) {
+      state.filter.routeVerb = [];
+      state.filter.status = [];
+    },
   },
   // --------------------------------------------------------------------------------
   //                                   ACTIONS
@@ -136,5 +151,9 @@ export default {
     ADD_FILTER({ commit }, filter) {
       commit('ADD_FILTER', filter);
     },
+
+    REINIT_FILTER({ commit }) {
+      commit('REINIT_FILTER');
+    },
   },
 };
-- 
GitLab


From 44fcb0af3f2b64048ebd7cc000dc4a93ff86eed7 Mon Sep 17 00:00:00 2001
From: Jonathan <jonathan.courat@bag-era.fr>
Date: Sun, 19 Sep 2021 15:02:24 +0200
Subject: [PATCH 6/8] Convert div to button to allow keyboard access

---
 src/components/DashboardCard.vue | 51 +++++++++++++++++++++-----------
 1 file changed, 34 insertions(+), 17 deletions(-)

diff --git a/src/components/DashboardCard.vue b/src/components/DashboardCard.vue
index 58038fb..fec44f6 100644
--- a/src/components/DashboardCard.vue
+++ b/src/components/DashboardCard.vue
@@ -1,10 +1,12 @@
 <template>
-  <div>
-    <div class="dashboard-card" :class="{notFiltered: !isFiltered}" @click="filterBlock">
-      <div v-if="light" class="color-status" :style="mocolor"></div>
-      <div class="data-value">{{ value }}</div>
-      <div class="data-legend">{{ legend }}</div>
-    </div>
+  <div class="dashboard-card">
+    <button @click="filterBlock">
+      <div class="dashboard-card-elem" :class="{notFiltered: !isFiltered}">
+        <div v-if="light" class="color-status" :style="mocolor"></div>
+        <div class="data-value">{{ value }}</div>
+        <div class="data-legend">{{ legend }}</div>
+      </div>
+    </button>
   </div>
 </template>
 
@@ -61,31 +63,46 @@ export default {
 </script>
 
 <style scoped>
+button {
+  background-color: transparent;
+  padding: 0;
+  margin: 0;
+  font-weight: normal;
+  border: none;
+}
+
 .dashboard-card {
+  margin-right: 1rem;
+  margin-top: 1rem;
+}
+
+.dashboard-card:hover {
+  cursor: pointer;
+}
+
+.dashboard-card-elem {
   background: var(--color-1);
   border-radius: var( --unit-1);
   width: fit-content;
   min-width: 100px;
-  height: 3em;
+  height: 3rem;
   text-align: right;
-  padding: 1em;
-  margin-right: 1em;
-  margin-top: 1em;
-}
-
-.dashboard-card:hover {
-  cursor: pointer;
+  padding: 1rem;
 }
 
 .data-value {
-  font-size: 2em;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-size: 2rem;
   font-weight: 100;
   margin: 0;
 }
 
 .data-legend {
-  font-size: 0.7em;
-  margin-top: -0.7em;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-size: 0.7rem;
+  margin-top: -0.7rem;
+  font-weight: lighter;
+  letter-spacing: normal;
 }
 
 .color-status {
-- 
GitLab


From aa692a25d363feee1747484780796caf19358ddc Mon Sep 17 00:00:00 2001
From: Jonathan <jonathan.courat@bag-era.fr>
Date: Sun, 19 Sep 2021 15:46:57 +0200
Subject: [PATCH 7/8] Add reset app button

---
 src/components/UserSettings.vue | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/src/components/UserSettings.vue b/src/components/UserSettings.vue
index 59d1d4a..470b409 100644
--- a/src/components/UserSettings.vue
+++ b/src/components/UserSettings.vue
@@ -18,6 +18,12 @@
       max="100"
       step="5"
       value="10">
+    <!-- DANGER ZONE ACTION -->
+    <details style="border: 1px solid red; padding: 12px">
+      <summary style="color: red">Danger zone</summary>
+      <p>In case you're stuck with the app, the RED button</p>
+      <button class="danger-zone" @click="reinitApp">APP RESET</button>
+    </details>
   </div>
 </template>
 
@@ -50,10 +56,20 @@ export default {
       },
     },
   },
+  methods: {
+    reinitApp() {
+      localStorage.removeItem('vapi');
+      window.location.reload();
+    },
+  },
 };
 </script>
 
 <style scoped>
+  details:hover {
+    cursor: pointer;
+  }
+
   .user-settings {
     display: grid;
     gap: var(--unit-2);
@@ -73,4 +89,17 @@ export default {
     display: grid;
     grid-template-rows: 48px;
   }
+
+  .danger-zone {
+    border-color: rgba(255, 0, 0, 1);
+    background: rgba(200, 0, 0, 0.2);
+    color: rgba(220, 0, 0, 1);
+    width: 100%;
+    padding: var(--unit-2);
+  }
+  .danger-zone:hover {
+    border-color: rgba(255, 0, 0, 1);
+    background: rgba(255, 0, 0, 0.4);
+    color: rgba(255, 0, 0, 1);
+  }
 </style>
-- 
GitLab


From a4e7a9571b7585bf8a1873e571e73374636192dd Mon Sep 17 00:00:00 2001
From: Jonathan <jonathan.courat@bag-era.fr>
Date: Sun, 19 Sep 2021 15:50:53 +0200
Subject: [PATCH 8/8] Update version to 0.6.0

---
 package.json               | 2 +-
 src/components/Onboard.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 0d00468..700e0fa 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vapi",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/src/components/Onboard.vue b/src/components/Onboard.vue
index c332b2b..cb30e8b 100644
--- a/src/components/Onboard.vue
+++ b/src/components/Onboard.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="on-board">
-    <h1>VAPI <span>0.5.1</span></h1>
+    <h1>VAPI <span>0.6.0</span></h1>
     <p>A minimal api tester</p>
   </div>
 </template>
-- 
GitLab