diff options
Diffstat (limited to 'iridescence/src/components/admin')
| -rw-r--r-- | iridescence/src/components/admin/NewProduct.vue | 12 | ||||
| -rw-r--r-- | iridescence/src/components/admin/ProductEditCard.vue | 73 | ||||
| -rw-r--r-- | iridescence/src/components/admin/ProductEditList.vue | 2 |
3 files changed, 44 insertions, 43 deletions
diff --git a/iridescence/src/components/admin/NewProduct.vue b/iridescence/src/components/admin/NewProduct.vue index 511ae9c..48eb165 100644 --- a/iridescence/src/components/admin/NewProduct.vue +++ b/iridescence/src/components/admin/NewProduct.vue @@ -1,6 +1,6 @@ <template> <div id="addNewProduct"> - <button class="button is-primary" @click="toggleModal"> + <button class="button is-primary is-medium" @click="toggleModal"> + Add New </button> <transition @@ -17,9 +17,7 @@ <button class="delete" @click="toggleModal"></button> </header> <section class="modal-card-body"> - <ProductEditCard - v-bind:current-product="newProduct" - ></ProductEditCard> + <ProductEditCard v-bind:parent-product="template"></ProductEditCard> </section> <footer class="modal-card-foot"></footer> </div> @@ -29,8 +27,8 @@ </template> <script> -import Product from "../../models/product"; -import ProductEditCard from "./ProductEditCard"; +import Product from "@/models/product"; +import ProductEditCard from "@/components/admin/ProductEditCard"; export default { name: "NewProduct", @@ -40,7 +38,7 @@ export default { data: function() { return { modalEnabled: false, - newProduct: new Product(), + template: new Product({}), addAnother: false }; }, diff --git a/iridescence/src/components/admin/ProductEditCard.vue b/iridescence/src/components/admin/ProductEditCard.vue index 350f8df..a8117ce 100644 --- a/iridescence/src/components/admin/ProductEditCard.vue +++ b/iridescence/src/components/admin/ProductEditCard.vue @@ -2,7 +2,7 @@ <div id="productEditCard"> <div class="card"> <div class="card-header"> - <p class="card-header-title" v-if="currentProduct.id > 0"> + <p class="card-header-title" v-if="currentProduct.id"> {{ currentProduct.id }}: {{ currentProduct.name }} </p> </div> @@ -74,7 +74,7 @@ type="file" name="image" accept=".jpg,.jpeg,.JPG,.JPEG" - @change="previewFiles" + @change="changePhotoSet" /> <span class="file-cta"> <span class="file-label has-text-centered"> @@ -82,7 +82,7 @@ </span> </span> <span class="file-name"> - {{ newProduct.photo_set }} + {{ filename }} </span> </label> </div> @@ -107,7 +107,12 @@ enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut" > - <div class="card-footer" v-if="isDifferent && isValid"> + <div + class="card-footer" + v-if=" + newProduct.isValidPost() || newProduct.isValidPatch(currentProduct) + " + > <div class="card-footer-item"> <button class="button is-primary is-fullwidth" @click="saveProduct"> Save @@ -120,7 +125,8 @@ </template> <script> -import Product from "../../models/product"; +import Product from "@/models/product"; +import ProductDiff from "@/models/product_diff"; const dollarRe = /^\$?(\d+)\.(\d{2})/gm; @@ -128,28 +134,18 @@ export default { name: "ProductEditCard", data: function() { return { - newProduct: new Product(this.currentProduct) + currentProduct: new Product(this.parentProduct), + newProduct: new ProductDiff(this.currentProduct), + filename: "" }; }, props: { - currentProduct: { + parentProduct: { type: Product, required: true } }, - watch: { - currentProduct() { - // TODO: necessary? - this.newProduct = new Product(this.currentProduct); - } - }, computed: { - isDifferent() { - return this.newProduct.isDifferent(this.currentProduct); - }, - isValid() { - return this.newProduct.isValid(); - }, newProductQuantity: { get: function() { return this.newProduct.quantity; @@ -165,7 +161,7 @@ export default { return (this.newProduct.cents / 100).toFixed(2); }, set: function(val) { - let groups = dollarRe.exec(val); + const groups = dollarRe.exec(val); if (groups && groups[1] && groups[2]) { this.newProduct.cents = 100 * groups[1] + 1 * groups[2]; } @@ -174,12 +170,24 @@ export default { }, methods: { saveProduct() { - if (this.newProduct.id == 0) { - // new product - this.$store.dispatch("createProduct", this.newProduct); - } else { + if (this.newProduct.id) { // update existing - this.$store.dispatch("updateProduct", this.newProduct); + const updatedProduct = this.$store.dispatch( + "updateProduct", + this.newProduct + ); + if (updatedProduct) { + this.currentProduct = updatedProduct; + } + } else { + // new product + const newProduct = this.$store.dispatch( + "createProduct", + this.newProduct + ); + if (newProduct) { + this.currentProduct = newProduct; + } } }, incrementQuantity(amount) { @@ -187,21 +195,16 @@ export default { this.newProduct.quantity += amount; } }, - async previewFiles(event) { - let file = event.target.files[0]; + changePhotoSet(event) { + const file = event.target.files[0]; if (!file) { return; } - const fd = new FormData(); - fd.append(file.name, file); - - const response = await fetch("http://localhost:8000/photos", { - method: "POST", - body: fd + this.$store.dispatch("createPhotoSet", file).then(r => { + this.filename = file.name; + this.newProduct.photo_set = r[0].id; }); - - console.log(response); } } }; diff --git a/iridescence/src/components/admin/ProductEditList.vue b/iridescence/src/components/admin/ProductEditList.vue index 556f1c3..24a276e 100644 --- a/iridescence/src/components/admin/ProductEditList.vue +++ b/iridescence/src/components/admin/ProductEditList.vue @@ -6,7 +6,7 @@ v-for="product in products" :key="product.id" > - <ProductEditCard v-bind:current-product="product"></ProductEditCard> + <ProductEditCard v-bind:parent-product="product"></ProductEditCard> </div> </div> </div> |