added a search filter for names and descriptions

3 files changed, 62 insertions, 4 deletions

diff --git a/iridescence/src/components/InventoryFilter.vue b/iridescence/src/components/InventoryFilter.vue
new file mode 100644
index 0000000..365c1e8
--- /dev/null
+++ b/iridescence/src/components/InventoryFilter.vue
@@ -0,0 +1,40 @@
+<template>
+  <div id="inventoryFilter">
+    <section class="section">
+      <div class="container">
+        <input
+          class="input is-primary is-medium"
+          type="text"
+          placeholder="Find something in particular..."
+          v-model.trim="term"
+          @input="updateFilter"
+          autofocus
+        />
+      </div>
+      <content class="has-text-centered" v-if="noResults">
+        <p>We couldn't find anything like that...</p>
+      </content>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "InventoryFilter",
+  data() {
+    return {
+      term: ""
+    };
+  },
+  computed: {
+    noResults() {
+      return !this.$store.getters.inventory.length;
+    }
+  },
+  methods: {
+    updateFilter() {
+      this.$store.commit("filterTerm", this.term);
+    }
+  }
+};
+</script>
diff --git a/iridescence/src/store/index.js b/iridescence/src/store/index.js
index 4a851ef..eaf9a9f 100644
--- a/iridescence/src/store/index.js
+++ b/iridescence/src/store/index.js
@@ -78,12 +78,27 @@ export default new Vuex.Store({
         imgPath: "/wind-chime.jpg",
         description: "Makes noise when the wind blows."
       }
-    ]
+    ],
+    term: ""
   },
   getters: {
-    inventory: state => state.inventory
+    inventory(state) {
+      const term = state.term.toLowerCase();
+
+      return state.inventory.filter(item => {
+        // TODO: move into class for items
+        return (
+          item.name.toLowerCase().indexOf(term) != -1 ||
+          item.description.toLowerCase().indexOf(term) != -1
+        );
+      });
+    }
+  },
+  mutations: {
+    filterTerm(state, term) {
+      state.term = term;
+    }
   },
-  mutations: {},
   actions: {},
   modules: {}
 });
diff --git a/iridescence/src/views/Home.vue b/iridescence/src/views/Home.vue
index 1b071a3..c4a2184 100644
--- a/iridescence/src/views/Home.vue
+++ b/iridescence/src/views/Home.vue
@@ -4,17 +4,20 @@
 	  cart. -->
 
   <div id="home">
+    <InventoryFilter></InventoryFilter>
     <InventoryList></InventoryList>
   </div>
 </template>
 
 <script>
 import InventoryList from "@/components/InventoryList.vue";
+import InventoryFilter from "@/components/InventoryFilter.vue";
 
 export default {
   name: "Home",
   components: {
-    InventoryList
+    InventoryList,
+    InventoryFilter
   }
 };
 </script>