ajout d'un range slider pour filter les monstres par ID

docs/.vuepress/store/modules/monsterFilters.js

@@ -5,6 +5,7 @@ export default {
 
   state: {
     search: '',
+    challengeRange: [0, 30],
     types: [
       { label: "Aberration", value: false },
       { label: "Bête", value: false },
@@ -117,6 +118,12 @@ export default {
     resetSearch: (state) => {
       state.search = ''
     },
+    setChallengeRange: (state, payload) => {
+      state.challengeRange = payload
+    },
+    resetChallengeRange: (state, payload) => {
+      state.challengeRange = [0, 30]
+    },
     setTypes: (state, payload) => {
       state.types = payload
     },

docs/.vuepress/theme/components/MagicItemFilters.vue

@@ -7,6 +7,7 @@
       label="Filtrer"
       single-line
       hide-details
+      clearable
       color="accent"
       ></v-text-field>
 

docs/.vuepress/theme/components/MonsterFilters.vue

@@ -2,16 +2,33 @@
   <div class="monster-filters pa-1">
 
     <v-text-field
-      class="mb-1"
+      class="mb-1 mx-2"
       v-model="search"
       label="Filtrer"
       single-line
       hide-details
+      clearable
       color="accent"
       ></v-text-field>
 
     <v-expansion-panels multiple flat hover v-model="panels">
 
+      <v-expansion-panel>
+        <v-expansion-panel-header>Tranche d'ID</v-expansion-panel-header>
+        <v-expansion-panel-content class="pt-4">
+          <v-range-slider
+            class="mt-6"
+            v-model="challengeRange"
+            min="0"
+            max="30"
+            thumb-size="24"
+            thumb-label="always"
+            hide-details
+            @end="onEndChallengeRange"
+          ></v-range-slider>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+
       <v-expansion-panel>
         <v-expansion-panel-header>Types</v-expansion-panel-header>
         <v-expansion-panel-content>
@@ -58,7 +75,7 @@ export default {
 
   data () {
     return {
-      panels: [],
+      panels: []
     }
   },
 
@@ -72,6 +89,15 @@ export default {
       }
     },
 
+    challengeRange: {
+      get () {
+        return this.$store.state.monsterFilters.challengeRange
+      },
+      set (newValue) {
+        this.$store.commit('monsterFilters/setChallengeRange', newValue)
+      }
+    },
+
     types: {
       get () {
         return this.$store.state.monsterFilters.types
@@ -111,6 +137,10 @@ export default {
 
   methods: {
 
+    onEndChallengeRange () {
+      setUrlParams('trancheID', this.challengeRange)
+    },
+
     switchType () {
       let list = []
       for (var i = 0; i < this.types.length; i++) {
@@ -182,11 +212,15 @@ export default {
   mounted () {
     this.$store.dispatch('monsterFilters/reset')
 
+    let challengeRange = getUrlParameter(window.location.href, "trancheID").split(",")
     let selectedSizes = getUrlParameter(window.location.href, "tailles").split(",")
     let selectedTypes = getUrlParameter(window.location.href, "types").split(",")
     let selectedEnvironments = getUrlParameter(window.location.href, "environnements").split(",")
     let selectedDungeonTypes = getUrlParameter(window.location.href, "donjons").split(",")
 
+    if (challengeRange && challengeRange[0] != '') {
+      this.$store.commit('monsterFilters/setChallengeRange', challengeRange)
+    }
     setListMutation(selectedTypes, this.$store, 'monsterFilters/setTypesFromList')
     setListMutation(selectedSizes, this.$store, 'monsterFilters/setSizesFromList')
     setListMutation(selectedEnvironments, this.$store, 'monsterFilters/setEnvironmentsFromList')

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

@@ -7,6 +7,7 @@
       label="Filtrer"
       single-line
       hide-details
+      clearable
       color="accent"
       ></v-text-field>
 

docs/.vuepress/theme/layouts/MonstersLayout.vue

@@ -106,6 +106,7 @@ export default {
   computed: {
     ...mapState({
       search: state => state.monsterFilters.search,
+      challengeRange: state => state.monsterFilters.challengeRange,
       types: state => state.monsterFilters.types,
       sizes: state => state.monsterFilters.sizes,
       environments: state => state.monsterFilters.environments,
@@ -115,6 +116,17 @@ export default {
     monsters() {
       let results = this.$pagination.pages
 
+      // Filter ID
+      let minID = this.challengeRange[0]
+      let maxID = this.challengeRange[1]
+      if (this.challengeRange[0] > this.challengeRange[1]) {
+        minID = this.challengeRange[1]
+        maxID = this.challengeRange[0]
+      }
+      results = results.filter(item => {
+        return item.frontmatter.challenge >= minID && item.frontmatter.challenge <= maxID
+      })
+
       // Filter types
       let selectedTypes = []
       for (var i = 0; i < this.types.length; i++) {