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

<template>
    <div class="ingredient-item">
        <div class="full-ingredient">
            <p>
                <input v-model="ingredientText" @keyup.enter="updateIngredient" @focusout="updateIngredient" placeholder="Enter an ingredient" />
                <input v-model="productLink" class="product-link-input" placeholder="Enter product link" @keyup.enter="updateProductLink" @focusout="updateProductLink" />
            </p>
        </div>
        <!-- Full ingredient line text bar -->
        <div class="action_items">
            <div class="action-bar">
                <!-- Single line parse results -->
                <div class="compact-parse-results">
                    <compact-parsed-ingredient :ingredient="ingredient" />
                </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="showDetails" class="expanded-section">
                <div 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?.product?.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>

    </div>
</template>

<script>
import CompactParsedIngredient from './CompactParsedIngredient.vue';

export default {
    props: {
        ingredient: { type: Object },
        showExpanded: { type: Boolean, default: false }
    },
    events: ['update-ingredient', 'update-product-link'],
    components: { CompactParsedIngredient },
    data() {
        return {
            ingredientText: this.ingredient.line,
            productLink: this.ingredient.product?.link ?? "",
            showDetails: this.showExpanded
        };
    },
    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>

.compact-parse-results {
    flex: 1;
}

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

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

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