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

<template>
  <div>
    <ul
      v-if="meals.length"
      class="meals-list"
    >
      <li
        v-for="meal in meals"
        :key="meal.id"
      >
        <meal-card :meal="meal" />
        <button
          class="toggle-actions"
          @click="selectedMeal = meal == selectedMeal ? null : meal"
        >
          <img
            :src="
              meal == selectedMeal
                ? require('@/assets/chevron-down.svg')
                : require('@/assets/chevron-up.svg')
            "
          >
        </button>

        <ul
          v-if="selectedMeal == meal"
          class="actions"
        >
          <li>
            <router-link
              class="nav-link"
              :to="`/meals/${selectedMeal.id}`"
              active-class="active"
            >
              Edit Meal
            </router-link>
          </li>
          <li><a @click="markConsumed">Mark Consumed</a></li>
          <li>
            <a
              class="button"
              @click="deleteSelectedMeal"
            >Remove</a>
          </li>
        </ul>
      </li>
    </ul>
    <div v-if="!meals.length">
      <em>No meals planned</em>
    </div>
    <action-item
      title="Plan Meal"
      :image="require('@/assets/plan-meal.svg')"
      @click="() => $router.push('/meals/add')"
    />
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import ActionItem from '@/components/ActionItem.vue'
import MealCard from '@/components/meals/MealCard.vue'
import { getUpcomingMeals, markMealConsumed, deleteMeal } from '@/composables/useMeals'

const from = new Date()
from.setTime(0)

const to = new Date()
to.setDate(to.getDate() + 7)

const meals = ref([])
const selectedMeal = ref(null)

onBeforeMount(async () => {
  meals.value = await getUpcomingMeals(from, to)
})

async function deleteSelectedMeal() {
  if (!selectedMeal.value) return
  await deleteMeal(selectedMeal.value.id)
  meals.value = meals.value.filter((m) => m.id !== selectedMeal.value.id)
  selectedMeal.value = null
}

async function markConsumed() {
  if (!selectedMeal.value) return
  await markMealConsumed(selectedMeal.value.id)
  meals.value = meals.value.filter((m) => m.id !== selectedMeal.value.id)
}
</script>

<style scoped>
li {
  list-style-type: none;
}

ul.meals-list {
  padding: 0;
}

.toggle-actions {
  cursor: pointer;
  background-color: #fff;
  border: none;
  border-bottom: solid 1px #ccc;
  padding: 0 2em;
  margin: 0;
}

.toggle-actions img {
  width: 2em;
  height: 2em;
}

.meals-list > li {
  margin-bottom: 1em;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

ul.actions {
  margin: 0;
  padding: 0;
}

.actions li {
  display: block;
  border: 1px solid #ccc;
}

.actions li:hover {
  background-color: #ccc;
}

.actions li a {
  display: block;
  text-decoration: none;
  color: #000;
  width: 100%;
  cursor: pointer;
  padding-top: 2ex;
  padding-bottom: 2ex;
}
</style>