mealie/frontend/composables/use-group-mealplan.ts
Michael Genson cb15db2d27
feat: re-write get all routes to use pagination (#1424)
rewrite get_all routes to use a pagination pattern to allow for better implementations of search, filter, and sorting on the frontend or by any client without fetching all the data. Additionally we added a CI check for running the Nuxt built to confirm that no TS errors were present. Finally, I had to remove the header support for the Shopping lists as the browser caching based off last_updated header was not allowing it to read recent updates due to how we're handling the updated_at property in the database with nested fields. This will have to be looked at in the future to reimplement. I'm unsure how many other routes have a similar issue. 

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>
2022-06-25 11:39:38 -08:00

103 lines
2.8 KiB
TypeScript

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 { CreatePlanEntry, PlanEntryType, UpdatePlanEntry } from "~/types/api-types/meal-plan";
export const planTypeOptions = [
{ text: "Breakfast", value: "breakfast" },
{ text: "Lunch", value: "lunch" },
{ text: "Dinner", value: "dinner" },
{ text: "Side", value: "side" },
];
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);
const actions = {
getAll() {
loading.value = true;
const units = useAsync(async () => {
const query = {
start: format(range.value.start, "yyyy-MM-dd"),
limit: format(range.value.end, "yyyy-MM-dd"),
};
// @ts-ignore TODO Modify typing to allow for string start+limit for mealplans
const { data } = await api.mealplans.getAll(1, -1, { start: query.start, limit: query.limit });
if (data) {
return data.items;
} else {
return null;
}
}, useAsyncKey());
loading.value = false;
return units;
},
async refreshAll(this: void) {
loading.value = true;
const query = {
start: format(range.value.start, "yyyy-MM-dd"),
limit: format(range.value.end, "yyyy-MM-dd"),
};
// @ts-ignore TODO Modify typing to allow for string start+limit for mealplans
const { data } = await api.mealplans.getAll(1, -1, { start: query.start, limit: query.limit });
if (data && data.items) {
mealplans.value = data.items;
}
loading.value = false;
},
async createOne(payload: CreatePlanEntry) {
loading.value = true;
const { data } = await api.mealplans.createOne(payload);
if (data) {
this.refreshAll();
}
loading.value = false;
},
async updateOne(updateData: UpdatePlanEntry) {
if (!updateData.id) {
return;
}
loading.value = true;
const { data } = await api.mealplans.updateOne(updateData.id, updateData);
if (data) {
this.refreshAll();
}
loading.value = false;
},
async deleteOne(id: string | number) {
loading.value = true;
const { data } = await api.mealplans.deleteOne(id);
if (data) {
this.refreshAll();
}
},
async setType(payload: UpdatePlanEntry, type: PlanEntryType) {
payload.entryType = type;
await this.updateOne(payload);
},
};
const mealplans = actions.getAll();
watch(range, actions.refreshAll);
return { mealplans, actions, validForm, loading };
};