From dc5f0bdd6e55fa267348fce0e1677c7705da9037 Mon Sep 17 00:00:00 2001
From: John Cleaver <cleaver.john.k@gmail.com>
Date: Wed, 2 May 2018 23:12:45 -0400
Subject: [PATCH] Add event bindings for search field

---
 src/components/search/ItemSearch.vue | 11 +++++++++--
 src/components/search/Search.vue     | 15 +++++++++++++--
 src/components/search/SearchForm.vue | 24 +++++++++++++++++++++++-
 3 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/src/components/search/ItemSearch.vue b/src/components/search/ItemSearch.vue
index f7d243f..cb2b63a 100644
--- a/src/components/search/ItemSearch.vue
+++ b/src/components/search/ItemSearch.vue
@@ -6,7 +6,7 @@
     <div class="field-body">
       <div class="field">
         <div class="control">
-            <input class="input" placeholder="Item Name"/>
+            <input class="input" placeholder="Item Name" v-bind:value="value" v-on:input="$emit('input', $event.target.value)"/>
         </div>
       </div>
     </div>
@@ -15,7 +15,14 @@
 
 <script>
 export default {
-  name: 'item-search'
+  name: 'item-search',
+  props: {
+    value: {
+      default () {
+        return ''
+      }
+    }
+  }
 
 }
 </script>
diff --git a/src/components/search/Search.vue b/src/components/search/Search.vue
index 8d4fd61..63f68a3 100644
--- a/src/components/search/Search.vue
+++ b/src/components/search/Search.vue
@@ -1,6 +1,6 @@
 <template>
 <section class="section">
-  <search-form></search-form>
+  <search-form v-model="search"></search-form>
   <section class="container">
     <div class="columns is-multiline">
       <div class="column is-3 is-flex" v-for="item in filtered_items" :key="item.id">
@@ -21,9 +21,20 @@ export default {
     SearchForm,
     ItemCard
   },
+  data () {
+    return {
+      search: {
+        search_term: '',
+        search_seasons: this.$store.state.seasons,
+        search_skills: this.$store.state.skills
+      }
+    }
+  },
   computed: {
     filtered_items () {
-      return this.$store.state.items
+      var self = this
+      return self.$store.state.items
+        .filter(item => item.name.toLowerCase().indexOf(self.search.search_term.toLowerCase()) !== -1)
     }
   }
 
diff --git a/src/components/search/SearchForm.vue b/src/components/search/SearchForm.vue
index 98553de..0203bb3 100644
--- a/src/components/search/SearchForm.vue
+++ b/src/components/search/SearchForm.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="columns">
     <div class="column">
-      <item-search />
+      <item-search v-model="search_term" v-on:input="$emit('input', searchFilter())" />
     </div>
     <div class="column">
       <season-filter />
@@ -18,6 +18,28 @@ import SeasonFilter from '@/components/search/SeasonFilter.vue'
 import SkillFilter from '@/components/search/SkillFilter.vue'
 export default {
   name: 'search-form',
+  props: {
+    search_term: {
+      default () {
+        return ''
+      },
+      search_seasons: {
+        type: Array
+      },
+      search_skills: {
+        type: Array
+      }
+    }
+  },
+  methods: {
+    searchFilter: function () {
+      return {
+        search_term: this.search_term,
+        search_seasons: this.search_seasons,
+        search_skils: this.search_skills
+      }
+    }
+  },
   components: {
     ItemSearch,
     SeasonFilter,