From 2e7da5ab02ffa8b07fede7f6cd7e5dbbd90fac5f Mon Sep 17 00:00:00 2001
From: "Adam T. Carpenter" <atc@53hor.net>
Date: Mon, 23 Nov 2020 17:29:58 -0500
Subject: finished up product detail functionality, started checkout and cart
 views

---
 iridescence/src/App.vue                      |  3 +-
 iridescence/src/components/BusyBar.vue       | 12 +----
 iridescence/src/components/CartCheckout.vue  | 25 +++++++---
 iridescence/src/components/Navbar.vue        | 16 +++---
 iridescence/src/components/ProductDetail.vue | 75 +++++++++++++++++++++++-----
 iridescence/src/components/cart/CartItem.vue | 39 +++++++++++++++
 iridescence/src/router/index.js              | 12 +++++
 iridescence/src/store/index.js               | 24 ++++++---
 iridescence/src/views/Cart.vue               | 20 ++++++++
 iridescence/src/views/Checkout.vue           | 12 +++++
 10 files changed, 188 insertions(+), 50 deletions(-)
 create mode 100644 iridescence/src/components/cart/CartItem.vue
 create mode 100644 iridescence/src/views/Cart.vue
 create mode 100644 iridescence/src/views/Checkout.vue

(limited to 'iridescence')

diff --git a/iridescence/src/App.vue b/iridescence/src/App.vue
index 8851fbd..d9499c4 100644
--- a/iridescence/src/App.vue
+++ b/iridescence/src/App.vue
@@ -30,6 +30,7 @@ export default {
 
 <style lang="scss">
 @charset "utf-8";
-//$modal-background-background-color: hsla(0, 0%, 4%, 0.2);
+/*modal-background-background-color: hsla(0, 0%, 4%, 0.2);*/
+$modal-content-width: 800px;
 @import "../node_modules/bulma/bulma.sass";
 </style>
diff --git a/iridescence/src/components/BusyBar.vue b/iridescence/src/components/BusyBar.vue
index 721a5fd..a38cefa 100644
--- a/iridescence/src/components/BusyBar.vue
+++ b/iridescence/src/components/BusyBar.vue
@@ -5,13 +5,6 @@
       max="100"
       v-if="isBusy"
     ></progress>
-    <progress
-      class="progress is-small is-primary"
-      v-bind:value="progress"
-      max="100"
-      v-if="progress < 100"
-      >{{ progress }}%</progress
-    >
   </div>
 </template>
 
@@ -20,10 +13,7 @@ export default {
   name: "BusyBar",
   computed: {
     isBusy() {
-      return this.$store.getters.busy;
-    },
-    progress() {
-      return this.$store.getters.progress;
+      return this.$store.state.busy;
     }
   }
 };
diff --git a/iridescence/src/components/CartCheckout.vue b/iridescence/src/components/CartCheckout.vue
index ec72acf..19ad706 100644
--- a/iridescence/src/components/CartCheckout.vue
+++ b/iridescence/src/components/CartCheckout.vue
@@ -1,15 +1,24 @@
 <template>
-  <div class="buttons">
-    <button class="button">
-      Cart (5)
-    </button>
-    <button class="button is-info">
-      Checkout
-    </button>
+  <div id="cartCheckout">
+    <div class="buttons">
+      <router-link to="/cart" class="button">Cart ({{ inCart }})</router-link>
+      <router-link to="/checkout" class="button is-primary">
+        Checkout
+      </router-link>
+    </div>
   </div>
 </template>
+
 <script>
 export default {
-  name: "CartCheckout"
+  name: "CartCheckout",
+  computed: {
+    inCart() {
+      return Object.values(this.$store.state.cart).reduce(
+        (acc, cur) => acc + cur,
+        0
+      );
+    }
+  }
 };
 </script>
diff --git a/iridescence/src/components/Navbar.vue b/iridescence/src/components/Navbar.vue
index 60db834..3ef4ead 100644
--- a/iridescence/src/components/Navbar.vue
+++ b/iridescence/src/components/Navbar.vue
@@ -82,13 +82,12 @@ export default {
     },
     categories() {
       //const raw = this.$store.getters.products.map(p => p.category.split("/"));
-      const raw = [
-        [1, 2, 3],
-        [1, 2, 4],
-        [1, 5],
-        [6, 7]
-      ];
-      console.log(this.generateCategories(raw));
+      //const raw = [
+      //  [1, 2, 3],
+      //  [1, 2, 4],
+      //  [1, 5],
+      //  [6, 7]
+      //];
       return [];
     },
     routeName() {
@@ -96,9 +95,8 @@ export default {
     }
   },
   methods: {
-    generateCategories(list) {
+    generateCategories() {
       let results = [];
-      console.log(list);
 
       return results;
     },
diff --git a/iridescence/src/components/ProductDetail.vue b/iridescence/src/components/ProductDetail.vue
index 9802d84..430d78b 100644
--- a/iridescence/src/components/ProductDetail.vue
+++ b/iridescence/src/components/ProductDetail.vue
@@ -17,18 +17,56 @@
           </div>
 
           <div class="card-content">
-            <div class="content">
-              <p class="title">
-                {{ product.name }}
-              </p>
-              <p class="subtitle">
-                {{ dollars }}
-              </p>
-              <p class="subtitle">{{ stock }}</p>
-            </div>
-
-            <div class="content">
-              {{ product.description }}
+            <div class="columns">
+              <div class="column">
+                <p class="title">
+                  {{ product.name }}
+                </p>
+                <nav class="breadcrumb">
+                  <ul>
+                    <li v-for="category in categories" :key="category">
+                      {{ category }}
+                    </li>
+                  </ul>
+                </nav>
+                <p>
+                  {{ product.description }}
+                </p>
+              </div>
+              <div class="column is-one-third">
+                <p class="subtitle">{{ dollars }}</p>
+                <p class="subtitle">{{ stock }}</p>
+                <div v-if="inCart" class="field has-addons">
+                  <p class="control is-expanded">
+                    <a class="button is-static is-fullwidth">
+                      {{ inCart }} in cart
+                    </a>
+                  </p>
+                  <div class="control">
+                    <a
+                      @click="incrementCartQuantity(-1)"
+                      class="button is-info is-outlined"
+                    >
+                      -
+                    </a>
+                  </div>
+                  <div class="control">
+                    <a
+                      @click="incrementCartQuantity(1)"
+                      class="button is-info is-outlined"
+                    >
+                      +
+                    </a>
+                  </div>
+                </div>
+                <button
+                  v-else
+                  @click="incrementCartQuantity(1)"
+                  class="button is-primary is-fullwidth"
+                >
+                  Add to Cart
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -42,9 +80,12 @@
 export default {
   name: "ProductDetail",
   computed: {
+    inCart() {
+      return this.$store.state.cart[this.product.id];
+    },
     product() {
       return this.$store.getters.products.find(
-        p => p.id == this.$store.getters.productDetailId
+        p => p.id == this.$store.state.productDetailId
       );
     },
     stock() {
@@ -66,11 +107,19 @@ export default {
       return [process.env.VUE_APP_IMAGE_ROOT, this.product.photo_fullsize].join(
         "/"
       );
+    },
+    categories() {
+      let categories = this.product.category.split("/");
+      categories.splice(0, 1, "All");
+      return categories;
     }
   },
   methods: {
     clearDetailId() {
       this.$store.commit("productDetailId", 0);
+    },
+    incrementCartQuantity(by) {
+      this.$store.commit("cartItem", { id: this.product.id, by });
     }
   }
 };
diff --git a/iridescence/src/components/cart/CartItem.vue b/iridescence/src/components/cart/CartItem.vue
new file mode 100644
index 0000000..8c2de16
--- /dev/null
+++ b/iridescence/src/components/cart/CartItem.vue
@@ -0,0 +1,39 @@
+<template>
+  <section class="section" id="cartItem">
+    <div class="media">
+      <figure class="media-left image is-square">
+        <img :src="thumbnail" :title="name" />
+      </figure>
+      <div class="media-content">
+        <div class="field">
+          <p class="control">
+            <textarea
+              class="textarea"
+              placeholder="Add a comment..."
+            ></textarea>
+          </p>
+        </div>
+        <nav class="level">
+          <div class="level-left">
+            <div class="level-item">
+              <a class="button is-info">Submit</a>
+            </div>
+          </div>
+          <div class="level-right">
+            <div class="level-item">
+              <label class="checkbox">
+                <input type="checkbox" /> Press enter to submit
+              </label>
+            </div>
+          </div>
+        </nav>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "CartItem"
+};
+</script>
diff --git a/iridescence/src/router/index.js b/iridescence/src/router/index.js
index 8c05e28..cc63967 100644
--- a/iridescence/src/router/index.js
+++ b/iridescence/src/router/index.js
@@ -3,6 +3,8 @@ import VueRouter from "vue-router";
 import Home from "../views/Home.vue";
 import About from "../views/About.vue";
 import Admin from "../views/Admin.vue";
+import Cart from "../views/Cart.vue";
+import Checkout from "../views/Checkout.vue";
 
 Vue.use(VueRouter);
 
@@ -24,6 +26,16 @@ const routes = [
     path: "/admin",
     name: "Administration",
     component: Admin
+  },
+  {
+    path: "/cart",
+    name: "Cart",
+    component: Cart
+  },
+  {
+    path: "/checkout",
+    name: "Checkout",
+    component: Checkout
   }
 ];
 
diff --git a/iridescence/src/store/index.js b/iridescence/src/store/index.js
index dabcf31..8208f35 100644
--- a/iridescence/src/store/index.js
+++ b/iridescence/src/store/index.js
@@ -10,17 +10,12 @@ export default new Vuex.Store({
   state: {
     searchTerm: "",
     products: [],
+    cart: {},
     busy: false,
     compare: a => (a.featured ? -1 : 1),
     productDetailId: 0
   },
   getters: {
-    busy(state) {
-      return state.busy;
-    },
-    productDetailId(state) {
-      return state.productDetailId;
-    },
     products(state) {
       return state.products
         .filter(item => {
@@ -38,6 +33,20 @@ export default new Vuex.Store({
     productDetailId(state, id) {
       state.productDetailId = id;
     },
+    cartItem(state, { id, by }) {
+      if (state.cart[id]) {
+        let newCount = (state.cart[id] += by);
+        state.cart = {
+          ...state.cart,
+          [id]: newCount
+        };
+      } else {
+        state.cart = {
+          ...state.cart,
+          [id]: 1
+        };
+      }
+    },
     compare(state, compare) {
       state.compare = compare;
     },
@@ -75,6 +84,5 @@ export default new Vuex.Store({
       commit("toggleBusy");
       return photoSet;
     }
-  },
-  modules: {}
+  }
 });
diff --git a/iridescence/src/views/Cart.vue b/iridescence/src/views/Cart.vue
new file mode 100644
index 0000000..7060b60
--- /dev/null
+++ b/iridescence/src/views/Cart.vue
@@ -0,0 +1,20 @@
+<template>
+  <div id="cart">
+    <div class="container">
+      <section class="section">
+        <CartItem></CartItem>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+import CartItem from "@/components/cart/CartItem.vue";
+
+export default {
+  name: "Cart",
+  components: {
+    CartItem
+  }
+};
+</script>
diff --git a/iridescence/src/views/Checkout.vue b/iridescence/src/views/Checkout.vue
new file mode 100644
index 0000000..ab28517
--- /dev/null
+++ b/iridescence/src/views/Checkout.vue
@@ -0,0 +1,12 @@
+<template>
+  <div id="checkout">
+    checkout
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Checkout",
+  components: {}
+};
+</script>
-- 
cgit v1.2.3