fixed up product models and api calls, working on new product form

5 files changed, 43 insertions, 74 deletions

diff --git a/iridescence/src/components/BusyBar.vue b/iridescence/src/components/BusyBar.vue
index fff2c4c..721a5fd 100644
--- a/iridescence/src/components/BusyBar.vue
+++ b/iridescence/src/components/BusyBar.vue
@@ -5,6 +5,13 @@
       max="100"
       v-if="isBusy"
     ></progress>
+    <progress
+      class="progress is-small is-primary"
+      v-bind:value="progress"
+      max="100"
+      v-if="progress < 100"
+      >{{ progress }}%</progress
+    >
   </div>
 </template>
 
@@ -14,6 +21,9 @@ export default {
   computed: {
     isBusy() {
       return this.$store.getters.busy;
+    },
+    progress() {
+      return this.$store.getters.progress;
     }
   }
 };
diff --git a/iridescence/src/components/ProductList.vue b/iridescence/src/components/ProductList.vue
index 537e802..bed37b3 100644
--- a/iridescence/src/components/ProductList.vue
+++ b/iridescence/src/components/ProductList.vue
@@ -3,10 +3,10 @@
     <div class="columns is-multiline is-variable is-7-desktop">
       <div
         class="column is-one-quarter"
-        v-for="item in products"
-        :key="item.id"
+        v-for="product in products"
+        :key="product.id"
       >
-        <ProductCard v-bind="item"></ProductCard>
+        <ProductCard v-bind="product"></ProductCard>
       </div>
     </div>
   </div>
@@ -20,15 +20,11 @@ export default {
   components: {
     ProductCard
   },
-  data() {
-    return {};
-  },
   computed: {
     products() {
       return this.$store.getters.products;
     }
   },
-  methods: {},
   created() {
     this.$store.dispatch("refreshProducts");
   }
diff --git a/iridescence/src/components/admin/NewProduct.vue b/iridescence/src/components/admin/NewProduct.vue
index 8c45f0b..511ae9c 100644
--- a/iridescence/src/components/admin/NewProduct.vue
+++ b/iridescence/src/components/admin/NewProduct.vue
@@ -17,7 +17,9 @@
             <button class="delete" @click="toggleModal"></button>
           </header>
           <section class="modal-card-body">
-            <ProductEditCard v-bind:current-product="product"></ProductEditCard>
+            <ProductEditCard
+              v-bind:current-product="newProduct"
+            ></ProductEditCard>
           </section>
           <footer class="modal-card-foot"></footer>
         </div>
@@ -27,26 +29,18 @@
 </template>
 
 <script>
-import ProductEditCard from "./ProductEditCard.vue";
+import Product from "../../models/product";
+import ProductEditCard from "./ProductEditCard";
 
 export default {
-  name: "AddNewProduct",
+  name: "NewProduct",
   components: {
     ProductEditCard
   },
   data: function() {
     return {
       modalEnabled: false,
-      product: {
-        id: 0,
-        name: "",
-        quantity: 0,
-        cents: 0,
-        imgPath: "",
-        description: "",
-        featured: false,
-        categories: []
-      },
+      newProduct: new Product(),
       addAnother: false
     };
   },
diff --git a/iridescence/src/components/admin/ProductEditCard.vue b/iridescence/src/components/admin/ProductEditCard.vue
index 2784fc9..350f8df 100644
--- a/iridescence/src/components/admin/ProductEditCard.vue
+++ b/iridescence/src/components/admin/ProductEditCard.vue
@@ -15,6 +15,14 @@
             v-model="newProduct.name"
           />
         </div>
+        <div class="field">
+          <input
+            class="input"
+            type="text"
+            placeholder="(product category)"
+            v-model="newProduct.category_path"
+          />
+        </div>
         <div class="field has-addons">
           <p class="control">
             <a class="button is-static">
@@ -74,18 +82,12 @@
                 </span>
               </span>
               <span class="file-name">
-                {{ newProduct.imgPath }}
+                {{ newProduct.photo_set }}
               </span>
             </label>
           </div>
         </div>
         <div class="field">
-          <label class="checkbox">
-            <input type="checkbox" v-model="newProduct.featured" />
-            Featured?
-          </label>
-        </div>
-        <div class="field">
           <textarea
             class="textarea"
             type="text"
@@ -94,13 +96,12 @@
           >
           </textarea>
         </div>
-        <progress
-          class="progress is-primary"
-          v-bind:value="fileProgress"
-          max="100"
-          v-if="fileProgress < 100"
-          >{{ fileProgress }}%</progress
-        >
+        <div class="field">
+          <label class="checkbox">
+            <input type="checkbox" v-model="newProduct.featured" />
+            Featured?
+          </label>
+        </div>
       </div>
       <transition
         enter-active-class="animate__animated animate__fadeIn"
@@ -119,63 +120,35 @@
 </template>
 
 <script>
+import Product from "../../models/product";
+
 const dollarRe = /^\$?(\d+)\.(\d{2})/gm;
 
 export default {
   name: "ProductEditCard",
   data: function() {
     return {
-      newProduct: {
-        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)
-      },
-      fileProgress: 100
+      newProduct: new Product(this.currentProduct)
     };
   },
   props: {
     currentProduct: {
-      type: Object,
+      type: Product,
       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);
+      // TODO: necessary?
+      this.newProduct = new Product(this.currentProduct);
     }
   },
   computed: {
     isDifferent() {
-      // TODO: check categories!
-      return (
-        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
-      );
+      return this.newProduct.isDifferent(this.currentProduct);
     },
     isValid() {
-      return (
-        this.newProductPrice > 0 &&
-        this.newProduct.name != "" &&
-        this.newProduct.imgPath != "" &&
-        this.newProduct.description != ""
-      );
+      return this.newProduct.isValid();
     },
     newProductQuantity: {
       get: function() {
diff --git a/iridescence/src/components/admin/ProductEditList.vue b/iridescence/src/components/admin/ProductEditList.vue
index ae57406..556f1c3 100644
--- a/iridescence/src/components/admin/ProductEditList.vue
+++ b/iridescence/src/components/admin/ProductEditList.vue
@@ -20,15 +20,11 @@ export default {
   components: {
     ProductEditCard
   },
-  data() {
-    return {};
-  },
   computed: {
     products() {
       return this.$store.getters.products;
     }
   },
-  methods: {},
   created() {
     this.$store.dispatch("refreshProducts");
   }