diff options
| -rw-r--r-- | iridescence/src/components/InventoryFilter.vue | 40 | ||||
| -rw-r--r-- | iridescence/src/store/index.js | 21 | ||||
| -rw-r--r-- | iridescence/src/views/Home.vue | 5 |
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> |