set filters store on page load from url params

docs/.vuepress/store/modules/spellFilters.js

@@ -70,18 +70,27 @@ export default {
     updateClasses: ({ commit }, payload) => {
       commit('setClasses', payload)
     },
+    updateClassesFromList: ({ commit }, payload) => {
+      commit('setClassesFromList', payload)
+    },
     resetClasses: ({ commit }) => {
       commit('resetClasses')
     },
     updateLevels: ({ commit }, payload) => {
       commit('setLevels', payload)
     },
+    updateLevelsFromList: ({ commit }, payload) => {
+      commit('setLevelsFromList', payload)
+    },
     resetLevels: ({ commit }) => {
       commit('resetLevels')
     },
     updateSchools: ({ commit }, payload) => {
       commit('setSchools', payload)
     },
+    updateSchoolsFromLst: ({ commit }, payload) => {
+      commit('setSchoolsFromList', payload)
+    },
     resetSchools: ({ commit }) => {
       commit('resetSchools')
     },
@@ -109,6 +118,16 @@ export default {
     setClasses: (state, payload) => {
       state.classes = payload
     },
+    setClassesFromList: (state, payload) => {
+      for (let i = 0; i < payload.length; i++) {
+        let idx = state.classes.findIndex(item => {
+          return item.label == payload[i]
+        })
+        if (idx > -1) {
+          state.classes[idx].value = true
+        }
+      }
+    },
     resetClasses: (state) => {
       state.classes = [
         { label: "Barde", value: false },
@@ -125,6 +144,16 @@ export default {
     setLevels: (state, payload) => {
       state.levels = payload
     },
+    setLevelsFromList: (state, payload) => {
+      for (let i = 0; i < payload.length; i++) {
+        let idx = state.levels.findIndex(item => {
+          return item.level == payload[i]
+        })
+        if (idx > -1) {
+          state.levels[idx].value = true
+        }
+      }
+    },
     resetLevels: (state) => {
       state.levels = [
         { level: 0, value: false },
@@ -142,6 +171,16 @@ export default {
     setSchools: (state, payload) => {
       state.schools = payload
     },
+    setSchoolsFromList: (state, payload) => {
+      for (let i = 0; i < payload.length; i++) {
+        let idx = state.schools.findIndex(item => {
+          return item.label == payload[i]
+        })
+        if (idx > -1) {
+          state.schools[idx].value = true
+        }
+      }
+    },
     resetSchools: (state) => {
       state.schools = [
         { label: "Abjuration", value: false },

docs/.vuepress/theme/components/SpellFilters.vue

@@ -44,7 +44,7 @@
         <v-expansion-panel-header>Composantes d'incantation</v-expansion-panel-header>
         <v-expansion-panel-content>
           <div class="d-flex mt-2 mb-4">
-            <v-btn-toggle v-model="componentVerbal" dark>
+            <v-btn-toggle v-model="componentVerbal" @change="switchComponentVerbal" dark>
               <v-btn :value="true" small :color="setColor(componentVerbal, true, 'green')">
                 <v-icon>mdi-check</v-icon>
               </v-btn>
@@ -57,7 +57,7 @@
           </div>
 
           <div class="d-flex mb-4">
-            <v-btn-toggle v-model="componentSomatic" dark>
+            <v-btn-toggle v-model="componentSomatic" @change="switchComponentSomatic" dark>
               <v-btn :value="true" small :color="setColor(componentSomatic, true, 'green')">
                 <v-icon>mdi-check</v-icon>
               </v-btn>
@@ -70,7 +70,7 @@
           </div>
 
           <div class="d-flex">
-            <v-btn-toggle v-model="componentMaterial" dark>
+            <v-btn-toggle v-model="componentMaterial" @change="switchComponentMaterial" dark>
               <v-btn :value="true" small :color="setColor(componentMaterial, true, 'green')">
                 <v-icon>mdi-check</v-icon>
               </v-btn>
@@ -88,7 +88,7 @@
         <v-expansion-panel-header>Concentration et Rituel</v-expansion-panel-header>
         <v-expansion-panel-content>
           <div class="d-flex mt-2 mb-4">
-            <v-btn-toggle v-model="mustBeConcentration" dark>
+            <v-btn-toggle v-model="mustBeConcentration" @change="switchMustBeConcentration" dark>
               <v-btn :value="true" small :color="setColor(mustBeConcentration, true, 'green')">
                 <v-icon>mdi-check</v-icon>
               </v-btn>
@@ -101,7 +101,7 @@
           </div>
 
           <div class="d-flex">
-            <v-btn-toggle v-model="mustBeRitual" dark>
+            <v-btn-toggle v-model="mustBeRitual" @change="switchMustBeRitual" dark>
               <v-btn :value="true" small :color="setColor(mustBeRitual, true, 'green')">
                 <v-icon>mdi-check</v-icon>
               </v-btn>
@@ -122,7 +122,7 @@
 
 <script>
 // import { mapMutations } from 'vuex'
-import { setUrlParams } from '@theme/util/filterHelpers'
+import { setUrlParams, getUrlParameter, setBooleanMutation, setListMutation } from '@theme/util/filterHelpers'
 
 export default {
   name: 'SpellFilters',
@@ -248,6 +248,46 @@ export default {
       setUrlParams('niveaux', list)
     },
 
+    switchComponentVerbal () {
+      let value = []
+      if ((this.componentVerbal !== undefined)) {
+        value[0] = this.componentVerbal
+      }
+      setUrlParams('v', value)
+    },
+
+    switchComponentSomatic () {
+      let value = []
+      if ((this.componentSomatic !== undefined)) {
+        value[0] = this.componentSomatic
+      }
+      setUrlParams('s', value)
+    },
+
+    switchComponentMaterial () {
+      let value = []
+      if ((this.componentMaterial !== undefined)) {
+        value[0] = this.componentMaterial
+      }
+      setUrlParams('m', value)
+    },
+
+    switchMustBeConcentration () {
+      let value = []
+      if ((this.mustBeConcentration !== undefined)) {
+        value[0] = this.mustBeConcentration
+      }
+      setUrlParams('c', value)
+    },
+
+    switchMustBeRitual () {
+      let value = []
+      if ((this.mustBeRitual !== undefined)) {
+        value[0] = this.mustBeRitual
+      }
+      setUrlParams('r', value)
+    },
+
     isSchool (school) {
       return this.schools.indexOf(school) > -1
     },
@@ -283,6 +323,28 @@ export default {
       this.switchSchool()
     },
   },
+
+  mounted () {
+    let selectedSchools = getUrlParameter(window.location.href, "ecoles").split(",")
+    let selectedClasses = getUrlParameter(window.location.href, "classes").split(",")
+    let selectedLevels = getUrlParameter(window.location.href, "niveaux").split(",")
+    let componentVerbal = getUrlParameter(window.location.href, "v")
+    let componentSomatic = getUrlParameter(window.location.href, "s")
+    let componentMaterial = getUrlParameter(window.location.href, "m")
+    let mustBeConcentration = getUrlParameter(window.location.href, "c")
+    let mustBeRitual = getUrlParameter(window.location.href, "r")
+
+    setListMutation(selectedClasses, this.$store, 'spellFilters/setClassesFromList')
+    setListMutation(selectedLevels, this.$store, 'spellFilters/setLevelsFromList')
+    setListMutation(selectedSchools, this.$store, 'spellFilters/setSchoolsFromList')
+
+    setBooleanMutation(componentVerbal, this.$store, 'spellFilters/setComponentVerbal')
+    setBooleanMutation(componentSomatic, this.$store, 'spellFilters/setComponentSomatic')
+    setBooleanMutation(componentMaterial, this.$store, 'spellFilters/setComponentMaterial')
+
+    setBooleanMutation(mustBeConcentration, this.$store, 'spellFilters/setMustBeConcentration')
+    setBooleanMutation(mustBeRitual, this.$store, 'spellFilters/setMustBeRitual')
+  }
 }
 </script>
 

docs/.vuepress/theme/util/filterHelpers.js

@@ -7,7 +7,7 @@ export function setUrlParams (urlParam, list) {
     params = params + list[i]
   }
   if (list.length == 0) {
-    params = "null"
+    params = ''
   }
   history.replaceState(null, null, setUrlParameter(window.location.href, urlParam, params))
 }
@@ -32,16 +32,16 @@ export function setUrlParameter (url, key, value) {
         var removeRegex = new RegExp('([\?&])' + key + '=[^&;]+[&;]?');
 
         if (typeof value === 'undefined' || value === null || value === "") { // Remove param if value is empty
-            params = urlQueryString.replace(removeRegex, "$1");
+          params = urlQueryString.replace(removeRegex, "$1");
-            params = params.replace(/[&;]$/, "");
+          params = params.replace(/[&;]$/, "");
 
         } else if (urlQueryString.match(updateRegex) !== null) { // If param exists already, update it
-            params = urlQueryString.replace(updateRegex, "$1" + newParam);
+          params = urlQueryString.replace(updateRegex, "$1" + newParam);
 
         } else if (urlQueryString=="") { // If there are no query strings
-            params = '?' + newParam;
+          params = '?' + newParam;
         } else { // Otherwise, add it to end of query string
-            params = urlQueryString + '&' + newParam;
+          params = urlQueryString + '&' + newParam;
         }
     }
 
@@ -50,3 +50,26 @@ export function setUrlParameter (url, key, value) {
 
     return baseUrl + params;
 }
+
+export function getUrlParameter (url, parameter) {
+  parameter = parameter.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
+  var regex = new RegExp('[\\?|&]' + parameter + '=([^&#]*)');
+  var results = regex.exec('?' + url.split('?')[1]);
+  return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
+}
+
+export function setListMutation (param, store, mutation) {
+  if (param.length > 0 && param[0] !== "" && param[0] !== "null") {
+    store.commit(mutation, param)
+  }
+}
+
+export function setBooleanMutation (param, store, mutation) {
+  if (param !== undefined && param !== '') {
+    let value = false
+    if (param == 'true') {
+      value = true
+    }
+    store.commit(mutation, value)
+  }
+}