basic sorting functional; swapped indexes for ids in edit list

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>