68 lines
No EOL
1.6 KiB
Vue
68 lines
No EOL
1.6 KiB
Vue
<template>
|
|
<div class="ingredient-add-box">
|
|
<p class="ingredient-line">
|
|
<ingredient-line :ingredient="ingredient"
|
|
:show-expanded="true"
|
|
@update-ingredient="updateIngredient"
|
|
@update-product-link="updateProduct"
|
|
@delete-item="deleteIngredient" />
|
|
</p>
|
|
<button @click="addIngredient(ingredient)">Add</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import IngredientLine from './IngredientLine.vue';
|
|
import data from '@/data.js'
|
|
|
|
export default {
|
|
name: 'IngredientAddBox',
|
|
components: { IngredientLine },
|
|
data() {
|
|
return {
|
|
ingredient: {
|
|
name: '',
|
|
quantity: '',
|
|
unit: '',
|
|
link: ''
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
addIngredient() {
|
|
this.$emit('add-ingredient', this.ingredient);
|
|
this.ingredient = {
|
|
name: '',
|
|
quantity: '',
|
|
unit: '',
|
|
link: ''
|
|
};
|
|
},
|
|
updateProduct(ingredient, product_link) {
|
|
data.parseProduct(ingredient, product_link).then(product => {
|
|
this.ingredient.product = product;
|
|
this.ingredient.product_link = product.link;
|
|
});
|
|
},
|
|
updateIngredient(ingredient, line) {
|
|
data.parseIngredients([line]).then(newIngredients => {
|
|
this.ingredient = newIngredients[0];
|
|
});
|
|
},
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
.ingredient-add-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.ingredient-line {
|
|
flex: 1;
|
|
}
|
|
|
|
</style> |