130 lines
4.5 KiB
Vue
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>
|