Rework filtering for form responses

web/src/features/election-event/components/Dashboard/Dashboard.tsx

@@ -34,6 +34,7 @@ export default function ElectionEventDashboard(): ReactElement {
   }
   const { data: electionEvent } = useElectionRoundDetails(currentElectionRoundId);
 
+
   return (
     <Layout title={electionEvent?.title ?? ''} breadcrumbs={<></>} backButton={<></>}>
       <Tabs defaultValue='event-details' value={currentTab} onValueChange={handleTabChange}>

web/src/features/filtering/components/ActiveFilters.tsx

@@ -18,6 +18,18 @@ const FILTER_LABELS = new Map<string, string>([
   [FILTER_KEY.MonitoringObserverStatus, FILTER_LABEL.MonitoringObserverStatus],
   [FILTER_KEY.MonitoringObserverTags, FILTER_LABEL.MonitoringObserverTags],
   [FILTER_KEY.FormTypeFilter, FILTER_LABEL.FormTypeFilter],
+  [FILTER_KEY.HasFlaggedAnswers, FILTER_LABEL.HasFlaggedAnswers],
+  [FILTER_KEY.FollowUpStatus, FILTER_LABEL.FollowUpStatus],
+  [FILTER_KEY.HasNotes, FILTER_LABEL.HasNotes],
+  [FILTER_KEY.MediaFiles, FILTER_LABEL.MediaFiles],
+  [FILTER_KEY.QuestionsAnswered, FILTER_LABEL.QuestionsAnswered],
+  [FILTER_KEY.LocationL1, FILTER_LABEL.LocationL1],
+  [FILTER_KEY.LocationL2, FILTER_LABEL.LocationL2],
+  [FILTER_KEY.LocationL3, FILTER_LABEL.LocationL3],
+  [FILTER_KEY.LocationL4, FILTER_LABEL.LocationL4],
+  [FILTER_KEY.LocationL5, FILTER_LABEL.LocationL5],
+  [FILTER_KEY.FormSubmissionsMonitoringObserverTags, FILTER_LABEL.FormSubmissionsMonitoringObserverTags],
+  [FILTER_KEY.PollingStationNumber, FILTER_LABEL.PollingStationNumber],
 ]);
 
 const ActiveFilter: FC<ActiveFilterProps> = ({ filterId, value, isArray }) => {

web/src/features/filtering/components/SelectFilter.tsx

@@ -42,8 +42,8 @@ interface BinarySelectFilterProps extends Omit<SelectFilterProps, 'options'> {}
 
 export const BinarySelectFilter: FC<BinarySelectFilterProps> = (props) => {
   const options: SelectFilterOption[] = [
-    { value: 'Yes', label: 'Yes' },
-    { value: 'No', label: 'No' },
+    { value: 'true', label: 'Yes' },
+    { value: 'false', label: 'No' },
   ];
 
   return <SelectFilter options={options} {...props} />;

web/src/features/filtering/filtering-enums.ts

@@ -4,11 +4,35 @@ export const enum FILTER_KEY {
   MonitoringObserverStatus = 'monitoringObserverStatus',
   MonitoringObserverTags = 'tags',
   FormTypeFilter = 'formTypeFilter',
+  HasFlaggedAnswers = 'hasFlaggedAnswers',
+  FollowUpStatus = 'followUpStatus',
+  HasNotes = 'hasNotes',
+  MediaFiles = 'hasAttachments',
+  QuestionsAnswered = 'questionsAnswered',
+  LocationL1 = 'level1Filter',
+  LocationL2 = 'level2Filter',
+  LocationL3 = 'level3Filter',
+  LocationL4 = 'level4Filter',
+  LocationL5 = 'level5Filter',
+  PollingStationNumber = 'pollingStationNumberFilter',
+  FormSubmissionsMonitoringObserverTags = 'tagsFilter',
   ViewBy = 'viewBy',
 }
 
 export const enum FILTER_LABEL {
   MonitoringObserverStatus = 'Observer status',
   MonitoringObserverTags = 'Tags',
   FormTypeFilter = 'Form type',
+  HasFlaggedAnswers = 'Flagged answers',
+  FollowUpStatus = 'Follow-up status',
+  HasNotes = 'Question notes',
+  QuestionsAnswered = 'Questions answered',
+  LocationL1 = 'Location - L1',
+  LocationL2 = 'Location - L2',
+  LocationL3 = 'Location - L3',
+  LocationL4 = 'Location - L4',
+  LocationL5 = 'Location - L5',
+  PollingStationNumber = 'Polling station number',
+  FormSubmissionsMonitoringObserverTags = 'Observer tags',
+  MediaFiles = 'Has attachments',
 }

web/src/features/monitoring-observers/filtering/MonitoringObserverTagsSelect.tsx

@@ -4,20 +4,26 @@ import { FILTER_KEY } from '@/features/filtering/filtering-enums';
 import { useFilteringContainer } from '@/features/filtering/hooks/useFilteringContainer';
 import { useMonitoringObserversTags } from '@/hooks/tags-queries';
 
-import { FC, useEffect } from 'react';
+import { FC } from 'react';
+
+interface MonitoringObserverTagsSelectProps {
+  isFilteringFormSubmissions?: boolean;
+}
+
+export const MonitoringObserverTagsSelect: FC<MonitoringObserverTagsSelectProps> = ({ isFilteringFormSubmissions }) => {
+  const COMPONENT_FILTER_KEY = isFilteringFormSubmissions
+    ? FILTER_KEY.FormSubmissionsMonitoringObserverTags
+    : FILTER_KEY.MonitoringObserverTags;
 
-export const MonitoringObserverTagsSelect: FC = () => {
   const currentElectionRoundId = useCurrentElectionRoundStore((s) => s.currentElectionRoundId);
   const { data: tags } = useMonitoringObserversTags(currentElectionRoundId);
   const { queryParams, navigateHandler } = useFilteringContainer();
-  const currentTags = (queryParams as any)?.[FILTER_KEY.MonitoringObserverTags] ?? [];
+  const currentTags = (queryParams as any)?.[COMPONENT_FILTER_KEY] ?? [];
 
   const toggleTagsFilter = (tags: string[]) => {
-    return navigateHandler({ [FILTER_KEY.MonitoringObserverTags]: tags });
+    return navigateHandler({ [COMPONENT_FILTER_KEY]: tags });
   };
 
-  useEffect(() => {}, [currentTags]);
-
   return (
     <MultiSelectDropdown
       options={tags?.map((tag) => ({ label: tag, value: tag })) ?? []}

web/src/features/responses/components/FormSubmissionsByEntryTable/FormSubmissionsByEntryTable.tsx

@@ -38,6 +38,7 @@ export function FormSubmissionsByEntryTable({ searchText }: FormSubmissionsByEnt
       ['questionsAnswered', debouncedSearch.questionsAnswered],
       ['hasNotes', debouncedSearch.hasNotes],
       ['hasAttachments', debouncedSearch.hasAttachments],
+      ['tagsFilter', debouncedSearch.tagsFilter],
     ].filter(([_, value]) => value);
 
     return Object.fromEntries(params) as FormSubmissionsSearchParams;

web/src/features/responses/components/FormSubmissionsTab/FormSubmissionsTab.tsx

@@ -25,6 +25,7 @@ import { FormSubmissionsAggregatedByFormTable } from '../FormSubmissionsAggregat
 import { FormSubmissionsByEntryTable } from '../FormSubmissionsByEntryTable/FormSubmissionsByEntryTable';
 
 import { FunctionComponent } from '@/common/types';
+import { FormsFiltersByForm } from '../FormsFiltersByForm/FormsFiltersByForm';
 
 const routeApi = getRouteApi('/responses/');
 
@@ -91,30 +92,29 @@ export default function FormSubmissionsTab(): FunctionComponent {
         <Separator />
 
         <div className='flex justify-end gap-4 px-6'>
-          {byFilter !== 'byForm' && (
-            <>
-              <Input className='max-w-md' onChange={handleSearchInput} placeholder='Search' />
-              <FunnelIcon
-                className='w-[20px] text-purple-900 cursor-pointer'
-                fill={isFiltering ? '#5F288D' : 'rgba(0,0,0,0)'}
-                onClick={() => {
-                  setIsFiltering((prev) => !prev);
-                }}
-              />
-            </>
-          )}
+          <>
+            <Input className='max-w-md' onChange={handleSearchInput} placeholder='Search' />
+            <FunnelIcon
+              className='w-[20px] text-purple-900 cursor-pointer'
+              fill={isFiltering ? '#5F288D' : 'rgba(0,0,0,0)'}
+              onClick={() => {
+                setIsFiltering((prev) => !prev);
+              }}
+            />
+          </>
 
           <ColumnsVisibilitySelector byFilter={byFilter ?? 'byEntry'} />
         </div>
 
         <Separator />
 
         {isFiltering && (
-          <div className='grid items-center grid-cols-6 gap-4'>
+          <>
             {byFilter === 'byEntry' && <FormsFiltersByEntry />}
 
             {byFilter === 'byObserver' && <FormsFiltersByObserver />}
-          </div>
+            {byFilter === 'byForm' && <FormsFiltersByForm />}
+          </>
         )}
       </CardHeader>