Adding ingredients to meal plans

src/components/CompactParsedIngredient.vue

@@ -0,0 +1,76 @@
+<template>
+<div class="compact-parse-results">
+    <span class="parse-element teaser-image" v-if="ingredient.product && ingredient.product.img_small">
+        <img :src="ingredient.product.img_small" />
+    </span>
+    <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>
+    <span class="parse-element helper" >of</span>
+    <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>
+</template>
+
+<script>
+
+export default {
+    name: 'CompactParsedIngredient',
+    props: ['ingredient'],
+}
+
+</script>
+
+<style scoped>
+
+.compact-parse-results {
+    display: flex;
+    justify-content: left;
+    font-weight: bold;
+    text-align: left;
+}
+
+.parse-element {
+    margin: auto 0;
+    margin-right: 1em;
+    border-bottom: solid 1px #ccc;
+    padding-left: 0.5em;
+}
+
+.parse-element.missing {
+  color: red;
+  border: solid red 1px;
+}
+
+.parse-element.teaser-image, .parse-element.helper {
+    border: none;
+}
+
+.parse-element.teaser-image img {
+    padding: 0;
+    border: none;
+    width: 2em;
+    height: 2em;
+}
+
+.quantity {
+  color: blue;
+}
+
+.unit {
+  color: green;
+}
+
+.name {
+  color: black;
+}
+
+.product-name {
+  color: purple;
+}
+
+</style>

src/components/EditMealPage.vue

@@ -2,20 +2,38 @@
     <div class="container">
         <div class="fields">
             <date-picker @date-selected="selectDate" :date="meal.date" />
-            <recipe-search-box @select-recipe="selectRecipe" />
-            <ingredient-add-box />
         </div>
-        <h2>Foods</h2>
+        <div class="recipes">
-        <ul v-if="meal.recipes && meal.recipes.length">
+            <h2>Recipes</h2>
-            <li v-for="recipe in meal.recipes" :key="recipe.id" class="saved-recipe">
+            <ul v-if="meal.recipes && meal.recipes.length">
-                <p class="recipe-card">
+                <li v-for="recipe in meal.recipes" :key="recipe.id" class="saved-recipe">
-                    <recipe-card :recipe="recipe" />
+                    <p class="recipe-card">
-                </p>
+                        <recipe-card :recipe="recipe" />
-                <button @click="removeRecipe(recipe)">Remove</button>
+                    </p>
-            </li>
+                    <button @click="removeRecipe(recipe)">Remove</button>
-        </ul>
+                </li>
-        <div v-else>
+            </ul>
-            <p>Add some recipes</p>
+            <div v-else>
+                <p>Add some recipes using the search box</p>
+            </div>
+            <div class="fields">
+                <recipe-search-box @select-recipe="selectRecipe" />
+            </div>
+        </div>
+        <div class="ingredients">
+            <h2>Ingredients</h2>
+            <ul v-if="meal.ingredients && meal.ingredients.length">
+                <li v-for="ingredient in meal.ingredients" :key="ingredient" class="saved-ingredient">
+                    <p>
+                        <ingredient-line :ingredient="ingredient" />
+                    </p>
+                    <button @click="deleteIngredient(ingredient)">Delete</button>
+                </li>
+            </ul>
+            <div v-else>
+                <p>Add some ingredients using the search box</p>
+            </div>
+            <ingredient-add-box @add-ingredient="addIngredient" />
         </div>
     </div>
 </template>
@@ -26,15 +44,17 @@ import RecipeSearchBox from './RecipeSearchBox.vue';
 import RecipeCard from './RecipeCard.vue';
 import DatePicker from './DatePicker.vue';
 import IngredientAddBox from './IngredientAddBox.vue';
+import IngredientLine from './IngredientLine.vue';
 
 export default {
     props: ['id'],
-    components: { RecipeSearchBox, DatePicker, RecipeCard, IngredientAddBox },
+    components: { RecipeSearchBox, DatePicker, RecipeCard, IngredientAddBox, IngredientLine },
     data() {
         return {
             meal: {
                 date: new Date(),
-                recipes: [{ name: 'Sar Tay' }],
+                recipes: [],
+                ingredients: [],
                 chefs: [{ name: 'Ryan' }],
                 consumers: [{ name: 'Ryan' }, { name: 'Jacob' }],
             }
@@ -47,14 +67,20 @@ export default {
     },
     methods: {
         selectRecipe(recipe) {
-            this.meal.recipes.unshift(recipe);
+            this.meal.recipes.push(recipe);
         },
         selectDate(date) {
             this.meal.date = date;
         },
         removeRecipe(recipe) {
             this.meal.recipes = this.meal.recipes.filter(r => r.id !== recipe.id);
-        }
+        },
+        addIngredient(ingredient) {
+            this.meal.ingredients.push(ingredient);
+        },
+        deleteIngredient(ingredient) {
+            this.meal.ingredients = this.meal.ingredients.filter(i => i != ingredient);
+        },
     }
 }
 </script>
@@ -77,6 +103,13 @@ ul {
     padding: 0;
 }
 
+.saved-ingredient {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 1vh 1em;
+}
+
 .saved-recipe {
     display: flex;
     justify-content: space-between;
@@ -84,15 +117,13 @@ ul {
     margin: 1vh 1em;
 }
 
-.saved-recipe button {
+.saved-ingredient p {
-    background: #fff;
+    flex: 1;
-    border: 1px solid #ccc;
+    margin: 0;
-    border-radius: 4px;
+    margin-right: 1em;
-    padding: 0.5em;
-    cursor: pointer;
-    margin: 1em
 }
 
+
 .saved-recipe button:hover {
     background: #eee;
 }

src/components/IngredientAddBox.vue

@@ -1,9 +1,13 @@
 <template>
-<div>
+<div class="ingredient-add-box">
-    <ingredient-line :ingredient="ingredient"
+    <p class="ingredient-line">
-        @update-ingredient="updateIngredient"
+        <ingredient-line :ingredient="ingredient"
-        @update-product-link="updateProduct"
+            :show-expanded="true" 
-        @delete-item="deleteIngredient" />
+            @update-ingredient="updateIngredient"
+            @update-product-link="updateProduct"
+            @delete-item="deleteIngredient" />
+    </p>
+    <button @click="addIngredient(ingredient)">Add</button>
 </div>
 </template>
 
@@ -30,6 +34,7 @@ export default {
                 name: '',
                 quantity: '',
                 unit: '',
+                link: ''
             };
         },
         updateProduct(ingredient, product_link) {
@@ -56,4 +61,14 @@ export default {
 </script>
 
 <style scoped>
+
+.ingredient-add-box {
+    display: flex;
+    flex-direction: row;
+}
+
+.ingredient-line {
+    flex: 1;
+}
+
 </style>

src/components/IngredientLine.vue

@@ -1,30 +1,11 @@
 <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>
+                    <compact-parsed-ingredient :ingredient="ingredient" />
-                    <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 -->
@@ -33,21 +14,29 @@
                 </button>
             </div>
             <!-- Details section -->
-            <div v-if="ingredient && showDetails" class="details-section ingredient-details">
+            <div v-if="showDetails" class="expanded-section">
-                <div class="parse-result">
+                <div class="full-ingredient">
-                    <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>
+                        <input v-model="ingredientText" @keyup.enter="updateIngredient" @focusout="updateIngredient" placeholder="Enter an ingredient" />
-                            <strong>{{ ingredient.product.name }}</strong>
+                        <input v-model="productLink" class="product-link-input" placeholder="Enter product link" @keyup.enter="updateProductLink" @focusout="updateProductLink" />
-                            <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 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>
@@ -56,17 +45,20 @@
 </template>
 
 <script>
+import CompactParsedIngredient from './CompactParsedIngredient.vue';
 
 export default {
     props: {
-        ingredient: { type: Object }
+        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: false
+            showDetails: this.showExpanded
         };
     },
     methods: {
@@ -84,6 +76,10 @@ export default {
 
 <style scoped>
 
+.compact-parse-results {
+    flex: 1;
+}
+
 .ingredient-item {
     border-radius: 5px;
     padding: 10px;
@@ -107,40 +103,6 @@ export default {
   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;
@@ -166,12 +128,6 @@ export default {
   align-items: flex-start;
 }
 
-.product_teaser img {
-    max-width: 3em;
-    max-height: 3em;
-    margin-right: 1em;
-}
-
 .full-ingredient p {
     flex: 1;
 }