diff options
author | Adam T. Carpenter <atc@53hor.net> | 2020-11-13 10:05:48 -0500 |
---|---|---|
committer | Adam T. Carpenter <atc@53hor.net> | 2020-11-13 10:05:48 -0500 |
commit | 23272d18ef2eccd1a451bbd2aefb1f067b30962b (patch) | |
tree | 24ecb5f7b5a99e17271145de796969ecb34f8bdd /iridescence/src/components/ProductSearch.vue | |
parent | 9b77f9ec2c00b48c551f65b2e9d7a087004de4c0 (diff) | |
download | theglassyladies-23272d18ef2eccd1a451bbd2aefb1f067b30962b.tar.xz theglassyladies-23272d18ef2eccd1a451bbd2aefb1f067b30962b.zip |
basic sorting functional; swapped indexes for ids in edit list
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]); } } }; |