refactor: extract ReportingFilterBar and migrate reporting to TanStack Query

This commit is contained in:
Gregor Vostrak
2026-02-02 01:03:00 +01:00
parent 756b423295
commit bc562bf76f
6 changed files with 139 additions and 404 deletions

View File

@@ -1,13 +1,6 @@
import { defineStore } from 'pinia';
import { api } from '@/packages/api/src';
import { type Component, computed, ref } from 'vue';
import type {
AggregatedTimeEntries,
AggregatedTimeEntriesQueryParams,
ReportingResponse,
} from '@/packages/api/src';
import { getCurrentOrganizationId, getCurrentRole, getCurrentUser } from '@/utils/useUser';
import { useNotificationsStore } from '@/utils/notification';
import { type Component } from 'vue';
import { getCurrentRole, getCurrentUser } from '@/utils/useUser';
import { useProjectsQuery } from '@/utils/useProjectsQuery';
import { useMembersQuery } from '@/utils/useMembersQuery';
import { useTasksQuery } from '@/utils/useTasksQuery';
@@ -27,11 +20,6 @@ export type GroupingOption =
| 'tag';
export const useReportingStore = defineStore('reporting', () => {
const reportingGraphResponse = ref<ReportingResponse | null>(null);
const reportingTableResponse = ref<ReportingResponse | null>(null);
const { handleApiRequestNotifications } = useNotificationsStore();
// Cache query composables to avoid creating new subscriptions on every call
const { projects } = useProjectsQuery();
const { members } = useMembersQuery();
@@ -39,48 +27,6 @@ export const useReportingStore = defineStore('reporting', () => {
const { clients } = useClientsQuery();
const { tags } = useTagsQuery();
async function fetchGraphReporting(params: AggregatedTimeEntriesQueryParams) {
const organization = getCurrentOrganizationId();
if (organization) {
reportingGraphResponse.value = await handleApiRequestNotifications(
() =>
api.getAggregatedTimeEntries({
params: {
organization: organization,
},
queries: params,
}),
undefined,
'Failed to fetch reporting data'
);
}
}
async function fetchTableReporting(params: AggregatedTimeEntriesQueryParams) {
const organization = getCurrentOrganizationId();
if (organization) {
reportingTableResponse.value = await handleApiRequestNotifications(
() =>
api.getAggregatedTimeEntries({
params: {
organization: organization,
},
queries: params,
}),
undefined,
'Failed to fetch reporting data'
);
}
}
const aggregatedGraphTimeEntries = computed<AggregatedTimeEntries>(() => {
return reportingGraphResponse.value?.data as AggregatedTimeEntries;
});
const aggregatedTableTimeEntries = computed<AggregatedTimeEntries>(() => {
return reportingTableResponse.value?.data as AggregatedTimeEntries;
});
const emptyPlaceholder = {
user: 'No User',
project: 'No Project',
@@ -170,10 +116,6 @@ export const useReportingStore = defineStore('reporting', () => {
];
return {
aggregatedGraphTimeEntries,
fetchGraphReporting,
fetchTableReporting,
aggregatedTableTimeEntries,
getNameForReportingRowEntry,
groupByOptions,
emptyPlaceholder,