Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-08-02 20:15:24 +02:00
Code Issues Releases Activity

feat: add meal plan to shopping list (#2653)

Browse source 
* refactored recipe add to shopping list dialog

* added context menu to meal plan day

* cleaned up presentation

* consolidate repeated recipes

* added alerts

* lint

* lint v2

* fixed undefined recipeRef bug

* lint

* made scale + slug implementation less horrible
This commit is contained in:
Michael Genson 2023-11-21 12:11:10 -06:00 • committed by GitHub
parent 23e398e0df
commit 0775072ffa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 523 additions and 186 deletions
Download patch file Download diff file Expand all files Collapse all files

92
frontend/pages/group/mealplan/planner/view.vue
View file

@ -1,51 +1,65 @@
<template>
<v-row>
<v-col
v-for="(day, index) in plan"
:key="index"
cols="12"
sm="12"
md="4"
lg="4"
xl="2"
class="col-borders my-1 d-flex flex-column"
>
<v-card class="mb-2 border-left-primary rounded-sm pa-2">
<p class="pl-2 mb-1">
{{ $d(day.date, "short") }}
</p>
</v-card>
<div v-for="section in day.sections" :key="section.title">
<div class="py-2 d-flex flex-column">
<div class="primary" style="width: 50px; height: 2.5px"></div>
<p class="text-overline my-0">
{{ section.title }}
</p>
</div>
<v-container class="mx-0 my-3 pa">
<v-row>
<v-col
v-for="(day, index) in plan"
:key="index"
cols="12"
sm="12"
md="4"
lg="4"
xl="2"
class="col-borders my-1 d-flex flex-column"
>
<v-card class="mb-2 border-left-primary rounded-sm px-2">
<v-container class="px-0">
<v-row no-gutters style="width: 100%;">
<v-col cols="10">
<p class="pl-2 my-1">
{{ $d(day.date, "short") }}
</p>
</v-col>
<v-col class="d-flex justify-top" cols="2">
<GroupMealPlanDayContextMenu v-if="day.recipes.length" :recipes="day.recipes" />
</v-col>
</v-row>
</v-container>
</v-card>
<div v-for="section in day.sections" :key="section.title">
<div class="py-2 d-flex flex-column">
<div class="primary" style="width: 50px; height: 2.5px"></div>
<p class="text-overline my-0">
{{ section.title }}
</p>
</div>
<RecipeCardMobile
v-for="mealplan in section.meals"
:key="mealplan.id"
:recipe-id="mealplan.recipe ? mealplan.recipe.id : ''"
class="mb-2"
:route="mealplan.recipe ? true : false"
:slug="mealplan.recipe ? mealplan.recipe.slug : mealplan.title"
:description="mealplan.recipe ? mealplan.recipe.description : mealplan.text"
:name="mealplan.recipe ? mealplan.recipe.name : mealplan.title"
/>
</div>
</v-col>
</v-row>
<RecipeCardMobile
v-for="mealplan in section.meals"
:key="mealplan.id"
:recipe-id="mealplan.recipe ? mealplan.recipe.id : ''"
class="mb-2"
:route="mealplan.recipe ? true : false"
:slug="mealplan.recipe ? mealplan.recipe.slug : mealplan.title"
:description="mealplan.recipe ? mealplan.recipe.description : mealplan.text"
:name="mealplan.recipe ? mealplan.recipe.name : mealplan.title"
/>
</div>
</v-col>
</v-row>
</v-container>
</template>
<script lang="ts">
import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
import { MealsByDate } from "./types";
import { ReadPlanEntry } from "~/lib/api/types/meal-plan";
import GroupMealPlanDayContextMenu from "~/components/Domain/Group/GroupMealPlanDayContextMenu.vue";
import RecipeCardMobile from "~/components/Domain/Recipe/RecipeCardMobile.vue";
import { RecipeSummary } from "~/lib/api/types/recipe";
export default defineComponent({
components: {
GroupMealPlanDayContextMenu,
RecipeCardMobile,
},
props: {
@ -63,6 +77,7 @@ export default defineComponent({
type Days = {
date: Date;
sections: DaySection[];
recipes: RecipeSummary[];
};
const { i18n } = useContext();
@ -77,6 +92,7 @@ export default defineComponent({
{ title: i18n.tc("meal-plan.dinner"), meals: [] },
{ title: i18n.tc("meal-plan.side"), meals: [] },
],
recipes: [],
};
for (const meal of day.meals) {
@ -89,6 +105,10 @@ export default defineComponent({
} else if (meal.entryType === "side") {
out.sections[3].meals.push(meal);
}
if (meal.recipe) {
out.recipes.push(meal.recipe);
}
}
// Drop empty sections