Cutlery/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-06-02 21:25:45 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add date range to useMealplans composable (#888)

Browse Source 
This fixes #857 by passing a date range ref to useMealplans, so that the meal plans are re-queried whenever the date range changes.
This commit is contained in:
Philipp Fischbeck 2022-01-05 22:20:57 +01:00 committed by GitHub
parent 74e13682cb
commit 1482f51fcd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/composables/use-group-mealplan.ts
View File

@ -1,5 +1,5 @@
import { useAsync, ref } from "@nuxtjs/composition-api"; import { useAsync, ref, Ref, watch } from "@nuxtjs/composition-api";
import { addDays, subDays, format } from "date-fns"; import { format } from "date-fns";
import { useAsyncKey } from "./use-utils"; import { useAsyncKey } from "./use-utils";
import { useUserApi } from "~/composables/api"; import { useUserApi } from "~/composables/api";
import { CreateMealPlan, UpdateMealPlan } from "~/api/class-interfaces/group-mealplan"; import { CreateMealPlan, UpdateMealPlan } from "~/api/class-interfaces/group-mealplan";
@ -13,7 +13,12 @@ export const planTypeOptions = [
{ text: "Snack", value: "snack" }, { text: "Snack", value: "snack" },
]; ];
export const useMealplans = function () { export interface DateRange {
start: Date;
end: Date;
}
export const useMealplans = function (range: Ref<DateRange>) {
const api = useUserApi(); const api = useUserApi();
const loading = ref(false); const loading = ref(false);
const validForm = ref(true); const validForm = ref(true);
@ -23,8 +28,8 @@ export const useMealplans = function () {
loading.value = true; loading.value = true;
const units = useAsync(async () => { const units = useAsync(async () => {
const query = { const query = {
start: format(subDays(new Date(), 30), "yyyy-MM-dd"), start: format(range.value.start, "yyyy-MM-dd"),
limit: format(addDays(new Date(), 30), "yyyy-MM-dd"), limit: format(range.value.end, "yyyy-MM-dd"),
}; };
// @ts-ignore // @ts-ignore
const { data } = await api.mealplans.getAll(query.start, query.limit); const { data } = await api.mealplans.getAll(query.start, query.limit);
@ -38,8 +43,8 @@ export const useMealplans = function () {
async refreshAll() { async refreshAll() {
loading.value = true; loading.value = true;
const query = { const query = {
start: format(subDays(new Date(), 30), "yyyy-MM-dd"), start: format(range.value.start, "yyyy-MM-dd"),
limit: format(addDays(new Date(), 30), "yyyy-MM-dd"), limit: format(range.value.end, "yyyy-MM-dd"),
}; };
// @ts-ignore // @ts-ignore
const { data } = await api.mealplans.getAll(query.start, query.limit); const { data } = await api.mealplans.getAll(query.start, query.limit);
@ -90,5 +95,7 @@ export const useMealplans = function () {
const mealplans = actions.getAll(); const mealplans = actions.getAll();
watch(range, actions.refreshAll);
return { mealplans, actions, validForm, loading }; return { mealplans, actions, validForm, loading };
}; };

28
frontend/pages/meal-plan/planner.vue
View File

@ -218,19 +218,25 @@ export default defineComponent({
RecipeCard, RecipeCard,
}, },
setup() { setup() {
const { mealplans, actions, loading } = useMealplans();
useRecipes(true, true);
const state = reactive({ const state = reactive({
createMealDialog: false, createMealDialog: false,
edit: false, edit: false,
hover: {}, hover: {},
pickerMenu: null, pickerMenu: null,
start: null as Date | null,
today: new Date(), today: new Date(),
end: null as Date | null,
}); });
const weekRange = computed(() => {
return {
start: subDays(state.today, 1),
end: addDays(state.today, 6),
};
});
const { mealplans, actions, loading } = useMealplans(weekRange);
useRecipes(true, true);
function filterMealByDate(date: Date) { function filterMealByDate(date: Date) {
if (!mealplans.value) return; if (!mealplans.value) return;
return mealplans.value.filter((meal) => { return mealplans.value.filter((meal) => {
@ -241,13 +247,11 @@ export default defineComponent({
function forwardOneWeek() { function forwardOneWeek() {
if (!state.today) return; if (!state.today) return;
// @ts-ignore
state.today = addDays(state.today, +5); state.today = addDays(state.today, +5);
} }
function backOneWeek() { function backOneWeek() {
if (!state.today) return; if (!state.today) return;
// @ts-ignore
state.today = addDays(state.today, -5); state.today = addDays(state.today, -5);
} }
@ -282,16 +286,7 @@ export default defineComponent({
}); });
}); });
const weekRange = computed(() => {
// @ts-ignore - Not Sure Why This is not working
const end = addDays(state.today, 6);
// @ts-ignore - Not sure why the type is invalid
const start = subDays(state.today, 1);
return { start, end, today: state.today };
});
const days = computed(() => { const days = computed(() => {
if (weekRange.value?.start === null) return [];
return Array.from(Array(8).keys()).map( return Array.from(Array(8).keys()).map(
// @ts-ignore // @ts-ignore
(i) => new Date(weekRange.value.start.getTime() + i * 24 * 60 * 60 * 1000) (i) => new Date(weekRange.value.start.getTime() + i * 24 * 60 * 60 * 1000)
@ -390,4 +385,3 @@ export default defineComponent({
border-bottom: 2px solid var(--v-primary-base) !important; border-bottom: 2px solid var(--v-primary-base) !important;
} }
</style> </style>