spell + filtering + urlParams

docs/.vuepress/theme/layouts/GlobalLayout.vue

@@ -2,11 +2,12 @@
   <v-app class="srd">
 
     <NavDrawer />
+    <RightDrawer v-if="hasRightDrawer" />
 
     <Navbar />
 
     <v-content>
-      <v-container class="fill-height" fluid>
+      <v-container fluid>
         <v-row align="start" justify="center">
           <v-col cols="12">
             <DefaultGlobalLayout/>
@@ -21,6 +22,7 @@
 import GlobalLayout from '@app/components/GlobalLayout.vue'
 import Navbar from '@theme/components/Navbar.vue'
 import NavDrawer from '@theme/components/NavDrawer.vue'
+import RightDrawer from '@theme/components/RightDrawer.vue'
 
 export default {
   name: 'GlobalLayout',
@@ -28,47 +30,19 @@ export default {
   components: {
     DefaultGlobalLayout: GlobalLayout,
     Navbar,
-    NavDrawer
+    NavDrawer,
+    RightDrawer
   },
 
   data () {
     return {
-      items: [
-        { icon: 'mdi-contacts', text: 'Contacts' },
-        { icon: 'mdi-history', text: 'Frequently contacted' },
-        { icon: 'mdi-content-copy', text: 'Duplicates' },
-        {
-          icon: 'mdi-chevron-up',
-          'icon-alt': 'mdi-chevron-down',
-          text: 'Labels',
-          model: true,
-          children: [
-            { icon: 'mdi-plus', text: 'Create label' },
-          ],
-        },
-        {
-          icon: 'mdi-chevron-up',
-          'icon-alt': 'mdi-chevron-down',
-          text: 'More',
-          model: false,
-          children: [
-            { text: 'Import' },
-            { text: 'Export' },
-            { text: 'Print' },
-            { text: 'Undo changes' },
-            { text: 'Other contacts' },
-          ],
-        },
-        { icon: 'mdi-settings', text: 'Settings' },
-        { icon: 'mdi-message', text: 'Send feedback' },
-        { icon: 'mdi-help-circle', text: 'Help' },
-        { icon: 'mdi-cellphone-link', text: 'App downloads' },
-        { icon: 'mdi-keyboard', text: 'Go to the old version' },
-      ],
     }
   },
 
   computed: {
+    hasRightDrawer() {
+      return this.$store.state.hasRightDrawer
+    }
   },
 
   mounted () {

docs/.vuepress/theme/layouts/SpellsLayout.vue

@@ -1,17 +1,166 @@
 <template>
   <div class="spells">
-    <div v-for="page in pages" :key="page.key">
-      {{ page.title }}
-    </div>
+
+    <v-data-table
+      :headers="headers"
+      :items="spells"
+      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 }">{{ item.title }}</router-link>
+      </template>
+
+      <template v-slot:item.frontmatter.level="{ item }">
+        <span v-if="item.frontmatter.level == 0">Tour de magie</span>
+        <span v-else>{{ item.frontmatter.level }}</span>
+      </template>
+
+      <template v-slot:item.frontmatter.concentration="{ item }">
+        <span v-if="item.frontmatter.concentration">concentration</span>
+      </template>
+
+      <template v-slot:item.frontmatter.ritual="{ item }">
+        <span v-if="item.frontmatter.ritual">rituel</span>
+      </template>
+
+      <template v-slot:item.frontmatter.components="{ item }">
+        <template v-if="item.frontmatter.components.verbal">V</template><template v-if="item.frontmatter.components.somatic || item.frontmatter.components.material">,</template>
+        <template v-if="item.frontmatter.components.somatic">S</template><template v-if="item.frontmatter.components.material">,</template>
+        <template v-if="item.frontmatter.components.material">M</template>
+      </template>
+
+      <template v-slot:item.frontmatter.classes="{ item }">
+        <span v-for="(c, idx) in item.frontmatter.classes" :key="idx">{{c}}<template v-if="idx != item.frontmatter.classes.length-1">, </template></span>
+      </template>
+
+    </v-data-table>
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
-  computed: {
-    pages() {
-      return this.$pagination.pages
+  data () {
+    return {
+      sortBy: 'title',
+      sortDesc: false,
+      headers: [
+        { text: "Nom", align: 'start', sortable: true, value: 'title' },
+        { text: "Niveau", align: 'center', sortable: true, value: 'frontmatter.level' },
+        { text: "École", align: 'start', sortable: false, value: 'frontmatter.school' },
+        { text: "Temps d'incantation", align: 'start', sortable: false, value: 'frontmatter.casting_time' },
+        { text: "Durée", align: 'start', sortable: false, value: 'frontmatter.duration' },
+        { text: "Concentration", align: 'center', sortable: false, value: 'frontmatter.concentration' },
+        { text: "Rituel", align: 'center', sortable: false, value: 'frontmatter.ritual' },
+        { text: "Composantes", align: 'center', sortable: false, value: 'frontmatter.components' },
+        { text: "Classes", align: 'start', sortable: false, value: 'frontmatter.classes' }
+      ],
     }
+  },
+
+  computed: {
+    ...mapState({
+      search: state => state.spellFilters.search,
+      classes: state => state.spellFilters.classes,
+      levels: state => state.spellFilters.levels,
+      schools: state => state.spellFilters.schools,
+      mustBeConcentration: state => state.spellFilters.mustBeConcentration,
+      mustBeRitual: state => state.spellFilters.mustBeRitual,
+      componentVerbal: state => state.spellFilters.componentVerbal,
+      componentSomatic: state => state.spellFilters.componentSomatic,
+      componentMaterial: state => state.spellFilters.componentMaterial,
+    }),
+
+    spells() {
+      let results = this.$pagination.pages
+
+      // Filter concetration
+      if (this.mustBeConcentration !== undefined) {
+        results = results.filter(item => {
+          return item.frontmatter.concentration === this.mustBeConcentration
+        })
+      }
+
+      // Filter ritual
+      if (this.mustBeRitual !== undefined) {
+        results = results.filter(item => {
+          return item.frontmatter.ritual === this.mustBeRitual
+        })
+      }
+
+      // Filter components
+      if (this.componentVerbal !== undefined) {
+        results = results.filter(item => {
+          return item.frontmatter.components.verbal === this.componentVerbal
+        })
+      }
+      if (this.componentSomatic !== undefined) {
+        results = results.filter(item => {
+          return item.frontmatter.components.somatic === this.componentSomatic
+        })
+      }
+      if (this.componentMaterial !== undefined) {
+        results = results.filter(item => {
+          return item.frontmatter.components.material === this.componentMaterial
+        })
+      }
+
+      // Filter classes
+      let selectedClasses = []
+      for (var i = 0; i < this.classes.length; i++) {
+        if (this.classes[i].value) {
+          selectedClasses.push(this.classes[i].label)
+        }
+      }
+      if (selectedClasses.length) {
+        results = results.filter(item => {
+          for (var i = 0; i < item.frontmatter.classes.length; i++) {
+            return selectedClasses.indexOf(item.frontmatter.classes[i]) > -1
+          }
+        })
+      }
+
+      // Filter levels
+      let selectedLevels = []
+      for (var i = 0; i < this.levels.length; i++) {
+        if (this.levels[i].value) {
+          selectedLevels.push(this.levels[i].level)
+        }
+      }
+      if (selectedLevels.length) {
+        results = results.filter(item => {
+          return selectedLevels.indexOf(item.frontmatter.level) > -1
+        })
+      }
+
+      // Filter schools
+      let selectedSchools = []
+      for (var i = 0; i < this.schools.length; i++) {
+        if (this.schools[i].value) {
+          selectedSchools.push(this.schools[i].label)
+        }
+      }
+      if (selectedSchools.length) {
+        results = results.filter(item => {
+          return selectedSchools.indexOf(item.frontmatter.school) > -1
+        })
+      }
+
+      return results
+    }
+  },
+
+  mounted () {
+    this.$store.commit('setHasRightDrawer', true)
+    this.$store.commit('setRightDrawer', true)
+    this.$store.commit('setInRightDrawer', 'spellFilters')
   }
 }
 </script>