From 7381a7033231e6454a37fd64b1f3de4e8d59355f Mon Sep 17 00:00:00 2001
From: "Adam T. Carpenter" <atc@53hor.net>
Date: Wed, 11 Nov 2020 20:07:12 -0500
Subject: Kind of flailing with the UI; lots of API bugfixes though.

---
 iridescence/src/components/Navbar.vue              | 13 +---
 iridescence/src/components/admin/NewProduct.vue    | 12 ++--
 .../src/components/admin/ProductEditCard.vue       | 73 +++++++++++-----------
 .../src/components/admin/ProductEditList.vue       |  2 +-
 4 files changed, 47 insertions(+), 53 deletions(-)

(limited to 'iridescence/src/components')

diff --git a/iridescence/src/components/Navbar.vue b/iridescence/src/components/Navbar.vue
index 0a66fa8..78627e9 100644
--- a/iridescence/src/components/Navbar.vue
+++ b/iridescence/src/components/Navbar.vue
@@ -36,14 +36,9 @@
         >
           <div
             class="navbar-end"
-            v-if="routeName == 'Administration'"
-            key="newProduct"
+            v-if="routeName != 'Administration'"
+            key="cartCheckout"
           >
-            <div class="navbar-item">
-              <NewProduct></NewProduct>
-            </div>
-          </div>
-          <div class="navbar-end" v-else key="cartCheckout">
             <div
               class="navbar-item has-dropdown is-active"
               v-for="category in categories.keys()"
@@ -74,13 +69,11 @@
 
 <script>
 import CartCheckout from "@/components/CartCheckout.vue";
-import NewProduct from "@/components/admin/NewProduct.vue";
 
 export default {
   name: "Navbar",
   components: {
-    CartCheckout,
-    NewProduct
+    CartCheckout
   },
   data() {
     return {
diff --git a/iridescence/src/components/admin/NewProduct.vue b/iridescence/src/components/admin/NewProduct.vue
index 511ae9c..48eb165 100644
--- a/iridescence/src/components/admin/NewProduct.vue
+++ b/iridescence/src/components/admin/NewProduct.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="addNewProduct">
-    <button class="button is-primary" @click="toggleModal">
+    <button class="button is-primary is-medium" @click="toggleModal">
       + Add New
     </button>
     <transition
@@ -17,9 +17,7 @@
             <button class="delete" @click="toggleModal"></button>
           </header>
           <section class="modal-card-body">
-            <ProductEditCard
-              v-bind:current-product="newProduct"
-            ></ProductEditCard>
+            <ProductEditCard v-bind:parent-product="template"></ProductEditCard>
           </section>
           <footer class="modal-card-foot"></footer>
         </div>
@@ -29,8 +27,8 @@
 </template>
 
 <script>
-import Product from "../../models/product";
-import ProductEditCard from "./ProductEditCard";
+import Product from "@/models/product";
+import ProductEditCard from "@/components/admin/ProductEditCard";
 
 export default {
   name: "NewProduct",
@@ -40,7 +38,7 @@ export default {
   data: function() {
     return {
       modalEnabled: false,
-      newProduct: new Product(),
+      template: new Product({}),
       addAnother: false
     };
   },
diff --git a/iridescence/src/components/admin/ProductEditCard.vue b/iridescence/src/components/admin/ProductEditCard.vue
index 350f8df..a8117ce 100644
--- a/iridescence/src/components/admin/ProductEditCard.vue
+++ b/iridescence/src/components/admin/ProductEditCard.vue
@@ -2,7 +2,7 @@
   <div id="productEditCard">
     <div class="card">
       <div class="card-header">
-        <p class="card-header-title" v-if="currentProduct.id > 0">
+        <p class="card-header-title" v-if="currentProduct.id">
           {{ currentProduct.id }}: {{ currentProduct.name }}
         </p>
       </div>
@@ -74,7 +74,7 @@
                 type="file"
                 name="image"
                 accept=".jpg,.jpeg,.JPG,.JPEG"
-                @change="previewFiles"
+                @change="changePhotoSet"
               />
               <span class="file-cta">
                 <span class="file-label has-text-centered">
@@ -82,7 +82,7 @@
                 </span>
               </span>
               <span class="file-name">
-                {{ newProduct.photo_set }}
+                {{ filename }}
               </span>
             </label>
           </div>
@@ -107,7 +107,12 @@
         enter-active-class="animate__animated animate__fadeIn"
         leave-active-class="animate__animated animate__fadeOut"
       >
-        <div class="card-footer" v-if="isDifferent && isValid">
+        <div
+          class="card-footer"
+          v-if="
+            newProduct.isValidPost() || newProduct.isValidPatch(currentProduct)
+          "
+        >
           <div class="card-footer-item">
             <button class="button is-primary is-fullwidth" @click="saveProduct">
               Save
@@ -120,7 +125,8 @@
 </template>
 
 <script>
-import Product from "../../models/product";
+import Product from "@/models/product";
+import ProductDiff from "@/models/product_diff";
 
 const dollarRe = /^\$?(\d+)\.(\d{2})/gm;
 
@@ -128,28 +134,18 @@ export default {
   name: "ProductEditCard",
   data: function() {
     return {
-      newProduct: new Product(this.currentProduct)
+      currentProduct: new Product(this.parentProduct),
+      newProduct: new ProductDiff(this.currentProduct),
+      filename: ""
     };
   },
   props: {
-    currentProduct: {
+    parentProduct: {
       type: Product,
       required: true
     }
   },
-  watch: {
-    currentProduct() {
-      // TODO: necessary?
-      this.newProduct = new Product(this.currentProduct);
-    }
-  },
   computed: {
-    isDifferent() {
-      return this.newProduct.isDifferent(this.currentProduct);
-    },
-    isValid() {
-      return this.newProduct.isValid();
-    },
     newProductQuantity: {
       get: function() {
         return this.newProduct.quantity;
@@ -165,7 +161,7 @@ export default {
         return (this.newProduct.cents / 100).toFixed(2);
       },
       set: function(val) {
-        let groups = dollarRe.exec(val);
+        const groups = dollarRe.exec(val);
         if (groups && groups[1] && groups[2]) {
           this.newProduct.cents = 100 * groups[1] + 1 * groups[2];
         }
@@ -174,12 +170,24 @@ export default {
   },
   methods: {
     saveProduct() {
-      if (this.newProduct.id == 0) {
-        // new product
-        this.$store.dispatch("createProduct", this.newProduct);
-      } else {
+      if (this.newProduct.id) {
         // update existing
-        this.$store.dispatch("updateProduct", this.newProduct);
+        const updatedProduct = this.$store.dispatch(
+          "updateProduct",
+          this.newProduct
+        );
+        if (updatedProduct) {
+          this.currentProduct = updatedProduct;
+        }
+      } else {
+        // new product
+        const newProduct = this.$store.dispatch(
+          "createProduct",
+          this.newProduct
+        );
+        if (newProduct) {
+          this.currentProduct = newProduct;
+        }
       }
     },
     incrementQuantity(amount) {
@@ -187,21 +195,16 @@ export default {
         this.newProduct.quantity += amount;
       }
     },
-    async previewFiles(event) {
-      let file = event.target.files[0];
+    changePhotoSet(event) {
+      const file = event.target.files[0];
       if (!file) {
         return;
       }
 
-      const fd = new FormData();
-      fd.append(file.name, file);
-
-      const response = await fetch("http://localhost:8000/photos", {
-        method: "POST",
-        body: fd
+      this.$store.dispatch("createPhotoSet", file).then(r => {
+        this.filename = file.name;
+        this.newProduct.photo_set = r[0].id;
       });
-
-      console.log(response);
     }
   }
 };
diff --git a/iridescence/src/components/admin/ProductEditList.vue b/iridescence/src/components/admin/ProductEditList.vue
index 556f1c3..24a276e 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:current-product="product"></ProductEditCard>
+        <ProductEditCard v-bind:parent-product="product"></ProductEditCard>
       </div>
     </div>
   </div>
-- 
cgit v1.2.3