Mirrors/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-11-03 18:53:17 -05: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
2 changed files with 26 additions and 25 deletions
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 { addDays, subDays, format } from "date-fns";
import { useAsync, ref, Ref, watch } from "@nuxtjs/composition-api";
import { format } from "date-fns";
import { useAsyncKey } from "./use-utils";
import { useUserApi } from "~/composables/api";
import { CreateMealPlan, UpdateMealPlan } from "~/api/class-interfaces/group-mealplan";
@@ -13,7 +13,12 @@ export const planTypeOptions = [
{ 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 loading = ref(false);
const validForm = ref(true);
@@ -23,8 +28,8 @@ export const useMealplans = function () {
loading.value = true;
const units = useAsync(async () => {
const query = {
start: format(subDays(new Date(), 30), "yyyy-MM-dd"),
limit: format(addDays(new Date(), 30), "yyyy-MM-dd"),
start: format(range.value.start, "yyyy-MM-dd"),
limit: format(range.value.end, "yyyy-MM-dd"),
};
// @ts-ignore
const { data } = await api.mealplans.getAll(query.start, query.limit);
@@ -38,8 +43,8 @@ export const useMealplans = function () {
async refreshAll() {
loading.value = true;
const query = {
start: format(subDays(new Date(), 30), "yyyy-MM-dd"),
limit: format(addDays(new Date(), 30), "yyyy-MM-dd"),
start: format(range.value.start, "yyyy-MM-dd"),
limit: format(range.value.end, "yyyy-MM-dd"),
};
// @ts-ignore
const { data } = await api.mealplans.getAll(query.start, query.limit);
@@ -90,5 +95,7 @@ export const useMealplans = function () {
const mealplans = actions.getAll();
watch(range, actions.refreshAll);
return { mealplans, actions, validForm, loading };
};

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

@@ -218,19 +218,25 @@ export default defineComponent({
RecipeCard,
},
setup() {
const { mealplans, actions, loading } = useMealplans();
useRecipes(true, true);
const state = reactive({
createMealDialog: false,
edit: false,
hover: {},
pickerMenu: null,
start: null as Date | null,
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) {
if (!mealplans.value) return;
return mealplans.value.filter((meal) => {
@@ -241,13 +247,11 @@ export default defineComponent({
function forwardOneWeek() {
if (!state.today) return;
// @ts-ignore
state.today = addDays(state.today, +5);
}
function backOneWeek() {
if (!state.today) return;
// @ts-ignore
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(() => {
if (weekRange.value?.start === null) return [];
return Array.from(Array(8).keys()).map(
// @ts-ignore
(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;
}
</style>