filter dropdown boxes

The filter component now returns two styled dropdown boxes instead of a long list of checkboxes. Also introduced a new parameter to only allow selection of 1 year at a time.

webapp/src/components/graphing/Filter.tsx

 import React, {ReactElement} from 'react';
-import {Button, Row} from 'react-bootstrap';
+import {Button, Dropdown, ButtonToolbar} from 'react-bootstrap';
 import {FilterSelection} from "../../Schema";
 
 interface inputProps {
     filterOptions: { availableNrens: string[], availableYears: number[] }
     filterSelection: FilterSelection
     setFilterSelection: React.Dispatch<React.SetStateAction<FilterSelection>>
+    max1year?: boolean
 }
 
-function Filter({ filterOptions, filterSelection, setFilterSelection }: inputProps): ReactElement {
+function Filter({ filterOptions, filterSelection, setFilterSelection, max1year = false }: inputProps): ReactElement {
 
     const handleNrenClick = (nren: string) => {
         if (filterSelection.selectedNrens.includes(nren)) {
@@ -32,7 +33,7 @@ function Filter({ filterOptions, filterSelection, setFilterSelection }: inputPro
             });
         } else {
             setFilterSelection({
-                selectedYears: [...filterSelection.selectedYears, year],
+                selectedYears: max1year ? [year] : [...filterSelection.selectedYears, year],
                 selectedNrens: [...filterSelection.selectedNrens]
             });
         }
@@ -52,37 +53,62 @@ function Filter({ filterOptions, filterSelection, setFilterSelection }: inputPro
         });
     }
 
+    // flex wrap in the column direction causes issues so we prepare the columns ourselves:
+    const nrOfColumns = 2;
+    const nrOfRows = Math.ceil(filterOptions.availableNrens.length / nrOfColumns);
+    const grid: string[][] = Array.from(Array(nrOfColumns), () => []);
+    filterOptions.availableNrens.sort().forEach((nren, idx) => {
+        const col = Math.floor(idx / nrOfRows);
+        grid[col].push(nren);
+    });
+
     return (
-        <>
-            <Row>
-                {filterOptions.availableYears.sort().map((year) => (
-                    <div key={year} onClick={() => (handleYearClick(year))}>
-                        <input
-                            type="checkbox"
-                            checked={filterSelection.selectedYears.includes(year)}
-                            readOnly
-                        />
-                        {year}
+        <ButtonToolbar className="d-flex justify-content-end gap-2 m-2">
+
+            <Dropdown autoClose="outside">
+                <Dropdown.Toggle id="nren-dropdown-toggle" variant="compendium">Select NRENs</Dropdown.Toggle>
+                <Dropdown.Menu>
+                    <div className="d-flex fit-max-content">
+                        {grid.map((column, columnIndex) => (
+                            <div key={columnIndex} className="flex-fill">
+                                {column.map((nren) => (
+                                    <div className="filter-dropdown-item flex-fill" key={nren} onClick={() => (handleNrenClick(nren))}>
+                                        <input
+                                            type="checkbox"
+                                            checked={filterSelection.selectedNrens.includes(nren)}
+                                            readOnly
+                                        /> {nren}
+                                    </div>
+                                ))}
+                            </div>
+                        ))}
                     </div>
-                ))}
-            </Row>
-            <Row>
-                {filterOptions.availableNrens.sort().map((nren) => (
-                    <div key={nren} onClick={() => (handleNrenClick(nren))}>
-                        <input
-                            type="checkbox"
-                            checked={filterSelection.selectedNrens.includes(nren)}
-                            readOnly
-                        />
-                        {nren}
+                    <div className="d-flex fit-max-content gap-2 mx-2 mt-3">
+                        <Button variant="compendium" className="flex-fill" onClick={handleSelectAllNrensClick}>Select all NRENs</Button>
+                        <Button variant="compendium" className="flex-fill" onClick={handleDeselectAllNrensClick}>Unselect all NRENs</Button>
                     </div>
-                ))}
-            </Row>
-            <Row>
-                <Button onClick={handleSelectAllNrensClick}>Select all NRENs</Button>
-                <Button onClick={handleDeselectAllNrensClick}>Deselect all NRENs</Button>
-            </Row>
-        </>
+                </Dropdown.Menu>
+            </Dropdown>
+
+            { filterOptions.availableYears.length > 0 &&
+                <Dropdown autoClose="outside">
+                    <Dropdown.Toggle id="year-dropdown-toggle" variant="compendium">Select years</Dropdown.Toggle>
+                    <Dropdown.Menu>
+                        {filterOptions.availableYears.sort().map((year) => (
+                            <div className="filter-dropdown-item" key={year} onClick={() => (handleYearClick(year))}>
+                                <input
+                                    type="checkbox"
+                                    checked={filterSelection.selectedYears.includes(year)}
+                                    readOnly
+                                /> {year}
+                            </div>
+                        ))}
+                    </Dropdown.Menu>
+                </Dropdown>
+            }
+
+        </ButtonToolbar>
+
     );
 }