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 ++++++++++++++++++++--------
 1 file changed, 25 insertions(+), 9 deletions(-)

(limited to 'iridescence/src/components/ProductSearch.vue')

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]);
     }
   }
 };
-- 
cgit v1.2.3