FO-2760 La til filtrering på status

Author: AlexGaard

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Filters, useFilterStore } from '../../stores/filter-store';
+import { Filters, StatusFilter, useFilterStore } from '../../stores/filter-store';
 import { FilterEtikett } from './etikett/filter-etikett';
 import './filter-etiketter.less';
 import { isEmpty } from '../../utils';
@@ -8,9 +8,10 @@ export type OnRemoveClicked = (id: string) => void;
 
 const NAVN_ELLER_FNR_FILTER = 'NAVN_ELLER_FNR_FILTER';
 const ENHET_FILTER = 'ENHET_FILTER';
+const STATUS_FILTER = 'STATUS_FILTER';
 
 function lagFilterEtiketter(filters: Filters, onRemoveClicked: OnRemoveClicked) {
-	const { fnrOrName, enheter } = filters;
+	const { fnrOrName, enheter, status } = filters;
 	const filterEtiketter = [];
 
 	if (!isEmpty(fnrOrName)) {
@@ -25,17 +26,25 @@ function lagFilterEtiketter(filters: Filters, onRemoveClicked: OnRemoveClicked)
 		);
 	}
 
+	if (status !== StatusFilter.ALLE) {
+		filterEtiketter.push(
+			<FilterEtikett key={STATUS_FILTER} id={STATUS_FILTER} tekst="Søk på status" onRemoveClicked={onRemoveClicked} />
+		);
+	}
+
 	return filterEtiketter;
 }
 
 export const FilterEtiketter = () => {
-	const { filters, setFnrOrNameFilter, setEnheterFilter } = useFilterStore();
+	const { filters, setFnrOrNameFilter, setEnheterFilter, setStatusFilter } = useFilterStore();
 
 	function handleOnRemoveClicked(id: string) {
 		if (id === NAVN_ELLER_FNR_FILTER) {
 			setFnrOrNameFilter('');
 		} else if (id === ENHET_FILTER) {
 			setEnheterFilter([]);
+		} else if (id === STATUS_FILTER) {
+			setStatusFilter(StatusFilter.ALLE);
 		}
 	}
 

src/components/filter-paneler/enhet-filter/enhet-dropdown/enhet-dropdown.less renamed to src/components/filter-paneler/enhet-filter-panel/enhet-dropdown/enhet-dropdown.less

@@ -1,7 +1,6 @@
 @import "~nav-frontend-core/less/_variabler";
 
 .enhet-dropdown {
-  margin-top: 1rem;
   font-family: 'Source Sans Pro', Arial, sans-serif;
 
   .enhet-dropdown__control {

src/components/filter-paneler/enhet-filter/enhet-dropdown/enhet-dropdown.tsx renamed to src/components/filter-paneler/enhet-filter-panel/enhet-dropdown/enhet-dropdown.tsx

@@ -8,9 +8,8 @@ import {
 } from './enhet-dropdown/enhet-dropdown';
 import { useFetchStore } from '../../../stores/fetch-store';
 import { useFilterStore } from '../../../stores/filter-store';
-import './enhet-filter.less';
 
-export const EnhetFilter = () => {
+export const EnhetFilterPanel = () => {
 	const { filters, setEnheterFilter } = useFilterStore();
 	const { innloggetVeileder } = useFetchStore();
 

src/components/filter-paneler/enhet-filter/enhet-filter.tsx renamed to src/components/filter-paneler/enhet-filter-panel/enhet-filter-panel.tsx

@@ -4,4 +4,8 @@
 
   margin-bottom: 1rem;
   border-radius: 4px;
+
+  &__innhold {
+    margin-top: 1rem;
+  }
 }

src/components/filter-paneler/filter-panel/filter-panel.less

@@ -11,7 +11,9 @@ export const FilterPanel = (props: FilterPanelProps) => {
     return (
     	<div className="filter-panel">
 		    <Undertittel>{props.tittel}</Undertittel>
-		    {props.children}
+		    <div className="filter-panel__innhold">
+		        {props.children}
+		    </div>
 	    </div>
     );
 };

src/components/filter-paneler/filter-panel/filter-panel.tsx

@@ -0,0 +1,28 @@
+import React, { ChangeEvent } from 'react';
+import { FilterPanel } from '../filter-panel/filter-panel';
+import { Radio, RadioGruppe } from 'nav-frontend-skjema';
+import './status-filter-panel.less';
+import { StatusFilter, useFilterStore } from '../../../stores/filter-store';
+
+export const StatusFilterPanel = () => {
+	const { filters, setStatusFilter } = useFilterStore();
+	const statusFilter = filters.status;
+
+	function handleOnStatusRadioChanged(e: ChangeEvent<HTMLInputElement>) {
+		if (e.target.checked) {
+			console.log('setting status', e.target.value); // tslint:disable-line
+			setStatusFilter(e.target.value as StatusFilter);
+		}
+	}
+
+    return (
+    	<FilterPanel tittel="Status">
+		    <RadioGruppe>
+			    <Radio label="Alle" name="status-filter" checked={statusFilter === StatusFilter.ALLE} value={StatusFilter.ALLE} onChange={handleOnStatusRadioChanged}/>
+			    <Radio label="Venter på beslutter" name="status-filter" checked={statusFilter === StatusFilter.VENTER_PA_BESLUTTER} value={StatusFilter.VENTER_PA_BESLUTTER} onChange={handleOnStatusRadioChanged}/>
+			    <Radio label="Venter på veileder" name="status-filter" checked={statusFilter === StatusFilter.VENTER_PA_VEILEDER} value={StatusFilter.VENTER_PA_VEILEDER} onChange={handleOnStatusRadioChanged}/>
+			    <Radio label="Klar til utsending" name="status-filter" checked={statusFilter === StatusFilter.KLAR_TIL_UTSENDING} value={StatusFilter.KLAR_TIL_UTSENDING} onChange={handleOnStatusRadioChanged}/>
+		    </RadioGruppe>
+	    </FilterPanel>
+    );
+};

src/components/filter-paneler/enhet-filter/enhet-filter.less renamed to src/components/filter-paneler/status-filter-panel/status-filter-panel.less

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const StatusRadio = () => {
+    return null;
+};