Mirrors/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2026-04-19 19:35:36 -04:00
Code Issues Packages Projects Releases Wiki Activity

chore: Nuxt 4 upgrade (#7426)

Browse Source
This commit is contained in:
Kuchenpirat
2026-04-08 17:25:41 +02:00
committed by GitHub
parent 70a251a331
commit d3e41582ae
561 changed files with 1840 additions and 2750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/composables/partials/types.ts
View File

@@ -1,3 +0,0 @@
export type BoundT = {
id?: string | number | null;
};

58
frontend/composables/partials/use-actions-factory.test.ts
View File

@@ -1,58 +0,0 @@
import { describe, expect, test, vi } from "vitest";
import { ref } from "vue";
import { useStoreActions } from "./use-actions-factory";
import type { BaseCRUDAPI } from "~/lib/api/base/base-clients";
describe("useStoreActions", () => {
const mockApi = {
getAll: vi.fn(),
createOne: vi.fn(),
updateOne: vi.fn(),
deleteOne: vi.fn(),
} as unknown as BaseCRUDAPI<unknown, unknown, unknown>;
const mockStore = ref([]);
const mockLoading = ref(false);
test("deleteMany calls deleteOne for each ID and refreshes once", async () => {
const actions = useStoreActions("test-store", mockApi, mockStore, mockLoading);
mockApi.deleteOne = vi.fn().mockResolvedValue({ response: { data: {} } });
mockApi.getAll = vi.fn().mockResolvedValue({ data: { items: [] } });
const ids = ["1", "2", "3"];
await actions.deleteMany(ids);
expect(mockApi.deleteOne).toHaveBeenCalledTimes(3);
expect(mockApi.deleteOne).toHaveBeenCalledWith("1");
expect(mockApi.deleteOne).toHaveBeenCalledWith("2");
expect(mockApi.deleteOne).toHaveBeenCalledWith("3");
expect(mockApi.getAll).toHaveBeenCalledTimes(1);
});
test("deleteMany handles empty array", async () => {
const actions = useStoreActions("test-store", mockApi, mockStore, mockLoading);
mockApi.deleteOne = vi.fn();
mockApi.getAll = vi.fn().mockResolvedValue({ data: { items: [] } });
await actions.deleteMany([]);
expect(mockApi.deleteOne).not.toHaveBeenCalled();
expect(mockApi.getAll).toHaveBeenCalledTimes(1);
});
test("deleteMany sets loading state", async () => {
const actions = useStoreActions("test-store", mockApi, mockStore, mockLoading);
mockApi.deleteOne = vi.fn().mockResolvedValue({});
mockApi.getAll = vi.fn().mockResolvedValue({ data: { items: [] } });
const promise = actions.deleteMany(["1"]);
expect(mockLoading.value).toBe(true);
await promise;
expect(mockLoading.value).toBe(false);
});
});

194
frontend/composables/partials/use-actions-factory.ts
View File

@@ -1,194 +0,0 @@
import type { AsyncData, NuxtError } from "#app";
import type { BoundT } from "./types";
import type { BaseCRUDAPI, BaseCRUDAPIReadOnly } from "~/lib/api/base/base-clients";
import type { QueryValue } from "~/lib/api/base/route";
interface ReadOnlyStoreActions<T extends BoundT> {
getAll(page?: number, perPage?: number, params?: any): AsyncData<T[] | null, NuxtError<unknown> | null>;
refresh(page?: number, perPage?: number, params?: any): Promise<void>;
}
interface StoreActions<T extends BoundT> extends ReadOnlyStoreActions<T> {
createOne(createData: T): Promise<T | null>;
updateOne(updateData: T): Promise<T | null>;
deleteOne(id: string | number): Promise<T | null>;
deleteMany(ids: (string | number)[]): Promise<void>;
}
/**
* useReadOnlyActions is a factory function that returns a set of methods
* that can be reused to manage the state of a data store without using
* Vuex. This is primarily used for basic GET/GETALL operations that required
* a lot of refreshing hooks to be called on operations
*/
export function useReadOnlyActions<T extends BoundT>(
storeKey: string,
api: BaseCRUDAPIReadOnly<T>,
allRef: Ref<T[] | null> | null,
loading: Ref<boolean>,
defaultQueryParams: Record<string, QueryValue> = {},
): ReadOnlyStoreActions<T> {
function getAll(page = 1, perPage = -1, params = {} as Record<string, QueryValue>) {
params = { ...defaultQueryParams, ...params };
params.orderBy ??= "name";
params.orderDirection ??= "asc";
const allItems = useAsyncData(storeKey, async () => {
loading.value = true;
try {
const { data } = await api.getAll(page, perPage, params);
if (data && allRef) {
allRef.value = data.items;
}
if (data) {
return data.items ?? [];
}
else {
return [];
}
}
finally {
loading.value = false;
}
});
return allItems;
}
async function refresh(page = 1, perPage = -1, params = {} as Record<string, QueryValue>) {
params = { ...defaultQueryParams, ...params };
params.orderBy ??= "name";
params.orderDirection ??= "asc";
loading.value = true;
const { data } = await api.getAll(page, perPage, params);
if (data && data.items && allRef) {
allRef.value = data.items;
}
loading.value = false;
}
return {
getAll,
refresh,
};
}
/**
* useStoreActions is a factory function that returns a set of methods
* that can be reused to manage the state of a data store without using
* Vuex. This is primarily used for basic CRUD operations that required
* a lot of refreshing hooks to be called on operations
*/
export function useStoreActions<T extends BoundT>(
storeKey: string,
api: BaseCRUDAPI<unknown, T, unknown>,
allRef: Ref<T[] | null> | null,
loading: Ref<boolean>,
defaultQueryParams: Record<string, QueryValue> = {},
): StoreActions<T> {
function getAll(page = 1, perPage = -1, params = {} as Record<string, QueryValue>) {
params = { ...defaultQueryParams, ...params };
params.orderBy ??= "name";
params.orderDirection ??= "asc";
const allItems = useAsyncData(storeKey, async () => {
loading.value = true;
try {
const { data } = await api.getAll(page, perPage, params);
if (data && allRef) {
allRef.value = data.items;
}
if (data) {
return data.items ?? [];
}
else {
return [];
}
}
finally {
loading.value = false;
}
});
return allItems;
}
async function refresh(page = 1, perPage = -1, params = {} as Record<string, QueryValue>) {
params = { ...defaultQueryParams, ...params };
params.orderBy ??= "name";
params.orderDirection ??= "asc";
loading.value = true;
const { data } = await api.getAll(page, perPage, params);
if (data && data.items && allRef) {
allRef.value = data.items;
}
loading.value = false;
}
async function createOne(createData: T) {
loading.value = true;
const { data } = await api.createOne(createData);
if (data && allRef?.value) {
allRef.value.push(data);
}
else {
await refresh();
}
loading.value = false;
return data;
}
async function updateOne(updateData: T) {
if (!updateData.id) {
return null;
}
loading.value = true;
const { data } = await api.updateOne(updateData.id, updateData);
if (data && allRef?.value) {
await refresh();
}
loading.value = false;
return data;
}
async function deleteOne(id: string | number) {
loading.value = true;
const { response } = await api.deleteOne(id);
if (response && allRef?.value) {
await refresh();
}
loading.value = false;
return response?.data || null;
}
async function deleteMany(ids: (string | number)[]) {
loading.value = true;
for (const id of ids) {
await api.deleteOne(id);
}
if (allRef?.value) {
await refresh();
}
loading.value = false;
}
return {
getAll,
refresh,
createOne,
updateOne,
deleteOne,
deleteMany,
};
}

65
frontend/composables/partials/use-store-factory.ts
View File

@@ -1,65 +0,0 @@
import { useReadOnlyActions, useStoreActions } from "./use-actions-factory";
import type { BoundT } from "./types";
import type { BaseCRUDAPI, BaseCRUDAPIReadOnly } from "~/lib/api/base/base-clients";
import type { QueryValue } from "~/lib/api/base/route";
export const useData = function <T extends BoundT>(defaultObject: T) {
const data = reactive({ ...defaultObject });
function reset() {
Object.assign(data, defaultObject);
};
return { data, reset };
};
export const useReadOnlyStore = function <T extends BoundT>(
storeKey: string,
store: Ref<T[]>,
loading: Ref<boolean>,
api: BaseCRUDAPIReadOnly<T>,
params = {} as Record<string, QueryValue>,
) {
const storeActions = useReadOnlyActions(`${storeKey}-store-readonly`, api, store, loading);
const actions = {
...storeActions,
async refresh() {
return await storeActions.refresh(1, -1, params);
},
flushStore() {
store.value = [];
},
};
// initial hydration
if (!loading.value && !store.value.length) {
actions.refresh();
}
return { store, actions };
};
export const useStore = function <T extends BoundT>(
storeKey: string,
store: Ref<T[]>,
loading: Ref<boolean>,
api: BaseCRUDAPI<unknown, T, unknown>,
params = {} as Record<string, QueryValue>,
) {
const storeActions = useStoreActions(`${storeKey}-store`, api, store, loading);
const actions = {
...storeActions,
async refresh() {
return await storeActions.refresh(1, -1, params);
},
flushStore() {
store.value = [];
},
};
// initial hydration
if (!loading.value && !store.value.length) {
actions.refresh();
}
return { store, actions };
};