Skip to content

Commit 7dfa2d8

Browse files
AlexGaardAlexGaard
committed
FO-2772 La til paginering
1 parent 78001dc commit 7dfa2d8

File tree

13 files changed

+176
-34
lines changed

13 files changed

+176
-34
lines changed

‎src/components/sok-sync.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,26 @@ import { useEffect } from 'react';
22
import { useDataFetcherStore } from '../stores/data-fetcher-store';
33
import { lagBeslutterOversiktSok } from '../utils/sok-utils';
44
import { useSokStore } from '../stores/sok-store';
5+
import { hasFinishedWithData } from '../rest/utils';
56

67
export const SokSync = () => {
78
const { brukereFetcher } = useDataFetcherStore();
8-
const { filters, currentPage, orderByDirection, orderByField } = useSokStore();
9+
const { filters, currentPage, pageSize, orderByDirection, orderByField, seeAll, setTotalPages } = useSokStore();
910

1011
useEffect(() => {
11-
const sok = lagBeslutterOversiktSok(filters, currentPage, orderByDirection, orderByField);
12+
const sok = lagBeslutterOversiktSok(filters, currentPage, pageSize, seeAll, orderByDirection, orderByField);
1213
brukereFetcher.fetch({ sok });
1314
// eslint-disable-next-line react-hooks/exhaustive-deps
14-
}, [filters, currentPage, orderByDirection, orderByField]);
15+
}, [filters, currentPage, orderByDirection, orderByField, seeAll]);
16+
17+
useEffect(() => {
18+
if (hasFinishedWithData(brukereFetcher)) {
19+
const totaltAntallBrukere = brukereFetcher.data.totaltAntall;
20+
const totalPages = Math.max(1, Math.ceil(totaltAntallBrukere / pageSize));
21+
setTotalPages(totalPages);
22+
}
23+
// eslint-disable-next-line react-hooks/exhaustive-deps
24+
}, [brukereFetcher]);
1525

1626
return null;
1727
};

‎src/components/user-table/body/user-table-body.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515

1616
.user-table-row {
1717
display: grid;
18-
grid-template-columns: 2.5fr repeat(2, 2fr) 3fr repeat(3, 2fr) 1fr 200px;
18+
grid-template-columns: 2.5fr repeat(2, 2fr) 3fr repeat(3, 2fr) 1fr 250px;
1919
justify-items: start;
2020
padding: 1.25rem 0 1.75rem 7px;
2121
cursor: pointer;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
.user-table-header {
44
display: grid;
5-
grid-template-columns: 2.5fr repeat(2, 2fr) 3fr repeat(3, 2fr) 1fr 200px;
5+
grid-template-columns: 2.5fr repeat(2, 2fr) 3fr repeat(3, 2fr) 1fr 250px;
66
justify-items: start;
77
padding-bottom: 1rem;
88
border-bottom: 1px solid @navGra60;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
22
import cls from 'classnames';
3-
import { UserTablePagination } from './user-table-pagination';
43
import {
54
INITIAL_DIRECTION,
65
OnOrderByChanged,
@@ -11,6 +10,7 @@ import Show from '../../felles/show';
1110
import arrowDownIcon from './arrow-down.svg';
1211
import './user-table-header.less';
1312
import { OrderByDirection, OrderByField as HeaderFieldName } from '../../../rest/api';
13+
import { UserTablePagination } from '../pagination/user-table-pagination';
1414

1515
interface UserTableHeaderProps {
1616
onOrderByChanged: OnOrderByChanged;

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

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎src/components/user-table/pagination/user-table-pagination.less‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
@import "~nav-frontend-core/less/core";
2+
@import "~nav-frontend-paneler-style/src/mixins";
3+
4+
.paginering {
5+
display: flex;
6+
align-items: center;
7+
width: 100%;
8+
justify-content: flex-end;
9+
}
10+
11+
.paginering__knapper {
12+
float: right;
13+
}
14+
15+
.paginering__knapp {
16+
border: 1px solid transparent;
17+
border-left: 1px solid @navGra40;
18+
width: 25%;
19+
margin: 0 1px;
20+
background-color: transparent !important;
21+
22+
.panel-mixin();
23+
.panel-focushover-mixin();
24+
25+
display: inline-block;
26+
padding: 0.25rem 0.5rem;
27+
border-radius: 0;
28+
29+
&:hover {
30+
box-shadow: none;
31+
border-bottom: 1px solid @navGra40;
32+
cursor: pointer;
33+
}
34+
35+
&:disabled {
36+
cursor: default;
37+
border-bottom: none;
38+
}
39+
40+
&:first-child {
41+
border-left: none;
42+
min-width: fit-content;
43+
}
44+
45+
&:last-child {
46+
border-right: 1px solid @navGra40;
47+
}
48+
49+
&:focus {
50+
box-shadow: 0 0 0 3px @fokusFarge;
51+
}
52+
}

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

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React from 'react';
2+
import { HoyreChevron, VenstreChevron } from 'nav-frontend-chevron';
3+
import cls from 'classnames';
4+
import { useSokStore } from '../../../stores/sok-store';
5+
import './user-table-pagination.less';
6+
import { DEFAULT_PAGINATION_SIZE, SEE_ALL_PAGINATION_SIZE } from '../../../utils/sok-utils';
7+
import Show from '../../felles/show';
8+
9+
function PagineringKnapp(props: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>) {
10+
const { className, children, ...rest } = props;
11+
return (
12+
<button className={cls(className, 'paginering__knapp')} {...rest}>
13+
{props.children}
14+
</button>
15+
);
16+
}
17+
18+
export function UserTablePagination() {
19+
const { currentPage, totalPages, seeAll, setCurrentPage, setSeeAll, setPageSize } = useSokStore();
20+
21+
const erPaForsteSide: boolean = currentPage === 1;
22+
const erPaSisteSide: boolean = currentPage >= totalPages;
23+
24+
function handlePageChanged(newPage: number) {
25+
setCurrentPage(newPage);
26+
}
27+
28+
function handleSeeAllChanged() {
29+
const toggledSeeAll = !seeAll;
30+
31+
if (toggledSeeAll) {
32+
setPageSize(SEE_ALL_PAGINATION_SIZE);
33+
} else {
34+
setPageSize(DEFAULT_PAGINATION_SIZE);
35+
}
36+
37+
setCurrentPage(1);
38+
setSeeAll(toggledSeeAll);
39+
}
40+
41+
return (
42+
<div className={cls('paginering')}>
43+
<PagineringKnapp onClick={handleSeeAllChanged}>
44+
{!seeAll ? 'Se alle' : 'Se færre'}
45+
</PagineringKnapp>
46+
47+
<PagineringKnapp disabled={erPaForsteSide} onClick={() => handlePageChanged(currentPage - 1)}>
48+
<VenstreChevron/>
49+
</PagineringKnapp>
50+
51+
<Show if={!erPaForsteSide}>
52+
<PagineringKnapp onClick={() => handlePageChanged(1)}>1</PagineringKnapp>
53+
</Show>
54+
55+
<PagineringKnapp>
56+
<strong>{currentPage}</strong>
57+
</PagineringKnapp>
58+
59+
<Show if={!erPaSisteSide && !seeAll}>
60+
<PagineringKnapp onClick={() => handlePageChanged(totalPages)}>
61+
{totalPages}
62+
</PagineringKnapp>
63+
</Show>
64+
65+
<PagineringKnapp disabled={erPaSisteSide || seeAll} onClick={() => handlePageChanged(currentPage + 1)}>
66+
<HoyreChevron/>
67+
</PagineringKnapp>
68+
</div>
69+
);
70+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import Spinner from '../felles/spinner/spinner';
1313
export const UserTable = () => {
1414
const { brukereFetcher, aktivEnhetFetcher } = useDataFetcherStore();
1515
const { orderByField, orderByDirection, setOrderByField, setOrderByDirection } = useSokStore();
16-
const tableBrukere = brukereFetcher.data || [];
16+
const tableBrukere = (brukereFetcher.data && brukereFetcher.data.brukere) || [];
1717
const aktivEnhet = aktivEnhetFetcher.data ? aktivEnhetFetcher.data.aktivEnhet : undefined;
1818
const orderByData: OrderByData = {
1919
field: orderByField,

‎src/mock/sok-mock.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { HandlerArgument, ResponseData } from 'yet-another-fetch-mock';
2-
import { VEILARBVEDTAKSSTOTTE_API } from '../rest/api';
2+
import { BeslutteroversiktSok, VEILARBVEDTAKSSTOTTE_API } from '../rest/api';
33
import { lagBrukere } from './data/brukere';
44
import { Mock } from './index';
55

@@ -8,7 +8,8 @@ const alleBrukere = lagBrukere(100);
88
export const mockBeslutteroversiktSok: Mock = {
99
url: `${VEILARBVEDTAKSSTOTTE_API}/beslutteroversikt/sok`,
1010
handler: async (args: HandlerArgument): Promise<ResponseData> => {
11-
12-
return { status: 200, body: JSON.stringify(alleBrukere) };
11+
const sok = args.body as BeslutteroversiktSok;
12+
const brukere = alleBrukere.slice(sok.fra, sok.fra + sok.antall);
13+
return { status: 200, body: JSON.stringify({ brukere, totaltAntall: alleBrukere.length }) };
1314
}
1415
};

‎src/rest/data/bruker.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@ export enum UtkastStatus {
66
GODKJENT_AV_BESLUTTER = 'GODKJENT_AV_BESLUTTER'
77
}
88

9+
export interface BrukereMedAntall {
10+
brukere: Bruker[];
11+
totaltAntall: number;
12+
}
13+
914
export interface Bruker {
1015
brukerFnr: string;
1116
brukerFornavn: string;

0 commit comments

Comments
 (0)