[CLEAR-43] Add modal for adding recipe

front/components/Products/AddProductModal.vue

@@ -14,13 +14,13 @@
                     <FormItem label="Kcal" prop="kcal">
                         <InputNumber class="input" v-model="form.kcal" :min="0" :precision="0"/>
                     </FormItem>
-                    <FormItem label="Węglowodany" prop="carbohydrates">
+                    <FormItem label="Węglowodany (g)" prop="carbohydrates">
                         <InputNumber class="input" v-model="form.carbohydrates" :min="0"/>
                     </FormItem>
-                    <FormItem label="Białko" prop="protein">
+                    <FormItem label="Białko (g)" prop="protein">
                         <InputNumber class="input" v-model="form.protein" :min="0"/>
                     </FormItem>
-                    <FormItem label="Tłuszcz" prop="fat">
+                    <FormItem label="Tłuszcz (g)" prop="fat">
                         <InputNumber class="input" v-model="form.fat" :min="0"/>
                     </FormItem>
                 </Form>
@@ -57,22 +57,30 @@
                     ],
                     kcal: [
                         {
-                            required: false
+                            required: true,
+                            message: 'Proszę podać wartość kcal',
+                            trigger: 'blur'
                         }
                     ],
                     carbohydrates: [
                         {
-                            required: false
+                            required: true,
+                            message: 'Proszę podać ilość węglowodanów',
+                            trigger: 'blur'
                         }
                     ],
                     protein: [
                         {
-                            required: false
+                            required: true,
+                            message: 'Proszę podać ilość białka',
+                            trigger: 'blur'
                         }
                     ],
                     fat: [
                         {
-                            required: false
+                            required: true,
+                            message: 'Proszę podać ilość tłuszczu',
+                            trigger: 'blur'
                         }
                     ]
                 },
@@ -81,6 +89,7 @@
         methods: {
             cancel() {
                 this.active = false;
+                this.resetForm();
                 this.$Message.error('Anulowano');
             },
             ok() {

front/components/Products/ProductsList.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <Table  :columns="columns" :border="true" :data="data" :loading="loading"/>
+        <Table :columns="columns" :border="true" :data="data" :loading="loading"/>
         <Page @on-change="retrieveProducts" :total="pagination.total" style="margin-top:10px;"/>
     </div>
 </template>
@@ -23,15 +23,15 @@
                         key: 'kcal'
                     },
                     {
-                        title: 'Węglowodany',
+                        title: 'Węglowodany (g)',
                         key: 'carbohydrates'
                     },
                     {
-                        title: 'Białko',
+                        title: 'Białk (g)',
                         key: 'protein'
                     },
                     {
-                        title: 'Tłuszcz',
+                        title: 'Tłuszcz (g)',
                         key: 'fat'
                     }
                 ],

front/components/Recipes/AddRecipeModal.vue

@@ -0,0 +1,224 @@
+<template>
+    <div>
+        <Button v-if="$auth.loggedIn" type="primary" @click="active = true">Dodaj przepis</Button>
+        <Modal v-model="active" @on-cancel="cancel">
+            <p slot="header" style="text-align:center">
+                <Icon type="ios-restaurant"/>
+                <span>Dodawanie przepisu</span>
+            </p>
+            <div>
+                <Form ref="form" :model="form" :rules="rules">
+                    <FormItem label="Nazwa" prop="name">
+                        <Input v-model="form.name" placeholder="Podaj nazwę przepisu"/>
+                    </FormItem>
+                    <FormItem label="Krótki opis" prop="description">
+                        <Input v-model="form.description" type="textarea" placeholder="Podaj opis przepisu"/>
+                    </FormItem>
+                </Form>
+                <h3>Składniki</h3>
+                <Form ref="ingredients" :model="form.ingredients">
+                    <FormItem
+                            v-for="(item, index) in form.ingredients.items"
+                            :key="index"
+                            label="Składnik"
+                            :prop="'items.' + index + '.value'">
+                        <Row style="display: flex; justify-items: center">
+                            <AutoComplete
+                                    v-model="item.name"
+                                    @on-select="appendIngredient(item, $event)"
+                                    @on-search="handleSearch"
+                                    placeholder="Nazwa składnika">
+                                <Option v-for="sugg in suggestions" :value="sugg.name" :key="sugg.id">{{ sugg.name }}
+                                </Option>
+                            </AutoComplete>
+                            <InputNumber class="input" v-model="item.weight"
+                                         :min="1"
+                                         :formatter="value => `${value} g`"
+                                         :parser="value => value.replace(' g', '')"
+                                         style="margin-left: 3px; width: 25%"/>
+                            <Button @click="handleRemoveIngredient(index)" style="margin-left: 3px">Usuń</Button>
+                        </Row>
+                    </FormItem>
+                    <FormItem>
+                        <Row>
+                            <Button type="dashed" long @click="handleAddIngredient" icon="md-add">Dodaj składnik
+                            </Button>
+                        </Row>
+                    </FormItem>
+                </Form>
+                <h3>Przygotowanie</h3>
+                <Form ref="preparation" :model="form.steps">
+                    <FormItem
+                            v-for="(item, index) in form.steps.items"
+                            :key="index"
+                            label="Krok"
+                            :prop="'items.' + index + '.value'"
+                            :rules="{required: true, message: 'Proszę podać opis kroku', trigger: 'blur'}">
+                        <Row style="display: flex; justify-items: center">
+                            <Input type="textarea" :rows="1" v-model="item.value" placeholder="Opis kroku"/>
+                            <Button @click="handleRemovePreparationStep(index)" style="margin-left: 3px">Usuń</Button>
+                        </Row>
+                    </FormItem>
+                    <FormItem>
+                        <Row>
+                            <Button type="dashed" long @click="handleAddPreparationStep" icon="md-add">Dodaj krok
+                            </Button>
+                        </Row>
+                    </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: 'AddRecipeModal',
+        data() {
+            const validateIngredients = (rule, value, callback) => {
+                if (this.form.ingredients.items.length > 0) {
+                    callback();
+                } else {
+                    callback(new Error('Podaj chociaż jeden składnik!'));
+                }
+                callback();
+            };
+            const validatePreparation = (rule, value, callback) => {
+                if (this.form.steps.items.length > 0) {
+                    callback();
+                } else {
+                    callback(new Error('Podaj chociaż jeden krok!'));
+                }
+                callback();
+            };
+            return {
+                active: false,
+                modal_loading: false,
+                suggestions: [],
+                ingredients_idx: 1,
+                preparation_step_idx: 1,
+                form: {
+                    name: null,
+                    description: null,
+                    ingredients: {
+                        items: []
+                    },
+                    steps: {
+                        items: []
+                    }
+                },
+                rules: {
+                    name: [
+                        {
+                            required: true,
+                            message: 'Proszę podać nazwę przepisu',
+                            trigger: 'blur'
+                        }
+                    ],
+                    description: [
+                        {
+                            required: true,
+                            message: 'Proszę podać opis przepisu',
+                            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;
+                    }
+
+                    const recipe = {
+                        'name': this.form.name,
+                        'description': this.form.description,
+                        'steps': this.form.steps.items.map(step => step.value),
+                        'ingredients': this.form.ingredients.items.map(ing => ({id: ing.id, weight: ing.weight || 1}))
+                    };
+
+
+                    this.modal_loading = true;
+                    this.$axios.post('/recipe', recipe)
+                        .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();
+                this.$refs.ingredients.resetFields();
+                this.ingredients_idx = 1;
+                this.form.ingredients = {
+                    items: []
+                };
+                this.$refs.preparation.resetFields();
+                this.preparation_step_idx = 1;
+                this.form.steps = {
+                    items: []
+                };
+                this.suggestions = []
+            },
+            handleAddIngredient() {
+                this.ingredients_idx++;
+                this.form.ingredients.items.push({
+                    value: '',
+                    index: this.ingredients_idx
+                });
+            },
+            appendIngredient(item, val, instance) {
+                item.id = this.suggestions.find(obj => obj.name === val).id
+            },
+            handleRemoveIngredient(index) {
+                this.form.ingredients.items.splice(index, 1);
+            },
+            handleAddPreparationStep() {
+                this.preparation_step_idx++;
+                this.form.steps.items.push({
+                    value: '',
+                    index: this.preparation_step_idx
+                });
+            },
+            handleRemovePreparationStep(index) {
+                this.form.steps.items.splice(index, 1);
+            },
+            handleSearch(value) {
+                this.$axios.get('/product', {
+                    params: {
+                        limit: 5,
+                        search: value
+                    }
+                })
+                    .then((res) => {
+                        this.suggestions = res.data.data.products.data
+                    })
+            }
+        }
+    };
+</script>
+
+<style scoped>
+    .input {
+        width: 15%;
+    }
+</style>

front/pages/index.vue

@@ -2,12 +2,14 @@
     <Card class="main-card">
         <Row :gutter="16">
             <Col span="6">
-                <Card class="cb-menu">
+                <NuxtLink to="/recipes">
-                    <Icon type="ios-restaurant" size="100" color="white"/>
+                    <Card class="cb-menu">
-                    <div style="text-align:center">
+                        <Icon type="ios-restaurant" size="100" color="white"/>
-                        <h3>Przepisy</h3>
+                        <div style="text-align:center">
-                    </div>
+                            <h3>Przepisy</h3>
-                </Card>
+                        </div>
+                    </Card>
+                </NuxtLink>
             </Col>
             <Col span="6">
                 <Card class="cb-menu">

front/pages/recipes.vue

@@ -0,0 +1,21 @@
+<template>
+    <div style="width: 100%;">
+        <AddRecipeModal/>
+    </div>
+</template>
+
+<script>
+    import AddRecipeModal from "../components/Recipes/AddRecipeModal";
+
+    export default {
+        name: 'recipes',
+        auth: false,
+        components: {
+            AddRecipeModal,
+        }
+    };
+</script>
+
+<style scoped>
+
+</style>