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" />
                <input class="product-link-input" v-model="productLink" placeholder="Enter product link" @keyup.enter="updateProductLink" @focusout="updateProductLink" />
            </p>
        </div>

        <div class="action_items">
            <div class="action-bar">
                <!-- Single line parse results -->
                <div class="compact-parse-results">
                    <span class="parse-element quantity" :class="{ missing: !(ingredient?.quantity)}">{{ ingredient?.quantity || 'qty' }}</span>
                    <span class="parse-element unit" :class="{ missing: !(ingredient?.unit)}">{{ ingredient?.unit || 'unit' }}</span>
                    of
                    <span class="parse-element name" :class="{ missing: !(ingredient?.name)}">{{ ingredient?.name || 'name' }}</span>
                    <span class="parse-element product-name" :class="{missing: !(ingredient?.product)}">
                        <a :href="ingredient?.product?.link" v-if="ingredient?.product?.link" target=”_blank”>
                        ( {{ ingredient?.product?.name }} <img src="@/assets/external-link.svg" style="width: 1em; height: 1em; vertical-align: middle; margin-left: 0.5em; margin-bottom: 0.2em;" /> )
                        </a>
                        <span v-else>( {{ 'product' }} )</span>
                    </span>
                </div>

                <!-- Expand details button with animated chevron -->
                <button class="expand-button" @click="showDetails = !showDetails">
                <span :class="{'rotate-chevron': showDetails}">&#9662;</span>
                </button>
            </div>
            <!-- Details section -->
            <div v-if="ingredient && showDetails" class="details-section ingredient-details">
                <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>
                        <a :href="ingredient.link"><small>Product: </small>
                            <strong>{{ ingredient.product.name }}</strong>
                            <img src="@/assets/external-link.svg" style="width: 1em; height: 1em; vertical-align: middle; margin-left: 0.5em; margin-bottom: 0.2em;" target=”_blank”/>
                        </a>
                    </p>
                    <p><img :src="ingredient.product.img_small" /></p>
                </div>
            </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 ?? "",
            showDetails: false
        };
    },
    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-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
}

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

.action-bar {
  display: flex;
  align-items: center;
  justify-content: right;
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.compact-parse-results {
  display: inline-block;
  font-weight: bold;
  flex: 1;
  text-align: left;
}

.parse-element {
  margin-right: 1em;
  border-bottom: solid 1px #ccc;
  padding: 0.5em;
}

.parse-element.missing {
  color: red;
  border: solid red 1px;
}

.quantity {
  color: blue;
}

.unit {
  color: green;
}

.name {
  color: black;
}

.product-name {
  color: purple;
}

.delete-button,
.expand-button {
  padding: 8px 16px;
  margin: 0 5px;
  cursor: pointer;
}

.expand-button {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

.rotate-chevron {
  transform: rotate(180deg);
}

.details-section {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.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%;
}

.product-link-input {
    padding: 0.5vh;
    color: #777;
    margin-top: 0.2vh;
}

.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>