From 13ca9e07c3662f2e2fc25f0bbadfc1acaf1e07d4 Mon Sep 17 00:00:00 2001
From: Philipp Veller <mail@vellip.de>
Date: Wed, 15 Jan 2025 09:31:55 +0100
Subject: [PATCH] project-overview/react: add search pills for every item in
 the search and reset directly on click not on form submit

---
 changelog/8663.md                             |  3 ++
 .../react/contrib/ControlBarFilterPills.jsx   |  4 +--
 .../__tests__/ControlBarFilterPills.jest.jsx  |  2 +-
 .../react/projects/ProjectsControlBar.jsx     | 32 ++++++++++++-------
 .../react/projects/ProjectsListMapBox.jsx     |  4 +++
 5 files changed, 30 insertions(+), 15 deletions(-)
 create mode 100644 changelog/8663.md

diff --git a/changelog/8663.md b/changelog/8663.md
new file mode 100644
index 0000000000..eb0d4b1f4c
--- /dev/null
+++ 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
index 590e5d34e1..f65be18f5a 100644
--- 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
index dc3711213b..d43c43d4a2 100644
--- 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
index 78e2b3d33c..4ac6fdd2fb 100644
--- 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,6 +59,7 @@ export const ProjectsControlBar = ({
   topicChoices,
   appliedFilters,
   onFiltered,
+  onResetClick,
   hasContainer
 }) => {
   const [expandFilters, setExpandFilters] = useState(false)
@@ -67,7 +67,7 @@ export const ProjectsControlBar = ({
   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
index d0e9d6a507..04f4d85093 100644
--- 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>