diff options
Diffstat (limited to 'iridescence/src/components/ProductSearch.vue')
| -rw-r--r-- | iridescence/src/components/ProductSearch.vue | 34 |
1 files changed, 25 insertions, 9 deletions
diff --git a/iridescence/src/components/ProductSearch.vue b/iridescence/src/components/ProductSearch.vue index 60da209..430721c 100644 --- a/iridescence/src/components/ProductSearch.vue +++ b/iridescence/src/components/ProductSearch.vue @@ -13,19 +13,16 @@ </div> <div class="control"> <div class="select is-primary is-medium"> - <select> - <option>Featured</option> - <option>Name/A-Z</option> - <option>Newest to Oldest</option> - <option>Oldest to Newest</option> - <option>Low to High</option> - <option>High to Low</option> + <select v-model="sortOptionName" @change="updateSort"> + <option v-for="name in sortOptionNames" :key="name" :value="name"> + {{ name }} + </option> </select> </div> </div> </div> <content class="has-text-centered" v-if="noResults"> - <p>We couldn't find anything like that...</p> + <p>Couldn't find what you're looking for? We do custom orders too!</p> </content> </div> </template> @@ -35,10 +32,26 @@ export default { name: "ProductSearch", data() { return { - term: "" + term: "", + sortOptions: { + "Featured Items First": (_, b) => b.featured, + "Name (A-Z)": (a, b) => a.name > b.name, + "Name (Z-A)": (a, b) => a.name < b.name, + "Date Added (New to Old)": () => 0, + "Date Added (Old to New)": () => 0, + "Price (Low to High)": (a, b) => a.cents > b.cents, + "Price (High to Low)": (a, b) => a.cents < b.cents + }, + sortOptionName: String }; }, + created: function() { + this.sortOptionName = this.sortOptionNames[0]; + }, computed: { + sortOptionNames() { + return Object.keys(this.sortOptions); + }, noResults() { return !this.$store.getters.products.length && !this.$store.getters.busy; } @@ -46,6 +59,9 @@ export default { methods: { updateSearch() { this.$store.commit("searchTerm", this.term); + }, + updateSort() { + this.$store.commit("compare", this.sortOptions[this.sortOptionName]); } } }; |