52 lines
No EOL
1.2 KiB
Vue
52 lines
No EOL
1.2 KiB
Vue
<template>
|
|
<div class="ingredient-add-box">
|
|
<p class="ingredient-line">
|
|
<ingredient-line :ingredient="ingredient"
|
|
@update-ingredient="updateIngredient"
|
|
@update-product-link="updateProduct" />
|
|
</p>
|
|
<button @click="addIngredient(ingredient)">Add</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import IngredientLine from '@/components/ingredients/IngredientLine.vue';
|
|
import data from '@/data.js'
|
|
|
|
export default {
|
|
name: 'IngredientAddBox',
|
|
components: { IngredientLine },
|
|
data() {
|
|
return {
|
|
ingredient: {},
|
|
}
|
|
},
|
|
methods: {
|
|
addIngredient() {
|
|
this.$emit('add-ingredient', this.ingredient);
|
|
this.ingredient = {};
|
|
},
|
|
async updateProduct(ingredient, product_link) {
|
|
this.ingredient.product = await data.parseProduct(ingredient, product_link);
|
|
},
|
|
async updateIngredient(ingredient, line) {
|
|
const newIngredients = await data.parseIngredients([line]);
|
|
this.ingredient = newIngredients[0];
|
|
},
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
.ingredient-add-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.ingredient-line {
|
|
flex: 1;
|
|
}
|
|
|
|
</style> |