Fix filtering for responses aggregated by form

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,13 +32,25 @@ 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 (
     <CardContent>
       <QueryParamsDataTable
         columnVisibility={columnsVisibility}
         columns={formSubmissionsByFormColumnDefs}
         useQuery={(params) => useFormSubmissionsByForm(currentElectionRoundId, params)}
         onRowClick={navigateToAggregatedForm}
+        queryParams={queryParams}
       />
     </CardContent>
   );

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' && <FormSubmissionsByObserverTable searchText={debouncedSearchText} />}
 
-      {byFilter === 'byForm' && <FormSubmissionsAggregatedByFormTable />}
+      {byFilter === 'byForm' && <FormSubmissionsAggregatedByFormTable searchText={debouncedSearchText} />}
     </Card>
   );
 }

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 {
         </SelectTrigger>
         <SelectContent>
           <SelectGroup>
-            <SelectItem key={IncidentReportFollowUpStatus.NotApplicable} value={IncidentReportFollowUpStatus.NotApplicable}>
+            <SelectItem
+              key={IncidentReportFollowUpStatus.NotApplicable}
+              value={IncidentReportFollowUpStatus.NotApplicable}>
               {mapIncidentReportFollowUpStatus(IncidentReportFollowUpStatus.NotApplicable)}
             </SelectItem>
-            <SelectItem key={IncidentReportFollowUpStatus.NeedsFollowUp} value={IncidentReportFollowUpStatus.NeedsFollowUp}>
+            <SelectItem
+              key={IncidentReportFollowUpStatus.NeedsFollowUp}
+              value={IncidentReportFollowUpStatus.NeedsFollowUp}>
               {mapIncidentReportFollowUpStatus(IncidentReportFollowUpStatus.NeedsFollowUp)}
             </SelectItem>
             <SelectItem key={IncidentReportFollowUpStatus.Resolved} value={IncidentReportFollowUpStatus.Resolved}>
@@ -101,7 +109,9 @@ export function IncidentReportsFiltersByEntry(): FunctionComponent {
         </SelectTrigger>
         <SelectContent>
           <SelectGroup>
-            <SelectItem key={IncidentReportLocationType.PollingStation} value={IncidentReportLocationType.PollingStation}>
+            <SelectItem
+              key={IncidentReportLocationType.PollingStation}
+              value={IncidentReportLocationType.PollingStation}>
               {mapIncidentReportLocationType(IncidentReportLocationType.PollingStation)}
             </SelectItem>
             <SelectItem key={IncidentReportLocationType.OtherLocation} value={IncidentReportLocationType.OtherLocation}>
@@ -170,7 +180,10 @@ export function IncidentReportsFiltersByEntry(): FunctionComponent {
 
       <PollingStationsFilters />
 
-      <ResetFiltersButton disabled={!isFiltered} params={{[FILTER_KEY.ViewBy]: 'byEntry', [FILTER_KEY.Tab]: 'incident-reports' }} />
+      <ResetFiltersButton
+        disabled={!isFiltered}
+        params={{ [FILTER_KEY.ViewBy]: 'byEntry', [FILTER_KEY.Tab]: 'incident-reports' }}
+      />
 
       {isFiltered && (
         <div className='flex flex-wrap gap-2 col-span-full'>

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' });

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,