mealie/frontend/composables/recipes/use-recipe-tools.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

101 lines
2.1 KiB
TypeScript

import { reactive, ref, useAsync } from "@nuxtjs/composition-api";
import { useAsyncKey } from "../use-utils";
import { useUserApi } from "~/composables/api";
import { VForm } from "~/types/vuetify";
import { RecipeTool } from "~/types/api-types/user";
export const useTools = function (eager = true) {
const workingToolData = reactive<RecipeTool>({
id: "",
name: "",
slug: "",
onHand: false,
});
const api = useUserApi();
const loading = ref(false);
const validForm = ref(false);
const actions = {
getAll() {
loading.value = true;
const units = useAsync(async () => {
const { data } = await api.tools.getAll();
if (data) {
return data.items;
} else {
return null;
}
}, useAsyncKey());
loading.value = false;
return units;
},
async refreshAll() {
loading.value = true;
const { data } = await api.tools.getAll();
if (data) {
tools.value = data.items;
}
loading.value = false;
},
async createOne(domForm: VForm | null = null) {
if (domForm && !domForm.validate()) {
validForm.value = false;
}
loading.value = true;
const { data } = await api.tools.createOne(workingToolData);
if (data) {
tools.value?.push(data);
}
domForm?.reset();
this.reset();
},
async updateOne() {
loading.value = true;
const { data } = await api.tools.updateOne(workingToolData.id, workingToolData);
if (data) {
tools.value?.push(data);
}
this.reset();
},
async deleteOne(id: number) {
loading.value = true;
await api.tools.deleteOne(id);
this.reset();
},
reset() {
workingToolData.name = "";
workingToolData.id = "";
loading.value = false;
validForm.value = true;
},
};
const tools = (() => {
if (eager) {
return actions.getAll();
} else {
return ref([]);
}
})();
return {
tools,
actions,
workingToolData,
loading,
};
};