FO-2772 Fikset opp i søking med filter

Author: AlexGaard

src/components/filters/bruker-filter/bruker-filter.tsx

@@ -1,21 +1,25 @@
 import React from 'react';
 import { Element } from 'nav-frontend-typografi';
-import { DropdownOption } from '../enhet-dropdown/enhet-dropdown';
 import { Checkbox } from 'nav-frontend-skjema';
-import './bruker-filter.less';
 import { useSokStore } from '../../../stores/sok-store';
+import './bruker-filter.less';
 
 export const BrukerFilter = () => {
-	const { filters, setStatusFilter } = useSokStore();
+	const { filters, setVisMineBrukere } = useSokStore();
 
-	function handleOnStatusSelectedChanged(selectedOption: DropdownOption | null) {
-		console.log('selectedOption', selectedOption); // tslint:disable-line
+	function handleOnVisMineBrukereChanged() {
+		setVisMineBrukere(visMineBrukere => !visMineBrukere);
 	}
 
 	return (
 		<div className="bruker-filter">
 			<Element>Bruker</Element>
-			<Checkbox label="Mine brukere" className="bruker-filter__checkbox" />
+			<Checkbox
+				label="Mine brukere"
+				className="bruker-filter__checkbox"
+				checked={filters.visMineBrukere}
+				onChange={handleOnVisMineBrukereChanged}
+			/>
 		</div>
 	);
 };

src/components/filters/sokefelt/sokefelt.tsx

@@ -1,13 +1,21 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { Input } from 'nav-frontend-skjema';
-import './sokefelt.less';
+import debounce from 'lodash.debounce';
 import { useSokStore } from '../../../stores/sok-store';
+import './sokefelt.less';
 
 export const Sokefelt = () => {
 	const { filters, setFnrOrNameFilter } = useSokStore();
+	const [tekst, setTekst] = useState(filters.fnrOrName);
+
+	const oppdaterFilter = useCallback(debounce((nyTekst) => {
+		setFnrOrNameFilter(nyTekst);
+	}, 500), []);
 
 	function handleOnQueryChanged(e: React.ChangeEvent<HTMLInputElement>) {
-		setFnrOrNameFilter(e.target.value);
+		const nyTekst = e.target.value;
+		setTekst(nyTekst);
+		oppdaterFilter(nyTekst);
 	}
 
     return (
@@ -16,7 +24,7 @@ export const Sokefelt = () => {
 			    label=""
 			    placeholder="Søk etter navn eller fødselsnummer"
 			    onChange={handleOnQueryChanged}
-			    value={filters.fnrOrName}
+			    value={tekst}
 		    />
 	    </div>
     );

src/components/filters/status-dropwdown/status-dropdown.tsx

@@ -1,20 +1,16 @@
-import React, { ChangeEvent } from 'react';
+import React from 'react';
 import Select from 'react-select';
 import { Element } from 'nav-frontend-typografi';
-import { DropdownOption, mapDropdownOptionTilEnhet } from '../enhet-dropdown/enhet-dropdown';
-import './status-dropdown.less';
+import { DropdownOption } from '../enhet-dropdown/enhet-dropdown';
 import { UtkastStatus } from '../../../rest/data/bruker';
 import { mapBrukerStatusTilTekst } from '../../../utils';
 import { useSokStore } from '../../../stores/sok-store';
+import './status-dropdown.less';
 
 export function mapStatusTilDropdownOption(status: UtkastStatus): DropdownOption {
 	return { value: status, label: mapBrukerStatusTilTekst(status) };
 }
 
-export function mapDropdownOptionTilStatus(dropdownOption: DropdownOption): UtkastStatus {
-	return dropdownOption.value as UtkastStatus;
-}
-
 const statusOptions: DropdownOption[] = [
 	mapStatusTilDropdownOption(UtkastStatus.TRENGER_BESLUTTER),
 	mapStatusTilDropdownOption(UtkastStatus.KLAR_TIL_VEILEDER),
@@ -24,9 +20,11 @@ const statusOptions: DropdownOption[] = [
 
 export const StatusDropdown = () => {
 	const { filters, setStatusFilter } = useSokStore();
+	const value = filters.status ? mapStatusTilDropdownOption(filters.status) : null;
 
 	function handleOnStatusSelectedChanged(selectedOption: DropdownOption | null) {
-		console.log('selectedOption', selectedOption); // tslint:disable-line
+		const nyStatus = selectedOption ? selectedOption.value as UtkastStatus : undefined;
+		setStatusFilter(nyStatus)
 	}
 
 	return (
@@ -35,7 +33,7 @@ export const StatusDropdown = () => {
 			<Select
 				inputId="status-filter"
 				placeholder="Velg status"
-				// value={mapStatusTilDropdownOption(statusFilter)}
+				value={value}
 				isClearable
 				isSearchable={false}
 				options={statusOptions}

src/components/user-table/body/user-table-row.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Bruker, UtkastStatus } from '../../../rest/data/bruker';
-import { formatDateStr, tidSiden } from '../../../utils/date-utils';
+import { formatDateStr, formatDateTime } from '../../../utils/date-utils';
 import { Normaltekst, Element } from 'nav-frontend-typografi';
 import { fjernNavFraEnhetNavn, mapBrukerStatusTilTekst } from '../../../utils';
 import klarForUtsendelseIcon from './status/klar_for_utsendelse.svg';
@@ -23,7 +23,7 @@ export const UserRow = (props: {bruker: Bruker}) => {
 			<UtkastStatusData status={status}/>
 		    <Element>{beslutterNavn || '-'}</Element>
 		    <Normaltekst>{veilederNavn}</Normaltekst>
-		    <Normaltekst>{tidSiden(statusEndret)}</Normaltekst>
+		    <Normaltekst>{formatDateTime(statusEndret)}</Normaltekst>
 		    <Normaltekst>{fjernNavFraEnhetNavn(brukerOppfolgingsenhetNavn)}</Normaltekst>
 	    </li>
     );

src/rest/api.ts

@@ -16,10 +16,10 @@ export interface BeslutteroversiktSok {
 }
 
 export interface BeslutterOversiktSokFilter {
-	enheter: string[];
-	status: UtkastStatus;
-	visMineBrukere: boolean;
-	navnEllerFnr: string;
+	enheter: OrNothing<string[]>;
+	status: OrNothing<UtkastStatus>;
+	visMineBrukere: OrNothing<boolean>;
+	navnEllerFnr: OrNothing<string>;
 }
 
 export enum OrderByField {

src/utils/filter-utils.ts

@@ -4,7 +4,10 @@ import { Enhet } from '../rest/data/innlogget-veileder';
 import { Filters } from '../stores/sok-store';
 
 export const hasFilters = (filters: Filters): boolean => {
-	return !isEmpty(filters.fnrOrName);
+	return !isEmpty(filters.fnrOrName)
+		|| (filters.enheter && filters.enheter.length > 0)
+		|| filters.status != null
+		|| filters.visMineBrukere;
 };
 
 export const filterUsers = (filters: Filters, users: Bruker[]): Bruker[] => {

src/utils/sok-utils.ts

@@ -1,17 +1,10 @@
 import { BeslutteroversiktSok, BeslutterOversiktSokFilter, OrderByDirection, OrderByField } from '../rest/api';
 import { Filters } from '../stores/sok-store';
 import { OrNothing } from './types/ornothing';
+import { hasFilters } from './filter-utils';
 
 export const PAGINATION_SIZE = 30;
 
-export const defaultBeslutteroversiktSok: BeslutteroversiktSok = {
-	antall: PAGINATION_SIZE,
-	fra: 0,
-	filter: undefined,
-	orderByDirection: undefined,
-	orderByField: undefined
-};
-
 export const lagBeslutterOversiktSok = (
 	filters: Filters, currentPage: number,
     orderByDirection: OrNothing<OrderByDirection>, orderByField: OrNothing<OrderByField>
@@ -26,5 +19,14 @@ export const lagBeslutterOversiktSok = (
 };
 
 export const lagBeslutterOversiktSokFilter = (filters: Filters): OrNothing<BeslutterOversiktSokFilter> => {
-	return undefined;
+	if (!hasFilters(filters)) {
+		return undefined;
+	}
+
+	return {
+		enheter: filters.enheter.map(e => e.enhetId),
+		navnEllerFnr: filters.fnrOrName,
+		status: filters.status,
+		visMineBrukere: filters.visMineBrukere
+	};
 };