diff options
author | Adam T. Carpenter <atc@53hor.net> | 2022-10-26 21:02:31 -0400 |
---|---|---|
committer | Adam T. Carpenter <atc@53hor.net> | 2022-10-26 21:02:31 -0400 |
commit | 9f3098e80c6b6c87e9bfbfe36239a39e5cafb29f (patch) | |
tree | db9ca419266117facecdff6d30460669f3148efb /iridescence/src/components | |
parent | f243a3b7341012227d6e8342a65f9c5d7784256f (diff) | |
download | theglassyladies-9f3098e80c6b6c87e9bfbfe36239a39e5cafb29f.tar.xz theglassyladies-9f3098e80c6b6c87e9bfbfe36239a39e5cafb29f.zip |
init: add some stories and personas and begin layout out domain
Diffstat (limited to 'iridescence/src/components')
-rw-r--r-- | iridescence/src/components/BusyBar.vue | 20 | ||||
-rw-r--r-- | iridescence/src/components/CartCheckout.vue | 38 | ||||
-rw-r--r-- | iridescence/src/components/Footer.vue | 53 | ||||
-rw-r--r-- | iridescence/src/components/Navbar.vue | 114 | ||||
-rw-r--r-- | iridescence/src/components/ProductCard.vue | 74 | ||||
-rw-r--r-- | iridescence/src/components/ProductDetail.vue | 135 | ||||
-rw-r--r-- | iridescence/src/components/ProductFilter.vue | 52 | ||||
-rw-r--r-- | iridescence/src/components/ProductList.vue | 32 | ||||
-rw-r--r-- | iridescence/src/components/ProductSearch.vue | 88 | ||||
-rw-r--r-- | iridescence/src/components/admin/NewProduct.vue | 58 | ||||
-rw-r--r-- | iridescence/src/components/admin/ProductEditCard.vue | 282 | ||||
-rw-r--r-- | iridescence/src/components/admin/ProductEditList.vue | 32 | ||||
-rw-r--r-- | iridescence/src/components/cart/CartItem.vue | 89 | ||||
-rw-r--r-- | iridescence/src/components/cart/Totals.vue | 28 | ||||
-rw-r--r-- | iridescence/src/components/checkout/CheckoutForm.vue | 301 |
15 files changed, 0 insertions, 1396 deletions
diff --git a/iridescence/src/components/BusyBar.vue b/iridescence/src/components/BusyBar.vue deleted file mode 100644 index a38cefa..0000000 --- a/iridescence/src/components/BusyBar.vue +++ /dev/null @@ -1,20 +0,0 @@ -<template> - <div id="busyBar"> - <progress - class="progress is-small is-primary" - max="100" - v-if="isBusy" - ></progress> - </div> -</template> - -<script> -export default { - name: "BusyBar", - computed: { - isBusy() { - return this.$store.state.busy; - } - } -}; -</script> diff --git a/iridescence/src/components/CartCheckout.vue b/iridescence/src/components/CartCheckout.vue deleted file mode 100644 index 1b327b2..0000000 --- a/iridescence/src/components/CartCheckout.vue +++ /dev/null @@ -1,38 +0,0 @@ -<template> - <div id="cartCheckout"> - <div class="buttons has-addons"> - <router-link - v-if="inCart" - to="/cart" - class="button is-success is-rounded" - > - <span class="iconify-inline" data-icon="mdi-cart"></span> - <span>Checkout</span></router-link - > - <a v-else class="button is-static is-rounded"> - <span class="iconify-inline" data-icon="mdi-cart"></span> - </a> - <button class="button is-static">x{{ inCart }}</button> - <button class="button is-static is-rounded"> - {{ cartTotal }} - </button> - </div> - </div> -</template> - -<script> -export default { - name: "CartCheckout", - computed: { - inCart() { - return Object.values(this.$store.state.cart).reduce( - (acc, cur) => acc + cur, - 0 - ); - }, - cartTotal() { - return this.$store.getters.cartTotal; - } - } -}; -</script> diff --git a/iridescence/src/components/Footer.vue b/iridescence/src/components/Footer.vue deleted file mode 100644 index 8210c62..0000000 --- a/iridescence/src/components/Footer.vue +++ /dev/null @@ -1,53 +0,0 @@ -<template> - <div id="footer"> - <footer class="footer"> - <nav class="level"> - <div class="level-item has-text-centered"> - <ul> - <li> - <a - class="navbar-item" - target="_blank" - href="https://www.facebook.com/glassyladiesart" - > - <span class="iconify-inline" data-icon="mdi-facebook"></span> - <span>Like Us on Facebook</span> - </a> - </li> - <li> - <a - class="navbar-item" - target="_blank" - href="mailto:liz@theglassyladies.com" - > - <span class="iconify-inline" data-icon="mdi-email"></span> - <span>Write to Us</span> - </a> - </li> - </ul> - </div> - - <div class="level-item has-text-centered"> - <ul> - <li>© {{ year }} The Glassy Ladies, LLC</li> - <li> - Experiencing issues? - <a href="mailto:webmaster@theglassyladies.com">Let us know.</a> - </li> - </ul> - </div> - </nav> - </footer> - </div> -</template> - -<script> -export default { - name: "Footer", - data() { - return { - year: new Date().getFullYear() - }; - } -}; -</script> diff --git a/iridescence/src/components/Navbar.vue b/iridescence/src/components/Navbar.vue deleted file mode 100644 index 3a3390c..0000000 --- a/iridescence/src/components/Navbar.vue +++ /dev/null @@ -1,114 +0,0 @@ -<template> - <div id="navbar"> - <nav class="navbar is-fixed-top is-primary"> - <div class="navbar-brand"> - <router-link to="/" class="navbar-item"> - <img src="@/assets/logo_sm.png" /> - <div class="navbar-item"> - <span style="color: white"> - The Glassy Ladies - </span> - </div> - </router-link> - <a class="navbar-burger burger" v-on:click="toggleNavMenu"> - <span></span> - <span></span> - <span></span> - </a> - </div> - <div :class="navMenu"> - <div class="navbar-start"> - <router-link to="/faq" class="navbar-item"> - F.A.Q. - </router-link> - <router-link to="/about" class="navbar-item"> - About Us - </router-link> - <router-link to="/care" class="navbar-item"> - Care & Handling - </router-link> - <router-link to="/privacy" class="navbar-item"> - Privacy Policy - </router-link> - <router-link to="/admin" class="navbar-item"> - Inventory - </router-link> - </div> - - <transition - mode="out-in" - enter-active-class="animate__animated animate__flipInX" - leave-active-class="animate__animated animate__flipOutX" - > - <div - class="navbar-end" - v-if="routeName != 'Administration'" - key="cartCheckout" - > - <div - class="navbar-item has-dropdown is-active" - v-for="category in categories" - :key="category" - > - <div class="navbar-link"> - {{ category }} - </div> - </div> - - <div class="navbar-item"> - <CartCheckout></CartCheckout> - </div> - </div> - </transition> - </div> - </nav> - </div> -</template> - -<script> -import CartCheckout from "@/components/CartCheckout.vue"; - -export default { - name: "Navbar", - components: { - CartCheckout - }, - data() { - return { - isMenuActive: false - }; - }, - computed: { - navMenu() { - if (this.isMenuActive) { - return "navbar-menu is-active"; - } else { - return "navbar-menu"; - } - }, - categories() { - //const raw = this.$store.getters.products.map(p => p.category.split("/")); - //const raw = [ - // [1, 2, 3], - // [1, 2, 4], - // [1, 5], - // [6, 7] - //]; - return []; - }, - routeName() { - return this.$route.name; - } - }, - methods: { - generateCategories() { - let results = []; - - return results; - }, - toggleNavMenu() { - this.isMenuActive = !this.isMenuActive; - } - } -}; -</script> diff --git a/iridescence/src/components/ProductCard.vue b/iridescence/src/components/ProductCard.vue deleted file mode 100644 index 144dd9e..0000000 --- a/iridescence/src/components/ProductCard.vue +++ /dev/null @@ -1,74 +0,0 @@ -<template> - <div id="productCard"> - <div class="card"> - <div class="card-image"> - <figure class="image is-square"> - <a @click="setDetailId"> - <img :src="thumbnail" :alt="name" title="Click to expand." /> - </a> - </figure> - </div> - <div class="card-content"> - <div class="content"> - <p class="title is-4"> - <a @click="setDetailId"> - {{ name }} - </a> - </p> - <p class="subtitle is-4"> - {{ dollars }} - </p> - <p class="subtitle is-6">{{ stock }}</p> - </div> - - <div class="content"> - {{ shortDescription }} - </div> - </div> - </div> - </div> -</template> - -<script> -export default { - name: "ProductCard", - props: { - id: Number, - name: String, - quantity: Number, - cents: Number, - photo_thumbnail: String, - photo_base: String, - photo_fullsize: String, - description: String - }, - computed: { - stock() { - if (this.quantity == 0) { - return "Made to order"; - } else { - return [this.quantity, "in stock"].join(" "); - } - }, - dollars() { - return "$ " + (this.cents / 100).toFixed(2); - }, - thumbnail() { - return process.env.VUE_APP_IMAGE_ROOT + this.photo_thumbnail; - }, - shortDescription() { - let description = this.description.split(" "); - if (description.length < 10) { - return this.description; - } else { - return description.splice(0, 10).join(" ") + "…"; - } - } - }, - methods: { - setDetailId() { - this.$store.commit("productDetailId", this.id); - } - } -}; -</script> diff --git a/iridescence/src/components/ProductDetail.vue b/iridescence/src/components/ProductDetail.vue deleted file mode 100644 index a67e39f..0000000 --- a/iridescence/src/components/ProductDetail.vue +++ /dev/null @@ -1,135 +0,0 @@ -<template> - <div id="productDetail"> - <div v-if="product" class="modal is-active"> - <div @click="clearDetailId" class="modal-background"></div> - <div class="modal-content"> - <div class="card"> - <div class="card-image"> - <figure class="image "> - <a target="_blank" :href="fullsize"> - <img - :src="base" - :alt="product.name" - title="Click for fullsize" - /> - </a> - </figure> - </div> - - <div class="card-content"> - <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 is-rounded is-medium" - > - {{ inCart }} in cart - </a> - </p> - <div class="control"> - <a - @click="incrementCartQuantity(-1)" - class="button is-info is-medium" - > - <span - class="iconify-inline" - data-icon="mdi-cart-minus" - ></span> - </a> - </div> - <div class="control"> - <a - @click="incrementCartQuantity(1)" - class="button is-info is-rounded is-medium" - > - <span - class="iconify-inline" - data-icon="mdi-cart-plus" - ></span> - </a> - </div> - </div> - <button - v-else - @click="incrementCartQuantity(1)" - class="button is-success is-fullwidth is-rounded is-medium" - > - <span - class="iconify-inline" - data-icon="mdi-cart-arrow-down" - ></span> - </button> - </div> - </div> - </div> - </div> - </div> - <div @click="clearDetailId" class="modal-close is-large"></div> - </div> - </div> -</template> - -<script> -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.state.productDetailId - ); - }, - stock() { - if (this.product.quantity == 0) { - return "Made to order"; - } else { - return [this.product.quantity, "in stock"].join(" "); - } - }, - dollars() { - return "$ " + (this.product.cents / 100).toFixed(2); - }, - base() { - return [process.env.VUE_APP_IMAGE_ROOT, this.product.photo_base].join(""); - }, - fullsize() { - 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 }); - } - } -}; -</script> diff --git a/iridescence/src/components/ProductFilter.vue b/iridescence/src/components/ProductFilter.vue deleted file mode 100644 index 6fdd461..0000000 --- a/iridescence/src/components/ProductFilter.vue +++ /dev/null @@ -1,52 +0,0 @@ -<template> - <div id="productFilter"> - <aside class="menu"> - <p class="menu-label"> - Availability - </p> - <ul class="menu-list"> - <li> - <label class="radio"> - <input type="radio" name="availability" /> - In stock - </label> - </li> - <li> - <label class="radio"> - <input type="radio" name="availability" /> - Made to order - </label> - </li> - </ul> - <p class="menu-label"> - Category - </p> - <ul class="menu-list"> - <li> - <label class="radio"> - <input type="radio" name="category" /> - Garden - </label> - </li> - <li> - <label class="radio"> - <input type="radio" name="category" /> - Beach - </label> - </li> - <li> - <label class="radio"> - <input type="radio" name="category" /> - Pets - </label> - </li> - </ul> - </aside> - </div> -</template> - -<script> -export default { - name: "ProductFilter" -}; -</script> diff --git a/iridescence/src/components/ProductList.vue b/iridescence/src/components/ProductList.vue deleted file mode 100644 index bed37b3..0000000 --- a/iridescence/src/components/ProductList.vue +++ /dev/null @@ -1,32 +0,0 @@ -<template> - <div id="productsList"> - <div class="columns is-multiline is-variable is-7-desktop"> - <div - class="column is-one-quarter" - v-for="product in products" - :key="product.id" - > - <ProductCard v-bind="product"></ProductCard> - </div> - </div> - </div> -</template> - -<script> -import ProductCard from "@/components/ProductCard.vue"; - -export default { - name: "ProductsList", - components: { - ProductCard - }, - computed: { - products() { - return this.$store.getters.products; - } - }, - created() { - this.$store.dispatch("refreshProducts"); - } -}; -</script> diff --git a/iridescence/src/components/ProductSearch.vue b/iridescence/src/components/ProductSearch.vue deleted file mode 100644 index f60931c..0000000 --- a/iridescence/src/components/ProductSearch.vue +++ /dev/null @@ -1,88 +0,0 @@ -<template> - <div id="productSearch"> - <div class="field is-grouped is-grouped-multiline"> - <div class="control is-expanded has-icons-left"> - <input - class="input is-medium is-primary is-rounded" - type="search" - placeholder="Find something in particular..." - v-model.trim="term" - @input="updateSearch" - autofocus - /> - <span class="icon is-left"> - <span class="iconify-inline" data-icon="mdi-magnify"></span> - </span> - </div> - <div class="control has-icons-left"> - <div class="select is-medium is-primary is-rounded"> - <select v-model="sortOptionName" @change="updateSort"> - <option v-for="name in sortOptionNames" :key="name" :value="name"> - {{ name }} - </option> - </select> - </div> - <span class="icon is-left"> - <span class="iconify-inline" data-icon="mdi-sort"></span> - </span> - </div> - </div> - <content class="has-text-centered" v-if="noResults"> - <p> - Couldn't find what you're looking for? - <a - href="mailto:liz@theglassyladies.com?subject=Custom Order Request&body=Please describe what you are looking for and we will be in touch." - >We do custom orders too!</a - > - </p> - </content> - </div> -</template> - -<script> -export default { - name: "ProductSearch", - data() { - return { - term: "", - searchTimer: function() {}, - sortOptions: { - "Featured Items": a => (a.featured ? -1 : 1), - "In Stock": (a, b) => a.quantity < b.quantity, - "Made to Order": (a, b) => a.quantity > b.quantity, - "A to Z": (a, b) => a.name > b.name, - "Z to A": (a, b) => a.name < b.name, - "Newest to Oldest": (a, b) => a.id < b.id, - "Oldest to Newest": (a, b) => a.id > b.id, - "Price (Low to High)": (a, b) => a.cents > b.cents, - "Price (High to Low)": (a, b) => a.cents < b.cents - }, - sortOptionName: String - }; - }, - created: function() { - this.sortOptionName = this.sortOptionNames[0]; - }, - computed: { - sortOptionNames() { - return Object.keys(this.sortOptions); - }, - noResults() { - return !this.$store.getters.products.length && !this.$store.getters.busy; - } - }, - methods: { - updateSearch() { - clearTimeout(this.searchTimer); - this.timeout = setTimeout(() => { - this.$store.commit("searchTerm", this.term); - }, 1000); - }, - updateSort() { - this.$store.commit("compare", this.sortOptions[this.sortOptionName]); - } - } -}; -</script> - - diff --git a/iridescence/src/components/admin/NewProduct.vue b/iridescence/src/components/admin/NewProduct.vue deleted file mode 100644 index a1d3304..0000000 --- a/iridescence/src/components/admin/NewProduct.vue +++ /dev/null @@ -1,58 +0,0 @@ -<template> - <div id="addNewProduct"> - <button class="button is-primary is-medium is-rounded" @click="toggleModal"> - + Add New - </button> - <transition - enter-active-class="animate__animated animate__fadeIn animate__faster" - leave-active-class="animate__animated animate__fadeOut animate__faster" - > - <div class="modal is-active" v-if="modalEnabled"> - <div class="modal-background"></div> - <div - class="modal-card animate__animated animate__slideInDown animate__faster" - > - <header class="modal-card-head"> - <p class="modal-card-title">Add a new product</p> - <button class="delete" @click="toggleModal"></button> - </header> - <section class="modal-card-body"> - <ProductEditCard v-bind:oldid="-1"></ProductEditCard> - </section> - <footer class="modal-card-foot"></footer> - </div> - </div> - </transition> - </div> -</template> - -<script> -import ProductEditCard from "@/components/admin/ProductEditCard"; - -export default { - name: "NewProduct", - components: { - ProductEditCard - }, - data: function() { - return { - modalEnabled: false - }; - }, - computed: { - numProducts: function() { - return this.$store.getters.products.length; - } - }, - watch: { - numProducts: function() { - this.modalEnabled = false; - } - }, - methods: { - toggleModal() { - this.modalEnabled = !this.modalEnabled; - } - } -}; -</script> diff --git a/iridescence/src/components/admin/ProductEditCard.vue b/iridescence/src/components/admin/ProductEditCard.vue deleted file mode 100644 index 603cb4f..0000000 --- a/iridescence/src/components/admin/ProductEditCard.vue +++ /dev/null @@ -1,282 +0,0 @@ -<template> - <div id="productEditCard"> - <div class="card"> - <div class="card-header"> - <p class="card-header-title" v-if="old.id"> - {{ old.id }}: {{ old.name }} - </p> - </div> - <div class="card-image"> - <figure v-if="old.id" class="image is-square"> - <img :src="thumbnail" :alt="name" /> - </figure> - </div> - <div class="card-content"> - <div class="field"> - <div class="file has-name is-boxed is-centered is-fullwidth "> - <label class="file-label"> - <input - class="file-input" - type="file" - name="image" - accept=".jpg,.jpeg,.JPG,.JPEG" - @change="changePhotoSet" - /> - <span class="file-cta"> - <span class="file-label has-text-centered"> - <p v-if="old.photo_thumbnail"> - Replace Photo - </p> - <p v-else> - Upload Photo - </p> - </span> - </span> - <span v-if="filename" class="file-name"> - {{ filename }} - </span> - <span v-else class="file-name"> - {{ old.photo_thumbnail }} - </span> - </label> - </div> - </div> - <div class="field"> - <input - class="input" - type="text" - placeholder="(product name)" - v-model="name" - /> - </div> - <div class="field"> - <input - class="input" - type="text" - placeholder="(product category)" - v-model="category" - /> - </div> - <div class="field has-addons"> - <p class="control"> - <a class="button is-static"> - # - </a> - </p> - <p class="control is-expanded"> - <input - class="input" - type="text" - placeholder="inventory (quantity)" - v-model="quantity" - /> - </p> - <div class="control"> - <a - class="button is-info is-outlined" - @click="incrementQuantity(-1)" - > - ▼ - </a> - </div> - <div class="control"> - <a class="button is-info is-outlined" @click="incrementQuantity(1)"> - ▲ - </a> - </div> - </div> - <div class="field has-addons"> - <p class="control"> - <a class="button is-static"> - $ - </a> - </p> - <p class="control is-expanded"> - <input - class="input" - type="text" - placeholder="price" - v-model="price" - /> - </p> - </div> - <div class="field"> - <textarea - class="textarea" - type="text" - placeholder="(product description)" - v-model="description" - > - </textarea> - </div> - <div class="field"> - <label class="checkbox"> - <input type="checkbox" v-model="featured" /> - Featured? - </label> - </div> - </div> - <div class="card-footer" v-if="isValidPost || isValidPatch"> - <div class="card-footer-item"> - <button class="button is-primary is-fullwidth" @click="saveProduct"> - Save - </button> - </div> - </div> - </div> - </div> -</template> - -<script> -export default { - name: "ProductEditCard", - data: function() { - return { - filename: "", - diff: {} - }; - }, - props: { - oldid: { - type: Number, - required: true - } - }, - created() { - this.diff = { - id: (this.old && this.old.id) || null, - name: null, - description: null, - cents: null, - quantity: (this.old && this.old.quantity) || 0, - category_path: null, - featured: - this.old && typeof this.old.featured === "boolean" - ? this.old.featured - : false, - photo_set: null - }; - }, - computed: { - thumbnail: function() { - return process.env.VUE_APP_IMAGE_ROOT + this.old.photo_thumbnail; - }, - old: function() { - return this.$store.getters.products.find(p => p.id == this.oldid) || {}; - }, - id: function() { - return this.diff.id || this.old.id; - }, - name: { - get: function() { - return this.diff.name || this.old.name; - }, - set: function(name) { - this.diff.name = name; - } - }, - description: { - get: function() { - return this.diff.description || this.old.description; - }, - set: function(description) { - this.diff.description = description; - } - }, - category: { - get: function() { - return this.diff.category_path || this.old.category; - }, - set: function(category) { - this.diff.category_path = category; - } - }, - featured: { - get: function() { - return this.diff.featured; - }, - set: function(featured) { - this.diff.featured = featured; - } - }, - price: { - get: function() { - const cents = this.diff.cents || this.old.cents || 0; - return (cents / 100).toFixed(0); - }, - set: function(dollars) { - const cents = dollars * 100; - if (isFinite(cents)) { - this.diff.cents = cents; - } - } - }, - quantity: { - get: function() { - return this.diff.quantity || this.old.quantity || 0; - }, - set: function(quantity) { - if (Number.isFinite(quantity)) { - this.diff.quantity = quantity; - } - } - }, - isValidPost: function() { - return ( - !this.diff.id && - this.diff.name && - this.diff.description && - Number.isFinite(this.diff.cents) && - Number.isFinite(this.diff.quantity) && - this.diff.photo_set && - this.diff.category_path && - typeof this.featured === "boolean" - ); - }, - isValidPatch: function() { - return ( - this.diff.id && - (this.diff.photo_set || - (this.diff.name && this.diff.name != this.old.name) || - (Number.isFinite(this.diff.cents) && - this.diff.cents != this.old.cents) || - (this.diff.category_path && - this.diff.category_path != this.old.category) || - (Number.isFinite(this.diff.quantity) && - this.diff.quantity != this.old.quantity) || - (this.diff.description && - this.diff.description != this.old.description) || - this.diff.featured != this.old.featured) - ); - } - }, - methods: { - incrementQuantity(by) { - if (this.quantity + by >= 0) { - this.diff.quantity += by; - } - }, - saveProduct() { - if (this.id) { - // update existing - this.$store.dispatch("updateProduct", this.diff); - } else { - // new product - this.$store.dispatch("createProduct", this.diff); - } - - this.diff.photo_set = null; - }, - changePhotoSet(event) { - const file = event.target.files[0]; - if (!file) { - return; - } - this.$store.dispatch("createPhotoSet", file).then(r => { - this.filename = file.name; - this.diff.photo_set = r[0].id; - }); - } - } -}; -</script> diff --git a/iridescence/src/components/admin/ProductEditList.vue b/iridescence/src/components/admin/ProductEditList.vue deleted file mode 100644 index 91c0929..0000000 --- a/iridescence/src/components/admin/ProductEditList.vue +++ /dev/null @@ -1,32 +0,0 @@ -<template> - <div id="productEditList"> - <div class="columns is-multiline is-variable is-desktop"> - <div - class="column is-one-third-desktop" - v-for="product in products" - :key="product.id" - > - <ProductEditCard v-bind:oldid="product.id"></ProductEditCard> - </div> - </div> - </div> -</template> - -<script> -import ProductEditCard from "@/components/admin/ProductEditCard.vue"; - -export default { - name: "ProductsList", - components: { - ProductEditCard - }, - computed: { - products() { - return this.$store.getters.products; - } - }, - created() { - this.$store.dispatch("refreshProducts"); - } -}; -</script> diff --git a/iridescence/src/components/cart/CartItem.vue b/iridescence/src/components/cart/CartItem.vue deleted file mode 100644 index 20ddec8..0000000 --- a/iridescence/src/components/cart/CartItem.vue +++ /dev/null @@ -1,89 +0,0 @@ -<template> - <div> - <hr /> - <nav class="level"> - <div class="level-left"> - <div class="level-item"> - <p class="image is-64x64"> - <img :src="thumbnail" :title="product.name" /> - </p> - </div> - <div class="level-item"> - <div class="content"> - <strong> - <p> - {{ product.name }} - </p> - </strong> - </div> - </div> - </div> - <div class="level-right"> - <div class="level-item">Subtotal: {{ dollars }}</div> - <div class="level-item"> - <div class="field has-addons"> - <p class="control is-expanded"> - <a class="button is-static is-fullwidth is-rounded"> - {{ inCart }} in cart - </a> - </p> - <div class="control"> - <a - @click="incrementCartQuantity(-1)" - class="button is-info is-rounded" - > - <span class="iconify-inline" data-icon="mdi-cart-minus"></span> - </a> - </div> - <div class="control"> - <a - @click="incrementCartQuantity(1)" - class="button is-info is-rounded" - > - <span class="iconify-inline" data-icon="mdi-cart-plus"></span> - </a> - </div> - </div> - </div> - - <div class="level-item"> - <button class="button is-danger is-rounded" @click="removeAll"> - <span class="iconify-inline" data-icon="mdi-cart-remove"></span> - <span>Remove</span> - </button> - </div> - </div> - </nav> - </div> -</template> - -<script> -export default { - name: "CartItem", - props: { - id: Number, - inCart: Number - }, - computed: { - product() { - return this.$store.state.products.find(p => p.id == this.id); - }, - dollars() { - return "$ " + ((this.product.cents * this.inCart) / 100).toFixed(2); - }, - thumbnail() { - return ( - process.env.VUE_APP_IMAGE_ROOT + "/" + this.product.photo_thumbnail - ); - } - }, - methods: { - incrementCartQuantity(by) { - this.$store.commit("cartItem", { id: this.id, by }); - }, - removeAll() { - this.$store.commit("removeItemFromCart", this.id); - } - } -}; -</script> diff --git a/iridescence/src/components/cart/Totals.vue b/iridescence/src/components/cart/Totals.vue deleted file mode 100644 index 36c9e77..0000000 --- a/iridescence/src/components/cart/Totals.vue +++ /dev/null @@ -1,28 +0,0 @@ -<template> - <div> - <h1 class="subtitle has-text-centered"> - Total - </h1> - <hr /> - - <h1 class="title has-text-centered">{{ cartTotal }}</h1> - <router-link - to="/checkout" - class="button is-success is-fullwidth is-rounded is-medium" - > - Continue to Checkout - </router-link> - </div> -</template> - -<script> -export default { - name: "Totals", - computed: { - cartTotal() { - return this.$store.getters.cartTotal; - } - }, - methods: {} -}; -</script> diff --git a/iridescence/src/components/checkout/CheckoutForm.vue b/iridescence/src/components/checkout/CheckoutForm.vue deleted file mode 100644 index 482baec..0000000 --- a/iridescence/src/components/checkout/CheckoutForm.vue +++ /dev/null @@ -1,301 +0,0 @@ -<template> - <div class="container"> - <form action="#"> - <section class="section"> - <h1 class="title">Customer Info</h1> - <hr /> - - <div class="columns"> - <div class="column"> - <div class="field"> - <label for="firstName" class="label">First Name</label> - - <div class="control has-icons-left"> - <input - v-model="formData.firstName" - id="firstName" - class="input is-rounded" - type="text" - required - /> - <span class="icon is-left"> - <span - class="iconify-inline" - data-icon="mdi-card-account-details" - ></span> - </span> - </div> - </div> - <div class="field"> - <label class="label">Last Name</label> - - <div class="control has-icons-left"> - <input - v-model="formData.lastName" - class="input is-rounded" - type="text" - required - /> - <span class="icon is-left"> - <span - class="iconify-inline" - data-icon="mdi-card-account-details" - ></span> - </span> - </div> - </div> - - <div class="field"> - <label class="label">Email Address</label> - - <div class="control has-icons-left"> - <input - v-model="formData.email" - class="input is-rounded" - type="email" - required - /> - <span class="icon is-left"> - <span class="iconify-inline" data-icon="mdi-email"></span> - </span> - </div> - <p class="help">Example: you@example.com</p> - </div> - - <div class="field"> - <label class="label">Phone Number</label> - <div class="control has-icons-left"> - <input - v-model="formData.phone" - class="input is-rounded" - type="tel" - pattern="[0-9]{10}" - required - /> - <span class="icon is-left"> - <span - class="iconify-inline" - data-icon="mdi-phone-classic" - ></span> - </span> - </div> - <p class="help">Example: 7571234567</p> - </div> - - <label class="checkbox"> - <input v-model="formData.sms" type="checkbox" /> - <span class="iconify" data-icon="mdi-cellphone-android"></span> - May we text order updates and questions to this number? - </label> - </div> - <div class="column"> - <label class="label">Location</label> - <div class="field has-addons"> - <div class="control has-icons-left"> - <div class="select is-rounded"> - <select required> - <option selected>USA</option> - </select> - </div> - <span class="icon is-left"> - <span - class="iconify-inline" - data-icon="mdi-flag-variant" - ></span> - </span> - </div> - - <div class="control has-icons-left"> - <div class="select is-rounded"> - <select v-model="formData.state" required> - <option v-for="state in states" :key="state">{{ - state - }}</option> - </select> - </div> - <span class="icon is-left"> - <span class="iconify-inline" data-icon="mdi-map"></span> - </span> - </div> - </div> - <p class="help"> - If you are located outside of the United States, please - <a href="mailto:liz@theglassyladies.com" - >contact us directly regarding your order</a - > - </p> - - <div class="field"> - <label class="label">Address</label> - - <div class="control has-icons-left"> - <input - v-model="formData.address1" - class="input is-rounded" - type="text" - required - /> - <span class="icon is-left"> - <span - class="iconify-inline" - data-icon="mdi-road-variant" - ></span> - </span> - </div> - </div> - <div class="field"> - <label class="label">Address 2 (Optional)</label> - - <div class="control has-icons-left"> - <input - v-model="formData.address2" - class="input is-rounded" - type="text" - /> - <span class="icon is-left"> - <span - class="iconify-inline" - data-icon="mdi-format-list-numbered" - ></span> - </span> - </div> - </div> - - <div class="field"> - <label class="label">City</label> - <div class="control has-icons-left"> - <input - v-model="formData.city" - class="input is-rounded" - type="text" - required - /> - <span class="icon is-left"> - <span class="iconify-inline" data-icon="mdi-city"></span> - </span> - </div> - </div> - - <div class="field"> - <label class="label">Zip Code</label> - - <div class="control has-icons-left"> - <input - v-model="formData.zip" - class="input is-rounded" - type="text" - pattern="[0-9]{5}" - required - /> - <span class="icon is-left"> - <span class="iconify-inline" data-icon="mdi-mailbox"></span> - </span> - </div> - </div> - </div> - </div> - </section> - - <section class="section"> - <h1 class="title">Payment & Delivery</h1> - <hr /> - - <div class="content"> - <p> - You will be contacted directly regarding payment and delivery - options. - </p> - </div> - </section> - - <section class="section"> - <h1 class="title">Finish</h1> - <hr /> - <h1 class="subtitle">Confirm your order of {{ cartTotal }}?</h1> - <button class="button is-success is-rounded is-medium"> - Place Order - </button> - </section> - </form> - </div> -</template> - -<script> -export default { - name: "CheckoutForm", - data() { - return { - states: [ - "Virginia", - "Alabama", - "Alaska", - "Arizona", - "Arkansas", - "California", - "Colorado", - "Connecticut", - "Delaware", - "Florida", - "Georgia", - "Hawaii", - "Idaho", - "Illinois", - "Indiana", - "Iowa", - "Kansas", - "Kentucky", - "Louisiana", - "Maine", - "Maryland", - "Massachusetts", - "Michigan", - "Minnesota", - "Mississippi", - "Missouri", - "Montana", - "Nebraska", - "Nevada", - "New Hampshire", - "New Jersey", - "New Mexico", - "New York", - "North Carolina", - "North Dakota", - "Ohio", - "Oklahoma", - "Oregon", - "Pennsylvania", - "Rhode Island", - "South Carolina", - "South Dakota", - "Tennessee", - "Texas", - "Utah", - "Vermont", - "Washington", - "West Virginia", - "Wisconsin", - "Wyoming" - ], - formData: { - firstName: "", - lastName: "", - email: "", - phone: "", - address1: "", - address2: "", - city: "", - state: "Virginia", - country: "USA", - zip: "", - sms: false - } - }; - }, - computed: { - cartTotal() { - return this.$store.getters.cartTotal; - } - } -}; -</script> |