From 74c5bb3fa6fd725685ad549c972ec0dee58f1b6b Mon Sep 17 00:00:00 2001
From: "Adam T. Carpenter" <atc@53hor.net>
Date: Thu, 24 Sep 2020 20:18:09 -0400
Subject: fixed resizing issues with edit boxes; switched from panels to cards

---
 .../src/components/admin/ProductEditCard.vue       | 119 ++++++++++++---------
 1 file changed, 69 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 9fdf0c6..8ea23b1 100644
--- a/iridescence/src/components/admin/ProductEditCard.vue
+++ b/iridescence/src/components/admin/ProductEditCard.vue
@@ -1,32 +1,37 @@
 <template>
   <div id="productEditCard">
-    <nav class="panel">
-      <p class="panel-heading">
-        {{ currentProduct.id }}: {{ currentProduct.name }}
-      </p>
-      <div class="panel-block">
-        <input
-          class="input"
-          type="text"
-          placeholder="product name"
-          v-model="newProduct.name"
-        />
+    <div class="card">
+      <div class="card-header">
+        <p class="card-header-title" v-if="currentProduct.id > 0">
+          {{ currentProduct.id }}: {{ currentProduct.name }}
+        </p>
+        <p class="card-header-title" v-else>
+          Add New Product
+        </p>
       </div>
-      <div class="panel-block">
+      <div class="card-content">
+        <div class="field">
+          <input
+            class="input"
+            type="text"
+            placeholder="product name"
+            v-model="newProduct.name"
+          />
+        </div>
         <div class="field has-addons">
           <p class="control">
             <a class="button is-static">
               #
             </a>
           </p>
-          <div class="control">
+          <p class="control is-expanded">
             <input
               class="input"
               type="text"
               placeholder="inventory (quantity)"
               v-model="newProductQuantity"
             />
-          </div>
+          </p>
           <div class="control">
             <a class="button is-info" @click="incrementQuantity(-1)">
               ▼
@@ -38,15 +43,13 @@
             </a>
           </div>
         </div>
-      </div>
-      <div class="panel-block">
         <div class="field has-addons">
           <p class="control">
             <a class="button is-static">
               $
             </a>
           </p>
-          <p class="control">
+          <p class="control is-expanded">
             <input
               class="input"
               type="text"
@@ -55,39 +58,41 @@
             />
           </p>
         </div>
+        <div class="field">
+          <input
+            class="input"
+            type="text"
+            placeholder="image"
+            v-model="newProduct.imgPath"
+          />
+        </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"
+            placeholder="description"
+            v-model="newProduct.description"
+          >
+          </textarea>
+        </div>
       </div>
-      <div class="panel-block">
-        <input
-          class="input"
-          type="text"
-          placeholder="image"
-          v-model="newProduct.imgPath"
-        />
-      </div>
-      <div class="panel-block">
-        <label class="checkbox">
-          <input type="checkbox" v-model="newProduct.featured" />
-          Featured?
-        </label>
-      </div>
-      <div class="panel-block">
-        <textarea
-          class="textarea"
-          type="text"
-          placeholder="description"
-          v-model="newProduct.description"
-        >
-        </textarea>
-      </div>
-      <div class="panel-block" v-if="newProductChanged">
-        <button
-          class="button is-link is-outlined is-fullwidth"
-          @click="saveProduct"
-        >
-          Save
-        </button>
+      <div class="card-footer" v-if="isDifferent && isValid">
+        <div class="card-footer-item">
+          <button
+            class="button is-link is-outlined is-fullwidth"
+            @click="saveProduct"
+          >
+            Save
+          </button>
+        </div>
       </div>
-    </nav>
+    </div>
   </div>
 </template>
 
@@ -129,7 +134,7 @@ export default {
     }
   },
   computed: {
-    newProductChanged() {
+    isDifferent() {
       // TODO: check categories!
       return (
         this.newProduct.id != this.currentProduct.id ||
@@ -141,6 +146,14 @@ export default {
         this.newProduct.featured != this.currentProduct.featured
       );
     },
+    isValid() {
+      return (
+        this.newProductPrice > 0 &&
+        this.newProduct.name != "" &&
+        this.newProduct.imgPath != "" &&
+        this.newProduct.description != ""
+      );
+    },
     newProductQuantity: {
       get: function() {
         return this.newProduct.quantity;
@@ -165,7 +178,13 @@ export default {
   },
   methods: {
     saveProduct() {
-      this.$store.dispatch("updateProduct", this.newProduct);
+      if (this.newProduct.id == 0) {
+        // new product
+        this.$store.dispatch("createProduct", this.newProduct);
+      } else {
+        // update existing
+        this.$store.dispatch("updateProduct", this.newProduct);
+      }
     },
     incrementQuantity(amount) {
       if (this.newProduct.quantity + amount >= 0) {
-- 
cgit v1.2.3

