<template> <div> <h3 style="margin-bottom: 10px">Składniki</h3> <Form ref="ingredients" :model="ingredients"> <FormItem v-for="(item, index) in 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: 20%"/> <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> <Row style="margin-bottom: 20px"> <span><b>Wartości odżywcze:</b></span> <ul> <span>Kcal: {{nutrition.kcal}}</span> </ul> <ul> <span>Węglowodany: {{nutrition.carbohydrates}}</span> </ul> <ul> <span>Białka: {{nutrition.protein}}</span> </ul> <ul> <span>Tłuszcze: {{nutrition.fat}}</span> </ul> </Row> <Button type="primary" @click="calculate">Oblicz</Button> <Button type="error" @click="resetForm">Resetuj</Button> </div> </template> <script> export default { name: "CalculatorForm", data() { return { active: false, modal_loading: false, suggestions: [], ingredients_idx: 1, ingredients: { items: [] }, nutrition: { kcal: 0, carbohydrates: 0, protein: 0, fat: 0 } }; }, methods: { resetForm() { this.modal_loading = false; this.$refs.ingredients.resetFields(); this.ingredients_idx = 1; this.ingredients = { items: [] }; this.suggestions = [] this.nutrition.kcal = 0; this.nutrition.carbohydrates = 0; this.nutrition.protein = 0; this.nutrition.fat = 0; }, handleAddIngredient() { this.ingredients_idx++; this.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.ingredients.items.splice(index, 1); }, handleSearch(value) { this.$axios.get('/product', { params: { limit: 5, search: value } }) .then((res) => { this.suggestions = res.data.data.products.data }) }, calculate() { const ingredients_list = this.ingredients.items.map(ing => ({ id: ing.id, weight: ing.weight || 1 })); this.$axios.post('/calculate', {products: ingredients_list}) .then((response) => { this.nutrition = response.data.data.nutrition; }) .catch((error) => { console.log(error); this.$Message.error('Błąd!'); }); } } }; </script> <style scoped> .input { width: 15%; } </style>