diff --git a/web/src/features/responses/components/FormSubmissionsAggregatedByFormTable/FormSubmissionsAggregatedByFormTable.tsx b/web/src/features/responses/components/FormSubmissionsAggregatedByFormTable/FormSubmissionsAggregatedByFormTable.tsx index f1280f9b5..6a4b079f9 100644 --- a/web/src/features/responses/components/FormSubmissionsAggregatedByFormTable/FormSubmissionsAggregatedByFormTable.tsx +++ b/web/src/features/responses/components/FormSubmissionsAggregatedByFormTable/FormSubmissionsAggregatedByFormTable.tsx @@ -1,19 +1,29 @@ -import { getRouteApi } from '@tanstack/react-router'; -import { useCallback } from 'react'; import { FunctionComponent } from '@/common/types'; import { CardContent } from '@/components/ui/card'; import { QueryParamsDataTable } from '@/components/ui/DataTable/QueryParamsDataTable'; +import { useCurrentElectionRoundStore } from '@/context/election-round.store'; +import { getRouteApi } from '@tanstack/react-router'; +import { useDebounce } from '@uidotdev/usehooks'; +import { useCallback, useMemo } from 'react'; import { useFormSubmissionsByForm } from '../../hooks/form-submissions-queries'; +import { FormSubmissionsSearchParams } from '../../models/search-params'; import { useFormSubmissionsByFormColumns } from '../../store/column-visibility'; import { formSubmissionsByFormColumnDefs } from '../../utils/column-defs'; -import { useCurrentElectionRoundStore } from '@/context/election-round.store'; const routeApi = getRouteApi('/responses/'); -export function FormSubmissionsAggregatedByFormTable(): FunctionComponent { +type FormSubmissionsByFormTableProps = { + searchText: string; +}; + +export function FormSubmissionsAggregatedByFormTable({ + searchText, +}: FormSubmissionsByFormTableProps): FunctionComponent { const columnsVisibility = useFormSubmissionsByFormColumns(); const navigate = routeApi.useNavigate(); const currentElectionRoundId = useCurrentElectionRoundStore((s) => s.currentElectionRoundId); + const search = routeApi.useSearch(); + const debouncedSearch = useDebounce(search, 300); const navigateToAggregatedForm = useCallback( (formId: string) => { @@ -22,6 +32,17 @@ export function FormSubmissionsAggregatedByFormTable(): FunctionComponent { [navigate] ); + const queryParams = useMemo(() => { + const params = [ + ['searchText', searchText], + ['hasFlaggedAnswers', debouncedSearch.hasFlaggedAnswers], + ['hasNotes', debouncedSearch.hasNotes], + ['hasAttachments', debouncedSearch.hasAttachments], + ].filter(([_, value]) => value); + + return Object.fromEntries(params) as FormSubmissionsSearchParams; + }, [searchText, debouncedSearch]); + return ( useFormSubmissionsByForm(currentElectionRoundId, params)} onRowClick={navigateToAggregatedForm} + queryParams={queryParams} /> ); diff --git a/web/src/features/responses/components/FormSubmissionsTab/FormSubmissionsTab.tsx b/web/src/features/responses/components/FormSubmissionsTab/FormSubmissionsTab.tsx index 400608036..f88d5303b 100644 --- a/web/src/features/responses/components/FormSubmissionsTab/FormSubmissionsTab.tsx +++ b/web/src/features/responses/components/FormSubmissionsTab/FormSubmissionsTab.tsx @@ -16,17 +16,17 @@ import { useDebounce } from '@uidotdev/usehooks'; import { useState, type ChangeEvent } from 'react'; import { ExportedDataType } from '../../models/data-export'; import type { FormSubmissionsViewBy } from '../../utils/column-visibility-options'; -import { FormSubmissionsColumnsVisibilitySelector } from '../FormSubmissionsColumnsVisibilitySelector/FormSubmissionsColumnsVisibilitySelector'; import { ExportDataButton } from '../ExportDataButton/ExportDataButton'; import { FormSubmissionsAggregatedByFormTable } from '../FormSubmissionsAggregatedByFormTable/FormSubmissionsAggregatedByFormTable'; import { FormSubmissionsByEntryTable } from '../FormSubmissionsByEntryTable/FormSubmissionsByEntryTable'; +import { FormSubmissionsColumnsVisibilitySelector } from '../FormSubmissionsColumnsVisibilitySelector/FormSubmissionsColumnsVisibilitySelector'; import { FunctionComponent } from '@/common/types'; +import { FILTER_KEY } from '@/features/filtering/filtering-enums'; import { FormSubmissionsByObserverTable } from '../FormSubmissionsByObserverTable/FormSubmissionsByObserverTable'; -import { FormSubmissionsFiltersByForm } from '../FormSubmissionsFiltersByForm/FormSubmissionsFiltersByForm'; import { FormSubmissionsFiltersByEntry } from '../FormSubmissionsFiltersByEntry/FormSubmissionsFiltersByEntry'; +import { FormSubmissionsFiltersByForm } from '../FormSubmissionsFiltersByForm/FormSubmissionsFiltersByForm'; import { FormSubmissionsFiltersByObserver } from '../FormSubmissionsFiltersByObserver/FormSubmissionsFiltersByObserver'; -import { FILTER_KEY } from '@/features/filtering/filtering-enums'; const routeApi = getRouteApi('/responses/'); @@ -122,7 +122,7 @@ export default function FormSubmissionsTab(): FunctionComponent { {byFilter === 'byObserver' && } - {byFilter === 'byForm' && } + {byFilter === 'byForm' && } ); } diff --git a/web/src/features/responses/components/IncidentReportsFiltersByEntry/IncidentReportsFiltersByEntry.tsx b/web/src/features/responses/components/IncidentReportsFiltersByEntry/IncidentReportsFiltersByEntry.tsx index 6fee76fba..ffab9892a 100644 --- a/web/src/features/responses/components/IncidentReportsFiltersByEntry/IncidentReportsFiltersByEntry.tsx +++ b/web/src/features/responses/components/IncidentReportsFiltersByEntry/IncidentReportsFiltersByEntry.tsx @@ -3,14 +3,18 @@ import { FunctionComponent, IncidentReportFollowUpStatus, QuestionsAnswered } fr import { PollingStationsFilters } from '@/components/PollingStationsFilters/PollingStationsFilters'; import { FilterBadge } from '@/components/ui/badge'; import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; +import { FILTER_KEY } from '@/features/filtering/filtering-enums'; import { Route } from '@/routes/responses'; import { useNavigate } from '@tanstack/react-router'; import { useCallback } from 'react'; import { IncidentReportLocationType } from '../../models/incident-report'; import type { FormSubmissionsSearchParams } from '../../models/search-params'; -import { mapIncidentReportFollowUpStatus as mapIncidentReportFollowUpStatus, mapIncidentReportLocationType, mapQuestionsAnswered } from '../../utils/helpers'; +import { + mapIncidentReportFollowUpStatus, + mapIncidentReportLocationType, + mapQuestionsAnswered, +} from '../../utils/helpers'; import { ResetFiltersButton } from '../ResetFiltersButton/ResetFiltersButton'; -import { FILTER_KEY } from '@/features/filtering/filtering-enums'; export function IncidentReportsFiltersByEntry(): FunctionComponent { const navigate = useNavigate({ from: '/responses' }); @@ -78,10 +82,14 @@ export function IncidentReportsFiltersByEntry(): FunctionComponent { - + {mapIncidentReportFollowUpStatus(IncidentReportFollowUpStatus.NotApplicable)} - + {mapIncidentReportFollowUpStatus(IncidentReportFollowUpStatus.NeedsFollowUp)} @@ -101,7 +109,9 @@ export function IncidentReportsFiltersByEntry(): FunctionComponent { - + {mapIncidentReportLocationType(IncidentReportLocationType.PollingStation)} @@ -170,7 +180,10 @@ export function IncidentReportsFiltersByEntry(): FunctionComponent { - + {isFiltered && (
diff --git a/web/src/features/responses/components/IncidentReportsFiltersByObserver/IncidentReportsFiltersByObserver.tsx b/web/src/features/responses/components/IncidentReportsFiltersByObserver/IncidentReportsFiltersByObserver.tsx index 43aaf5294..fbed1f3b0 100644 --- a/web/src/features/responses/components/IncidentReportsFiltersByObserver/IncidentReportsFiltersByObserver.tsx +++ b/web/src/features/responses/components/IncidentReportsFiltersByObserver/IncidentReportsFiltersByObserver.tsx @@ -9,6 +9,7 @@ import { } from '@/components/ui/dropdown-menu'; import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { useCurrentElectionRoundStore } from '@/context/election-round.store'; +import { FILTER_KEY } from '@/features/filtering/filtering-enums'; import { useMonitoringObserversTags } from '@/hooks/tags-queries'; import { Route } from '@/routes/responses'; import { ChevronDownIcon } from '@heroicons/react/24/outline'; @@ -17,7 +18,6 @@ import { useCallback } from 'react'; import type { FormSubmissionsSearchParams } from '../../models/search-params'; import { mapIncidentReportFollowUpStatus } from '../../utils/helpers'; import { ResetFiltersButton } from '../ResetFiltersButton/ResetFiltersButton'; -import { FILTER_KEY } from '@/features/filtering/filtering-enums'; export function IncidentReportsFiltersByObserver(): FunctionComponent { const navigate = useNavigate({ from: '/responses' }); diff --git a/web/src/features/responses/hooks/form-submissions-queries.ts b/web/src/features/responses/hooks/form-submissions-queries.ts index 3d84b1715..673644ddd 100644 --- a/web/src/features/responses/hooks/form-submissions-queries.ts +++ b/web/src/features/responses/hooks/form-submissions-queries.ts @@ -120,7 +120,7 @@ export function useFormSubmissionsByForm( queryParams: DataTableParameters ): UseFormSubmissionsByFormResult { return useQuery({ - queryKey: formSubmissionsAggregatedKeys.all(electionRoundId), + queryKey: formSubmissionsAggregatedKeys.list(electionRoundId, queryParams), queryFn: async () => { const params = { ...queryParams.otherParams,