blob: 511ae9c5e72608c9754d8906ab482c66bdff4619 (
plain) (
tree)
|
|
<template>
<div id="addNewProduct">
<button class="button is-primary" @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:current-product="newProduct"
></ProductEditCard>
</section>
<footer class="modal-card-foot"></footer>
</div>
</div>
</transition>
</div>
</template>
<script>
import Product from "../../models/product";
import ProductEditCard from "./ProductEditCard";
export default {
name: "NewProduct",
components: {
ProductEditCard
},
data: function() {
return {
modalEnabled: false,
newProduct: new Product(),
addAnother: false
};
},
methods: {
toggleModal() {
this.modalEnabled = !this.modalEnabled;
}
}
};
</script>
|
