munch-ease-frontend/src/components/IngredientAddBox.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>