diff options
author | Adam T. Carpenter <atc@53hor.net> | 2020-11-08 21:26:34 -0500 |
---|---|---|
committer | Adam T. Carpenter <atc@53hor.net> | 2020-11-08 21:26:34 -0500 |
commit | c5280144de096c274f185fade287ccd63b954ceb (patch) | |
tree | 169f1c2ad86c68e5ccb37494398c5e2db33dca3d /iridescence/src/components/admin/ProductEditCard.vue | |
parent | 7dd36c0e699a1154c7163f25bf488fbd63edeafe (diff) | |
download | theglassyladies-c5280144de096c274f185fade287ccd63b954ceb.tar.xz theglassyladies-c5280144de096c274f185fade287ccd63b954ceb.zip |
fixed up product models and api calls, working on new product form
Diffstat (limited to 'iridescence/src/components/admin/ProductEditCard.vue')
-rw-r--r-- | iridescence/src/components/admin/ProductEditCard.vue | 73 |
1 files changed, 23 insertions, 50 deletions
diff --git a/iridescence/src/components/admin/ProductEditCard.vue b/iridescence/src/components/admin/ProductEditCard.vue index 2784fc9..350f8df 100644 --- a/iridescence/src/components/admin/ProductEditCard.vue +++ b/iridescence/src/components/admin/ProductEditCard.vue @@ -15,6 +15,14 @@ v-model="newProduct.name" /> </div> + <div class="field"> + <input + class="input" + type="text" + placeholder="(product category)" + v-model="newProduct.category_path" + /> + </div> <div class="field has-addons"> <p class="control"> <a class="button is-static"> @@ -74,18 +82,12 @@ </span> </span> <span class="file-name"> - {{ newProduct.imgPath }} + {{ newProduct.photo_set }} </span> </label> </div> </div> <div class="field"> - <label class="checkbox"> - <input type="checkbox" v-model="newProduct.featured" /> - Featured? - </label> - </div> - <div class="field"> <textarea class="textarea" type="text" @@ -94,13 +96,12 @@ > </textarea> </div> - <progress - class="progress is-primary" - v-bind:value="fileProgress" - max="100" - v-if="fileProgress < 100" - >{{ fileProgress }}%</progress - > + <div class="field"> + <label class="checkbox"> + <input type="checkbox" v-model="newProduct.featured" /> + Featured? + </label> + </div> </div> <transition enter-active-class="animate__animated animate__fadeIn" @@ -119,63 +120,35 @@ </template> <script> +import Product from "../../models/product"; + const dollarRe = /^\$?(\d+)\.(\d{2})/gm; export default { name: "ProductEditCard", data: function() { return { - newProduct: { - id: this.currentProduct.id, - name: this.currentProduct.name, - quantity: this.currentProduct.quantity, - cents: this.currentProduct.cents, - imgPath: this.currentProduct.imgPath, - description: this.currentProduct.description, - featured: this.currentProduct.featured, - categories: this.currentProduct.categories.slice(0) - }, - fileProgress: 100 + newProduct: new Product(this.currentProduct) }; }, props: { currentProduct: { - type: Object, + type: Product, required: true } }, watch: { currentProduct() { - this.newProduct.id = this.currentProduct.id; - this.newProduct.name = this.currentProduct.name; - this.newProduct.quantity = this.currentProduct.quantity; - this.newProduct.cents = this.currentProduct.cents; - this.newProduct.imgPath = this.currentProduct.imgPath; - this.newProduct.description = this.currentProduct.description; - this.newProduct.featured = this.currentProduct.featured; - this.newProduct.categories = this.currentProduct.categories.slice(0); + // TODO: necessary? + this.newProduct = new Product(this.currentProduct); } }, computed: { isDifferent() { - // TODO: check categories! - return ( - this.newProduct.id != this.currentProduct.id || - this.newProduct.name != this.currentProduct.name || - this.newProduct.quantity != this.currentProduct.quantity || - this.newProduct.cents != this.currentProduct.cents || - this.newProduct.imgPath != this.currentProduct.imgPath || - this.newProduct.description != this.currentProduct.description || - this.newProduct.featured != this.currentProduct.featured - ); + return this.newProduct.isDifferent(this.currentProduct); }, isValid() { - return ( - this.newProductPrice > 0 && - this.newProduct.name != "" && - this.newProduct.imgPath != "" && - this.newProduct.description != "" - ); + return this.newProduct.isValid(); }, newProductQuantity: { get: function() { |