blob: 8c45f0b9b17efbbf13e59598f5837f2995b4e96b (
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="product"></ProductEditCard>
</section>
<footer class="modal-card-foot"></footer>
</div>
</div>
</transition>
</div>
</template>
<script>
import ProductEditCard from "./ProductEditCard.vue";
export default {
name: "AddNewProduct",
components: {
ProductEditCard
},
data: function() {
return {
modalEnabled: false,
product: {
id: 0,
name: "",
quantity: 0,
cents: 0,
imgPath: "",
description: "",
featured: false,
categories: []
},
addAnother: false
};
},
methods: {
toggleModal() {
this.modalEnabled = !this.modalEnabled;
}
}
};
</script>
|
