Skip to content

Commit c5179c3

Browse files
AlexGaardAlexGaard
committed
FO-2772 Flyttet paginering ut til egen bar
1 parent 7dfa2d8 commit c5179c3

File tree

12 files changed

+117
-93
lines changed

12 files changed

+117
-93
lines changed

‎src/components/filters/filters.less‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
.filters {
22
display: flex;
33
justify-content: space-between;
4+
flex-wrap: wrap;
45
margin-bottom: 2rem;
6+
padding: 1rem 2rem 2rem 2rem;
7+
background-color: white;
58

69
&__dropdowns {
710
display: flex;

‎src/components/header/header.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

22
.header {
3-
padding: 2rem 2.5rem;
3+
padding: 2rem;
44
background-color: white;
55
}

‎src/components/user-table/pagination/user-table-pagination.less‎ renamed to ‎src/components/pagination-bar/pagination-bar.less‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
@import "~nav-frontend-core/less/core";
22
@import "~nav-frontend-paneler-style/src/mixins";
33

4+
.pagination-bar {
5+
display: flex;
6+
justify-content: space-between;
7+
padding: 0 2rem 2rem 2rem;
8+
}
9+
410
.paginering {
511
display: flex;
612
align-items: center;
7-
width: 100%;
813
justify-content: flex-end;
914
}
1015

@@ -42,10 +47,6 @@
4247
min-width: fit-content;
4348
}
4449

45-
&:last-child {
46-
border-right: 1px solid @navGra40;
47-
}
48-
4950
&:focus {
5051
box-shadow: 0 0 0 3px @fokusFarge;
5152
}

‎src/components/pagination-bar/pagination-bar.tsx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
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 './pagination-bar.less';
6+
import { DEFAULT_PAGINATION_SIZE, SEE_ALL_PAGINATION_SIZE } from '../../utils/sok-utils';
7+
import Show from '../felles/show';
8+
import { useDataFetcherStore } from '../../stores/data-fetcher-store';
9+
import { Element } from 'nav-frontend-typografi';
10+
import { hasData } from '../../rest/utils';
11+
12+
function PagineringKnapp(props: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>) {
13+
const { className, children, ...rest } = props;
14+
return (
15+
<button className={cls(className, 'paginering__knapp')} {...rest}>
16+
{props.children}
17+
</button>
18+
);
19+
}
20+
21+
export function PaginationBar() {
22+
const { currentPage, totalPages, seeAll, setCurrentPage, setSeeAll, pageSize, setPageSize } = useSokStore();
23+
const { brukereFetcher } = useDataFetcherStore();
24+
25+
const erPaForsteSide: boolean = currentPage === 1;
26+
const erPaSisteSide: boolean = currentPage >= totalPages;
27+
28+
const fraBruker = ((currentPage - 1) * pageSize) + 1;
29+
const tilBruker = ((currentPage - 1) * pageSize) + (brukereFetcher.data ? brukereFetcher.data.brukere.length : 0);
30+
const totaltBrukere = brukereFetcher.data ? brukereFetcher.data.totaltAntall : 0;
31+
32+
function handlePageChanged(newPage: number) {
33+
setCurrentPage(newPage);
34+
}
35+
36+
function handleSeeAllChanged() {
37+
const toggledSeeAll = !seeAll;
38+
39+
if (toggledSeeAll) {
40+
setPageSize(SEE_ALL_PAGINATION_SIZE);
41+
} else {
42+
setPageSize(DEFAULT_PAGINATION_SIZE);
43+
}
44+
45+
setCurrentPage(1);
46+
setSeeAll(toggledSeeAll);
47+
}
48+
49+
return (
50+
<div className="pagination-bar">
51+
<div>
52+
<Show if={hasData(brukereFetcher)}>
53+
<Element>
54+
Viser {fraBruker}-{tilBruker} av totalt {totaltBrukere} brukere
55+
</Element>
56+
</Show>
57+
</div>
58+
<div className={cls('paginering')}>
59+
{/* Vent litt med "Se Alle" funksjonen siden ABAC ikke håndterer store spørringer */}
60+
{/*<PagineringKnapp onClick={handleSeeAllChanged}>*/}
61+
{/* {!seeAll ? 'Se alle' : 'Se færre'}*/}
62+
{/*</PagineringKnapp>*/}
63+
<PagineringKnapp disabled={erPaForsteSide} onClick={() => handlePageChanged(currentPage - 1)}>
64+
<VenstreChevron/>
65+
</PagineringKnapp>
66+
67+
<Show if={!erPaForsteSide}>
68+
<PagineringKnapp onClick={() => handlePageChanged(1)}>1</PagineringKnapp>
69+
</Show>
70+
71+
<PagineringKnapp>
72+
<strong>{currentPage}</strong>
73+
</PagineringKnapp>
74+
75+
<Show if={!erPaSisteSide && !seeAll}>
76+
<PagineringKnapp onClick={() => handlePageChanged(totalPages)}>
77+
{totalPages}
78+
</PagineringKnapp>
79+
</Show>
80+
81+
<PagineringKnapp disabled={erPaSisteSide || seeAll} onClick={() => handlePageChanged(currentPage + 1)}>
82+
<HoyreChevron/>
83+
</PagineringKnapp>
84+
</div>
85+
</div>
86+
);
87+
}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
.user-table-body {
44
padding: 0;
55
margin: 0;
6+
border: 1px solid @navLysGra;
67

78
.user-table-row:nth-child(even) {
89
background-color: white;
@@ -15,9 +16,9 @@
1516

1617
.user-table-row {
1718
display: grid;
18-
grid-template-columns: 2.5fr repeat(2, 2fr) 3fr repeat(3, 2fr) 1fr 250px;
19+
grid-template-columns: 2.5fr repeat(2, 2fr) 3fr repeat(3, 2fr) 1fr;
1920
justify-items: start;
20-
padding: 1.25rem 0 1.75rem 7px;
21+
padding: 1.5rem 2rem;
2122
cursor: pointer;
2223
text-align: center;
2324
align-items: end;

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,16 @@
22

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

1010
.table-header-field {
1111
font-size: 1rem;
1212
font-weight: bolder;
1313
color: @navBla;
14+
padding: 0;
1415

1516
background: transparent;
1617
border: none;

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

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

1514
interface UserTableHeaderProps {
1615
onOrderByChanged: OnOrderByChanged;
@@ -43,7 +42,6 @@ export const UserTableHeader = (props: UserTableHeaderProps) => {
4342
<HeaderField name={HeaderFieldName.VEILEDER_NAVN} text="Veileder" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
4443
<HeaderField name={HeaderFieldName.STATUS_ENDRET} text="Status endret" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
4544
<HeaderField name={HeaderFieldName.BRUKER_OPPFOLGINGSENHET_NAVN} text="Enhet" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
46-
<UserTablePagination />
4745
</div>
4846
);
4947
};

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

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

‎src/hovedside/hovedside.less‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11

22
.hovedside {
3-
margin: 2rem 2.5rem;
3+
display: flex;
4+
flex-direction: column;
45

5-
&__innhold {
6-
display: flex;
7-
flex-direction: column;
6+
&__table {
7+
margin: 2rem 2.5rem;
88
}
9-
}
9+
10+
}

‎src/hovedside/hovedside.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,17 @@ 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 { PaginationBar } from '../components/pagination-bar/pagination-bar';
56
import './hovedside.less';
67

78
export const Hovedside = () => {
89
return (
910
<main className="hovedside">
1011
<DataFetcher>
11-
<div className="hovedside__innhold">
12-
<Filters />
13-
{/*<FilterEtiketter/>*/}
12+
<Filters />
13+
{/*<FilterEtiketter/>*/}
14+
<div className="hovedside__table">
15+
<PaginationBar />
1416
<UserTable />
1517
</div>
1618
</DataFetcher>

0 commit comments

Comments
 (0)