From 86b2ad9a724ea8c9bce49e036b900467623a2c23 Mon Sep 17 00:00:00 2001
From: Joe Wroten <joe.wroten@q2ebanking.com>
Date: Sun, 14 May 2017 06:43:22 -0500
Subject: [PATCH] Checkboxes add to stateful chosen list

---
 src/components/Index.vue     |  3 +--
 src/components/Spellitem.vue | 17 ++++++++++++++++-
 src/components/Spelllist.vue |  1 -
 src/store.js                 | 12 +++++++++++-
 4 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/components/Index.vue b/src/components/Index.vue
index e649260..b91ed8c 100644
--- a/src/components/Index.vue
+++ b/src/components/Index.vue
@@ -13,7 +13,6 @@
 
     <div class="layout-view">
       <spell-list
-        v-if="state.spells.data.length"
         :spells="state.spells.data"
         :search="search"
       ></spell-list>
@@ -58,7 +57,7 @@ export default {
     }
   },
   mounted () {
-    if (this.state.spells.loaded === false) {
+    if (!this.state.spells.loaded) {
       Loading.show()
 
       fetch('./statics/dnd5e.json')
diff --git a/src/components/Spellitem.vue b/src/components/Spellitem.vue
index 9369aff..68e8985 100644
--- a/src/components/Spellitem.vue
+++ b/src/components/Spellitem.vue
@@ -12,12 +12,17 @@
       </div>
     </div>
     <div class="item-secondary">
-      <q-checkbox v-model="checked" disable></q-checkbox>
+      <q-checkbox
+        v-model="checked"
+        @input="toggle"
+      ></q-checkbox>
     </div>
   </div>
 </template>
 
 <script>
+import { state, dispatch } from '../store'
+
 let capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
 
 export default {
@@ -43,6 +48,16 @@ export default {
   methods: {
     openSpell (event) {
       console.log(this.spell.name)
+    },
+    toggle (want) {
+      dispatch({
+        type: 'CHANGE_CHOSEN',
+        data: {
+          want,
+          name: this.spell.name
+        }
+      })
+      console.log(state.chosen)
     }
   }
 }
diff --git a/src/components/Spelllist.vue b/src/components/Spelllist.vue
index d557bd6..5527e4b 100644
--- a/src/components/Spelllist.vue
+++ b/src/components/Spelllist.vue
@@ -37,7 +37,6 @@ export default {
       return this.search.length >= 3 ? 'sortScore' : this.sortBy
     },
     pagedSpells () {
-      debugger
       return new Query(this.filteredSpells)
       .paginate(1, this.loadedPage * 20)
       .results
diff --git a/src/store.js b/src/store.js
index 81c3ac3..ae5bdf8 100644
--- a/src/store.js
+++ b/src/store.js
@@ -2,7 +2,8 @@ export let state = {
   spells: {
     loaded: false,
     data: []
-  }
+  },
+  chosen: []
 }
 
 export function dispatch (action) {
@@ -10,6 +11,15 @@ export function dispatch (action) {
     case 'SPELLS_RESOLVED':
       state.spells = action.data
       break
+    case 'CHANGE_CHOSEN':
+      if (action.data.want) {
+        state.chosen.push(action.data.name)
+      }
+      else {
+        let index = state.chosen.indexOf(action.data.name)
+        if (index >= 0) state.chosen.splice(index, 1)
+      }
+      break
   }
 }