munch-ease-frontend/src/components/IngredientLine.vue

<template>
    <div class="ingredient-item">
        <!-- Full ingredient line text bar -->
        <div class="full-ingredient">
            <p class="product_teaser" style="flex: initial" v-if="ingredient.product && ingredient.product.img_small">
                <img :src="ingredient.product.img_small" />
            </p>
            <p>
                <input v-model="ingredientText" @keyup.enter="updateIngredient" @focusout="updateIngredient" placeholder="Enter an ingredient" />
            </p>
            <p>
                <input v-model="productLink" placeholder="Enter product link" @keyup.enter="updateProductLink" @focusout="updateProductLink" />
            </p>
        </div>

        <!-- Parse Results card -->
        <div class="ingredient-details" v-if="ingredient">
            <div class="parse-result">
                <p><small>Ingredient: </small><strong>{{ ingredient.name }}</strong></p>
                <p><small>Quantity: </small> <strong>{{ ingredient.quantity }}</strong></p>
                <p><small>Unit: </small> <strong>{{ ingredient.unit }}</strong></p>
                <p><small>Preparation: </small> <strong>{{ ingredient.preparation }}</strong></p>
            </div>
            <div  v-if="ingredient.product" class="product-result">
                <p><small>Product: </small><strong>{{ ingredient.product.name }}</strong></p>
                <p><img :src="ingredient.product.img_small" /></p>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    props: {
        ingredient: { type: Object }
    },
    events: ['update-ingredient', 'update-product-link'],
    data() {
        return {
            ingredientText: this.ingredient.line,
            productLink: this.ingredient.product?.link ?? "",
        };
    },
    methods: {
        updateIngredient() {
            if (this.ingredientText != this.ingredient.line)
                this.$emit('update-ingredient', this.ingredient, this.ingredientText);
        },
        updateProductLink() {
            if (this.productLink && this.productLink != this.ingredient.product?.link)
                this.$emit('update-product-link', this.ingredient, this.productLink);
        }
    }
};
</script>

<style scoped>

.ingredient-item {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
}

.full-ingredient {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    padding-left: 1em;
}

.product_teaser img {
    max-width: 3em;
    max-height: 3em;
    margin-right: 1em;
}

.full-ingredient p {
    flex: 1;
}

.full-ingredient input {
    border: 0;
    font-size: larger;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    width: 100%;
}

.ingredient-details {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    padding-left: 1em;
}

.parse-result {
    flex: 1;
}

.product-result {
    flex: 1;
}

</style>