From 23272d18ef2eccd1a451bbd2aefb1f067b30962b Mon Sep 17 00:00:00 2001 From: "Adam T. Carpenter" Date: Fri, 13 Nov 2020 10:05:48 -0500 Subject: basic sorting functional; swapped indexes for ids in edit list --- iridescence/src/components/ProductSearch.vue | 34 ++++++++++++++++------ .../src/components/admin/ProductEditCard.vue | 4 +-- .../src/components/admin/ProductEditList.vue | 6 ++-- iridescence/src/store/index.js | 24 +++++++-------- 4 files changed, 42 insertions(+), 26 deletions(-) (limited to 'iridescence') 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 @@
- +
-

We couldn't find anything like that...

+

Couldn't find what you're looking for? We do custom orders too!

@@ -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]); } } }; diff --git a/iridescence/src/components/admin/ProductEditCard.vue b/iridescence/src/components/admin/ProductEditCard.vue index aced39c..2927b42 100644 --- a/iridescence/src/components/admin/ProductEditCard.vue +++ b/iridescence/src/components/admin/ProductEditCard.vue @@ -126,7 +126,7 @@ export default { }; }, props: { - index: { + oldid: { type: Number, required: true } @@ -148,7 +148,7 @@ export default { }, computed: { old: function() { - return this.$store.getters.products[this.index] || {}; + return this.$store.getters.products.find(p => p.id == this.oldid) || {}; }, id: function() { return this.diff.id || this.old.id; diff --git a/iridescence/src/components/admin/ProductEditList.vue b/iridescence/src/components/admin/ProductEditList.vue index 0880d7c..91c0929 100644 --- a/iridescence/src/components/admin/ProductEditList.vue +++ b/iridescence/src/components/admin/ProductEditList.vue @@ -3,10 +3,10 @@
- +
diff --git a/iridescence/src/store/index.js b/iridescence/src/store/index.js index 19205c9..d0d04cb 100644 --- a/iridescence/src/store/index.js +++ b/iridescence/src/store/index.js @@ -11,31 +11,31 @@ export default new Vuex.Store({ searchTerm: "", products: [], busy: false, - progress: 100 + compare: () => 0 }, getters: { busy(state) { return state.busy; }, - progress(state) { - return state.progress; - }, products(state) { - return state.products.filter(item => { - return JSON.stringify(item) - .toLowerCase() - .includes(state.searchTerm.toLowerCase()); - }); + return state.products + .filter(item => { + return JSON.stringify(item) + .toLowerCase() + .includes(state.searchTerm.toLowerCase()); + }) + .sort(state.compare); } }, mutations: { toggleBusy(state) { state.busy = !state.busy; }, + compare(state, compare) { + state.compare = compare; + }, searchTerm(state, term) { - if (term) { - state.searchTerm = term; - } + state.searchTerm = term; }, setProducts(state, products) { if (products) { -- cgit v1.2.3