From 2234c2304a91e4c12867609d78cb57363daa60ac Mon Sep 17 00:00:00 2001
From: Joe Wroten <joe.wroten@q2ebanking.com>
Date: Thu, 18 May 2017 11:54:53 -0500
Subject: [PATCH] Pagination > infinite scroll, page routing

---
 src/components/Spellitem.vue |  2 +-
 src/components/Spelllist.vue | 49 +++++++++++++++++++++++++-----------
 src/router.js                |  1 +
 src/store.js                 |  2 +-
 4 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/src/components/Spellitem.vue b/src/components/Spellitem.vue
index ce98e82..a530434 100644
--- a/src/components/Spellitem.vue
+++ b/src/components/Spellitem.vue
@@ -61,7 +61,7 @@ export default {
   ],
   methods: {
     openSpell (event) {
-      console.log(this.spell.name)
+      this.$router.push('/spell/' + this.spell.name)
     },
     toggle (want) {
       dispatch({
diff --git a/src/components/Spelllist.vue b/src/components/Spelllist.vue
index 49ec066..041981c 100644
--- a/src/components/Spelllist.vue
+++ b/src/components/Spelllist.vue
@@ -1,21 +1,23 @@
 <template>
-  <section 
-    is="q-infinite-scroll"
-    :handler="loadMore"
-    class="spell-list list striped no-border"
-  >
+  <section class="spell-list list striped no-border" id="spell_list">
     <label
       is="spell-item"
       class="item two-lines item-link"
-      v-for="spell in filteredSpells"
+      v-for="spell in pagedSpells"
       :spell="spell"
     >
     </label>
+    <q-pagination
+      class="text-center"
+      v-model="state.page"
+      :max="numPages"
+    ></q-pagination>
   </section>
 </template>
 
 <script>
 import Vue from 'vue'
+import { Utils } from 'quasar'
 import Query from '../query'
 import SpellItem from './Spellitem'
 import { state } from '../store'
@@ -24,24 +26,43 @@ Vue.component('spell-item', SpellItem)
 
 export default {
   data () {
-    return { state }
+    return {
+      state,
+      perPage: 0
+    }
   },
   props: [
     'spells'
   ],
+  mounted () {
+    this.$nextTick(() => {
+      window.addEventListener('resize', this.newPerPage)
+    })
+    this.calculateNewPage()
+  },
+  methods: {
+    newPerPage: Utils.debounce(function () {
+      this.calculateNewPage()
+    }, 100),
+    calculateNewPage () {
+      let fontSize = 14
+      this.perPage = Math.floor(window.innerHeight / (fontSize * 5)) - 4
+    }
+  },
   computed: {
+    numPages () {
+      return Math.ceil(this.filteredSpells.length / this.perPage)
+    },
     filteredSpells () {
       return new Query(this.spells)
       .search('name', this.state.search)
       .sort(this.state.sortBy)
-      .paginate(1, this.state.loadedPagination * 20)
       .results
-    }
-  },
-  methods: {
-    loadMore (index, done) {
-      this.state.loadedPagination += 1
-      done()
+    },
+    pagedSpells () {
+      return new Query(this.filteredSpells)
+      .paginate(this.state.page, this.perPage)
+      .results
     }
   }
 }
diff --git a/src/router.js b/src/router.js
index 947bce2..981afa4 100644
--- a/src/router.js
+++ b/src/router.js
@@ -23,6 +23,7 @@ export default new VueRouter({
   routes: [
     { path: '/', component: load('Index') }, // Default
     { path: '/my', component: load('Myspells') },
+    { path: '/spell/:name', component: load('Spell') },
     { path: '*', component: load('Error404') } // Not found
   ]
 })
diff --git a/src/store.js b/src/store.js
index 63d4388..e8fe617 100644
--- a/src/store.js
+++ b/src/store.js
@@ -7,7 +7,7 @@ export let state = {
   search: '',
   sortBy: 'name',
   previousSortBy: 'name',
-  loadedPagination: 1
+  page: 1
 }
 
 export function dispatch (action) {