ClearBowl/front/components/Products/AddProductModal.vue
2019-12-15 22:52:39 +01:00

130 lines
4.5 KiB
Vue

<template>
<div>
<Button v-if="$auth.loggedIn" type="primary" @click="active = true">Dodaj produkt</Button>
<Modal v-model="active" @on-cancel="cancel">
<p slot="header" style="text-align:center">
<Icon type="ios-pizza"/>
<span>Dodawanie produktu</span>
</p>
<div>
<Form ref="form" :model="form" :rules="rules">
<FormItem label="Nazwa" prop="name">
<Input v-model="form.name" placeholder="Podaj nazwę produktu"/>
</FormItem>
<FormItem label="Kcal" prop="kcal">
<InputNumber class="input" v-model="form.kcal" :min="0" :precision="0"/>
</FormItem>
<FormItem label="Węglowodany (g)" prop="carbohydrates">
<InputNumber class="input" v-model="form.carbohydrates" :min="0"/>
</FormItem>
<FormItem label="Białko (g)" prop="protein">
<InputNumber class="input" v-model="form.protein" :min="0"/>
</FormItem>
<FormItem label="Tłuszcz (g)" prop="fat">
<InputNumber class="input" v-model="form.fat" :min="0"/>
</FormItem>
</Form>
</div>
<div slot="footer">
<Button type="error" @click="cancel">Anuluj</Button>
<Button type="success" :loading="modal_loading" @click="ok">Zatwierdź</Button>
</div>
</Modal>
</div>
</template>
<script>
export default {
name: 'AddProductModal',
data() {
return {
active: false,
modal_loading: false,
form: {
name: null,
kcal: null,
carbohydrates: null,
protein: null,
fat: null
},
rules: {
name: [
{
required: true,
message: 'Proszę podać nazwę produktu',
trigger: 'blur'
}
],
kcal: [
{
required: true,
message: 'Proszę podać wartość kcal',
trigger: 'blur'
}
],
carbohydrates: [
{
required: true,
message: 'Proszę podać ilość węglowodanów',
trigger: 'blur'
}
],
protein: [
{
required: true,
message: 'Proszę podać ilość białka',
trigger: 'blur'
}
],
fat: [
{
required: true,
message: 'Proszę podać ilość tłuszczu',
trigger: 'blur'
}
]
},
};
},
methods: {
cancel() {
this.active = false;
this.resetForm();
this.$Message.error('Anulowano');
},
ok() {
this.$refs.form.validate((valid) => {
if (!valid) {
this.$Message.error('Błąd');
return;
}
this.modal_loading = true;
this.$axios.post('/product', this.form)
.then(() => {
this.$Message.success('Sukces!');
this.active = false;
this.resetForm();
})
.catch(() => {
this.$Message.error('Błąd!');
this.modal_loading = false;
});
});
},
resetForm() {
this.modal_loading = false;
this.$refs.form.resetFields();
}
}
};
</script>
<style scoped>
.input {
width: 15%;
}
</style>