project-overview/react: add search pills for every item in the search…

… and reset directly on click not on form submit
liqd · Jan 15, 2025 · 13ca9e0 · 13ca9e0
1 parent 092118a
commit 13ca9e0
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 15 deletions.
diff --git a/changelog/8663.md b/changelog/8663.md
@@ -0,0 +1,3 @@
+### Changed
+- Search pills on project overview are now shown for all separate items
+- resetting the form now happens on click not on click and then submitting the form
diff --git a/meinberlin/react/contrib/ControlBarFilterPills.jsx b/meinberlin/react/contrib/ControlBarFilterPills.jsx
@@ -21,12 +21,12 @@ export const ControlBarFilterPills = ({ filters: _filters, onRemove }) => {
           const label = filter.label || filter.choices.find(choice => choice[0] === filter.value)[1]
           return (
             <Pill
-              key={'pill_' + filter.type}
+              key={'pill_' + filter.type + filter.value}
               pillClass="pill"
             >
               {label}
               <button
-                onClick={() => onRemove(filter.type)}
+                onClick={() => onRemove(filter.type, filter.value)}
                 className="pill__close"
                 title={getFilterRemoveText(label)}
               >

diff --git a/meinberlin/react/contrib/__tests__/ControlBarFilterPills.jest.jsx b/meinberlin/react/contrib/__tests__/ControlBarFilterPills.jest.jsx
@@ -24,7 +24,7 @@ describe('ControlBarFilterPills', () => {
     fireEvent.click(screen.getAllByRole('button')[0])
 
     // Check if the remove function was called with the correct argument
-    expect(removeFn).toHaveBeenCalledWith('color')
+    expect(removeFn).toHaveBeenCalledWith('color', 'red')
   })
 
   test('does not render if filters are empty or values are empty strings', () => {

diff --git a/meinberlin/react/projects/ProjectsControlBar.jsx b/meinberlin/react/projects/ProjectsControlBar.jsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import django from 'django'
 import { TypeaheadField } from '../contrib/TypeaheadField'
 import { MultiSelect } from '../contrib/forms/MultiSelect'
-import { arraysEqual, classNames } from '../contrib/helpers'
+import { classNames } from '../contrib/helpers'
 import { ControlBarFilterPills } from '../contrib/ControlBarFilterPills'
 
 const translated = {
@@ -38,17 +38,16 @@ const initialState = {
   projectState: ['active', 'future']
 }
 
-const getAlteredFilters = ({ search, ...arrayFilters }) => {
+const getAlteredFilters = ({ search, districts, topics, projectState, organisation, participations }, topicChoices, participationChoices) => {
   const filters = []
   if (search !== initialState.search) {
-    filters.push({ label: translated.search, type: 'search', value: search })
+    filters.push({ label: search, type: 'search', value: search })
   }
-
-  Object.keys(arrayFilters).forEach(key => {
-    if (!arraysEqual(arrayFilters[key], initialState[key])) {
-      filters.push({ label: translated[key], type: key, value: arrayFilters[key] })
-    }
-  })
+  districts.forEach(d => filters.push({ label: d, type: 'districts', value: d }))
+  topics.forEach(t => filters.push({ label: topicChoices[t], type: 'topics', value: t }))
+  projectState.forEach(s => filters.push({ label: statusNames[s], type: 'status', value: s }))
+  organisation.forEach(o => filters.push({ label: o, type: 'organisation', value: o }))
+  participations.forEach(p => filters.push({ label: participationChoices[p], type: 'participations', value: p }))
 
   return filters
 }
@@ -60,14 +59,15 @@ export const ProjectsControlBar = ({
   topicChoices,
   appliedFilters,
   onFiltered,
+  onResetClick,
   hasContainer
 }) => {
   const [expandFilters, setExpandFilters] = useState(false)
   const [filters, setFilters] = useState(appliedFilters)
   const onFilterChange = (type, choice) => {
     setFilters({ ...filters, [type]: choice })
   }
-  const alteredFilters = getAlteredFilters(appliedFilters)
+  const alteredFilters = getAlteredFilters(appliedFilters, topicChoices, participationChoices)
 
   return (
     <nav aria-label={translated.nav}>
@@ -173,6 +173,7 @@ export const ProjectsControlBar = ({
                     className="link"
                     onClick={() => {
                       setFilters(initialState)
+                      onResetClick()
                     }}
                   >
                     {translated.reset}
@@ -198,8 +199,15 @@ export const ProjectsControlBar = ({
             <div className="flexgrid grid grid--2 control-bar__bottom--projects">
               <ControlBarFilterPills
                 filters={alteredFilters}
-                onRemove={(type) => {
-                  const newFilters = { ...filters, [type]: initialState[type] }
+                onRemove={(type, value) => {
+                  const newFilters = { ...filters }
+
+                  if (Array.isArray(newFilters[type])) {
+                    newFilters[type] = newFilters[type].filter(f => f !== value)
+                  } else {
+                    newFilters[type] = initialState[type]
+                  }
+
                   setFilters(newFilters)
                   onFiltered(newFilters)
                 }}

diff --git a/meinberlin/react/projects/ProjectsListMapBox.jsx b/meinberlin/react/projects/ProjectsListMapBox.jsx
@@ -122,6 +122,10 @@ const ProjectsListMapBox = ({
           setProjectState(projectState)
           setAppliedFilters(filters)
         }}
+        onResetClick={() => {
+          setAppliedFilters(getDefaultState(searchProfile))
+          setProjectState(['active', 'future'])
+        }}
       />
       <div className={classNames('projects-list', !showMap && 'container')}>
         <h1 className="aural">{pageHeader}</h1>