FO-2760 La til filtrering på fnr og navn

AlexGaard · AlexGaard · commit b47ee9f2d5b5 · 2020-02-28T14:58:02.000+01:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -45,6 +45,8 @@
     "nav-frontend-alertstriper": "^3.0.11",
     "nav-frontend-alertstriper-style": "^2.0.9",
     "nav-frontend-core": "^4.0.11",
+    "nav-frontend-etiketter": "^1.0.30",
+    "nav-frontend-etiketter-style": "^0.3.19",
     "nav-frontend-ikoner-assets": "^1.0.5",
     "nav-frontend-js-utils": "^1.0.8",
     "nav-frontend-lenker": "^1.0.33",
diff --git a/src/app.tsx b/src/app.tsx
@@ -3,13 +3,15 @@ import StoreProvider from './stores/store-provider';
 import { Header } from './components/header/header';
 import { InternflateDecorator } from './components/internflate-decorator/internflate-decorator';
 import { Hovedside } from './hovedside/hovedside';
+import { FilterSync } from './components/filter-sync';
 
 function App() {
 	return (
 		<StoreProvider>
 			<InternflateDecorator />
 			<Header />
 			<Hovedside />
+			<FilterSync />
 		</StoreProvider>
 	);
 }
diff --git a/src/components/filter-etiketter/etikett/filter-etikett.less b/src/components/filter-etiketter/etikett/filter-etikett.less
@@ -0,0 +1,7 @@
+
+.filter-etikett {
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+}
diff --git a/src/components/filter-etiketter/etikett/filter-etikett.tsx b/src/components/filter-etiketter/etikett/filter-etikett.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { EtikettInfo } from 'nav-frontend-etiketter';
+import './filter-etikett.less';
+import { OnRemoveClicked } from '../filter-etiketter';
+
+interface FilterEtikettProps {
+    id: string;
+    tekst: string;
+    onRemoveClicked: OnRemoveClicked;
+}
+
+export const FilterEtikett = (props: FilterEtikettProps) => {
+    const {id, tekst, onRemoveClicked} = props;
+
+    return (
+        <button className="filter-etikett" onClick={() => onRemoveClicked(id)}>
+            <EtikettInfo>{tekst}</EtikettInfo>
+        </button>
+    );
+};
diff --git a/src/components/filter-etiketter/filter-etiketter.less b/src/components/filter-etiketter/filter-etiketter.less
@@ -0,0 +1,4 @@
+
+.filter-etiketter {
+  margin-bottom: 1rem;
+}
diff --git a/src/components/filter-etiketter/filter-etiketter.tsx b/src/components/filter-etiketter/filter-etiketter.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Filters, useFilterStore } from '../../stores/filter-store';
+import { FilterEtikett } from './etikett/filter-etikett';
+import './filter-etiketter.less';
+
+export type OnRemoveClicked = (id: string) => void;
+
+const NAVN_ELLER_FNR_FILTER = 'NAVN_ELLER_FNR_FILTER';
+
+function lagFilterEtiketter(filters: Filters, onRemoveClicked: OnRemoveClicked) {
+	const { fnrOrName } = filters;
+	const filterEtiketter = [];
+
+	if (fnrOrName && fnrOrName.trim().length > 0) {
+		filterEtiketter.push(
+			<FilterEtikett id={NAVN_ELLER_FNR_FILTER} tekst="Søk på navn eller fnr" onRemoveClicked={onRemoveClicked} />
+		);
+	}
+
+	return filterEtiketter;
+}
+
+export const FilterEtiketter = () => {
+	const { filters, setFnrOrNameFilter } = useFilterStore();
+
+	function handleOnRemoveClicked(id: string) {
+		if (id === NAVN_ELLER_FNR_FILTER) {
+			setFnrOrNameFilter('');
+		}
+	}
+
+	const etiketter = lagFilterEtiketter(filters, handleOnRemoveClicked);
+
+	if (etiketter.length === 0) {
+		return null;
+	}
+
+    return (
+    	<div className="filter-etiketter">
+		    {etiketter}
+	    </div>
+    );
+};
diff --git a/src/components/filter-sync.tsx b/src/components/filter-sync.tsx
@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+import { useFetchStore } from '../stores/fetch-store';
+import { useFilteredUsersStore } from '../stores/filtered-users-store';
+import { useFilterStore } from '../stores/filter-store';
+import { hasData } from '../rest/utils';
+import { filterUsers, hasFilters } from '../utils/filter-utils';
+
+export const FilterSync = () => {
+	const { brukere } = useFetchStore();
+	const { setFilteredUsers } = useFilteredUsersStore();
+	const { filters } = useFilterStore();
+
+	useEffect(() => {
+		if (hasData(brukere) && !hasFilters(filters)) {
+			setFilteredUsers(brukere.data);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [brukere]);
+
+	useEffect(() => {
+		if (hasData(brukere)) {
+			setFilteredUsers(filterUsers(filters, brukere.data));
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [filters]);
+
+    return null;
+};
diff --git a/src/components/sokefelt/sokefelt.less b/src/components/sokefelt/sokefelt.less
@@ -1,3 +1,8 @@
 .sokefelt {
   margin-bottom: 1rem;
+
+  input {
+    font-size: 14px;
+    text-overflow: ellipsis;
+  }
 }
diff --git a/src/components/sokefelt/sokefelt.tsx b/src/components/sokefelt/sokefelt.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { Input } from 'nav-frontend-skjema';
-import './sokefelt.less';
 import { useFilterStore } from '../../stores/filter-store';
+import './sokefelt.less';
 
 export const Sokefelt = () => {
-	const { fnrOrNameFilter, setFnrOrNameFilter } = useFilterStore();
+	const { filters, setFnrOrNameFilter } = useFilterStore();
 
 	function handleOnQueryChanged(e: React.ChangeEvent<HTMLInputElement>) {
 		setFnrOrNameFilter(e.target.value);
@@ -16,7 +16,7 @@ export const Sokefelt = () => {
 			    label=""
 			    placeholder="Søk etter navn eller fødselsnummer"
 			    onChange={handleOnQueryChanged}
-			    value={fnrOrNameFilter}
+			    value={filters.fnrOrName}
 		    />
 	    </div>
     );
diff --git a/src/components/user-table/user-table.tsx b/src/components/user-table/user-table.tsx
@@ -3,12 +3,27 @@ import { Bruker } from '../../rest/data/bruker';
 import { UserRow } from './user-table-row';
 import { UserTableHeader } from './user-table-header';
 import './user-table.less';
+import { Systemtittel } from 'nav-frontend-typografi';
 
 export const UserTable = (props: { brukere: Bruker[] }) => {
+	const { brukere } = props;
+
+	if (brukere.length === 0) {
+		return (
+			<div>
+				<Systemtittel>Fant ingen brukere</Systemtittel>
+			</div>
+		);
+	}
+
     return (
     	<table>
-		    <UserTableHeader />
-		    {props.brukere.map((bruker, idx) => <UserRow bruker={bruker} key={idx} />)}
+		    <thead>
+		        <UserTableHeader />
+		    </thead>
+		    <tbody>
+		        {props.brukere.map((bruker, idx) => <UserRow bruker={bruker} key={idx} />)}
+		    </tbody>
 	    </table>
     );
 };
diff --git a/src/hovedside/hovedside.tsx b/src/hovedside/hovedside.tsx
@@ -1,14 +1,15 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { DataFetcher } from '../components/datafetcher';
 import './hovedside.less';
 import { StatusFilter } from '../components/status-filter/status-filter';
 import { EnhetFilter } from '../components/enhet-filter/enhet-filter';
 import { Sokefelt } from '../components/sokefelt/sokefelt';
 import { UserTable } from '../components/user-table/user-table';
-import { useFetchStore } from '../stores/fetch-store';
+import { FilterEtiketter } from '../components/filter-etiketter/filter-etiketter';
+import { useFilteredUsersStore } from '../stores/filtered-users-store';
 
 export const Hovedside = () => {
-	const { brukere } = useFetchStore();
+	const { filteredUsers } = useFilteredUsersStore();
 
     return (
 	    <main className="hovedside">
@@ -19,7 +20,8 @@ export const Hovedside = () => {
 				    <EnhetFilter/>
 			    </div>
 			    <div className="table-column">
-				    <UserTable brukere={brukere.data} />
+				    <FilterEtiketter/>
+				    <UserTable brukere={filteredUsers}/>
 			    </div>
 		    </DataFetcher>
 	    </main>
diff --git a/src/stores/filter-store.ts b/src/stores/filter-store.ts
@@ -1,9 +1,21 @@
 import createUseContext from 'constate';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
+
+export interface Filters {
+	fnrOrName: string;
+	enheter: string[];
+}
 
 export const useFilterStore = createUseContext(() => {
 	const [fnrOrNameFilter, setFnrOrNameFilter] = useState<string>('');
 	const [enheterFilter, setEnheterFilter] = useState<string[]>([]);
 
-	return { fnrOrNameFilter, setFnrOrNameFilter, enheterFilter, setEnheterFilter };
+	const filters: Filters = useMemo(() => {
+		return {
+			fnrOrName: fnrOrNameFilter,
+			enheter: enheterFilter
+		};
+	}, [fnrOrNameFilter, enheterFilter]);
+
+	return { filters, setFnrOrNameFilter, setEnheterFilter };
 });
diff --git a/src/stores/filtered-users-store.ts b/src/stores/filtered-users-store.ts
@@ -0,0 +1,8 @@
+import { useState } from 'react';
+import createUseContext from 'constate';
+import { Bruker } from '../rest/data/bruker';
+
+export const useFilteredUsersStore = createUseContext(() => {
+	const [filteredUsers, setFilteredUsers] = useState<Bruker[]>([]);
+	return { filteredUsers, setFilteredUsers };
+});
diff --git a/src/stores/store-provider.tsx b/src/stores/store-provider.tsx
@@ -1,15 +1,19 @@
 import React from 'react';
 import { useFetchStore } from './fetch-store';
 import { useFilterStore } from './filter-store';
+import { useFilteredUsersStore } from './filtered-users-store';
+
 import { ChildrenProps } from '../utils/types/children-props';
 
 const StoreProvider = (props: ChildrenProps) => {
 	return (
-		<useFetchStore.Provider>
-			<useFilterStore.Provider>
-				{props.children}
-			</useFilterStore.Provider>
-		</useFetchStore.Provider>
+		<useFilteredUsersStore.Provider>
+			<useFetchStore.Provider>
+				<useFilterStore.Provider>
+					{props.children}
+				</useFilterStore.Provider>
+			</useFetchStore.Provider>
+		</useFilteredUsersStore.Provider>
 	);
 };
 
diff --git a/src/utils/filter-utils.ts b/src/utils/filter-utils.ts
@@ -0,0 +1,22 @@
+import { Filters } from '../stores/filter-store';
+import { Bruker } from '../rest/data/bruker';
+import { isEmpty } from './index';
+
+export const hasFilters = (filters: Filters): boolean => {
+	return !isEmpty(filters.fnrOrName);
+};
+
+export const filterUsers = (filters: Filters, users: Bruker[]): Bruker[] => {
+	let filteredUsers = [...users];
+
+	if (!isEmpty(filters.fnrOrName)) {
+		filteredUsers = filteredUsers.filter(u => matchesFnrOrName(filters.fnrOrName, u));
+	}
+
+	return filteredUsers;
+};
+
+const matchesFnrOrName = (fnrOrName: string, bruker: Bruker): boolean => {
+	const brukerNavn = bruker.fornavn + ' ' + bruker.etternavn;
+	return bruker.fnr.includes(fnrOrName) || brukerNavn.toLowerCase().includes(fnrOrName.toLowerCase());
+};
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -1,3 +1,7 @@
 
 // tslint:disable-next-line:no-empty
-export function doNothing() {}
+export function doNothing() {}
+
+export function isEmpty(str: string): boolean {
+	return str ? str.trim().length === 0 : true;
+}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
++
 +.filter-etiketter {
 +  margin-bottom: 1rem;
 +}
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,8 @@`
`1`	`1`	`.sokefelt {`
`2`	`2`	`margin-bottom: 1rem;`
	`3`	`+`
	`4`	`+ input {`
	`5`	`+ font-size: 14px;`
	`6`	`+ text-overflow: ellipsis;`
	`7`	`+ }`
`3`	`8`	`}`