From 90a6824e37b658af37e00379d605ef2d8ee8f12b Mon Sep 17 00:00:00 2001
From: Joe Wroten <joe.wroten@q2ebanking.com>
Date: Sun, 14 May 2017 05:52:43 -0500
Subject: [PATCH] Infinite loading (busted)

---
 src/components/Spelllist.vue | 33 ++++++++++++++++-----------------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/components/Spelllist.vue b/src/components/Spelllist.vue
index 1564ccf..8847ef8 100644
--- a/src/components/Spelllist.vue
+++ b/src/components/Spelllist.vue
@@ -1,13 +1,17 @@
 <template>
-  <div class="list striped no-border">
+  <section 
+    is="q-infinite-scroll"
+    :handler="loadMore"
+    class="spell-list list striped no-border"
+  >
     <label
       is="spell-item"
-      class="item two-line item-link"
+      class="item two-lines item-link"
       v-for="spell in pagedSpells"
       :spell="spell"
     >
     </label>
-  </div>
+  </section>
 </template>
 
 <script>
@@ -24,29 +28,18 @@ export default {
   ],
   data () {
     return {
-      perPage: 10,
-      page: 1,
+      loadedPage: 1,
       sortBy: 'name'
     }
   },
-  watch: {
-    pageMax (newPageMax) {
-      if (this.page > newPageMax) {
-        this.page = newPageMax
-      }
-    }
-  },
   computed: {
     dynamicSortBy () {
       return this.search.length >= 3 ? 'sortScore' : this.sortBy
     },
-    pageMax () {
-      let trueMax = this.filteredSpells.length / this.perPage
-      return trueMax < 1 ? 1 : trueMax
-    },
     pagedSpells () {
+      debugger
       return new Query(this.filteredSpells)
-      .paginate(this.page, this.perPage)
+      .paginate(1, this.loadedPage * 20)
       .results
     },
     filteredSpells () {
@@ -55,6 +48,12 @@ export default {
       .sort(this.sortBy)
       .results
     }
+  },
+  methods: {
+    loadMore (index) {
+      console.log('load more!', index)
+      this.loadedPage += index
+    }
   }
 }
 </script>