summaryrefslogtreecommitdiff
path: root/iridescence/src
diff options
context:
space:
mode:
authorAdam Carpenter <atc@53hor.net>2020-04-30 20:51:38 -0400
committerAdam Carpenter <atc@53hor.net>2020-04-30 20:51:38 -0400
commit9119c86ff94fd29086dfd342a616993f20fc5c75 (patch)
treebcf4a50e72465efd6eaa921d65a30eaf8363f973 /iridescence/src
parent580521ebe3c9d72d756c8e7ab2d53cb6a69443d1 (diff)
downloadtheglassyladies-9119c86ff94fd29086dfd342a616993f20fc5c75.tar.xz
theglassyladies-9119c86ff94fd29086dfd342a616993f20fc5c75.zip
added a search filter for names and descriptions
Diffstat (limited to 'iridescence/src')
-rw-r--r--iridescence/src/components/InventoryFilter.vue40
-rw-r--r--iridescence/src/store/index.js21
-rw-r--r--iridescence/src/views/Home.vue5
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>