plans: add plans checkbox

changelog/_8662.md

@@ -0,0 +1,3 @@
+## Added
+
+- Added the plans (Vorhaben) checkbox to the plans filter.

meinberlin/assets/scss/components_user_facing/_control-bar.scss

@@ -46,3 +46,24 @@
         margin-bottom: 0;
     }
 }
+
+.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;
+}

meinberlin/react/projects/ProjectsControlBar.jsx

@@ -20,6 +20,8 @@ const translated = {
   projectState: django.gettext('Project state'),
   projectStatePlaceholder: django.gettext('None'),
   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')
@@ -43,7 +45,8 @@ const initialState = {
   organisation: [],
   participations: [],
   topics: [],
-  projectState: ['active', 'future']
+  projectState: ['active', 'future'],
+  plansOnly: false
 }
 
 const getAlteredFilters = ({ search, districts, topics, projectState, organisation, participations }, topicChoices, participationChoices) => {
@@ -207,6 +210,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

meinberlin/react/projects/filter-projects.js

@@ -13,14 +13,15 @@ export const isInTitle = (title, search) => {
 const statusNames = ['active', 'future', 'past']
 
 export const filterProjects = (items, appliedFilters, projectState) => {
-  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)) &&
-           (projectState.includes(statusNames[item.status]))
+           (projectState.includes(statusNames[item.status])) &&
+           (!plansOnly || item.type === 'plan')
   })
 }

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) => {