jacob/munch-ease-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Extract compact ingredient line

Browse source
This commit is contained in:
jableader 2024-01-17 17:03:11 +11:00
parent e6733af56b
commit cfaba1f52c
4 changed files with 17 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/DatePicker.vue
View file

@ -12,8 +12,7 @@
<li <li
v-for="(day, index) in nextSevenDays" v-for="(day, index) in nextSevenDays"
:key="index" :key="index"
@click="selectDate(day)" @mousedown="selectDate(day)">
>
{{ formatDay(day) }} {{ formatDay(day) }}
</li> </li>
</ul> </ul>

9
src/components/EditMealPage.vue
View file

@ -21,11 +21,11 @@
</div> </div>
</div> </div>
<div class="ingredients"> <div class="ingredients">
<h2>Ingredients</h2> <h2>Additional Ingredients</h2>
<ul v-if="meal.ingredients && meal.ingredients.length"> <ul v-if="meal.ingredients && meal.ingredients.length">
<li v-for="ingredient in meal.ingredients" :key="ingredient" class="saved-ingredient"> <li v-for="ingredient in meal.ingredients" :key="ingredient" class="saved-ingredient">
<p> <p>
<ingredient-line :ingredient="ingredient" /> <compact-parsed-ingredient :ingredient="ingredient" />
</p> </p>
<button @click="deleteIngredient(ingredient)">Delete</button> <button @click="deleteIngredient(ingredient)">Delete</button>
</li> </li>
@ -44,11 +44,11 @@ import RecipeSearchBox from './RecipeSearchBox.vue';
import RecipeCard from './RecipeCard.vue'; import RecipeCard from './RecipeCard.vue';
import DatePicker from './DatePicker.vue'; import DatePicker from './DatePicker.vue';
import IngredientAddBox from './IngredientAddBox.vue'; import IngredientAddBox from './IngredientAddBox.vue';
import IngredientLine from './IngredientLine.vue'; import CompactParsedIngredient from './CompactParsedIngredient.vue';
export default { export default {
props: ['id'], props: ['id'],
components: { RecipeSearchBox, DatePicker, RecipeCard, IngredientAddBox, IngredientLine }, components: { RecipeSearchBox, DatePicker, RecipeCard, IngredientAddBox, CompactParsedIngredient },
data() { data() {
return { return {
meal: { meal: {
@ -70,6 +70,7 @@ export default {
this.meal.recipes.push(recipe); this.meal.recipes.push(recipe);
}, },
selectDate(date) { selectDate(date) {
console.log("selectDate", date);
this.meal.date = date; this.meal.date = date;
}, },
removeRecipe(recipe) { removeRecipe(recipe) {

16
src/components/IngredientAddBox.vue
View file

@ -24,6 +24,7 @@ export default {
name: '', name: '',
quantity: '', quantity: '',
unit: '', unit: '',
link: ''
}, },
} }
}, },
@ -39,20 +40,13 @@ export default {
}, },
updateProduct(ingredient, product_link) { updateProduct(ingredient, product_link) {
data.parseProduct(ingredient, product_link).then(product => { data.parseProduct(ingredient, product_link).then(product => {
ingredient.product = product this.ingredient.product = product;
this.ingredient.product_link = product.link;
}); });
}, },
updateIngredient(ingredient, line) { updateIngredient(ingredient, line) {
data.parseIngredients([line]).then(function(newIngredients) { data.parseIngredients([line]).then(newIngredients => {
const newIngredient = newIngredients[0]; this.ingredient = newIngredients[0];
ingredient.line = line;
ingredient.name = newIngredient.name;
ingredient.quantity = newIngredient.quantity;
ingredient.unit = newIngredient.unit;
ingredient.preparation = newIngredient.preparation;
if (newIngredient.product) {
ingredient.product = newIngredient.product;
}
}); });
}, },
} }

12
src/components/IngredientLine.vue
View file

@ -1,5 +1,11 @@
<template> <template>
<div class="ingredient-item"> <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 --> <!-- Full ingredient line text bar -->
<div class="action_items"> <div class="action_items">
<div class="action-bar"> <div class="action-bar">
@ -15,12 +21,6 @@
</div> </div>
<!-- Details section --> <!-- Details section -->
<div v-if="showDetails" class="expanded-section"> <div v-if="showDetails" class="expanded-section">
<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>
<div class="details-section ingredient-details"> <div class="details-section ingredient-details">
<div class="parse-result"> <div class="parse-result">
<p><small>Ingredient: </small><strong>{{ ingredient.name }}</strong></p> <p><small>Ingredient: </small><strong>{{ ingredient.name }}</strong></p>