Better display of parsed ingredients

src/components/EditRecipePage.vue

@@ -16,7 +16,8 @@
                 <ingredient-line 
                 :ingredient="ingredient"
                 @update-ingredient="updateIngredient"
-                @update-product-link="updateProduct" />
+                @update-product-link="updateProduct"
+                @delete-item="deleteIngredient" />
             </li>
         </ul>
         <button class="submit-btn" @click="saveRecipe">Save</button>
@@ -113,6 +114,9 @@ export default {
                 }
             });
         },
+        deleteIngredient(ingredient) {
+            this.recipe.ingredients = this.recipe.ingredients.filter(i => i != ingredient);
+        },
         saveRecipe() {
             data.saveRecipe(this.recipe).then((response) => {
                 this.$router.push(`/recipes/${response.id}`)

src/components/IngredientLine.vue

@@ -13,19 +13,43 @@
             </p>
         </div>
 
-        <!-- Parse Results card -->
+        <div class="action_items">
-        <div class="ingredient-details" v-if="ingredient">
+            <div class="action-bar">
-            <div class="parse-result">
+                <!-- Single line parse results -->
-                <p><small>Ingredient: </small><strong>{{ ingredient.name }}</strong></p>
+                <div class="compact-parse-results">
-                <p><small>Quantity: </small> <strong>{{ ingredient.quantity }}</strong></p>
+                    <span class="parse-element quantity" :class="{ missing: !(ingredient?.quantity)}">{{ ingredient?.quantity || 'qty' }}</span>
-                <p><small>Unit: </small> <strong>{{ ingredient.unit }}</strong></p>
+                    <span class="parse-element unit" :class="{ missing: !(ingredient?.unit)}">{{ ingredient?.unit || 'unit' }}</span>
-                <p><small>Preparation: </small> <strong>{{ ingredient.preparation }}</strong></p>
+                    of
+                    <span class="parse-element name" :class="{ missing: !(ingredient?.name)}">{{ ingredient?.name || 'name' }}</span>
+                    <span class="parse-element product-name" :class="{missing: !(ingredient?.product)}">({{ ingredient?.product?.name || 'product' }})</span>
+                </div>
+
+                <!-- Delete button -->
+                <button class="delete-button" @click="deleteItem">Delete</button>
+
+                <!-- Expand details button with animated chevron -->
+                <button class="expand-button" @click="showDetails = !showDetails">
+                <span :class="{'rotate-chevron': showDetails}">&#9662;</span>
+                </button>
             </div>
-            <div  v-if="ingredient.product" class="product-result">
+            <!-- Details section -->
-                <p><small>Product: </small><strong>{{ ingredient.product.name }}</strong></p>
+            <div v-if="showDetails" class="details-section">
-                <p><img :src="ingredient.product.img_small" /></p>
+                <div class="ingredient-details" v-if="ingredient && showDetails">
+                    <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>
         </div>
+
+        <!-- Parse Results card -->
     </div>
 </template>
 
@@ -40,6 +64,7 @@ export default {
         return {
             ingredientText: this.ingredient.line,
             productLink: this.ingredient.product?.link ?? "",
+            showDetails: false
         };
     },
     methods: {
@@ -50,7 +75,10 @@ export default {
         updateProductLink() {
             if (this.productLink && this.productLink != this.ingredient.product?.link)
                 this.$emit('update-product-link', this.ingredient, this.productLink);
-        }
+        },
+        deleteItem() {
+            this.$emit('delete-item', this.ingredient);
+        },
     }
 };
 </script>
@@ -72,6 +100,74 @@ export default {
     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;