Skip to content

Commit dabddf8

Browse files
AlexGaardAlexGaard
committed
FO-2772 Koblet sammen sortering og søk
1 parent 070f42e commit dabddf8

File tree

10 files changed

+70
-77
lines changed

10 files changed

+70
-77
lines changed

‎src/components/datafetcher.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
import React, { useEffect } from 'react';
2-
import { useFetchStore } from '../stores/fetch-store';
2+
import { useDataFetcherStore } from '../stores/data-fetcher-store';
33
import { hasAnyFailed, isAnyNotStartedOrPending, isNotStarted } from '../rest/utils';
44
import { AlertStripeFeil } from 'nav-frontend-alertstriper';
55
import Spinner from './felles/spinner/spinner';
66

77
export function DataFetcher(props: { children: any }) {
8-
const { innloggetVeileder } = useFetchStore();
8+
const { innloggetVeilederFetcher } = useDataFetcherStore();
99

1010
useEffect(() => {
11-
if (isNotStarted(innloggetVeileder)) {
12-
innloggetVeileder.fetch(null);
11+
if (isNotStarted(innloggetVeilederFetcher)) {
12+
innloggetVeilederFetcher.fetch(null);
1313
}
1414
// eslint-disable-next-line react-hooks/exhaustive-deps
15-
}, [innloggetVeileder]);
15+
}, [innloggetVeilederFetcher]);
1616

17-
if (isAnyNotStartedOrPending([innloggetVeileder])) {
17+
if (isAnyNotStartedOrPending([innloggetVeilederFetcher])) {
1818
return <Spinner />;
19-
} else if (hasAnyFailed([innloggetVeileder])) {
19+
} else if (hasAnyFailed([innloggetVeilederFetcher])) {
2020
return (
2121
<AlertStripeFeil className="vedtaksstotte-alert">
2222
Det oppnås for tiden ikke kontakt med alle baksystemer.

‎src/components/filters/enhet-dropdown/enhet-dropdown.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import Select from 'react-select';
33
import { Enhet } from '../../../rest/data/innlogget-veileder';
4-
import { useFetchStore } from '../../../stores/fetch-store';
4+
import { useDataFetcherStore } from '../../../stores/data-fetcher-store';
55
import './enhet-dropdown.less';
66
import { Element } from 'nav-frontend-typografi';
77
import { useSokStore } from '../../../stores/sok-store';
@@ -21,10 +21,10 @@ export function mapDropdownOptionTilEnhet(dropdownOption: DropdownOption): Enhet
2121

2222
export const EnhetDropdown = () => {
2323
const { filters, setEnheterFilter } = useSokStore();
24-
const { innloggetVeileder } = useFetchStore();
24+
const { innloggetVeilederFetcher } = useDataFetcherStore();
2525

2626
const valgteEnheter = filters.enheter.map(mapEnhetTilDropdownOption);
27-
const enheter = innloggetVeileder.data.enheter.map(mapEnhetTilDropdownOption);
27+
const enheter = innloggetVeilederFetcher.data.enheter.map(mapEnhetTilDropdownOption);
2828

2929
function handleOnEnhetSelectedChanged(selectedOptions: DropdownOption[] | null) {
3030
if (selectedOptions == null) {

‎src/components/sok-sync.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import { useEffect } from 'react';
2-
import { useFetchStore } from '../stores/fetch-store';
2+
import { useDataFetcherStore } from '../stores/data-fetcher-store';
33
import { lagBeslutterOversiktSok } from '../utils/sok-utils';
44
import { useSokStore } from '../stores/sok-store';
55

66
export const SokSync = () => {
7-
const { brukere } = useFetchStore();
7+
const { brukereFetcher } = useDataFetcherStore();
88
const { filters, currentPage, orderByDirection, orderByField } = useSokStore();
99

1010
useEffect(() => {
1111
const sok = lagBeslutterOversiktSok(filters, currentPage, orderByDirection, orderByField);
12-
brukere.fetch({ sok });
12+
brukereFetcher.fetch({ sok });
1313
// eslint-disable-next-line react-hooks/exhaustive-deps
1414
}, [filters, currentPage, orderByDirection, orderByField]);
1515

‎src/components/user-table/header/user-table-header.tsx‎

Lines changed: 13 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -10,51 +10,39 @@ import {
1010
import Show from '../../felles/show';
1111
import arrowDownIcon from './arrow-down.svg';
1212
import './user-table-header.less';
13-
import { OrderByDirection } from '../../../rest/api';
13+
import { OrderByDirection, OrderByField as HeaderFieldName } from '../../../rest/api';
1414

1515
interface UserTableHeaderProps {
1616
onOrderByChanged: OnOrderByChanged;
17-
}
18-
19-
export enum HeaderFieldName {
20-
NAVN = 'NAVN',
21-
FNR = 'FNR',
22-
VEDTAK_STARTET = 'VEDTAK_STARTET',
23-
STATUS = 'STATUS',
24-
BESLUTTER = 'BESLUTTER',
25-
VEILEDER = 'VEILEDER',
26-
OPFOLGING_ENHET = 'OPFOLGING_ENHET',
27-
UTKAST_ENDRET = 'UTKAST_ENDRET'
17+
orderByData: OrderByData;
2818
}
2919

3020
export const UserTableHeader = (props: UserTableHeaderProps) => {
31-
const [orderByData, setOrderByData] = useState<OrderByData>({ fieldName: HeaderFieldName.NAVN, direction: undefined });
21+
const { orderByData, onOrderByChanged } = props;
3222

3323
function handleOnOrderByChanged(fieldName: HeaderFieldName) {
3424
const newOrderByData: OrderByData = {
35-
fieldName,
25+
field: fieldName,
3626
direction: INITIAL_DIRECTION
3727
};
3828

39-
if (fieldName === orderByData.fieldName) {
29+
if (fieldName === orderByData.field) {
4030
newOrderByData.direction = toggleOrderByDirection(orderByData.direction);
4131
}
4232

43-
console.log('orderByData', newOrderByData); // tslint:disable-line
44-
setOrderByData(newOrderByData);
45-
props.onOrderByChanged(newOrderByData);
33+
onOrderByChanged(newOrderByData);
4634
}
4735

4836
return (
4937
<div className="user-table-header">
50-
<HeaderField name={HeaderFieldName.NAVN} text="Etternavn, Fornavn" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
51-
<HeaderField name={HeaderFieldName.FNR} text="Fødselsnummer" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
38+
<HeaderField name={HeaderFieldName.BRUKER_ETTERNAVN} text="Etternavn, Fornavn" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
39+
<HeaderField name={HeaderFieldName.BRUKER_FNR} text="Fødselsnummer" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
5240
<HeaderField name={HeaderFieldName.VEDTAK_STARTET} text="Vedtak startet" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
5341
<HeaderField name={HeaderFieldName.STATUS} text="Status" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
54-
<HeaderField name={HeaderFieldName.BESLUTTER} text="Beslutter" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
55-
<HeaderField name={HeaderFieldName.VEILEDER} text="Veileder" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
56-
<HeaderField name={HeaderFieldName.UTKAST_ENDRET} text="Status endret" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
57-
<HeaderField name={HeaderFieldName.OPFOLGING_ENHET} text="Enhet" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
42+
<HeaderField name={HeaderFieldName.BESLUTTER_NAVN} text="Beslutter" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
43+
<HeaderField name={HeaderFieldName.VEILEDER_NAVN} text="Veileder" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
44+
<HeaderField name={HeaderFieldName.STATUS_ENDRET} text="Status endret" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
45+
<HeaderField name={HeaderFieldName.BRUKER_OPPFOLGINGSENHET_NAVN} text="Enhet" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
5846
<UserTablePagination />
5947
</div>
6048
);
@@ -77,7 +65,7 @@ const HeaderField = (props: HeaderFieldProps) => {
7765
return (
7866
<button onClick={() => onOrderByChanged(name)} className="table-header-field">
7967
{text}
80-
<Show if={orderByData.fieldName === name && orderByData.direction !== undefined}>
68+
<Show if={orderByData.field === name && orderByData.direction !== undefined}>
8169
<img className={iconClasses} src={arrowDownIcon} alt={alt} />
8270
</Show>
8371
</button>

‎src/components/user-table/table-utils.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { OrderByDirection } from '../../rest/api';
1+
import { OrderByDirection, OrderByField } from '../../rest/api';
22
import { OrNothing } from '../../utils/types/ornothing';
33

44
export const INITIAL_DIRECTION = OrderByDirection.ASC;
55

66
export type OnOrderByChanged = (orderByData: OrderByData) => void;
77

88
export interface OrderByData {
9-
fieldName: string;
9+
field: OrNothing<OrderByField>;
1010
direction: OrNothing<OrderByDirection>;
1111
}
1212

‎src/components/user-table/user-table.tsx‎

Lines changed: 32 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,46 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import { Bruker } from '../../rest/data/bruker';
33
import { UserTableHeader } from './header/user-table-header';
44
import { AlertStripeInfo } from 'nav-frontend-alertstriper';
55
import { UserTableBody } from './body/user-table-body';
6-
import './user-table.less';
76
import { OrderByData } from './table-utils';
7+
import { useSokStore } from '../../stores/sok-store';
8+
import './user-table.less';
9+
import { useDataFetcherStore } from '../../stores/data-fetcher-store';
10+
import { hasFinished, isNotStartedOrPending } from '../../rest/utils';
11+
import Show from '../felles/show';
12+
import Spinner from '../felles/spinner/spinner';
813

9-
export const UserTable = (props: { brukere: Bruker[] }) => {
10-
const { brukere } = props;
11-
12-
if (brukere.length === 0) {
13-
return (
14-
<AlertStripeInfo className="user-table__no-users">
15-
Fant ingen brukere
16-
</AlertStripeInfo>
17-
);
18-
}
19-
20-
function handleOnOrderByChanged(orderByData: OrderByData) {
14+
export const UserTable = () => {
15+
const { brukereFetcher } = useDataFetcherStore();
16+
const { orderByField, orderByDirection, setOrderByField, setOrderByDirection } = useSokStore();
17+
const tableBrukere = brukereFetcher.data || [];
18+
const orderByData: OrderByData = {
19+
field: orderByField,
20+
direction: orderByDirection
21+
};
2122

23+
function handleOnOrderByChanged(nyData: OrderByData) {
24+
setOrderByField(nyData.field);
25+
setOrderByDirection(nyData.direction);
2226
}
2327

2428
return (
2529
<section className="user-table">
26-
<UserTableHeader onOrderByChanged={handleOnOrderByChanged} />
27-
<UserTableBody brukere={brukere} />
30+
<UserTableHeader orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
31+
<Show if={isNotStartedOrPending(brukereFetcher)}>
32+
<Spinner />
33+
</Show>
34+
35+
{
36+
tableBrukere.length === 0 && hasFinished(brukereFetcher)
37+
? (
38+
<AlertStripeInfo className="user-table__no-users">
39+
Fant ingen brukere
40+
</AlertStripeInfo>
41+
)
42+
: <UserTableBody brukere={tableBrukere} />
43+
}
2844
</section>
2945
);
3046
};

‎src/hovedside/hovedside.tsx‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,16 @@ import React from 'react';
22
import { DataFetcher } from '../components/datafetcher';
33
import { UserTable } from '../components/user-table/user-table';
44
import { Filters } from '../components/filters/filters';
5-
import { useFetchStore } from '../stores/fetch-store';
65
import './hovedside.less';
7-
import Spinner from '../components/felles/spinner/spinner';
8-
import Show from '../components/felles/show';
9-
import { hasFinished, isNotStartedOrPending } from '../rest/utils';
106

117
export const Hovedside = () => {
12-
const { brukere } = useFetchStore();
13-
148
return (
159
<main className="hovedside">
1610
<DataFetcher>
1711
<div className="hovedside__innhold">
1812
<Filters />
1913
{/*<FilterEtiketter/>*/}
20-
<Show if={isNotStartedOrPending(brukere)}>
21-
<Spinner />
22-
</Show>
23-
<Show if={hasFinished(brukere)}>
24-
<UserTable brukere={brukere.data}/>
25-
</Show>
14+
<UserTable />
2615
</div>
2716
</DataFetcher>
2817
</main>

‎src/stores/fetch-store.ts‎ renamed to ‎src/stores/data-fetcher-store.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import { BeslutteroversiktSok, lagHentBrukereFetchInfo, lagHentInnloggetVeileder
44
import { Bruker } from '../rest/data/bruker';
55
import { InnloggetVeileder } from '../rest/data/innlogget-veileder';
66

7-
export const useFetchStore = createUseContext(() => {
8-
const brukere = useFetch<Bruker[], { sok: BeslutteroversiktSok }>(lagHentBrukereFetchInfo);
9-
const innloggetVeileder = useFetch<InnloggetVeileder>(lagHentInnloggetVeilederFetchInfo);
7+
export const useDataFetcherStore = createUseContext(() => {
8+
const brukereFetcher = useFetch<Bruker[], { sok: BeslutteroversiktSok }>(lagHentBrukereFetchInfo);
9+
const innloggetVeilederFetcher = useFetch<InnloggetVeileder>(lagHentInnloggetVeilederFetchInfo);
1010

11-
return { brukere, innloggetVeileder };
11+
return { brukereFetcher, innloggetVeilederFetcher };
1212
});

‎src/stores/sok-store.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ export interface Filters {
1515
export const useSokStore = createUseContext(() => {
1616
const [totalPages, setTotalPages] = useState(-1); // TODO: Start using
1717
const [currentPage, setCurrentPage] = useState(0);
18-
const [orderByField, setOrderByField] = useState<OrderByField>();
19-
const [orderByDirection, setOrderByDirection] = useState<OrderByDirection>();
18+
const [orderByField, setOrderByField] = useState<OrNothing<OrderByField>>();
19+
const [orderByDirection, setOrderByDirection] = useState<OrNothing<OrderByDirection>>();
2020

2121
const [fnrOrNameFilter, setFnrOrNameFilter] = useState<string>('');
2222
const [enheterFilter, setEnheterFilter] = useState<Enhet[]>([]);

‎src/stores/store-provider.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import React from 'react';
2-
import { useFetchStore } from './fetch-store';
2+
import { useDataFetcherStore } from './data-fetcher-store';
33
import { useSokStore } from './sok-store';
44

55
import { ChildrenProps } from '../utils/types/children-props';
66

77
const StoreProvider = (props: ChildrenProps) => {
88
return (
9-
<useFetchStore.Provider>
9+
<useDataFetcherStore.Provider>
1010
<useSokStore.Provider>
1111
{props.children}
1212
</useSokStore.Provider>
13-
</useFetchStore.Provider>
13+
</useDataFetcherStore.Provider>
1414
);
1515
};
1616

0 commit comments

Comments
 (0)