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