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
v-for="(day, index) in nextSevenDays"
:key="index"
@click="selectDate(day)"
>
@mousedown="selectDate(day)">
{{ formatDay(day) }}
</li>
</ul>

9
src/components/EditMealPage.vue
View file

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

16
src/components/IngredientAddBox.vue
View file

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

12
src/components/IngredientLine.vue
View file

@ -1,5 +1,11 @@
<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">
@ -15,12 +21,6 @@
</div>
<!-- Details 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="parse-result">
<p><small>Ingredient: </small><strong>{{ ingredient.name }}</strong></p>