mirror of
https://github.com/mealie-recipes/mealie.git
synced 2026-05-15 22:37:32 -04:00
chore: migrate remaining pages to script setup (#7310)
This commit is contained in:
Kuchenpirat
GitHub
@@ -86,7 +86,7 @@
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<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";
|
||||
@@ -95,185 +95,163 @@ import { useUserMealPlanPreferences } from "~/composables/use-users/preferences"
|
||||
import type { ShoppingListSummary } from "~/lib/api/types/household";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
|
||||
export default defineNuxtComponent({
|
||||
components: {
|
||||
RecipeDialogAddToShoppingList,
|
||||
},
|
||||
setup() {
|
||||
const TABS = {
|
||||
view: "household-mealplan-planner-view",
|
||||
edit: "household-mealplan-planner-edit",
|
||||
};
|
||||
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();
|
||||
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 numberOfDays = ref<number>(mealPlanPreferences.value.numberOfDays || 7);
|
||||
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, new Date());
|
||||
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: new Date(),
|
||||
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) {
|
||||
// The use case for this function is "how many days are we adding to 'today'?"
|
||||
// e.g. If the user wants 7 days, we substract one to do "today + 6"
|
||||
return days > 0 ? days - 1 : days + 1;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
return {
|
||||
TABS,
|
||||
route,
|
||||
state,
|
||||
actions,
|
||||
mealsByDate,
|
||||
weekRange,
|
||||
firstDayOfWeek,
|
||||
numberOfDays,
|
||||
hasRecipes,
|
||||
shoppingLists,
|
||||
weekRecipesWithScales,
|
||||
addAllToList,
|
||||
};
|
||||
},
|
||||
useSeoMeta({
|
||||
title: i18n.t("meal-plan.dinner-this-week"),
|
||||
});
|
||||
|
||||
const mealPlanPreferences = useUserMealPlanPreferences();
|
||||
const numberOfDays = ref<number>(mealPlanPreferences.value.numberOfDays || 7);
|
||||
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, new Date());
|
||||
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: new Date(),
|
||||
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) {
|
||||
// The use case for this function is "how many days are we adding to 'today'?"
|
||||
// e.g. If the user wants 7 days, we substract one to do "today + 6"
|
||||
return days > 0 ? days - 1 : days + 1;
|
||||
}
|
||||
|
||||
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">
|
||||
|
||||
@@ -129,9 +129,9 @@
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
<v-menu offset-y>
|
||||
<template #activator="{ props }">
|
||||
<template #activator="{ props: menuProps }">
|
||||
<v-chip
|
||||
v-bind="props"
|
||||
v-bind="menuProps"
|
||||
label
|
||||
variant="elevated"
|
||||
size="small"
|
||||
@@ -232,7 +232,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { format } from "date-fns";
|
||||
import type { SortableEvent } from "sortablejs";
|
||||
import { VueDraggable } from "vue-draggable-plus";
|
||||
@@ -246,194 +246,157 @@ import { useHouseholdSelf } from "~/composables/use-households";
|
||||
import { normalizeFilter } from "~/composables/use-utils";
|
||||
import { useRecipeSearch } from "~/composables/recipes/use-recipe-search";
|
||||
|
||||
export default defineNuxtComponent({
|
||||
components: {
|
||||
VueDraggable,
|
||||
RecipeCardImage,
|
||||
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] = [];
|
||||
}
|
||||
});
|
||||
},
|
||||
props: {
|
||||
mealplans: {
|
||||
type: Array as () => MealsByDate[],
|
||||
required: true,
|
||||
},
|
||||
actions: {
|
||||
type: Object as () => ReturnType<typeof useMealplans>["actions"],
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const api = useUserApi();
|
||||
const auth = useMealieAuth();
|
||||
const { household } = useHouseholdSelf();
|
||||
const requiredRule = (value: any) => !!value || "Required.";
|
||||
{ immediate: true, deep: true },
|
||||
);
|
||||
|
||||
const state = ref({
|
||||
dialog: false,
|
||||
});
|
||||
function onMoveCallback(evt: SortableEvent) {
|
||||
const supportedEvents = ["drop", "touchend"];
|
||||
|
||||
const firstDayOfWeek = computed(() => {
|
||||
return household.value?.preferences?.firstDayOfWeek || 0;
|
||||
});
|
||||
// Adapted From https://github.com/SortableJS/Vue.Draggable/issues/1029
|
||||
const ogEvent: DragEvent = (evt as any).originalEvent;
|
||||
|
||||
// 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 },
|
||||
);
|
||||
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") ?? "");
|
||||
|
||||
function onMoveCallback(evt: SortableEvent) {
|
||||
const supportedEvents = ["drop", "touchend"];
|
||||
if (!isNaN(fromMealsByIndex) && !isNaN(toMealsByIndex)) {
|
||||
const destDate = props.mealplans[toMealsByIndex].date;
|
||||
const mealData = mealplansByDate[destDate.toString()][evt.newIndex as number];
|
||||
|
||||
// Adapted From https://github.com/SortableJS/Vue.Draggable/issues/1029
|
||||
const ogEvent: DragEvent = (evt as any).originalEvent;
|
||||
mealData.date = format(destDate, "yyyy-MM-dd");
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
props.actions.updateOne(mealData);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =====================================================
|
||||
// New Meal Dialog
|
||||
// =====================================================
|
||||
// New Meal Dialog
|
||||
|
||||
const dialog = reactive({
|
||||
loading: false,
|
||||
error: false,
|
||||
note: false,
|
||||
});
|
||||
const dialog = reactive({
|
||||
loading: false,
|
||||
error: false,
|
||||
note: false,
|
||||
});
|
||||
|
||||
watch(dialog, () => {
|
||||
if (dialog.note) {
|
||||
newMeal.recipeId = undefined;
|
||||
}
|
||||
});
|
||||
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 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 newMealDateString = computed(() => {
|
||||
return format(newMeal.date, "yyyy-MM-dd");
|
||||
});
|
||||
|
||||
const isCreateDisabled = computed(() => {
|
||||
if (dialog.note) {
|
||||
return !newMeal.title.trim();
|
||||
}
|
||||
return !newMeal.recipeId;
|
||||
});
|
||||
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 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;
|
||||
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 || "";
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
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,
|
||||
});
|
||||
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();
|
||||
}
|
||||
}
|
||||
if (data) {
|
||||
props.actions.refreshAll();
|
||||
}
|
||||
}
|
||||
|
||||
// =====================================================
|
||||
// Search
|
||||
// =====================================================
|
||||
// Search
|
||||
|
||||
const search = useRecipeSearch(api);
|
||||
const planTypeOptions = usePlanTypeOptions();
|
||||
const search = useRecipeSearch(api);
|
||||
const planTypeOptions = usePlanTypeOptions();
|
||||
|
||||
onMounted(async () => {
|
||||
await search.trigger();
|
||||
});
|
||||
|
||||
return {
|
||||
state,
|
||||
onMoveCallback,
|
||||
planTypeOptions,
|
||||
getEntryTypeText,
|
||||
requiredRule,
|
||||
isCreateDisabled,
|
||||
normalizeFilter,
|
||||
|
||||
// Dialog
|
||||
dialog,
|
||||
newMeal,
|
||||
newMealDateString,
|
||||
openDialog,
|
||||
editMeal,
|
||||
resetDialog,
|
||||
randomMeal,
|
||||
|
||||
// Search
|
||||
search,
|
||||
firstDayOfWeek,
|
||||
mealplansByDate,
|
||||
};
|
||||
},
|
||||
onMounted(async () => {
|
||||
await search.trigger();
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
<script setup lang="ts">
|
||||
import type { MealsByDate } from "./types";
|
||||
import type { ReadPlanEntry } from "~/lib/api/types/meal-plan";
|
||||
import GroupMealPlanDayContextMenu from "~/components/Domain/Household/GroupMealPlanDayContextMenu.vue";
|
||||
|
||||
@@ -171,102 +171,77 @@
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<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";
|
||||
|
||||
export default defineNuxtComponent({
|
||||
components: {
|
||||
GroupMealPlanRuleForm,
|
||||
RecipeChips,
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const api = useUserApi();
|
||||
const i18n = useI18n();
|
||||
const api = useUserApi();
|
||||
const i18n = useI18n();
|
||||
|
||||
useSeoMeta({
|
||||
title: i18n.t("meal-plan.meal-plan-settings"),
|
||||
});
|
||||
useSeoMeta({
|
||||
title: i18n.t("meal-plan.meal-plan-settings"),
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
// Manage All
|
||||
const editState = ref<{ [key: string]: boolean }>({});
|
||||
const allRules = ref<PlanRulesOut[]>([]);
|
||||
// ======================================================
|
||||
// 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 };
|
||||
}
|
||||
function toggleEditState(id: string) {
|
||||
editState.value[id] = !editState.value[id];
|
||||
editState.value = { ...editState.value };
|
||||
}
|
||||
|
||||
async function refreshAll() {
|
||||
const { data } = await api.mealplanRules.getAll();
|
||||
async function refreshAll() {
|
||||
const { data } = await api.mealplanRules.getAll();
|
||||
|
||||
if (data) {
|
||||
allRules.value = data.items ?? [];
|
||||
}
|
||||
}
|
||||
if (data) {
|
||||
allRules.value = data.items ?? [];
|
||||
}
|
||||
}
|
||||
|
||||
useAsyncData(useAsyncKey(), async () => {
|
||||
await refreshAll();
|
||||
});
|
||||
useAsyncData(useAsyncKey(), async () => {
|
||||
await refreshAll();
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
// Creating Rules
|
||||
// ======================================================
|
||||
// Creating Rules
|
||||
|
||||
const createDataFormKey = ref(0);
|
||||
const createData = ref<PlanRulesCreate>({
|
||||
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: "",
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
allRules,
|
||||
createDataFormKey,
|
||||
createData,
|
||||
createRule,
|
||||
deleteRule,
|
||||
editState,
|
||||
updateRule,
|
||||
toggleEditState,
|
||||
};
|
||||
},
|
||||
});
|
||||
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