2 files changed, 112 insertions, 3 deletions
diff --git a/iridescence/src/components/admin/NewProduct.vue b/iridescence/src/components/admin/NewProduct.vue
new file mode 100644
index 0000000..b8d8dd2
--- /dev/null
+++ b/iridescence/src/components/admin/NewProduct.vue
@@ -0,0 +1,17 @@
+<template>
+  <div id="addNewProduct">
+    <button class="button is-primary">
+      + Add New
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AddNewProduct",
+  props: {},
+  watch: {},
+  computed: {},
+  methods: {}
+};
+</script>
diff --git a/iridescence/src/components/admin/ProductEditCard.vue b/iridescence/src/components/admin/ProductEditCard.vue
index e7fef5e..9fdf0c6 100644
--- a/iridescence/src/components/admin/ProductEditCard.vue
+++ b/iridescence/src/components/admin/ProductEditCard.vue
@@ -12,9 +12,73 @@
           v-model="newProduct.name"
         />
       </div>
-      <a class="panel-block">
-        mojs
-      </a>
+      <div class="panel-block">
+        <div class="field has-addons">
+          <p class="control">
+            <a class="button is-static">
+              #
+            </a>
+          </p>
+          <div class="control">
+            <input
+              class="input"
+              type="text"
+              placeholder="inventory (quantity)"
+              v-model="newProductQuantity"
+            />
+          </div>
+          <div class="control">
+            <a class="button is-info" @click="incrementQuantity(-1)">
+              ▼
+            </a>
+          </div>
+          <div class="control">
+            <a class="button is-info" @click="incrementQuantity(1)">
+              ▲
+            </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">
+            <input
+              class="input"
+              type="text"
+              placeholder="price"
+              v-model="newProductPrice"
+            />
+          </p>
+        </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"
@@ -28,6 +92,8 @@
 </template>
 
 <script>
+const dollarRe = /^\$?(\d+)\.(\d{2})/gm;
+
 export default {
   name: "ProductEditCard",
   data: function() {
@@ -74,11 +140,37 @@ export default {
         this.newProduct.description != this.currentProduct.description ||
         this.newProduct.featured != this.currentProduct.featured
       );
+    },
+    newProductQuantity: {
+      get: function() {
+        return this.newProduct.quantity;
+      },
+      set: function(val) {
+        if (!isNaN(val)) {
+          this.newProduct.quantity = 1 * val;
+        }
+      }
+    },
+    newProductPrice: {
+      get: function() {
+        return (this.newProduct.cents / 100).toFixed(2);
+      },
+      set: function(val) {
+        let groups = dollarRe.exec(val);
+        if (groups && groups[1] && groups[2]) {
+          this.newProduct.cents = 100 * groups[1] + 1 * groups[2];
+        }
+      }
     }
   },
   methods: {
     saveProduct() {
       this.$store.dispatch("updateProduct", this.newProduct);
+    },
+    incrementQuantity(amount) {
+      if (this.newProduct.quantity + amount >= 0) {
+        this.newProduct.quantity += amount;
+      }
     }
   }
 };