plans: add plans checkbox

liqd · Jan 16, 2025 · b3abb89 · b3abb89
1 parent 73aa08c
commit b3abb89
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 4 deletions.
diff --git a/meinberlin/assets/scss/components_user_facing/_control-bar.scss b/meinberlin/assets/scss/components_user_facing/_control-bar.scss
@@ -40,3 +40,24 @@
         }
     }
 }
+
+.modul-facetingform .facetingform__container .control-bar__checkboxes {
+    margin-bottom: 1.5em;
+}
+
+.modul-facetingform .facetingform__container .control-bar__checkboxes-legend {
+    float: left;
+    line-height: 1.2;
+    margin-right: 1rem;
+    font-weight: normal;
+}
+
+.control-bar__form-check-inline {
+    align-items: center;
+    display: flex;
+    margin-bottom: 0;
+}
+
+.control-bar__check-input[type="checkbox"] {
+    margin-top: 0;
+}
diff --git a/meinberlin/react/projects/ProjectsControlBar.jsx b/meinberlin/react/projects/ProjectsControlBar.jsx
@@ -18,6 +18,8 @@ const translated = {
   allParticipation: django.gettext('All'),
   projectState: django.gettext('Project state'),
   organisation: django.gettext('Organization'),
+  onlyShow: django.gettext('Only show'),
+  plans: django.gettext('Plans'),
   nav: django.gettext('Search, filter and sort the ideas list'),
   searchFor: django.gettext('Search for Proposals'),
   button: django.gettext('Show projects')
@@ -35,7 +37,8 @@ const initialState = {
   organisation: [],
   participations: [],
   topics: [],
-  projectState: ['active', 'future']
+  projectState: ['active', 'future'],
+  plansOnly: false
 }
 
 const getAlteredFilters = ({ search, districts, topics, projectState, organisation, participations }, topicChoices, participationChoices) => {
@@ -152,6 +155,21 @@ export const ProjectsControlBar = ({
                         typeaheadSelected={filters.organisation}
                         multipleBoolean
                       />
+                      <fieldset className="control-bar__checkboxes">
+                        <legend className="control-bar__checkboxes-legend">{translated.onlyShow}:</legend>
+                        <div className="form-check form-check-inline control-bar__form-check-inline">
+                          <input
+                            id="plans"
+                            className="form-check-input control-bar__check-input"
+                            type="checkbox"
+                            checked={filters.plansOnly}
+                            onChange={() => onFilterChange('plansOnly', !filters.plansOnly)}
+                          />
+                          <label className="form-check-label" htmlFor="plans">
+                            {translated.plans}
+                          </label>
+                        </div>
+                      </fieldset>
                     </>
                   )}
                   <button

diff --git a/meinberlin/react/projects/filter-projects.js b/meinberlin/react/projects/filter-projects.js
@@ -11,13 +11,14 @@ export const isInTitle = (title, search) => {
 }
 
 export const filterProjects = (items, appliedFilters) => {
-  const { search, topics, districts, organisation, participations } = appliedFilters
+  const { search, topics, districts, organisation, participations, plansOnly } = appliedFilters
 
   return items.filter((item) => {
     return (topics.length === 0 || topics.some(topic => item.topics.includes(topic))) &&
            (districts.length === 0 || districts.includes(item.district)) &&
            (participations.length === 0 || participations.includes(item.participation)) &&
            (organisation.length === 0 || organisation.includes(item.organisation)) &&
-           (search === '' || isInTitle(item.title, search))
+           (search === '' || isInTitle(item.title, search)) &&
+           (!plansOnly || item.type === 'plan')
   })
 }
diff --git a/meinberlin/react/projects/getDefaultState.js b/meinberlin/react/projects/getDefaultState.js
@@ -5,7 +5,8 @@ const defaultState = {
   // array because of the typeahead component
   organisation: [],
   participations: [],
-  topics: []
+  topics: [],
+  plansOnly: false
 }
 
 export const getDefaultState = (searchProfile) => {