adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-15 19:52:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

add dynamic loading of paginated endpoints above page_limit

Browse Source 
add request classes and fix collection typing for clients, tasks and tags
This commit is contained in:
Gregor Vostrak
2026-02-18 22:32:56 +01:00
parent eed638d0aa
commit 556bbedeca
23 changed files with 386 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
resources/js/utils/fetchAllPages.ts Normal file
View File

@@ -0,0 +1,22 @@
/**
* Fetches all pages from a paginated Laravel API endpoint.
* Uses `meta.last_page` to determine the total number of pages,
* so only a single request is made when all data fits on one page.
*/
export async function fetchAllPages<T>(
fetchPage: (page: number) => Promise<{
data: T[];
meta: { per_page: number; last_page: number };
}>
): Promise<T[]> {
const firstResponse = await fetchPage(1);
const allItems: T[] = [...firstResponse.data];
const { last_page } = firstResponse.meta;
for (let page = 2; page <= last_page; page++) {
const response = await fetchPage(page);
allItems.push(...response.data);
}
return allItems;
}

49
resources/js/utils/prefetch.ts
View File

@@ -8,6 +8,13 @@ import {
createCalendarQueryKey,
fetchAllCalendarEntries,
} from '@/utils/useTimeEntriesCalendarQuery';
import { fetchAllProjects } from '@/utils/useProjectsQuery';
import { fetchAllTasks } from '@/utils/useTasksQuery';
import { fetchAllTags } from '@/utils/useTagsQuery';
import { fetchAllClients } from '@/utils/useClientsQuery';
import { fetchAllMembers } from '@/utils/useMembersQuery';
import { fetchAllReports } from '@/utils/useReportsQuery';
import { fetchAllProjectMembers } from '@/utils/useProjectMembersQuery';
/**
* Route patterns mapped to their prefetch functions.
@@ -152,12 +159,8 @@ function prefetchProjects(queryClient: QueryClient) {
queryClient.prefetchQuery({
queryKey: ['projects', organizationId],
queryFn: () =>
api.getProjects({
params: { organization: organizationId },
queries: { archived: 'all' },
}),
staleTime: 30000, // Consider fresh for 30 seconds
queryFn: async () => ({ data: await fetchAllProjects(organizationId) }),
staleTime: 30000,
});
}
@@ -167,11 +170,7 @@ function prefetchTasks(queryClient: QueryClient) {
queryClient.prefetchQuery({
queryKey: ['tasks', organizationId],
queryFn: () =>
api.getTasks({
params: { organization: organizationId },
queries: { done: 'all' },
}),
queryFn: async () => ({ data: await fetchAllTasks(organizationId) }),
staleTime: 30000,
});
}
@@ -182,10 +181,7 @@ function prefetchTags(queryClient: QueryClient) {
queryClient.prefetchQuery({
queryKey: ['tags', organizationId],
queryFn: () =>
api.getTags({
params: { organization: organizationId },
}),
queryFn: async () => ({ data: await fetchAllTags(organizationId) }),
staleTime: 30000,
});
}
@@ -196,11 +192,7 @@ function prefetchClients(queryClient: QueryClient) {
queryClient.prefetchQuery({
queryKey: ['clients', organizationId],
queryFn: () =>
api.getClients({
params: { organization: organizationId },
queries: { archived: 'all' },
}),
queryFn: async () => ({ data: await fetchAllClients(organizationId) }),
staleTime: 30000,
});
}
@@ -211,10 +203,7 @@ function prefetchMembers(queryClient: QueryClient) {
queryClient.prefetchQuery({
queryKey: ['members', organizationId],
queryFn: () =>
api.getMembers({
params: { organization: organizationId },
}),
queryFn: async () => ({ data: await fetchAllMembers(organizationId) }),
staleTime: 30000,
});
}
@@ -225,10 +214,7 @@ function prefetchReports(queryClient: QueryClient) {
queryClient.prefetchQuery({
queryKey: ['reports', organizationId],
queryFn: () =>
api.getReports({
params: { organization: organizationId },
}),
queryFn: async () => ({ data: await fetchAllReports(organizationId) }),
staleTime: 30000,
});
}
@@ -277,10 +263,9 @@ function prefetchProjectMembers(queryClient: QueryClient, projectId: string) {
queryClient.prefetchQuery({
queryKey: ['projectMembers', organizationId, projectId],
queryFn: () =>
api.getProjectMembers({
params: { organization: organizationId, project: projectId },
}),
queryFn: async () => ({
data: await fetchAllProjectMembers(organizationId, projectId),
}),
staleTime: 30000,
});
}

16
resources/js/utils/useClientsQuery.ts
View File

@@ -3,6 +3,16 @@ import { api } from '@/packages/api/src';
import { getCurrentOrganizationId } from '@/utils/useUser';
import type { Client } from '@/packages/api/src';
import { computed } from 'vue';
import { fetchAllPages } from '@/utils/fetchAllPages';
export async function fetchAllClients(organizationId: string): Promise<Client[]> {
return fetchAllPages((page) =>
api.getClients({
params: { organization: organizationId },
queries: { archived: 'all', page },
})
);
}
export function useClientsQuery() {
const queryClient = useQueryClient();
@@ -12,10 +22,8 @@ export function useClientsQuery() {
queryFn: async () => {
const organizationId = getCurrentOrganizationId();
if (!organizationId) throw new Error('No organization');
return api.getClients({
params: { organization: organizationId },
queries: { archived: 'all' },
});
const data = await fetchAllClients(organizationId);
return { data };
},
enabled: () => !!getCurrentOrganizationId(),
staleTime: 1000 * 30, // 30 seconds

32
resources/js/utils/useInvitations.ts
View File

@@ -1,31 +1,35 @@
import { defineStore } from 'pinia';
import { api } from '@/packages/api/src';
import { computed, ref } from 'vue';
import type {
InvitationsIndexResponse,
CreateInvitationBody,
Invitation,
} from '@/packages/api/src';
import type { CreateInvitationBody, Invitation } from '@/packages/api/src';
import { getCurrentOrganizationId } from '@/utils/useUser';
import { useNotificationsStore } from '@/utils/notification';
import { fetchAllPages } from '@/utils/fetchAllPages';
export async function fetchAllInvitations(organizationId: string): Promise<Invitation[]> {
return fetchAllPages((page) =>
api.getInvitations({
params: { organization: organizationId },
queries: { page },
})
);
}
export const useInvitationsStore = defineStore('invitations', () => {
const invitationsResponse = ref<InvitationsIndexResponse | null>(null);
const invitationsData = ref<Invitation[]>([]);
const { handleApiRequestNotifications } = useNotificationsStore();
async function fetchInvitations() {
const organization = getCurrentOrganizationId();
if (organization) {
invitationsResponse.value = await handleApiRequestNotifications(
() =>
api.getInvitations({
params: {
organization: organization,
},
}),
const data = await handleApiRequestNotifications(
() => fetchAllInvitations(organization),
undefined,
'Failed to fetch invitations'
);
if (data) {
invitationsData.value = data;
}
}
}
@@ -47,7 +51,7 @@ export const useInvitationsStore = defineStore('invitations', () => {
}
const invitations = computed<Invitation[]>(() => {
return invitationsResponse.value?.data || [];
return invitationsData.value;
});
return { invitations, fetchInvitations, createInvitation };

15
resources/js/utils/useMembersQuery.ts
View File

@@ -3,6 +3,16 @@ import { api } from '@/packages/api/src';
import { getCurrentOrganizationId } from '@/utils/useUser';
import type { Member } from '@/packages/api/src';
import { computed } from 'vue';
import { fetchAllPages } from '@/utils/fetchAllPages';
export async function fetchAllMembers(organizationId: string): Promise<Member[]> {
return fetchAllPages((page) =>
api.getMembers({
params: { organization: organizationId },
queries: { page },
})
);
}
export function useMembersQuery() {
const queryClient = useQueryClient();
@@ -12,9 +22,8 @@ export function useMembersQuery() {
queryFn: async () => {
const organizationId = getCurrentOrganizationId();
if (!organizationId) throw new Error('No organization');
return api.getMembers({
params: { organization: organizationId },
});
const data = await fetchAllMembers(organizationId);
return { data };
},
enabled: () => !!getCurrentOrganizationId(),
staleTime: 1000 * 30, // 30 seconds

18
resources/js/utils/useProjectMembersQuery.ts
View File

@@ -3,6 +3,19 @@ import { api } from '@/packages/api/src';
import { getCurrentOrganizationId } from '@/utils/useUser';
import type { ProjectMember } from '@/packages/api/src';
import { computed, type Ref } from 'vue';
import { fetchAllPages } from '@/utils/fetchAllPages';
export async function fetchAllProjectMembers(
organizationId: string,
projectId: string
): Promise<ProjectMember[]> {
return fetchAllPages((page) =>
api.getProjectMembers({
params: { organization: organizationId, project: projectId },
queries: { page },
})
);
}
export function useProjectMembersQuery(projectId: Ref<string | null> | string) {
const queryClient = useQueryClient();
@@ -21,9 +34,8 @@ export function useProjectMembersQuery(projectId: Ref<string | null> | string) {
const organizationId = getCurrentOrganizationId();
const pid = projectIdValue.value;
if (!organizationId || !pid) throw new Error('No organization or project');
return api.getProjectMembers({
params: { organization: organizationId, project: pid },
});
const data = await fetchAllProjectMembers(organizationId, pid);
return { data };
},
enabled: () => !!getCurrentOrganizationId() && !!projectIdValue.value,
staleTime: 1000 * 30, // 30 seconds

16
resources/js/utils/useProjectsQuery.ts
View File

@@ -3,6 +3,16 @@ import { api } from '@/packages/api/src';
import { getCurrentOrganizationId } from '@/utils/useUser';
import type { Project } from '@/packages/api/src';
import { computed } from 'vue';
import { fetchAllPages } from '@/utils/fetchAllPages';
export async function fetchAllProjects(organizationId: string): Promise<Project[]> {
return fetchAllPages((page) =>
api.getProjects({
params: { organization: organizationId },
queries: { archived: 'all', page },
})
);
}
export function useProjectsQuery() {
const queryClient = useQueryClient();
@@ -12,10 +22,8 @@ export function useProjectsQuery() {
queryFn: async () => {
const organizationId = getCurrentOrganizationId();
if (!organizationId) throw new Error('No organization');
return api.getProjects({
params: { organization: organizationId },
queries: { archived: 'all' },
});
const data = await fetchAllProjects(organizationId);
return { data };
},
enabled: () => !!getCurrentOrganizationId(),
staleTime: 1000 * 30, // 30 seconds

12
resources/js/utils/useReportsQuery.ts Normal file
View File

@@ -0,0 +1,12 @@
import { api } from '@/packages/api/src';
import type { Report } from '@/packages/api/src';
import { fetchAllPages } from '@/utils/fetchAllPages';
export async function fetchAllReports(organizationId: string): Promise<Report[]> {
return fetchAllPages((page) =>
api.getReports({
params: { organization: organizationId },
queries: { page },
})
);
}

15
resources/js/utils/useTagsQuery.ts
View File

@@ -3,6 +3,16 @@ import { api } from '@/packages/api/src';
import { getCurrentOrganizationId } from '@/utils/useUser';
import type { Tag } from '@/packages/api/src';
import { computed } from 'vue';
import { fetchAllPages } from '@/utils/fetchAllPages';
export async function fetchAllTags(organizationId: string): Promise<Tag[]> {
return fetchAllPages((page) =>
api.getTags({
params: { organization: organizationId },
queries: { page },
})
);
}
export function useTagsQuery() {
const queryClient = useQueryClient();
@@ -12,9 +22,8 @@ export function useTagsQuery() {
queryFn: async () => {
const organizationId = getCurrentOrganizationId();
if (!organizationId) throw new Error('No organization');
return api.getTags({
params: { organization: organizationId },
});
const data = await fetchAllTags(organizationId);
return { data };
},
enabled: () => !!getCurrentOrganizationId(),
staleTime: 1000 * 30, // 30 seconds

16
resources/js/utils/useTasksQuery.ts
View File

@@ -3,6 +3,16 @@ import { api } from '@/packages/api/src';
import { getCurrentOrganizationId } from '@/utils/useUser';
import type { Task } from '@/packages/api/src';
import { computed } from 'vue';
import { fetchAllPages } from '@/utils/fetchAllPages';
export async function fetchAllTasks(organizationId: string): Promise<Task[]> {
return fetchAllPages((page) =>
api.getTasks({
params: { organization: organizationId },
queries: { done: 'all', page },
})
);
}
export function useTasksQuery() {
const queryClient = useQueryClient();
@@ -12,10 +22,8 @@ export function useTasksQuery() {
queryFn: async () => {
const organizationId = getCurrentOrganizationId();
if (!organizationId) throw new Error('No organization');
return api.getTasks({
params: { organization: organizationId },
queries: { done: 'all' },
});
const data = await fetchAllTasks(organizationId);
return { data };
},
enabled: () => !!getCurrentOrganizationId(),
staleTime: 1000 * 30, // 30 seconds