diff options
Diffstat (limited to 'iridescence/src/components')
| -rw-r--r-- | iridescence/src/components/BusyBar.vue | 12 | ||||
| -rw-r--r-- | iridescence/src/components/CartCheckout.vue | 25 | ||||
| -rw-r--r-- | iridescence/src/components/Navbar.vue | 16 | ||||
| -rw-r--r-- | iridescence/src/components/ProductDetail.vue | 75 | ||||
| -rw-r--r-- | iridescence/src/components/cart/CartItem.vue | 39 |
5 files changed, 126 insertions, 41 deletions
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> |