Working product name updating; working mock Dichroism API.

2 files changed, 41 insertions, 20 deletions

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>