From c5280144de096c274f185fade287ccd63b954ceb Mon Sep 17 00:00:00 2001
From: "Adam T. Carpenter" <atc@53hor.net>
Date: Sun, 8 Nov 2020 21:26:34 -0500
Subject: fixed up product models and api calls, working on new product form

---
 .../src/components/admin/ProductEditCard.vue       | 73 +++++++---------------
 1 file changed, 23 insertions(+), 50 deletions(-)

(limited to 'iridescence/src/components/admin/ProductEditCard.vue')

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,17 +82,11 @@
                 </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"
@@ -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() {
-- 
cgit v1.2.3