Working product name updating; working mock Dichroism API.

4 files changed, 63 insertions, 37 deletions

diff --git a/iridescence/src/api/dichroism.js b/iridescence/src/api/dichroism.js
index ff64ced..718269a 100644
--- a/iridescence/src/api/dichroism.js
+++ b/iridescence/src/api/dichroism.js
@@ -9,7 +9,7 @@ export default class Dichroism {
         imgPath: "/beach_box.jpg",
         description: "This is a beach box.",
         featured: false,
-        categories: ["Fused Glass", ["Beachy"]]
+        categories: ["Fused Glass", "Beachy"]
       },
       {
         id: 2,
@@ -19,7 +19,7 @@ export default class Dichroism {
         imgPath: "/wind-chime.jpg",
         description: "Makes noise when the wind blows.",
         featured: false,
-        categories: ["Fused Glass", ["Beachy"]]
+        categories: ["Fused Glass", "Beachy"]
       },
       {
         id: 3,
@@ -29,7 +29,7 @@ export default class Dichroism {
         imgPath: "/beach_box.jpg",
         description: "This is a beach box.",
         featured: false,
-        categories: ["Stained Glass", ["Christmas"]]
+        categories: ["Stained Glass", "Christmas"]
       },
       {
         id: 4,
@@ -39,7 +39,7 @@ export default class Dichroism {
         imgPath: "/wind-chime.jpg",
         description: "Makes noise when the wind blows.",
         featured: false,
-        categories: ["Fused Glass", ["Kiln-y"]]
+        categories: ["Fused Glass", "Kiln-y"]
       },
       {
         id: 5,
@@ -49,22 +49,31 @@ export default class Dichroism {
         imgPath: "/beach_box.jpg",
         description: "This is a beach box.",
         featured: true,
-        categories: ["Stained Glass", ["Christmas"]]
+        categories: ["Stained Glass", "Christmas"]
       }
     ];
   }
 
   getProducts() {
-    return this.products;
+    return this.products.slice(0);
   }
 
-  updateProduct(product) {
-    if (!product) {
+  updateProduct(newProduct) {
+    if (!newProduct) {
       return;
     }
+
     for (let i = 0; i < this.products.length; i++) {
-      if (product.id == this.products[i].id) {
-        this.products[i] = product;
+      if (newProduct.id == this.products[i].id) {
+        let currentProduct = this.products[i];
+        currentProduct.id = newProduct.id;
+        currentProduct.name = newProduct.name;
+        currentProduct.quantity = newProduct.quantity;
+        currentProduct.cents = newProduct.cents;
+        currentProduct.imgPath = newProduct.imgPath;
+        currentProduct.description = newProduct.description;
+        currentProduct.featured = newProduct.featured;
+        currentProduct.categories = newProduct.categories.slice(0);
         return;
       }
     }
diff --git a/iridescence/src/components/admin/ProductEditCard.vue b/iridescence/src/components/admin/ProductEditCard.vue
index db4ab77..e7fef5e 100644
--- a/iridescence/src/components/admin/ProductEditCard.vue
+++ b/iridescence/src/components/admin/ProductEditCard.vue
@@ -1,14 +1,21 @@
 <template>
   <div id="productEditCard">
     <nav class="panel">
-      <p class="panel-heading">{{ oldProduct.id }}: {{ oldProduct.name }}</p>
+      <p class="panel-heading">
+        {{ currentProduct.id }}: {{ currentProduct.name }}
+      </p>
       <div class="panel-block">
-        <input class="input" type="text" v-model="newProduct.name" />
+        <input
+          class="input"
+          type="text"
+          placeholder="product name"
+          v-model="newProduct.name"
+        />
       </div>
       <a class="panel-block">
         mojs
       </a>
-      <div class="panel-block" v-if="productChanged">
+      <div class="panel-block" v-if="newProductChanged">
         <button
           class="button is-link is-outlined is-fullwidth"
           @click="saveProduct"
@@ -26,32 +33,46 @@ export default {
   data: function() {
     return {
       newProduct: {
-        id: this.oldProduct.id,
-        name: this.oldProduct.name,
-        quantity: this.oldProduct.quantity,
-        cents: this.oldProduct.cents,
-        imgPath: this.oldProduct.imgPath,
-        description: this.oldProduct.description,
-        categories: this.oldProduct.categories
+        id: this.currentProduct.id,
+        name: this.currentProduct.name,
+        quantity: this.currentProduct.quantity,
+        cents: this.currentProduct.cents,
+        imgPath: this.currentProduct.imgPath,
+        description: this.currentProduct.description,
+        featured: this.currentProduct.featured,
+        categories: this.currentProduct.categories.slice(0)
       }
     };
   },
   props: {
-    oldProduct: {
+    currentProduct: {
       type: Object,
       required: true
     }
   },
+  watch: {
+    currentProduct() {
+      this.newProduct.id = this.currentProduct.id;
+      this.newProduct.name = this.currentProduct.name;
+      this.newProduct.quantity = this.currentProduct.quantity;
+      this.newProduct.cents = this.currentProduct.cents;
+      this.newProduct.imgPath = this.currentProduct.imgPath;
+      this.newProduct.description = this.currentProduct.description;
+      this.newProduct.featured = this.currentProduct.featured;
+      this.newProduct.categories = this.currentProduct.categories.slice(0);
+    }
+  },
   computed: {
-    productChanged() {
+    newProductChanged() {
+      // TODO: check categories!
       return (
-        this.newProduct.id != this.oldProduct.id ||
-        this.newProduct.name != this.oldProduct.name ||
-        this.newProduct.quantity != this.oldProduct.quantity ||
-        this.newProduct.cents != this.oldProduct.cents ||
-        this.newProduct.imgPath != this.oldProduct.imgPath ||
-        this.newProduct.description != this.oldProduct.description ||
-        this.newProduct.categories != this.oldProduct.categories
+        this.newProduct.id != this.currentProduct.id ||
+        this.newProduct.name != this.currentProduct.name ||
+        this.newProduct.quantity != this.currentProduct.quantity ||
+        this.newProduct.cents != this.currentProduct.cents ||
+        this.newProduct.imgPath != this.currentProduct.imgPath ||
+        this.newProduct.description != this.currentProduct.description ||
+        this.newProduct.featured != this.currentProduct.featured
       );
     }
   },
diff --git a/iridescence/src/components/admin/ProductEditList.vue b/iridescence/src/components/admin/ProductEditList.vue
index 46016c2..128e7bb 100644
--- a/iridescence/src/components/admin/ProductEditList.vue
+++ b/iridescence/src/components/admin/ProductEditList.vue
@@ -6,7 +6,7 @@
         v-for="product in products"
         :key="product.id"
       >
-        <ProductEditCard v-bind:old-product="product"></ProductEditCard>
+        <ProductEditCard v-bind:current-product="product"></ProductEditCard>
       </div>
     </div>
   </div>
diff --git a/iridescence/src/store/index.js b/iridescence/src/store/index.js
index 5a5b5f7..0e5d3be 100644
--- a/iridescence/src/store/index.js
+++ b/iridescence/src/store/index.js
@@ -13,13 +13,10 @@ export default new Vuex.Store({
   },
   getters: {
     products(state) {
-      const searchTerm = state.searchTerm.toLowerCase();
-
       return state.products.filter(item => {
-        return (
-          item.name.toLowerCase().indexOf(searchTerm) != -1 ||
-          item.description.toLowerCase().indexOf(searchTerm) != -1
-        );
+        return JSON.stringify(item)
+          .toLowerCase()
+          .includes(state.searchTerm.toLowerCase());
       });
     }
   },
@@ -33,7 +30,6 @@ export default new Vuex.Store({
   },
   actions: {
     refreshProducts(context) {
-      context.commit("setProducts", []);
       context.commit("setProducts", dichroismApi.getProducts());
     },
     updateProduct(context, product) {