diff options
Diffstat (limited to 'iridescence/src')
| -rw-r--r-- | iridescence/src/components/CartCheckout.vue | 15 | ||||
| -rw-r--r-- | iridescence/src/components/Navbar.vue | 27 | ||||
| -rw-r--r-- | iridescence/src/components/ProductCard.vue | 4 | ||||
| -rw-r--r-- | iridescence/src/components/admin/NewProduct.vue | 17 | ||||
| -rw-r--r-- | iridescence/src/components/admin/ProductEditCard.vue | 98 | ||||
| -rw-r--r-- | iridescence/src/views/Admin.vue | 5 |
6 files changed, 150 insertions, 16 deletions
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> |