munch-ease-frontend/src/components/meals/EditMealPage.vue

<template>
    <div class="container">
        <div class="fields">
            <date-picker @date-selected="selectDate" :date="meal.suggested_date" />
            <div class="persons-list">
                Cooked by <person-list :people="meal.chefs" @remove-person="(p) => removePerson('chefs', p)" @add-person="(p) => addPerson('chefs', p)" /> 
                for <person-list :people="meal.consumers" @remove-person="(p) => removePerson('consumers', p)" @add-person="(p) => addPerson('consumers', p)" />,
                with <person-list :people="meal.cleanup" @remove-person="(p) => removePerson('cleanup', p)" @add-person="(p) => addPerson('cleanup', p)" /> on cleanup.
            </div>
        </div>
        <div class="recipes">
            <h2>Recipes</h2>
            <ul v-if="meal.recipes && meal.recipes.length">
                <li v-for="mealRecipe in meal.recipes" :key="mealRecipe.recipe.id">
                    <div class="saved-recipe">
                        <p class="recipe-card">
                            <recipe-card :recipe="mealRecipe.recipe" />
                        </p>

                        <p class="servings">
                            <input type="number" v-model="mealRecipe.servings" min="1" />
                            <small><em>servings</em></small>
                        </p>
                        
                        <input type="checkbox" class="show-ingredient-checkbox" :checked="showIngredient(mealRecipe)" />
                        <label for="show-ingredients" @click="showIngredient(mealRecipe, !showIngredient(mealRecipe))">
                            <img class="icon" :src="require('@/assets/show-ingredients.svg')" />
                        </label>
                        <button class="icon-button" @click="removeRecipe(mealRecipe)">
                            <img class="icon" :src="require('@/assets/trash.svg')" />
                        </button>
                    </div>
                    
                    <div v-if="showIngredient(mealRecipe)">
                        <ul>
                            <li v-for="ingredient in scaleIngredients(mealRecipe)" :key="ingredient.id" class="saved-ingredient">
                                <CompactParsedIngredient :ingredient="ingredient" />
                            </li>
                        </ul>
                    </div>
                </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>Sides & Additional Ingredients</h2>
            <editable-ingredients-panel :ingredients="meal.extra_ingredients" @on-add="addIngredient" @on-delete="deleteIngredient" @on-update-ingredient="updateIngredient" @on-editing="onEditAdditionalIngredients" />
        </div>
        
    <button @click="onSaveMeal">Save</button>
        <p v-if="meal.purchase_date"><em>Purchased {{ ago(meal.purchase_date) }}</em></p>
    </div>
</template>

<script setup>
import { reactive, onBeforeMount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getMeal, saveMeal } from '@/composables/useMeals'
import { getRecipe } from '@/api/recipes'
import { currentUser } from '@/api/auth'
import alert from '@/alert.js';

import { ago } from '@/dateformats.js';

import RecipeSearchBox from '@/components/recipes/RecipeSearchBox.vue';
import RecipeCard from '@/components/recipes/RecipeCard.vue';
import DatePicker from './DatePicker.vue';
import EditableIngredientsPanel from '../ingredients/EditableIngredientsPanel.vue';
import PersonList from './PersonList.vue';
import CompactParsedIngredient from '../ingredients/CompactParsedIngredient.vue';

function addPersonIfNotExists(list, person) {
    if (!list.find(p => p.id === person.id)) {
        list.push(person);
    }
}

const route = useRoute()
const router = useRouter()

const showIngredients = reactive({})
const meal = reactive({
    id: -1,
    suggested_date: new Date(),
    recipes: [],
    extra_ingredients: [],
    chefs: [],
    consumers: [],
    cleanup: [],
})

onBeforeMount(async () => {
    const idParam = route.params.id
    const id = typeof idParam === 'string' ? parseInt(idParam) : idParam
    if (id >= 0) {
        const loaded = await getMeal(id)
        Object.assign(meal, loaded)
    } else {
        const self = await currentUser()
        Object.assign(meal, { chefs: [self], consumers: [self], cleanup: [self] })
    }
})

function selectDate(date) {
    meal.suggested_date = date
}

function removeRecipe(mealRecipe) {
    if (confirm(`Are you sure you want to remove ${mealRecipe.servings} servings of ${mealRecipe.recipe.name} from this meal?`)) {
        meal.recipes = meal.recipes.filter((r) => r != mealRecipe)
    }
}

function addIngredient() {
    meal.extra_ingredients = [{ line: '', product: null }, ...meal.extra_ingredients]
}

function deleteIngredient(ingredient) {
    meal.extra_ingredients = meal.extra_ingredients.filter((i) => i != ingredient)
}

function updateIngredient(ingredient, newIngredient) {
    meal.extra_ingredients = meal.extra_ingredients.map((i) => (i == ingredient ? newIngredient : i))
}

function removePerson(list, person) {
    meal[list] = meal[list].filter((p) => p.id !== person.id)
}

function addPerson(list, person) {
    addPersonIfNotExists(meal[list], person)
}

async function selectRecipe(recipe) {
    // Refetch to get additional details
    recipe = await getRecipe(recipe.id)

    if (recipe.created_by) {
        addPersonIfNotExists(meal.chefs, recipe.created_by)
        addPersonIfNotExists(meal.consumers, recipe.created_by)

        if (meal.cleanup.length === 0) {
            addPersonIfNotExists(meal.cleanup, recipe.created_by)
        }
    }

    meal.recipes.push({ recipe, recipe_id: recipe.id, meal_id: meal.id, servings: recipe.serves })
}

async function onEditAdditionalIngredients(editing) {
    if (editing && meal.extra_ingredients.length === 0) {
        addIngredient()
    } else {
        meal.extra_ingredients = meal.extra_ingredients.filter((i) => i.line)
    }
}

function showIngredient(mealRecipe, value) {
    const index = meal.recipes.indexOf(mealRecipe)
    const key = `${mealRecipe.recipe.id}-${index}`
    if (value === undefined) {
        return showIngredients[key]
    }
    return (showIngredients[key] = value)
}

function scaleIngredients(mealRecipe) {
    return mealRecipe.recipe.ingredients.map((i) => {
        return {
            ...i,
            quantity: (i.quantity * mealRecipe.servings) / mealRecipe.recipe.serves,
        }
    })
}

async function onSaveMeal() {
    const saved = await saveMeal(meal)
    if (saved?.id >= 0) {
        Object.assign(meal, saved)
        router.push(`/meals/${saved.id}`)
        alert.show({ heading: 'Meal saved', message: 'Meal saved successfully', type: 'success' })
        return
    }

    alert.show({ heading: 'Error saving meal', message: 'An error occurred while saving the meal', type: 'error' })
}
</script>

<style scoped>

img.icon {
    width: 2em;
    height: 2em;
}

.persons-list {
    text-align: left;
    padding: 1ex 2em;
}

.persons-list p {
    margin: 0;
    padding-bottom: 1em;
}

.person-list li {
    display: inline-block;
    padding-right: 1em;
}

.container {
    margin: 1em auto;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    padding-bottom: 0.5vh;
}

.saved-ingredient {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.saved-recipe {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.saved-ingredient p {
    flex: 1;
    margin: 0;
    margin-right: 1em;
}


.saved-recipe button:hover {
    background: #eee;
}

.saved-recipe .recipe-card {
    margin: 0;
}

.recipe-card {
    flex: 1;
}

.servings {
    display: inline-block;
    margin-right: 1em;
}

.servings input {
    width: 3em;
    border: none;
    border-bottom: 1px solid #000;
    text-align: center;
    font-size: large;
    font-style: italic;
}

.icon-button {
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 1em;
    padding: 0.5em;
}

.icon-button:hover {
    /* Invert the colors of the trash icon */
    filter: invert(1);
}

.show-ingredient-checkbox {
    display: none;
}

.show-ingredient-checkbox + label {
    cursor: pointer;
    background-color: #fff;
    padding: 0.5em;
    border-radius: 1em;
}

.show-ingredient-checkbox + label:hover {
    background-color: #eee;
}

.show-ingredient-checkbox:checked + label {
    filter: invert(1);
}

</style>