intégration des objets magiques + filtres

docs/.vuepress/theme/components/Breadcrumb.vue

@@ -31,6 +31,8 @@
               crumbs.push({to: page.path, disabled: disabled, text: 'Grimoire'})
             } else if (page.path == '/classes/') {
               crumbs.push({to: page.path, disabled: disabled, text: 'Classes'})
+            } else if (page.path == '/liste-objets-magiques/') {
+              crumbs.push({to: page.path, disabled: disabled, text: 'Liste des objets magiques'})
             } else {
               crumbs.push({to: page.path, disabled: disabled, text: page.frontmatter.breadcrumb || page.title})
             }

docs/.vuepress/theme/components/MagicItem.vue

@@ -0,0 +1,28 @@
+<template>
+  <main class="page content">
+
+    <div class="theme-default-content">
+      <h1>{{ $page.title }}</h1>
+      <div class="magic-item-details">
+        <span>{{ $page.frontmatter.type }}</span>
+        <span v-if="$page.frontmatter.subtype"> ({{ $page.frontmatter.subtype }})</span>
+        <span>, {{ $page.frontmatter.rarity }}</span>
+        <span v-if="$page.frontmatter.attunement"> ({{ $page.frontmatter.attunement }})</span>
+      </div>
+    </div>
+
+    <Content class="mt-4" />
+
+    <p v-if="$page.frontmatter.source" class="source">Source : <em>{{ $page.frontmatter.source }}</em></p>
+
+  </main>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+</style>

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

@@ -0,0 +1,169 @@
+<template>
+  <div class="magic-item-filters pa-1">
+
+    <v-text-field
+      class="mb-1"
+      v-model="search"
+      label="Filtrer"
+      single-line
+      hide-details
+      color="accent"
+      ></v-text-field>
+
+    <v-expansion-panels multiple flat hover v-model="panels">
+
+      <v-expansion-panel>
+        <v-expansion-panel-header>Types</v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <v-btn class="mb-2 mt-2" small color="primary" @click="resetTypes" dark>Réinitialiser</v-btn>
+          <v-switch v-for="(type, idx) in types" v-model="type.value" :label="type.label" dense class="ma-0" @change="switchType" color="accent"></v-switch>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+
+      <v-expansion-panel>
+        <v-expansion-panel-header>Raretés</v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <v-btn class="mb-2 mt-2" small color="primary" @click="resetRarities" dark>Réinitialiser</v-btn>
+          <v-switch v-for="rarity in rarities" v-model="rarity.value" :label="rarity.label" dense class="ma-0" @change="switchRarity" color="accent"></v-switch>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+
+      <v-expansion-panel>
+        <v-expansion-panel-header>Harmonisation</v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <div class="d-flex mt-2 mb-4">
+            <v-btn-toggle v-model="hasAttunement" @change="switchHasAttunement" dark>
+              <v-btn :value="true" small :color="setColor(hasAttunement, true, 'green')">
+                <v-icon>mdi-check</v-icon>
+              </v-btn>
+              <v-btn :value="false" small :color="setColor(hasAttunement, false, 'red')">
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </v-btn-toggle>
+
+            <p class="mt-0 mb-0 ml-2">Verbales</p>
+          </div>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+
+    </v-expansion-panels>
+
+  </div>
+</template>
+
+<script>
+// import { mapMutations } from 'vuex'
+import { setUrlParams, getUrlParameter, setBooleanMutation, setListMutation } from '@theme/util/filterHelpers'
+
+export default {
+  name: 'MagicItemFilters',
+
+  data () {
+    return {
+      panels: [],
+    }
+  },
+
+  computed: {
+    search: {
+      get () {
+        return this.$store.state.magicItemFilters.search
+      },
+      set (newValue) {
+        this.$store.commit('magicItemFilters/setSearch', newValue)
+      }
+    },
+
+    types: {
+      get () {
+        return this.$store.state.magicItemFilters.types
+      },
+      set (newValue) {
+        this.$store.commit('magicItemFilters/setTypes', newValue)
+      }
+    },
+
+    rarities: {
+      get () {
+        return this.$store.state.magicItemFilters.rarities
+      },
+      set (newValue) {
+        this.$store.commit('magicItemFilters/setRarities', newValue)
+      }
+    },
+
+    hasAttunement: {
+      get () {
+        return this.$store.state.magicItemFilters.hasAttunement
+      },
+      set (newValue) {
+        this.$store.commit('magicItemFilters/setHasAttunement', newValue)
+      }
+    },
+  },
+
+  methods: {
+
+    switchType () {
+      let list = []
+      for (var i = 0; i < this.types.length; i++) {
+        if (this.types[i].value) {
+          list.push(this.types[i].label)
+        }
+      }
+      setUrlParams('types', list)
+    },
+
+    switchRarity () {
+      let list = []
+      for (var i = 0; i < this.rarities.length; i++) {
+        if (this.rarities[i].value) {
+          list.push(this.rarities[i].label)
+        }
+      }
+      setUrlParams('raretes', list)
+    },
+
+    switchHasAttunement () {
+      let value = []
+      if ((this.hasAttunement !== undefined)) {
+        value[0] = this.hasAttunement
+      }
+      setUrlParams('harmonisation', value)
+    },
+
+    setColor (value, compare, color) {
+      if (value === compare) {
+        return color
+      }
+      return this.$site.themeConfig.primaryColor
+    },
+
+    resetTypes () {
+      this.$store.commit('magicItemFilters/resetTypes')
+      this.switchType()
+    },
+
+    resetRarities () {
+      this.$store.commit('magicItemFilters/resetRarities')
+      this.switchRarity()
+    },
+  },
+
+  mounted () {
+    this.$store.dispatch('magicItemFilters/reset')
+
+    let selectedRarities = getUrlParameter(window.location.href, "raretes").split(",")
+    let selectedTypes = getUrlParameter(window.location.href, "types").split(",")
+    let hasAttunement = getUrlParameter(window.location.href, "harmonisation")
+
+    setListMutation(selectedTypes, this.$store, 'magicItemFilters/setTypesFromList')
+    setListMutation(selectedRarities, this.$store, 'magicItemFilters/setRaritiesFromList')
+
+    setBooleanMutation(hasAttunement, this.$store, 'magicItemFilters/setHasAttunement')
+  }
+}
+</script>
+
+<style lang="scss">
+</style>

docs/.vuepress/theme/components/NavDrawer.vue

@@ -94,7 +94,6 @@ export default {
           }
         }
       }
-      console.log(item.title)
       return false
     }
   }

docs/.vuepress/theme/components/RightDrawer.vue

@@ -2,18 +2,21 @@
   <v-navigation-drawer class="right-drawer" v-model="rightDrawer" :clipped="$vuetify.breakpoint.lgAndUp" width="300" app right>
     <PageToc v-if="hasPageToc" />
     <SpellFilters v-if="hasSpellFilters" />
+    <MagicItemFilters v-if="hasMagicItemFilters" />
   </v-navigation-drawer>
 </template>
 
 <script>
 import PageToc from '@theme/components/PageToc'
 import SpellFilters from '@theme/components/SpellFilters'
+import MagicItemFilters from '@theme/components/MagicItemFilters'
 
 export default {
   name: 'RightDrawer',
 
   components: {
     SpellFilters,
+    MagicItemFilters,
     PageToc
   },
 
@@ -37,6 +40,9 @@ export default {
     hasSpellFilters () {
       return this.$store.state.inRightDrawer == 'spellFilters'
     },
+    hasMagicItemFilters () {
+      return this.$store.state.inRightDrawer == 'magicItemFilters'
+    },
   },
 
   mounted () {

docs/.vuepress/theme/layouts/MagicItemLayout.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="magic-item">
+    <Breadcrumb />
+    <MagicItem />
+  </div>
+</template>
+
+<script>
+import Breadcrumb from '@theme/components/Breadcrumb'
+import MagicItem from '@theme/components/MagicItem'
+
+export default {
+  name: 'MagicItemLayout',
+
+  components: {
+    Breadcrumb,
+    MagicItem
+  },
+
+  mounted () {
+    this.$store.commit('setHasRightDrawer', false)
+    this.$store.commit('setRightDrawer', false)
+    this.$store.commit('setInRightDrawer', null)
+  }
+}
+</script>
+
+<style>
+</style>

docs/.vuepress/theme/layouts/MagicItemsLayout.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="magic-items">
+
+    <Breadcrumb />
+
+    <h1>Liste des objets magiques</h1>
+
+    <v-data-table
+      class="data-table"
+      :headers="headers"
+      :items="magicitems"
+      item-key="key"
+      :sort-by.sync="sortBy"
+      :sort-desc.sync="sortDesc"
+      :search="search"
+      disable-pagination
+      hide-default-footer
+    >
+
+      <template v-slot:item.title="{ item }">
+        <router-link :to="{ path: item.path }" class="subtitle-2">{{ item.title }}</router-link>
+      </template>
+
+      <template v-slot:item.frontmatter.attunement="{ item }">
+        <span v-if="item.frontmatter.attunement">{{ item.frontmatter.attunement }}</span>
+      </template>
+
+    </v-data-table>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import Breadcrumb from '@theme/components/Breadcrumb'
+
+export default {
+  components: { Breadcrumb },
+
+  data () {
+    return {
+      sortBy: 'title',
+      sortDesc: false,
+      headers: [
+        { text: "Nom", align: 'start', sortable: true, value: 'title' },
+        { text: "Type", align: 'start', sortable: false, value: 'frontmatter.type' },
+        { text: "Rareté", align: 'start', sortable: false, value: 'frontmatter.rarity' },
+        { text: "Harmonisation", align: 'start', sortable: false, value: 'frontmatter.attunement' },
+      ],
+    }
+  },
+
+  computed: {
+    ...mapState({
+      search: state => state.magicItemFilters.search,
+      types: state => state.magicItemFilters.types,
+      rarities: state => state.magicItemFilters.rarities,
+      hasAttunement: state => state.magicItemFilters.hasAttunement,
+    }),
+
+    magicitems() {
+      let results = this.$pagination.pages
+
+      // Filter attunement
+      if (this.hasAttunement !== undefined) {
+        if (this.hasAttunement === true) {
+          results = results.filter(item => {
+            return item.frontmatter.attunement
+          })
+        } else {
+          results = results.filter(item => {
+            return item.frontmatter.attunement === false
+          })
+        }
+      }
+
+      // Filter types
+      let selectedTypes = []
+      for (var i = 0; i < this.types.length; i++) {
+        if (this.types[i].value) {
+          selectedTypes.push(this.types[i].label)
+        }
+      }
+      if (selectedTypes.length) {
+        results = results.filter(item => {
+          return selectedTypes.indexOf(item.frontmatter.type) > -1
+        })
+      }
+
+      // Filter rarities
+      let selectedRarities = []
+      for (var i = 0; i < this.rarities.length; i++) {
+        if (this.rarities[i].value) {
+          selectedRarities.push(this.rarities[i].label)
+        }
+      }
+      if (selectedRarities.length) {
+        results = results.filter(item => {
+          return selectedRarities.indexOf(item.frontmatter.rarity) > -1
+        })
+      }
+
+      return results
+    }
+  },
+
+  mounted () {
+    this.$store.commit('setHasRightDrawer', true)
+    this.$store.commit('setRightDrawer', true)
+    this.$store.commit('setInRightDrawer', 'magicItemFilters')
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>