FO-2760 La til filtrering på enhet

Author: AlexGaard

package-lock.json

@@ -62,6 +62,7 @@
     "react": "^16.13.0",
     "react-dom": "^16.11.0",
     "react-scripts": "3.0.1",
+    "react-select": "^3.0.8",
     "typescript": "3.4.5"
   },
   "devDependencies": {

package.json

@@ -2,30 +2,40 @@ import React from 'react';
 import { Filters, useFilterStore } from '../../stores/filter-store';
 import { FilterEtikett } from './etikett/filter-etikett';
 import './filter-etiketter.less';
+import { isEmpty } from '../../utils';
 
 export type OnRemoveClicked = (id: string) => void;
 
 const NAVN_ELLER_FNR_FILTER = 'NAVN_ELLER_FNR_FILTER';
+const ENHET_FILTER = 'ENHET_FILTER';
 
 function lagFilterEtiketter(filters: Filters, onRemoveClicked: OnRemoveClicked) {
-	const { fnrOrName } = filters;
+	const { fnrOrName, enheter } = filters;
 	const filterEtiketter = [];
 
-	if (fnrOrName && fnrOrName.trim().length > 0) {
+	if (!isEmpty(fnrOrName)) {
 		filterEtiketter.push(
-			<FilterEtikett id={NAVN_ELLER_FNR_FILTER} tekst="Søk på navn eller fnr" onRemoveClicked={onRemoveClicked} />
+			<FilterEtikett key={NAVN_ELLER_FNR_FILTER} id={NAVN_ELLER_FNR_FILTER} tekst="Søk på navn eller fnr" onRemoveClicked={onRemoveClicked} />
+		);
+	}
+
+	if (enheter.length > 0) {
+		filterEtiketter.push(
+			<FilterEtikett key={ENHET_FILTER} id={ENHET_FILTER} tekst="Søk på enhet" onRemoveClicked={onRemoveClicked} />
 		);
 	}
 
 	return filterEtiketter;
 }
 
 export const FilterEtiketter = () => {
-	const { filters, setFnrOrNameFilter } = useFilterStore();
+	const { filters, setFnrOrNameFilter, setEnheterFilter } = useFilterStore();
 
 	function handleOnRemoveClicked(id: string) {
 		if (id === NAVN_ELLER_FNR_FILTER) {
 			setFnrOrNameFilter('');
+		} else if (id === ENHET_FILTER) {
+			setEnheterFilter([]);
 		}
 	}
 

src/components/enhet-filter/enhet-filter.tsx

@@ -0,0 +1,23 @@
+@import "~nav-frontend-core/less/_variabler";
+
+.enhet-dropdown {
+  margin-top: 1rem;
+  font-family: 'Source Sans Pro', Arial, sans-serif;
+
+  .enhet-dropdown__control {
+    border: 1px solid #78706A;
+    height: 40px;
+  }
+
+  .enhet-dropdown__value-container {
+    margin-top: 3px;
+  }
+
+  .enhet-dropdown__control--is-focused {
+    box-shadow: 0 0 0 3px #254b6d;
+  }
+
+  .enhet-dropdown__indicator {
+    color: #3E3832;
+  }
+}

src/components/filter-etiketter/filter-etiketter.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import Select from 'react-select';
+import { Enhet } from '../../../../rest/data/innlogget-veileder';
+import './enhet-dropdown.less';
+
+interface EnhetDropdownProps {
+	enheter: DropdownOption[];
+	valgteEnheter: DropdownOption[];
+	onChange?: (selectedOption: DropdownOption[] | null) => void;
+}
+
+export interface DropdownOption {
+	value: string;
+	label: string;
+}
+
+export function mapEnhetTilDropdownOption(enhet: Enhet): DropdownOption {
+	return { value: enhet.enhetId, label: enhet.navn };
+}
+
+export function mapDropdownOptionTilEnhet(dropdownOption: DropdownOption): Enhet {
+	return { enhetId: dropdownOption.value, navn: dropdownOption.label };
+}
+
+export const EnhetDropdown = (props: EnhetDropdownProps) => {
+	const {enheter, onChange} = props;
+	return (
+		<div className="enhet-dropdown">
+			<Select
+				inputId="enhet-filter"
+				placeholder="Velg enheter"
+				isMulti={true}
+				value={props.valgteEnheter}
+				isClearable
+				isSearchable
+				clearValueText="Fjern enhet"
+				noResultsText="Listen er tom"
+				searchPromptText="Skriv inn for å søke"
+				options={enheter}
+				onChange={onChange as any}
+			/>
+		</div>
+	);
+};