chore: Nuxt 4 upgrade (#7426)

frontend/app/composables/partials/types.ts

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

frontend/app/composables/partials/use-actions-factory.test.ts

@@ -0,0 +1,58 @@
+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);
+  });
+});

frontend/app/composables/partials/use-actions-factory.ts

@@ -0,0 +1,194 @@
+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,
+  };
+}

frontend/app/composables/partials/use-store-factory.ts

@@ -0,0 +1,65 @@
+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 };
+};