<template>
<div id="productEditCard">
<div class="card">
<div class="card-header">
<p class="card-header-title" v-if="currentProduct.id">
{{ currentProduct.id }}: {{ currentProduct.name }}
</p>
</div>
<div class="card-content">
<div class="field">
<input
class="input"
type="text"
placeholder="(product name)"
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">
#
</a>
</p>
<p class="control is-expanded">
<input
class="input"
type="text"
placeholder="inventory (quantity)"
v-model="newProductQuantity"
/>
</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="newProductPrice"
/>
</p>
</div>
<div class="field">
<div class="file has-name is-boxed 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">
↑ Choose a picture…
</span>
</span>
<span class="file-name">
{{ filename }}
</span>
</label>
</div>
</div>
<div class="field">
<textarea
class="textarea"
type="text"
placeholder="(product description)"
v-model="newProduct.description"
>
</textarea>
</div>
<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"
leave-active-class="animate__animated animate__fadeOut"
>
<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
</button>
</div>
</div>
</transition>
</div>
</div>
</template>
<script>
import Product from "@/models/product";
import ProductDiff from "@/models/product_diff";
const dollarRe = /^\$?(\d+)\.(\d{2})/gm;
export default {
name: "ProductEditCard",
data: function() {
return {
currentProduct: new Product(this.parentProduct),
newProduct: new ProductDiff(this.currentProduct),
filename: ""
};
},
props: {
parentProduct: {
type: Product,
required: true
}
},
computed: {
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) {
const groups = dollarRe.exec(val);
if (groups && groups[1] && groups[2]) {
this.newProduct.cents = 100 * groups[1] + 1 * groups[2];
}
}
}
},
methods: {
saveProduct() {
if (this.newProduct.id) {
// update existing
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) {
if (this.newProduct.quantity + amount >= 0) {
this.newProduct.quantity += amount;
}
},
changePhotoSet(event) {
const file = event.target.files[0];
if (!file) {
return;
}
this.$store.dispatch("createPhotoSet", file).then(r => {
this.filename = file.name;
this.newProduct.photo_set = r[0].id;
});
}
}
};
</script>