Skip to content

Commit eda93b4

Browse files
AlexGaardAlexGaard
committed
FO-2772 La til sorterting
1 parent b14e7ee commit eda93b4

15 files changed

+231
-62
lines changed

‎package-lock.json‎

Lines changed: 13 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@
4444
"lodash.throttle": "^4.1.1",
4545
"nav-frontend-alertstriper": "^3.0.11",
4646
"nav-frontend-alertstriper-style": "^2.0.9",
47+
"nav-frontend-chevron": "^1.0.10",
48+
"nav-frontend-chevron-style": "^0.3.5",
4749
"nav-frontend-core": "^4.0.11",
4850
"nav-frontend-etiketter": "^1.0.30",
4951
"nav-frontend-etiketter-style": "^0.3.19",
@@ -59,7 +61,7 @@
5961
"nav-frontend-typografi": "^2.0.17",
6062
"nav-frontend-typografi-style": "^1.0.18",
6163
"prop-types": "^15.7.2",
62-
"react": "^16.13.0",
64+
"react": "^16.13.1",
6365
"react-dom": "^16.11.0",
6466
"react-scripts": "3.0.1",
6567
"react-select": "^3.0.8",

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.user-table-body {
2+
padding: 0;
3+
margin: 0;
4+
5+
.user-table-row:nth-child(even) {
6+
background-color: white;
7+
}
8+
9+
.user-table-row:nth-child(odd) {
10+
background-color: #f7f7f7;
11+
}
12+
}
13+
14+
.user-table-row {
15+
display: grid;
16+
grid-template-columns: repeat(7, 1fr) 200px;
17+
padding: 1.5rem 0;
18+
19+
text-align: center;
20+
}

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import { UserRow } from './user-table-row';
3+
import { Bruker } from '../../../rest/data/bruker';
4+
import './user-table-body.less';
5+
6+
interface UserTableBodyProps {
7+
brukere: Bruker[];
8+
}
9+
10+
export const UserTableBody = (props: UserTableBodyProps) => {
11+
return (
12+
<ul className="user-table-body">
13+
{props.brukere.map((bruker, idx) => <UserRow bruker={bruker} key={idx} />)}
14+
</ul>
15+
);
16+
};

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
import { Bruker } from '../../../rest/data/bruker';
3+
import { formatDateTime, dagerSiden } from '../../../utils/date-utils';
4+
import { Normaltekst } from 'nav-frontend-typografi';
5+
6+
export const UserRow = (props: {bruker: Bruker}) => {
7+
const {
8+
fnr, fornavn, etternavn, utkastSistEndret,
9+
oppfolgingsenhetNavn, oppfolgingStartet,
10+
beslutterNavn, status
11+
} = props.bruker;
12+
13+
return (
14+
<li className="user-table-row">
15+
<Normaltekst>{etternavn + ', ' + fornavn}</Normaltekst>
16+
<Normaltekst>{fnr}</Normaltekst>
17+
<Normaltekst>{dagerSiden(oppfolgingStartet)}</Normaltekst>
18+
<Normaltekst>{oppfolgingsenhetNavn}</Normaltekst>
19+
<Normaltekst>{beslutterNavn}</Normaltekst>
20+
<Normaltekst>{status}</Normaltekst>
21+
<Normaltekst>{formatDateTime(utkastSistEndret)}</Normaltekst>
22+
</li>
23+
);
24+
};

‎src/components/user-table/header/arrow-down.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/user-table/header/arrow-up.svg‎

Lines changed: 1 addition & 0 deletions
Loading

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@import "~nav-frontend-core/less/_variabler";
2+
3+
.user-table-header {
4+
display: grid;
5+
grid-template-columns: repeat(7, 1fr) 200px;
6+
padding-bottom: 1rem;
7+
border-bottom: 1px solid @navGra60;
8+
9+
.table-header-field {
10+
font-size: 1rem;
11+
font-weight: bolder;
12+
color: @navBla;
13+
14+
background: transparent;
15+
border: none;
16+
cursor: pointer;
17+
white-space: nowrap;
18+
}
19+
20+
.table-header-field__order-icon {
21+
width: 16px;
22+
height: 16px;
23+
margin-left: 0.25rem;
24+
}
25+
}

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

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import React, { useState } from 'react';
2+
import { UserTablePagination } from './user-table-pagination';
3+
import {
4+
INITIAL_DIRECTION,
5+
OnOrderByChanged,
6+
OrderByData,
7+
OrderByDirection,
8+
toggleOrderByDirection
9+
} from '../table-utils';
10+
import Show from '../../felles/show';
11+
import arrowUpIcon from './arrow-up.svg';
12+
import arrowDownIcon from './arrow-down.svg';
13+
import './user-table-header.less';
14+
15+
interface UserTableHeaderProps {
16+
onOrderByChanged: OnOrderByChanged;
17+
}
18+
19+
export enum HeaderFieldName {
20+
NAVN = 'NAVN',
21+
FNR = 'FNR',
22+
OPPFOLGING_STARTET = 'OPPFOLGING_STARTET',
23+
OPFOLGING_ENHET = 'OPFOLGING_ENHET',
24+
BESLUTTER = 'BESLUTTER',
25+
STATUS = 'STATUS',
26+
UTKAST_ENDRET = 'UTKAST_ENDRET'
27+
}
28+
29+
export const UserTableHeader = (props: UserTableHeaderProps) => {
30+
const [orderByData, setOrderByData] = useState<OrderByData>({ fieldName: HeaderFieldName.NAVN, direction: OrderByDirection.NONE });
31+
32+
function handleOnOrderByChanged(fieldName: HeaderFieldName) {
33+
const newOrderByData: OrderByData = {
34+
fieldName,
35+
direction: INITIAL_DIRECTION
36+
};
37+
38+
if (fieldName === orderByData.fieldName) {
39+
newOrderByData.direction = toggleOrderByDirection(orderByData.direction);
40+
}
41+
42+
console.log('orderByData', newOrderByData); // tslint:disable-line
43+
setOrderByData(newOrderByData);
44+
props.onOrderByChanged(newOrderByData);
45+
}
46+
47+
return (
48+
<div className="user-table-header">
49+
<HeaderField name={HeaderFieldName.NAVN} text="Etternavn, Fornavn" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
50+
<HeaderField name={HeaderFieldName.FNR} text="Fødselsnummer" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
51+
<HeaderField name={HeaderFieldName.OPPFOLGING_STARTET} text="Oppfølging startet" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
52+
<HeaderField name={HeaderFieldName.OPFOLGING_ENHET} text="Oppfølgingsenhet" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
53+
<HeaderField name={HeaderFieldName.BESLUTTER} text="Beslutter" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
54+
<HeaderField name={HeaderFieldName.STATUS} text="Status" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
55+
<HeaderField name={HeaderFieldName.UTKAST_ENDRET} text="Utkast sist endret" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
56+
<UserTablePagination />
57+
</div>
58+
);
59+
};
60+
61+
interface HeaderFieldProps {
62+
name: HeaderFieldName;
63+
text: string;
64+
orderByData: OrderByData;
65+
onOrderByChanged: (fieldName: HeaderFieldName) => void;
66+
}
67+
68+
const HeaderField = (props: HeaderFieldProps) => {
69+
const { name, text, orderByData, onOrderByChanged } = props;
70+
const icon = orderByData.direction === OrderByDirection.ASC ? arrowUpIcon : arrowDownIcon;
71+
const alt = 'Sortert ' + (orderByData.direction === OrderByDirection.ASC ? 'økende' : 'synkenede');
72+
return (
73+
<button onClick={() => onOrderByChanged(name)} className="table-header-field">
74+
{text}
75+
<Show if={orderByData.fieldName === name && orderByData.direction !== OrderByDirection.NONE}>
76+
<img className="table-header-field__order-icon" src={icon} alt={alt} />
77+
</Show>
78+
</button>
79+
);
80+
};

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react';
2+
import { Normaltekst } from 'nav-frontend-typografi';
3+
4+
export const UserTablePagination = () => {
5+
return (
6+
<div>
7+
<Normaltekst>Pagination goes here</Normaltekst>
8+
</div>
9+
);
10+
};

0 commit comments

Comments
 (0)