mirror of
https://github.com/mealie-recipes/mealie.git
synced 2026-04-14 08:55:34 -04:00
chore: Nuxt 4 upgrade (#7426)
This commit is contained in:
Kuchenpirat
GitHub
281
frontend/app/pages/household/mealplan/planner.vue
Normal file
281
frontend/app/pages/household/mealplan/planner.vue
Normal file
@@ -0,0 +1,281 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<RecipeDialogAddToShoppingList
|
||||
v-if="shoppingLists"
|
||||
v-model="state.shoppingListDialog"
|
||||
:recipes="weekRecipesWithScales"
|
||||
:shopping-lists="shoppingLists"
|
||||
/>
|
||||
<v-menu
|
||||
v-model="state.picker"
|
||||
:close-on-content-click="false"
|
||||
transition="scale-transition"
|
||||
offset-y
|
||||
min-width="auto"
|
||||
>
|
||||
<template #activator="{ props }">
|
||||
<v-btn
|
||||
color="primary"
|
||||
class="mb-2"
|
||||
v-bind="props"
|
||||
>
|
||||
<v-icon start>
|
||||
{{ $globals.icons.calendar }}
|
||||
</v-icon>
|
||||
{{ $d(weekRange.start, "short") }} - {{ $d(weekRange.end, "short") }}
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<v-card>
|
||||
<v-date-picker
|
||||
v-model="state.range"
|
||||
hide-header
|
||||
:multiple="'range'"
|
||||
:first-day-of-week="firstDayOfWeek"
|
||||
:local="$i18n.locale"
|
||||
/>
|
||||
|
||||
<v-card-text>
|
||||
<v-number-input
|
||||
v-model="numberOfDaysPast"
|
||||
:min="0"
|
||||
control-variant="stacked"
|
||||
inset
|
||||
:label="$t('meal-plan.numberOfDaysPast-label')"
|
||||
:hint="$t('meal-plan.numberOfDaysPast-hint')"
|
||||
persistent-hint
|
||||
/>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-text>
|
||||
<v-number-input
|
||||
v-model="numberOfDays"
|
||||
:min="1"
|
||||
control-variant="stacked"
|
||||
inset
|
||||
:label="$t('meal-plan.numberOfDays-label')"
|
||||
:hint="$t('meal-plan.numberOfDays-hint')"
|
||||
persistent-hint
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
|
||||
<div class="d-flex flex-wrap align-center justify-space-between mb-2">
|
||||
<v-tabs style="width: fit-content;">
|
||||
<v-tab :to="{ name: TABS.view, query: route.query }">
|
||||
{{ $t('meal-plan.meal-planner') }}
|
||||
</v-tab>
|
||||
<v-tab :to="{ name: TABS.edit, query: route.query }">
|
||||
{{ $t('general.edit') }}
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
<BaseButton
|
||||
v-if="route.name === TABS.view"
|
||||
color="info"
|
||||
:icon="$globals.icons.cartCheck"
|
||||
:text="$t('meal-plan.add-all-to-list')"
|
||||
:disabled="!hasRecipes"
|
||||
:loading="state.addAllLoading"
|
||||
class="ml-auto mr-4"
|
||||
@click="addAllToList"
|
||||
/>
|
||||
<ButtonLink
|
||||
:icon="$globals.icons.calendar"
|
||||
:to="`/household/mealplan/settings`"
|
||||
:text="$t('general.settings')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<NuxtPage
|
||||
:mealplans="mealsByDate"
|
||||
:actions="actions"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<v-row />
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { isSameDay, addDays, parseISO, format, isValid } from "date-fns";
|
||||
import RecipeDialogAddToShoppingList from "~/components/Domain/Recipe/RecipeDialogAddToShoppingList.vue";
|
||||
import { useHouseholdSelf } from "~/composables/use-households";
|
||||
import { useMealplans } from "~/composables/use-group-mealplan";
|
||||
import { useUserMealPlanPreferences } from "~/composables/use-users/preferences";
|
||||
import type { ShoppingListSummary } from "~/lib/api/types/household";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
|
||||
const TABS = {
|
||||
view: "household-mealplan-planner-view",
|
||||
edit: "household-mealplan-planner-edit",
|
||||
};
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const i18n = useI18n();
|
||||
const api = useUserApi();
|
||||
const { household } = useHouseholdSelf();
|
||||
|
||||
useSeoMeta({
|
||||
title: i18n.t("meal-plan.dinner-this-week"),
|
||||
});
|
||||
|
||||
const mealPlanPreferences = useUserMealPlanPreferences();
|
||||
const numberOfDaysPast = ref<number>(mealPlanPreferences.value.numberOfDaysPast || 0);
|
||||
const numberOfDays = ref<number>(mealPlanPreferences.value.numberOfDays || 7);
|
||||
watch(numberOfDaysPast, (val) => {
|
||||
mealPlanPreferences.value.numberOfDaysPast = Number(val);
|
||||
});
|
||||
watch(numberOfDays, (val) => {
|
||||
mealPlanPreferences.value.numberOfDays = Number(val);
|
||||
});
|
||||
|
||||
// Force to /view if current route is /planner
|
||||
if (route.path === "/household/mealplan/planner") {
|
||||
router.push({
|
||||
name: TABS.view,
|
||||
query: route.query,
|
||||
});
|
||||
}
|
||||
|
||||
function safeParseISO(date: string, fallback: Date | undefined = undefined) {
|
||||
try {
|
||||
const parsed = parseISO(date);
|
||||
return isValid(parsed) ? parsed : fallback;
|
||||
}
|
||||
catch {
|
||||
return fallback;
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize dates from query parameters or defaults
|
||||
const initialStartDate = safeParseISO(route.query.start as string, addDays(new Date(), adjustForToday(-numberOfDaysPast.value)));
|
||||
const initialEndDate = safeParseISO(route.query.end as string, addDays(new Date(), adjustForToday(numberOfDays.value)));
|
||||
|
||||
const state = ref({
|
||||
range: [initialStartDate, initialEndDate] as [Date, Date],
|
||||
start: initialStartDate,
|
||||
picker: false,
|
||||
end: initialEndDate,
|
||||
shoppingListDialog: false,
|
||||
addAllLoading: false,
|
||||
});
|
||||
|
||||
const shoppingLists = ref<ShoppingListSummary[]>();
|
||||
|
||||
const firstDayOfWeek = computed(() => {
|
||||
return household.value?.preferences?.firstDayOfWeek || 0;
|
||||
});
|
||||
|
||||
const weekRange = computed(() => {
|
||||
const sorted = [...state.value.range].sort((a, b) => a.getTime() - b.getTime());
|
||||
|
||||
const start = sorted[0];
|
||||
const end = sorted[sorted.length - 1];
|
||||
|
||||
if (start && end) {
|
||||
return { start, end };
|
||||
}
|
||||
return {
|
||||
start: addDays(new Date(), adjustForToday(-numberOfDaysPast.value)),
|
||||
end: addDays(new Date(), adjustForToday(numberOfDays.value)),
|
||||
};
|
||||
});
|
||||
|
||||
// Update query parameters when date range changes
|
||||
watch(weekRange, (newRange) => {
|
||||
// Keep current route name and params, just update the query
|
||||
router.replace({
|
||||
name: route.name || TABS.view,
|
||||
params: route.params,
|
||||
query: {
|
||||
...route.query,
|
||||
start: format(newRange.start, "yyyy-MM-dd"),
|
||||
end: format(newRange.end, "yyyy-MM-dd"),
|
||||
},
|
||||
});
|
||||
}, { immediate: true });
|
||||
|
||||
const { mealplans, actions } = useMealplans(weekRange);
|
||||
|
||||
function filterMealByDate(date: Date) {
|
||||
if (!mealplans.value) return [];
|
||||
return mealplans.value.filter((meal) => {
|
||||
const mealDate = parseISO(meal.date);
|
||||
return isSameDay(mealDate, date);
|
||||
});
|
||||
}
|
||||
|
||||
function adjustForToday(days: number) {
|
||||
// e.g. If the user wants 7 days, we subtract one to do "today + 6"
|
||||
// e.g. If the user wants 2 days in the past, we keep it the same to do "today - 2"
|
||||
return days > 0 ? days - 1 : days;
|
||||
}
|
||||
|
||||
const days = computed(() => {
|
||||
const numDays
|
||||
= Math.floor((weekRange.value.end.getTime() - weekRange.value.start.getTime()) / (1000 * 60 * 60 * 24)) + 1;
|
||||
|
||||
// Calculate absolute value
|
||||
if (numDays < 0) return [];
|
||||
|
||||
return Array.from(Array(numDays).keys()).map(
|
||||
(i) => {
|
||||
const date = new Date(weekRange.value.start.getTime());
|
||||
date.setDate(date.getDate() + i);
|
||||
return date;
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
const mealsByDate = computed(() => {
|
||||
return days.value.map((day) => {
|
||||
return { date: day, meals: filterMealByDate(day) };
|
||||
});
|
||||
});
|
||||
|
||||
const hasRecipes = computed(() => {
|
||||
return mealsByDate.value.some(day => day.meals.some(meal => meal.recipe));
|
||||
});
|
||||
|
||||
const weekRecipesWithScales = computed(() => {
|
||||
const allRecipes: any[] = [];
|
||||
for (const day of mealsByDate.value) {
|
||||
for (const meal of day.meals) {
|
||||
if (meal.recipe) {
|
||||
allRecipes.push(meal.recipe);
|
||||
}
|
||||
}
|
||||
}
|
||||
return allRecipes.map(recipe => ({
|
||||
scale: 1,
|
||||
...recipe,
|
||||
}));
|
||||
});
|
||||
|
||||
async function getShoppingLists() {
|
||||
const { data } = await api.shopping.lists.getAll(1, -1, { orderBy: "name", orderDirection: "asc" });
|
||||
if (data) {
|
||||
shoppingLists.value = data.items as ShoppingListSummary[] ?? [];
|
||||
}
|
||||
}
|
||||
|
||||
async function addAllToList() {
|
||||
state.value.addAllLoading = true;
|
||||
await getShoppingLists();
|
||||
state.value.shoppingListDialog = true;
|
||||
state.value.addAllLoading = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
.left-color-border {
|
||||
border-left: 5px solid var(--v-primary-base) !important;
|
||||
}
|
||||
|
||||
.bottom-color-border {
|
||||
border-bottom: 2px solid var(--v-primary-base) !important;
|
||||
}
|
||||
</style>
|
||||
402
frontend/app/pages/household/mealplan/planner/edit.vue
Normal file
402
frontend/app/pages/household/mealplan/planner/edit.vue
Normal file
@@ -0,0 +1,402 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Create Meal Dialog -->
|
||||
<BaseDialog
|
||||
v-model="state.dialog"
|
||||
:title="newMeal.existing ? $t('meal-plan.update-this-meal-plan') : $t('meal-plan.create-a-new-meal-plan')"
|
||||
:submit-text="newMeal.existing ? $t('general.update') : $t('general.create')"
|
||||
color="primary"
|
||||
:icon="$globals.icons.foods"
|
||||
:submit-disabled="isCreateDisabled"
|
||||
can-submit
|
||||
@submit="
|
||||
() => {
|
||||
if (newMeal.existing) {
|
||||
actions.updateOne({ ...newMeal, date: newMealDateString });
|
||||
}
|
||||
else {
|
||||
actions.createOne({ ...newMeal, date: newMealDateString });
|
||||
}
|
||||
resetDialog();
|
||||
}
|
||||
"
|
||||
@close="resetDialog()"
|
||||
>
|
||||
<v-card-text class="pb-2">
|
||||
<v-date-picker
|
||||
v-model="newMeal.date"
|
||||
class="mx-auto"
|
||||
hide-header
|
||||
show-adjacent-months
|
||||
color="primary"
|
||||
:first-day-of-week="firstDayOfWeek"
|
||||
:local="$i18n.locale"
|
||||
/>
|
||||
<v-card-text class="pb-0">
|
||||
<v-select
|
||||
v-model="newMeal.entryType"
|
||||
:return-object="false"
|
||||
:items="planTypeOptions"
|
||||
:label="$t('recipe.entry-type')"
|
||||
item-title="text"
|
||||
item-value="value"
|
||||
/>
|
||||
<v-autocomplete
|
||||
v-if="!dialog.note"
|
||||
v-model="newMeal.recipeId"
|
||||
v-model:search="search.query.value"
|
||||
:label="$t('meal-plan.meal-recipe')"
|
||||
:items="search.data.value"
|
||||
:custom-filter="normalizeFilter"
|
||||
:loading="search.loading.value"
|
||||
cache-items
|
||||
item-title="name"
|
||||
item-value="id"
|
||||
:return-object="false"
|
||||
:rules="[requiredRule]"
|
||||
/>
|
||||
<template v-else>
|
||||
<v-text-field v-model="newMeal.title" :rules="[requiredRule]" :label="$t('meal-plan.meal-title')" />
|
||||
<v-textarea v-model="newMeal.text" rows="2" :label="$t('meal-plan.meal-note')" />
|
||||
</template>
|
||||
</v-card-text>
|
||||
<v-card-actions class="py-0 px-4">
|
||||
<v-switch v-model="dialog.note" class="mt-n3 mb-n4" :label="$t('meal-plan.note-only')" />
|
||||
</v-card-actions>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
<v-row>
|
||||
<v-col
|
||||
v-for="(plan, index) in mealplans"
|
||||
:key="index"
|
||||
cols="12"
|
||||
sm="12"
|
||||
md="3"
|
||||
lg="3"
|
||||
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(plan.date, "short") }}
|
||||
</p>
|
||||
</v-card>
|
||||
<VueDraggable
|
||||
v-model="mealplansByDate[plan.date.toString()]"
|
||||
tag="div"
|
||||
handle=".handle"
|
||||
:delay="250"
|
||||
:delay-on-touch-only="true"
|
||||
group="meals"
|
||||
:data-index="index"
|
||||
:data-box="plan.date"
|
||||
style="min-height: 150px"
|
||||
@end="onMoveCallback"
|
||||
>
|
||||
<v-card
|
||||
v-for="mealplan in mealplansByDate[plan.date.toString()]"
|
||||
:key="mealplan.id"
|
||||
class="my-1"
|
||||
:class="{ handle: $vuetify.display.smAndUp }"
|
||||
>
|
||||
<v-list-item lines="three" @click="editMeal(mealplan)">
|
||||
<template #prepend>
|
||||
<v-avatar>
|
||||
<RecipeCardImage
|
||||
v-if="mealplan.recipe"
|
||||
:recipe-id="mealplan.recipe.id!"
|
||||
tiny
|
||||
icon-size="25"
|
||||
:slug="mealplan.recipe ? mealplan.recipe.slug : ''"
|
||||
/>
|
||||
<v-icon v-else>
|
||||
{{ $globals.icons.primary }}
|
||||
</v-icon>
|
||||
</v-avatar>
|
||||
</template>
|
||||
<v-list-item-title class="mb-1">
|
||||
{{ mealplan.recipe ? mealplan.recipe.name : mealplan.title }}
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle style="min-height: 16px">
|
||||
{{ mealplan.recipe ? mealplan.recipe.description + " " : mealplan.text }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
<v-divider class="mx-2" />
|
||||
<div class="py-2 px-2 d-flex" style="align-items: center">
|
||||
<v-btn size="small" icon variant="text" :class="{ handle: !$vuetify.display.smAndUp }">
|
||||
<v-icon>
|
||||
{{ $globals.icons.arrowUpDown }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
<v-menu offset-y>
|
||||
<template #activator="{ props: menuProps }">
|
||||
<v-chip
|
||||
v-bind="menuProps"
|
||||
label
|
||||
variant="elevated"
|
||||
size="small"
|
||||
color="accent"
|
||||
@click.prevent
|
||||
>
|
||||
<v-icon start>
|
||||
{{ $globals.icons.tags }}
|
||||
</v-icon>
|
||||
{{ getEntryTypeText(mealplan.entryType!) }}
|
||||
</v-chip>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="mealType in planTypeOptions"
|
||||
:key="mealType.value"
|
||||
@click="actions.setType(mealplan, mealType.value)"
|
||||
>
|
||||
<v-list-item-title> {{ mealType.text }} </v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<v-btn class="ml-auto" size="small" variant="text" icon @click="actions.deleteOne(mealplan.id)">
|
||||
<v-icon>{{ $globals.icons.delete }}</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card>
|
||||
</VueDraggable>
|
||||
<!-- Day Column Actions -->
|
||||
<div class="d-flex justify-end mt-auto">
|
||||
<BaseButtonGroup
|
||||
:buttons="[
|
||||
{
|
||||
icon: $globals.icons.diceMultiple,
|
||||
text: $t('meal-plan.random-meal'),
|
||||
event: 'random',
|
||||
children: [
|
||||
{
|
||||
icon: $globals.icons.diceMultiple,
|
||||
text: $t('meal-plan.breakfast'),
|
||||
event: 'randomBreakfast',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.diceMultiple,
|
||||
text: $t('meal-plan.lunch'),
|
||||
event: 'randomLunch',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.diceMultiple,
|
||||
text: $t('meal-plan.side'),
|
||||
event: 'randomSide',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.diceMultiple,
|
||||
text: $t('meal-plan.snack'),
|
||||
event: 'randomSnack',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.diceMultiple,
|
||||
text: $t('meal-plan.drink'),
|
||||
event: 'randomDrink',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.diceMultiple,
|
||||
text: $t('meal-plan.dessert'),
|
||||
event: 'randomDessert',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.potSteam,
|
||||
text: $t('meal-plan.random-dinner'),
|
||||
event: 'randomDinner',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.bowlMixOutline,
|
||||
text: $t('meal-plan.random-side'),
|
||||
event: 'randomSide',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.createAlt,
|
||||
text: $t('general.new'),
|
||||
event: 'create',
|
||||
},
|
||||
]"
|
||||
@create="openDialog(plan.date)"
|
||||
@random-breakfast="randomMeal(plan.date, 'breakfast')"
|
||||
@random-lunch="randomMeal(plan.date, 'lunch')"
|
||||
@random-dinner="randomMeal(plan.date, 'dinner')"
|
||||
@random-side="randomMeal(plan.date, 'side')"
|
||||
@random-snack="randomMeal(plan.date, 'snack')"
|
||||
@random-drink="randomMeal(plan.date, 'drink')"
|
||||
@random-dessert="randomMeal(plan.date, 'dessert')"
|
||||
/>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { format } from "date-fns";
|
||||
import type { SortableEvent } from "sortablejs";
|
||||
import { VueDraggable } from "vue-draggable-plus";
|
||||
import type { MealsByDate } from "./view.vue";
|
||||
import type { useMealplans } from "~/composables/use-group-mealplan";
|
||||
import { usePlanTypeOptions, getEntryTypeText } from "~/composables/use-group-mealplan";
|
||||
import RecipeCardImage from "~/components/Domain/Recipe/RecipeCardImage.vue";
|
||||
import type { PlanEntryType, UpdatePlanEntry } from "~/lib/api/types/meal-plan";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { useHouseholdSelf } from "~/composables/use-households";
|
||||
import { normalizeFilter } from "~/composables/use-utils";
|
||||
import { useRecipeSearch } from "~/composables/recipes/use-recipe-search";
|
||||
|
||||
const props = defineProps<{
|
||||
mealplans: MealsByDate[];
|
||||
actions: ReturnType<typeof useMealplans>["actions"];
|
||||
}>();
|
||||
|
||||
const api = useUserApi();
|
||||
const auth = useMealieAuth();
|
||||
const { household } = useHouseholdSelf();
|
||||
const requiredRule = (value: any) => !!value || "Required.";
|
||||
|
||||
const state = ref({
|
||||
dialog: false,
|
||||
});
|
||||
|
||||
const firstDayOfWeek = computed(() => {
|
||||
return household.value?.preferences?.firstDayOfWeek || 0;
|
||||
});
|
||||
|
||||
// Local mutable meals object
|
||||
const mealplansByDate = reactive<{ [date: string]: UpdatePlanEntry[] }>({});
|
||||
watch(
|
||||
() => props.mealplans,
|
||||
(plans) => {
|
||||
for (const plan of plans) {
|
||||
mealplansByDate[plan.date.toString()] = plan.meals ? [...plan.meals] : [];
|
||||
}
|
||||
// Remove any dates that no longer exist
|
||||
Object.keys(mealplansByDate).forEach((date) => {
|
||||
if (!plans.find(p => p.date.toString() === date)) {
|
||||
mealplansByDate[date] = [];
|
||||
}
|
||||
});
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
);
|
||||
|
||||
function onMoveCallback(evt: SortableEvent) {
|
||||
const supportedEvents = ["drop", "touchend"];
|
||||
|
||||
// Adapted From https://github.com/SortableJS/Vue.Draggable/issues/1029
|
||||
const ogEvent: DragEvent = (evt as any).originalEvent;
|
||||
|
||||
if (ogEvent && ogEvent.type in supportedEvents) {
|
||||
// The drop was cancelled, unsure if anything needs to be done?
|
||||
console.log("Cancel Move Event");
|
||||
}
|
||||
else {
|
||||
// A Meal was moved, set the new date value and make an update request and refresh the meals
|
||||
const fromMealsByIndex = parseInt(evt.from.getAttribute("data-index") ?? "");
|
||||
const toMealsByIndex = parseInt(evt.to.getAttribute("data-index") ?? "");
|
||||
|
||||
if (!isNaN(fromMealsByIndex) && !isNaN(toMealsByIndex)) {
|
||||
const destDate = props.mealplans[toMealsByIndex].date;
|
||||
const mealData = mealplansByDate[destDate.toString()][evt.newIndex as number];
|
||||
|
||||
mealData.date = format(destDate, "yyyy-MM-dd");
|
||||
|
||||
props.actions.updateOne(mealData);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =====================================================
|
||||
// New Meal Dialog
|
||||
|
||||
const dialog = reactive({
|
||||
loading: false,
|
||||
error: false,
|
||||
note: false,
|
||||
});
|
||||
|
||||
watch(dialog, () => {
|
||||
if (dialog.note) {
|
||||
newMeal.recipeId = undefined;
|
||||
}
|
||||
});
|
||||
|
||||
const newMeal = reactive({
|
||||
date: new Date(Date.now() - new Date().getTimezoneOffset() * 60000),
|
||||
title: "",
|
||||
text: "",
|
||||
recipeId: undefined as string | undefined,
|
||||
entryType: "dinner" as PlanEntryType,
|
||||
existing: false,
|
||||
id: 0,
|
||||
groupId: "",
|
||||
userId: auth.user.value?.id || "",
|
||||
});
|
||||
|
||||
const newMealDateString = computed(() => {
|
||||
return format(newMeal.date, "yyyy-MM-dd");
|
||||
});
|
||||
|
||||
const isCreateDisabled = computed(() => {
|
||||
if (dialog.note) {
|
||||
return !newMeal.title.trim();
|
||||
}
|
||||
return !newMeal.recipeId;
|
||||
});
|
||||
|
||||
function openDialog(date: Date) {
|
||||
newMeal.date = date;
|
||||
state.value.dialog = true;
|
||||
}
|
||||
|
||||
function editMeal(mealplan: UpdatePlanEntry) {
|
||||
const { date, title, text, entryType, recipeId, id, groupId, userId } = mealplan;
|
||||
if (!entryType) return;
|
||||
|
||||
const [year, month, day] = date.split("-").map(Number);
|
||||
newMeal.date = new Date(year, month - 1, day);
|
||||
newMeal.title = title || "";
|
||||
newMeal.text = text || "";
|
||||
newMeal.recipeId = recipeId || undefined;
|
||||
newMeal.entryType = entryType;
|
||||
newMeal.existing = true;
|
||||
newMeal.id = id;
|
||||
newMeal.groupId = groupId;
|
||||
newMeal.userId = userId || auth.user.value?.id || "";
|
||||
|
||||
state.value.dialog = true;
|
||||
dialog.note = !recipeId;
|
||||
}
|
||||
|
||||
function resetDialog() {
|
||||
newMeal.date = new Date(Date.now() - new Date().getTimezoneOffset() * 60000);
|
||||
newMeal.title = "";
|
||||
newMeal.text = "";
|
||||
newMeal.entryType = "dinner";
|
||||
newMeal.recipeId = undefined;
|
||||
newMeal.existing = false;
|
||||
}
|
||||
|
||||
async function randomMeal(date: Date, type: PlanEntryType) {
|
||||
const { data } = await api.mealplans.setRandom({
|
||||
date: format(date, "yyyy-MM-dd"),
|
||||
entryType: type,
|
||||
});
|
||||
|
||||
if (data) {
|
||||
props.actions.refreshAll();
|
||||
}
|
||||
}
|
||||
|
||||
// =====================================================
|
||||
// Search
|
||||
|
||||
const search = useRecipeSearch(api);
|
||||
const planTypeOptions = usePlanTypeOptions();
|
||||
|
||||
onMounted(async () => {
|
||||
await search.trigger();
|
||||
});
|
||||
</script>
|
||||
139
frontend/app/pages/household/mealplan/planner/view.vue
Normal file
139
frontend/app/pages/household/mealplan/planner/view.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<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 d-flex align-center" height="56px">
|
||||
<v-row no-gutters style="width: 100%;">
|
||||
<v-col cols="10" class="d-flex align-center">
|
||||
<p class="pl-2 my-1" :class="{ 'text-primary': isToday(day.date) }">
|
||||
{{ $d(day.date, "short") }}
|
||||
</p>
|
||||
</v-col>
|
||||
<v-col class="d-flex align-center" 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" />
|
||||
<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"
|
||||
:rating="mealplan.recipe ? mealplan.recipe.rating! : 0"
|
||||
:slug="mealplan.recipe ? mealplan.recipe.slug! : mealplan.title!"
|
||||
:description="mealplan.recipe ? mealplan.recipe.description! : mealplan.text!"
|
||||
:name="mealplan.recipe ? mealplan.recipe.name! : mealplan.title!"
|
||||
:tags="mealplan.recipe ? mealplan.recipe.tags! : []"
|
||||
/>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { isSameDay } from "date-fns";
|
||||
|
||||
import type { ReadPlanEntry } from "~/lib/api/types/meal-plan";
|
||||
import GroupMealPlanDayContextMenu from "~/components/Domain/Household/GroupMealPlanDayContextMenu.vue";
|
||||
import RecipeCardMobile from "~/components/Domain/Recipe/RecipeCardMobile.vue";
|
||||
import type { RecipeSummary } from "~/lib/api/types/recipe";
|
||||
|
||||
export type MealsByDate = {
|
||||
date: Date;
|
||||
meals: ReadPlanEntry[];
|
||||
};
|
||||
|
||||
const props = defineProps<{
|
||||
mealplans: MealsByDate[];
|
||||
}>();
|
||||
|
||||
type DaySection = {
|
||||
title: string;
|
||||
meals: ReadPlanEntry[];
|
||||
};
|
||||
|
||||
type Days = {
|
||||
date: Date;
|
||||
sections: DaySection[];
|
||||
recipes: RecipeSummary[];
|
||||
};
|
||||
|
||||
const i18n = useI18n();
|
||||
|
||||
const plan = computed<Days[]>(() => {
|
||||
return props.mealplans.reduce((acc, day) => {
|
||||
const out: Days = {
|
||||
date: day.date,
|
||||
sections: [
|
||||
{ title: i18n.t("meal-plan.breakfast"), meals: [] },
|
||||
{ title: i18n.t("meal-plan.lunch"), meals: [] },
|
||||
{ title: i18n.t("meal-plan.dinner"), meals: [] },
|
||||
{ title: i18n.t("meal-plan.side"), meals: [] },
|
||||
{ title: i18n.t("meal-plan.snack"), meals: [] },
|
||||
{ title: i18n.t("meal-plan.drink"), meals: [] },
|
||||
{ title: i18n.t("meal-plan.dessert"), meals: [] },
|
||||
],
|
||||
recipes: [],
|
||||
};
|
||||
|
||||
for (const meal of day.meals) {
|
||||
if (meal.entryType === "breakfast") {
|
||||
out.sections[0].meals.push(meal);
|
||||
}
|
||||
else if (meal.entryType === "lunch") {
|
||||
out.sections[1].meals.push(meal);
|
||||
}
|
||||
else if (meal.entryType === "dinner") {
|
||||
out.sections[2].meals.push(meal);
|
||||
}
|
||||
else if (meal.entryType === "side") {
|
||||
out.sections[3].meals.push(meal);
|
||||
}
|
||||
else if (meal.entryType === "snack") {
|
||||
out.sections[4].meals.push(meal);
|
||||
}
|
||||
else if (meal.entryType === "drink") {
|
||||
out.sections[5].meals.push(meal);
|
||||
}
|
||||
else if (meal.entryType === "dessert") {
|
||||
out.sections[6].meals.push(meal);
|
||||
}
|
||||
|
||||
if (meal.recipe) {
|
||||
out.recipes.push(meal.recipe);
|
||||
}
|
||||
}
|
||||
|
||||
// Drop empty sections
|
||||
out.sections = out.sections.filter(section => section.meals.length > 0);
|
||||
|
||||
acc.push(out);
|
||||
|
||||
return acc;
|
||||
}, [] as Days[]);
|
||||
});
|
||||
|
||||
const isToday = (date: Date) => {
|
||||
return isSameDay(date, new Date());
|
||||
};
|
||||
</script>
|
||||
247
frontend/app/pages/household/mealplan/settings.vue
Normal file
247
frontend/app/pages/household/mealplan/settings.vue
Normal file
@@ -0,0 +1,247 @@
|
||||
<template>
|
||||
<v-container class="lg-container">
|
||||
<BasePageTitle divider>
|
||||
<template #header>
|
||||
<v-img
|
||||
width="100%"
|
||||
max-height="100"
|
||||
max-width="100"
|
||||
src="/svgs/manage-cookbooks.svg"
|
||||
/>
|
||||
</template>
|
||||
<template #title>
|
||||
{{ $t('meal-plan.meal-plan-rules') }}
|
||||
</template>
|
||||
{{ $t('meal-plan.meal-plan-rules-description') }}
|
||||
</BasePageTitle>
|
||||
|
||||
<v-card>
|
||||
<v-card-title class="headline">
|
||||
{{ $t('meal-plan.new-rule') }}
|
||||
</v-card-title>
|
||||
<v-divider class="mx-2" />
|
||||
<v-card-text>
|
||||
{{ $t('meal-plan.new-rule-description') }}
|
||||
|
||||
<GroupMealPlanRuleForm
|
||||
:key="createDataFormKey"
|
||||
v-model:day="createData.day"
|
||||
v-model:entry-type="createData.entryType"
|
||||
v-model:query-filter-string="createData.queryFilterString"
|
||||
class="mt-2"
|
||||
/>
|
||||
</v-card-text>
|
||||
<v-card-actions class="justify-end">
|
||||
<BaseButton
|
||||
create
|
||||
:disabled="!createData.queryFilterString"
|
||||
@click="createRule"
|
||||
/>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
|
||||
<section>
|
||||
<BaseCardSectionTitle
|
||||
class="mt-10"
|
||||
:title="$t('meal-plan.recipe-rules')"
|
||||
/>
|
||||
<div>
|
||||
<div
|
||||
v-for="(rule, idx) in allRules"
|
||||
:key="rule.id"
|
||||
>
|
||||
<v-card class="my-2 left-border">
|
||||
<v-card-title class="headline pb-1">
|
||||
{{ rule.day === "unset" ? $t('meal-plan.applies-to-all-days') : $t('meal-plan.applies-on-days', [rule.day]) }}
|
||||
{{ rule.entryType === "unset" ? $t('meal-plan.for-all-meal-types') : $t('meal-plan.for-type-meal-types', [rule.entryType]) }}
|
||||
<span class="ml-auto">
|
||||
<BaseButtonGroup
|
||||
:buttons="[
|
||||
{
|
||||
icon: $globals.icons.edit,
|
||||
text: $t('general.edit'),
|
||||
event: 'edit',
|
||||
},
|
||||
{
|
||||
icon: $globals.icons.delete,
|
||||
text: $t('general.delete'),
|
||||
event: 'delete',
|
||||
},
|
||||
]"
|
||||
@delete="deleteRule(rule.id)"
|
||||
@edit="toggleEditState(rule.id)"
|
||||
/>
|
||||
</span>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<template v-if="!editState[rule.id]">
|
||||
<div v-if="rule.categories">
|
||||
<h4 class="py-1">
|
||||
{{ $t("category.categories") }}:
|
||||
</h4>
|
||||
<RecipeChips
|
||||
v-if="rule.categories.length"
|
||||
:items="rule.categories"
|
||||
small
|
||||
class="pb-3"
|
||||
/>
|
||||
<v-card-text
|
||||
v-else
|
||||
label
|
||||
class="ma-0 px-0 pt-0 pb-3"
|
||||
text-color="accent"
|
||||
size="small"
|
||||
dark
|
||||
>
|
||||
{{ $t("meal-plan.any-category") }}
|
||||
</v-card-text>
|
||||
</div>
|
||||
|
||||
<div v-if="rule.tags">
|
||||
<h4 class="py-1">
|
||||
{{ $t("tag.tags") }}:
|
||||
</h4>
|
||||
<RecipeChips
|
||||
v-if="rule.tags.length"
|
||||
:items="rule.tags"
|
||||
url-prefix="tags"
|
||||
small
|
||||
class="pb-3"
|
||||
/>
|
||||
<v-card-text
|
||||
v-else
|
||||
label
|
||||
class="ma-0 px-0 pt-0 pb-3"
|
||||
text-color="accent"
|
||||
size="small"
|
||||
dark
|
||||
>
|
||||
{{ $t("meal-plan.any-tag") }}
|
||||
</v-card-text>
|
||||
</div>
|
||||
<div v-if="rule.households">
|
||||
<h4 class="py-1">
|
||||
{{ $t("household.households") }}:
|
||||
</h4>
|
||||
<div v-if="rule.households.length">
|
||||
<v-chip
|
||||
v-for="household in rule.households"
|
||||
:key="household.id"
|
||||
label
|
||||
class="ma-1"
|
||||
color="accent"
|
||||
size="small"
|
||||
dark
|
||||
>
|
||||
{{ household.name }}
|
||||
</v-chip>
|
||||
</div>
|
||||
<v-card-text
|
||||
v-else
|
||||
label
|
||||
class="ma-0 px-0 pt-0 pb-3"
|
||||
text-color="accent"
|
||||
size="small"
|
||||
dark
|
||||
>
|
||||
{{ $t("meal-plan.any-household") }}
|
||||
</v-card-text>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<GroupMealPlanRuleForm
|
||||
v-model:day="allRules[idx].day"
|
||||
v-model:entry-type="allRules[idx].entryType"
|
||||
v-model:query-filter-string="allRules[idx].queryFilterString"
|
||||
:query-filter="allRules[idx].queryFilter"
|
||||
/>
|
||||
<div class="d-flex justify-end">
|
||||
<BaseButton
|
||||
update
|
||||
:disabled="!allRules[idx].queryFilterString"
|
||||
@click="updateRule(rule)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import type { PlanRulesCreate, PlanRulesOut } from "~/lib/api/types/meal-plan";
|
||||
import GroupMealPlanRuleForm from "~/components/Domain/Household/GroupMealPlanRuleForm.vue";
|
||||
import { useAsyncKey } from "~/composables/use-utils";
|
||||
import RecipeChips from "~/components/Domain/Recipe/RecipeChips.vue";
|
||||
|
||||
const api = useUserApi();
|
||||
const i18n = useI18n();
|
||||
|
||||
useSeoMeta({
|
||||
title: i18n.t("meal-plan.meal-plan-settings"),
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
// Manage All
|
||||
const editState = ref<{ [key: string]: boolean }>({});
|
||||
const allRules = ref<PlanRulesOut[]>([]);
|
||||
|
||||
function toggleEditState(id: string) {
|
||||
editState.value[id] = !editState.value[id];
|
||||
editState.value = { ...editState.value };
|
||||
}
|
||||
|
||||
async function refreshAll() {
|
||||
const { data } = await api.mealplanRules.getAll();
|
||||
|
||||
if (data) {
|
||||
allRules.value = data.items ?? [];
|
||||
}
|
||||
}
|
||||
|
||||
useAsyncData(useAsyncKey(), async () => {
|
||||
await refreshAll();
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
// Creating Rules
|
||||
|
||||
const createDataFormKey = ref(0);
|
||||
const createData = ref<PlanRulesCreate>({
|
||||
entryType: "unset",
|
||||
day: "unset",
|
||||
queryFilterString: "",
|
||||
});
|
||||
|
||||
async function createRule() {
|
||||
const { data } = await api.mealplanRules.createOne(createData.value);
|
||||
if (data) {
|
||||
refreshAll();
|
||||
createData.value = {
|
||||
entryType: "unset",
|
||||
day: "unset",
|
||||
queryFilterString: "",
|
||||
};
|
||||
createDataFormKey.value++;
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteRule(ruleId: string) {
|
||||
const { data } = await api.mealplanRules.deleteOne(ruleId);
|
||||
if (data) {
|
||||
refreshAll();
|
||||
}
|
||||
}
|
||||
|
||||
async function updateRule(rule: PlanRulesOut) {
|
||||
const { data } = await api.mealplanRules.updateOne(rule.id, rule);
|
||||
if (data) {
|
||||
refreshAll();
|
||||
toggleEditState(rule.id);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user