From 253dceb5591c5a39122f1439a721ce5b0b3fc97c Mon Sep 17 00:00:00 2001
From: "Adam T. Carpenter" <atc@53hor.net>
Date: Tue, 15 Sep 2020 17:24:00 -0400
Subject: added new product button, added search bar to admin view

---
 iridescence/src/components/CartCheckout.vue        | 15 ++++
 iridescence/src/components/Navbar.vue              | 27 ++++--
 iridescence/src/components/ProductCard.vue         |  4 +-
 iridescence/src/components/admin/NewProduct.vue    | 17 ++++
 .../src/components/admin/ProductEditCard.vue       | 98 +++++++++++++++++++++-
 iridescence/src/views/Admin.vue                    |  5 +-
 6 files changed, 150 insertions(+), 16 deletions(-)
 create mode 100644 iridescence/src/components/CartCheckout.vue
 create mode 100644 iridescence/src/components/admin/NewProduct.vue

(limited to 'iridescence')

diff --git a/iridescence/src/components/CartCheckout.vue b/iridescence/src/components/CartCheckout.vue
new file mode 100644
index 0000000..ec72acf
--- /dev/null
+++ b/iridescence/src/components/CartCheckout.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="buttons">
+    <button class="button">
+      Cart (5)
+    </button>
+    <button class="button is-info">
+      Checkout
+    </button>
+  </div>
+</template>
+<script>
+export default {
+  name: "CartCheckout"
+};
+</script>
diff --git a/iridescence/src/components/Navbar.vue b/iridescence/src/components/Navbar.vue
index 551ce5a..16415bb 100644
--- a/iridescence/src/components/Navbar.vue
+++ b/iridescence/src/components/Navbar.vue
@@ -25,7 +25,13 @@
             About
           </router-link>
         </div>
-        <div class="navbar-end">
+
+        <div class="navbar-end" v-if="routeName == 'Administration'">
+          <div class="navbar-item">
+            <NewProduct></NewProduct>
+          </div>
+        </div>
+        <div class="navbar-end" v-else>
           <div
             class="navbar-item has-dropdown is-active"
             v-for="category in categories.keys()"
@@ -45,14 +51,7 @@
           </div>
 
           <div class="navbar-item">
-            <div class="buttons">
-              <button class="button">
-                Cart (5)
-              </button>
-              <button class="button is-info">
-                Checkout
-              </button>
-            </div>
+            <CartCheckout></CartCheckout>
           </div>
         </div>
       </div>
@@ -61,8 +60,15 @@
 </template>
 
 <script>
+import CartCheckout from "@/components/CartCheckout.vue";
+import NewProduct from "@/components/admin/NewProduct.vue";
+
 export default {
   name: "Navbar",
+  components: {
+    CartCheckout,
+    NewProduct
+  },
   data() {
     return {
       isMenuActive: false
@@ -80,6 +86,9 @@ export default {
       const products = this.$store.getters.products;
       console.log(products.map(item => item.categories));
       return [];
+    },
+    routeName() {
+      return this.$route.name;
     }
   },
   methods: {
diff --git a/iridescence/src/components/ProductCard.vue b/iridescence/src/components/ProductCard.vue
index 269e416..36c7be5 100644
--- a/iridescence/src/components/ProductCard.vue
+++ b/iridescence/src/components/ProductCard.vue
@@ -39,10 +39,8 @@ export default {
   },
   computed: {
     stock() {
-      if (this.quantity < 0) {
+      if (this.quantity == 0) {
         return "Made to order";
-      } else if (this.quantity == 0) {
-        return "Out of stock";
       } else {
         return [this.quantity, "in stock"].join(" ");
       }
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;
+      }
     }
   }
 };
diff --git a/iridescence/src/views/Admin.vue b/iridescence/src/views/Admin.vue
index 85d6a14..ec02e07 100644
--- a/iridescence/src/views/Admin.vue
+++ b/iridescence/src/views/Admin.vue
@@ -2,6 +2,7 @@
   <div id="admin">
     <div class="container">
       <section class="section">
+        <ProductSearch></ProductSearch>
         <ProductEditList></ProductEditList>
       </section>
     </div>
@@ -9,12 +10,14 @@
 </template>
 
 <script>
+import ProductSearch from "@/components/ProductSearch.vue";
 import ProductEditList from "@/components/admin/ProductEditList.vue";
 
 export default {
   name: "Admin",
   components: {
-    ProductEditList
+    ProductEditList,
+    ProductSearch
   }
 };
 </script>
-- 
cgit v1.2.3