fixed resizing issues with edit boxes; switched from panels to cards

3 files changed, 98 insertions, 58 deletions

diff --git a/iridescence/src/components/admin/NewProductModal.vue b/iridescence/src/components/admin/NewProductModal.vue
index 228ee4c..8df0faa 100644
--- a/iridescence/src/components/admin/NewProductModal.vue
+++ b/iridescence/src/components/admin/NewProductModal.vue
@@ -1,24 +1,45 @@
 <template>
-  <div class="modal is-active" id="newProductModal">
+  <div class="modal " id="newProductModal">
     <div class="modal-background"></div>
     <div class="modal-card">
       <header class="modal-card-head">
-        <p class="modal-card-title">Modal title</p>
+        <p class="modal-card-title"></p>
         <button class="delete" aria-label="close"></button>
       </header>
       <section class="modal-card-body">
-        <!-- Content ... -->
+        <ProductEditCard v-bind:current-product="product"></ProductEditCard>
       </section>
       <footer class="modal-card-foot">
-        <button class="button is-success">Save changes</button>
-        <button class="button">Cancel</button>
+        <label class="checkbox">
+          <input type="checkbox" v-model="addAnother" />
+          Add Another?
+        </label>
       </footer>
     </div>
   </div>
 </template>
 
 <script>
+import ProductEditCard from "@/components/admin/ProductEditCard.vue";
 export default {
-  name: "NewProductModal"
+  name: "NewProductModal",
+  components: {
+    ProductEditCard
+  },
+  data: function() {
+    return {
+      product: {
+        id: 0,
+        name: "",
+        quantity: 0,
+        cents: 0,
+        imgPath: "",
+        description: "",
+        featured: false,
+        categories: []
+      },
+      addAnother: false
+    };
+  }
 };
 </script>
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) {
diff --git a/iridescence/src/components/admin/ProductEditList.vue b/iridescence/src/components/admin/ProductEditList.vue
index 128e7bb..ae57406 100644
--- a/iridescence/src/components/admin/ProductEditList.vue
+++ b/iridescence/src/components/admin/ProductEditList.vue
@@ -1,8 +1,8 @@
 <template>
   <div id="productEditList">
-    <div class="columns is-multiline is-variable is-7-desktop">
+    <div class="columns is-multiline is-variable is-desktop">
       <div
-        class="column is-one-quarter"
+        class="column is-one-third-desktop"
         v-for="product in products"
         :key="product.id"
       >