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/admin | |
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/admin')
-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 |
3 files changed, 0 insertions, 372 deletions
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> |