From 23272d18ef2eccd1a451bbd2aefb1f067b30962b Mon Sep 17 00:00:00 2001
From: "Adam T. Carpenter" <atc@53hor.net>
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(-)

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>
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