summaryrefslogtreecommitdiff
path: root/iridescence/src/components
diff options
context:
space:
mode:
authorAdam T. Carpenter <atc@53hor.net>2020-11-13 10:05:48 -0500
committerAdam T. Carpenter <atc@53hor.net>2020-11-13 10:05:48 -0500
commit23272d18ef2eccd1a451bbd2aefb1f067b30962b (patch)
tree24ecb5f7b5a99e17271145de796969ecb34f8bdd /iridescence/src/components
parent9b77f9ec2c00b48c551f65b2e9d7a087004de4c0 (diff)
downloadtheglassyladies-23272d18ef2eccd1a451bbd2aefb1f067b30962b.tar.xz
theglassyladies-23272d18ef2eccd1a451bbd2aefb1f067b30962b.zip
basic sorting functional; swapped indexes for ids in edit list
Diffstat (limited to 'iridescence/src/components')
-rw-r--r--iridescence/src/components/ProductSearch.vue34
-rw-r--r--iridescence/src/components/admin/ProductEditCard.vue4
-rw-r--r--iridescence/src/components/admin/ProductEditList.vue6
3 files changed, 30 insertions, 14 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]);
}
}
};
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 @@
<div class="columns is-multiline is-variable is-desktop">
<div
class="column is-one-third-desktop"
- v-for="(product, index) in products"
- :key="index"
+ v-for="product in products"
+ :key="product.id"
>
- <ProductEditCard v-bind:index="index"></ProductEditCard>
+ <ProductEditCard v-bind:oldid="product.id"></ProductEditCard>
</div>
</div>
</div>