blob: 1cc43cd1cf16f573eff8102705b6fbf6dcd43fb9 (
plain) (
tree)
|
|
<template>
<div id="addNewProduct">
<button class="button is-primary" @click="toggleModal">
+ Add New
</button>
<div class="modal is-active" v-if="modalEnabled">
<transition
name="modalTransition"
enter-active-class="animate__animated animate__animate__fadeIn animate__faster"
leave-active-class="animate__animated animate__animate__fadeOut animate__faster"
>
<div class="modal-background" v-if="modalEnabled"></div>
</transition>
<transition
name="cardTransition"
enter-active-class="animate__animated animate__fadeInDownBig animate__faster"
leave-active-class="animate__animated animate__animate__fadeOut animate__faster"
>
<div class="modal-card" v-if="modalEnabled">
<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>
</transition>
</div>
</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>
|