Moved&Restyled Toolbars, Added Sorting

src/components/Index.vue

@@ -1,6 +1,6 @@
 <template>
   <q-layout>
-    <div slot="header" class="toolbar">
+    <div slot="header" class="toolbar dark">
       <q-toolbar-title :padding="0">
         My Spells v2.0 
       </q-toolbar-title>
@@ -26,25 +26,18 @@
       </button>
     </div>
 
-    <div slot="header" class="toolbar primary">
+    <div slot="header" class="toolbar dark">
-      <q-search
+      <q-select
-        class="primary"
+        type="list"
-        v-model="search"
+        v-model="sortBy"
-      ></q-search>
+        :options="sortByOptions"
-    </div>
+      ></q-select>
 
-    <div slot="header" class="toolbar primary">
+      <q-search
-      <q-tabs
+        class="dark"
-        :refs="$refs"
+        v-model="search"
-        default-tab="tab-all"
+        @input="searchChanged"
-      >
+      ></q-search>
-        <q-tab name="tab-all" icon="local_library">
-          All Spells
-        </q-tab>
-        <q-tab name="tab-my" icon="bookmark">
-          My Spells
-        </q-tab>
-      </q-tabs>
     </div>
 
     <div class="layout-view">
@@ -52,6 +45,7 @@
         <spell-list
           :spells="state.spells.data"
           :search="search"
+          :sortBy="sortBy"
         ></spell-list>
       </section>
 
@@ -60,11 +54,30 @@
           v-if="mySpells.length"
           :spells="mySpells"
           :search="search"
+          :sortBy="sortBy"
         ></spell-list>
         <div v-else>None :D</div>
       </section>
     </div>
 
+    <footer slot="footer" class="toolbar pink">
+      <q-tabs
+        class="pink justified"
+        :refs="$refs"
+        default-tab="tab-all"
+      >
+        <q-tab name="tab-all" icon="local_library">
+          All Spells
+        </q-tab>
+        <q-tab name="tab-my" icon="bookmark">
+          My Spells
+          <span
+            class="label pointing-left bg-yellow text-dark"
+            v-show="mySpells.length"
+          >{{mySpells.length}}</span>
+        </q-tab>
+      </q-tabs>
+    </footer>
   </q-layout>
 </template>
 
@@ -101,7 +114,27 @@ export default {
   data () {
     return {
       state,
-      search: ''
+      search: '',
+      sortBy: 'name',
+      previousSortBy: 'name',
+      sortByOptions: [
+        {
+          label: 'Relevance',
+          value: 'sortScore'
+        },
+        {
+          label: 'Name',
+          value: 'name'
+        },
+        {
+          label: 'Level',
+          value: 'level'
+        },
+        {
+          label: 'School',
+          value: 'school'
+        }
+      ]
     }
   },
   computed: {
@@ -134,7 +167,21 @@ export default {
     },
     paste () {
       console.log('Load Chosen!')
+    },
+    searchChanged (newSearch) {
+      if (newSearch.length >= 3) {
+        this.previousSortBy = this.sortBy
+        this.sortBy = 'sortScore'
+      }
+      else {
+        this.sortBy = this.previousSortBy
+      }
     }
   }
 }
 </script>
+
+<style scoped lang="stylus">
+  footer .q-tabs
+    width: 100%
+</style>

src/components/Spelllist.vue

@@ -24,12 +24,12 @@ Vue.component('spell-item', SpellItem)
 export default {
   props: [
     'spells',
-    'search'
+    'search',
+    'sortBy'
   ],
   data () {
     return {
-      loadedPage: 1,
+      loadedPage: 1
-      sortBy: 'name'
     }
   },
   computed: {
@@ -48,9 +48,17 @@ export default {
     }
   },
   watch: {
+    sortBy (newSort) {
+      console.log(newSort)
+    },
     search () {
       this.loadedPage = 1
     }
   }
 }
 </script>
+
+<style lang="stylus">
+.toolbar > .q-picker-textfield
+  margin: 0 .75em
+</style>