Adding ingredients to meal plans
This commit is contained in:
parent
fb0c323774
commit
e6733af56b
4 changed files with 182 additions and 104 deletions
76
src/components/CompactParsedIngredient.vue
Normal file
76
src/components/CompactParsedIngredient.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
<ul v-if="meal.recipes && meal.recipes.length">
|
||||
<li v-for="recipe in meal.recipes" :key="recipe.id" class="saved-recipe">
|
||||
<p class="recipe-card">
|
||||
<recipe-card :recipe="recipe" />
|
||||
</p>
|
||||
<button @click="removeRecipe(recipe)">Remove</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-else>
|
||||
<p>Add some recipes</p>
|
||||
<div class="recipes">
|
||||
<h2>Recipes</h2>
|
||||
<ul v-if="meal.recipes && meal.recipes.length">
|
||||
<li v-for="recipe in meal.recipes" :key="recipe.id" class="saved-recipe">
|
||||
<p class="recipe-card">
|
||||
<recipe-card :recipe="recipe" />
|
||||
</p>
|
||||
<button @click="removeRecipe(recipe)">Remove</button>
|
||||
</li>
|
||||
</ul>
|
||||
<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 {
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
padding: 0.5em;
|
||||
cursor: pointer;
|
||||
margin: 1em
|
||||
.saved-ingredient p {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
|
||||
.saved-recipe button:hover {
|
||||
background: #eee;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
<template>
|
||||
<div>
|
||||
<ingredient-line :ingredient="ingredient"
|
||||
@update-ingredient="updateIngredient"
|
||||
@update-product-link="updateProduct"
|
||||
@delete-item="deleteIngredient" />
|
||||
<div class="ingredient-add-box">
|
||||
<p class="ingredient-line">
|
||||
<ingredient-line :ingredient="ingredient"
|
||||
:show-expanded="true"
|
||||
@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>
|
||||
|
|
@ -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>
|
||||
<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>
|
||||
<compact-parsed-ingredient :ingredient="ingredient" />
|
||||
</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 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">
|
||||
<div v-if="showDetails" class="expanded-section">
|
||||
<div class="full-ingredient">
|
||||
<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>
|
||||
<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>
|
||||
<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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue