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

<template>
  <div class="container">
    <div class="fields">
      <date-picker
        :date="meal.suggested_date"
        @date-selected="selectDate"
      />
      <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
                v-model="mealRecipe.servings"
                type="number"
                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 { useAlert } from '@/composables/useAlert'

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 { show: showAlert } = useAlert()

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}`)
    showAlert({ heading: 'Meal saved', message: 'Meal saved successfully', type: 'success' })
    return
  }

  showAlert({
    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>