budgeting: always show ControlBar, even if list is empty

fixes #5043
liqd · Jun 28, 2023 · f33e89c · f33e89c
1 parent 5f3c7db
commit f33e89c
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 50 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@ This project (not yet) adheres to [Semantic Versioning](https://semver.org/spec/
 ## Unreleased
 ### Fixed
 * add a missing translation for the char limit error from django-rest-framework (#4973)
+* budgeting: fix control bar not shown if list is empty (#5043)
 
 ## 2303
 ### What's Changed

diff --git a/meinberlin/apps/budgeting/assets/ControlBar.jsx b/meinberlin/apps/budgeting/assets/ControlBar.jsx
@@ -71,60 +71,54 @@ export const ControlBar = (props) => {
     >
       <div className="offset-lg-2 col-lg-8">
         <ControlBarListMapSwitch query={queryParams} />
-
-        {/* only show filters if no filter selected or list isn't empty */}
-        {(Array.from(queryParams.values()).length > 1 ||
-          props.numOfResults > 0) && (
+        <>
+          <div className="control-bar">
+            <div className="control-bar__item">
+              <ControlBarSearch
+                term={term}
+                onSearch={(value) => applySearch(value)}
+              />
+            </div>
+            {props.filters?.ordering && (
+              <ControlBarDropdown
+                key="ordering_dropdown"
+                filter={props.filters.ordering}
+                current={queryParams.get('ordering')}
+                filterId="id_ordering"
+                onSelectFilter={(choice) => applyFilter('ordering', choice)}
+              />
+            )}
+            <div className="control-bar__item control-bar__right">
+              <FilterToggle
+                showFilters={expandFilters}
+                onClickToggleFilter={handleToggleFilters}
+                btnString={translated.filters}
+                showFiltersString={translated.showFilters}
+                hideFiltersString={translated.hideFilters}
+              />
+            </div>
+          </div>
+          {props.filters && expandFilters && (
             <>
               <div className="control-bar">
-                <div className="control-bar__item">
-                  <ControlBarSearch
-                    term={term}
-                    onSearch={(value) => applySearch(value)}
-                  />
-                </div>
-                {props.filters?.ordering && (
-                  <ControlBarDropdown
-                    key="ordering_dropdown"
-                    filter={props.filters.ordering}
-                    current={queryParams.get('ordering')}
-                    filterId="id_ordering"
-                    onSelectFilter={(choice) => applyFilter('ordering', choice)}
-                  />
-                )}
-                <div className="control-bar__item control-bar__right">
-                  <FilterToggle
-                    showFilters={expandFilters}
-                    onClickToggleFilter={handleToggleFilters}
-                    btnString={translated.filters}
-                    showFiltersString={translated.showFilters}
-                    hideFiltersString={translated.hideFilters}
-                  />
-                </div>
+                {Object.keys(props.filters).map((type, idx) => {
+                  const filterItem = props.filters[type]
+                  return (
+                    type !== 'ordering' && (
+                      <ControlBarDropdown
+                        key={'filter_' + idx}
+                        filter={filterItem}
+                        current={queryParams.get(type)}
+                        filterId={'id_' + type}
+                        onSelectFilter={(choice) => applyFilter(type, choice)}
+                      />
+                    )
+                  )
+                })}
               </div>
-              {props.filters && expandFilters && (
-                <>
-                  <div className="control-bar">
-                    {Object.keys(props.filters).map((type, idx) => {
-                      const filterItem = props.filters[type]
-                      return (
-                        type !== 'ordering' && (
-                          <ControlBarDropdown
-                            key={'filter_' + idx}
-                            filter={filterItem}
-                            current={queryParams.get(type)}
-                            filterId={'id_' + type}
-                            onSelectFilter={(choice) => applyFilter(type, choice)}
-                          />
-                        )
-                      )
-                    })}
-                  </div>
-                </>
-              )}
             </>
-        )}
-
+          )}
+        </>
         {/* only show result string if list filtered or searched not just ordered */}
         {resultString && (
           <div className="control-bar">