From 9119c86ff94fd29086dfd342a616993f20fc5c75 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <atc@53hor.net>
Date: Thu, 30 Apr 2020 20:51:38 -0400
Subject: added a search filter for names and descriptions

---
 iridescence/src/components/InventoryFilter.vue | 40 ++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 iridescence/src/components/InventoryFilter.vue

(limited to 'iridescence/src/components')

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>
-- 
cgit v1.2.3