ClearBowl/front/components/Products/AddProductModal.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>