From 892fa05c42844e3a3d9ae0c80be88db9db03ef2e Mon Sep 17 00:00:00 2001
From: Joe Wroten <joe.wroten@q2ebanking.com>
Date: Mon, 8 May 2017 17:34:42 -0400
Subject: [PATCH] Paginated spells list

---
 src/components/Spelllist.vue | 38 ++++++++++++++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/components/Spelllist.vue b/src/components/Spelllist.vue
index a250685..5c8e350 100644
--- a/src/components/Spelllist.vue
+++ b/src/components/Spelllist.vue
@@ -12,15 +12,33 @@
           <big>Level</big>
         </th>
       </tr>
+      <tr>
+        <td colspan="3">
+          <q-pagination
+            v-model="page"
+            :max="pageMax"
+          ></q-pagination>
+        </td>
+      </tr>
     </thead>
     <tbody>
       <tr
         is="spell-item"
-        v-for="spell in spells"
+        v-for="spell in pagedSpells"
         :spell="spell"
       >
       </tr>
     </tbody>
+    <tfoot>
+      <tr>
+        <td colspan="3">
+          <q-pagination
+            v-model="page"
+            :max="pageMax"
+          ></q-pagination>
+        </td>
+      </tr>
+    </tfoot>
   </table>
 </template>
 
@@ -31,9 +49,25 @@ import SpellItem from './Spellitem'
 Vue.component('spell-item', SpellItem)
 
 export default {
+  computed: {
+    pageMax () {
+      return this.spells.length / this.perPage
+    },
+    pagedSpells () {
+      let min = this.page * this.perPage - this.perPage
+      let max = min + this.perPage
+      return this.spells.slice(min, max)
+    }
+  },
   props: [
     'spells'
-  ]
+  ],
+  data () {
+    return {
+      perPage: 10,
+      page: 1
+    }
+  }
 }
 </script>