Skip to content

Commit 7dc566e

Browse files
mrbjoernmrbjoern
committed
💄 Justerer styling, legger til språkstøtte
1 parent 7e2a209 commit 7dc566e

File tree

6 files changed

+91
-53
lines changed

6 files changed

+91
-53
lines changed

‎components/DokumentoversiktNy/Dokumentoversikt.module.css

+20
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22
max-width: 600px;
33
}
44

5+
.documentList {
6+
list-style: none;
7+
margin: 0;
8+
padding: 0;
9+
}
10+
511
.listItem {
612
margin-block: var(--a-spacing-2);
713
background: var(--a-bg-default);
@@ -14,3 +20,17 @@
1420
justify-content: space-between;
1521
flex-direction: column;
1622
}
23+
24+
.inputWrapper {
25+
display: flex;
26+
flex-direction: column;
27+
gap: var(--a-spacing-3);
28+
}
29+
30+
.select {
31+
max-width: 12rem;
32+
}
33+
34+
.noCheckbox {
35+
padding-block-end: var(--a-spacing-3);
36+
}

‎components/DokumentoversiktNy/Dokumentoversikt.tsx

+39-41
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import styles from './Dokumentoversikt.module.css';
22
import { BodyShort, Checkbox, Detail, Link, Pagination, ReadMore, Select } from '@navikt/ds-react';
3-
import { format } from 'date-fns';
4-
import { nb } from 'date-fns/locale';
5-
import { useFeatureToggleIntl } from 'lib/hooks/useFeatureToggleIntl';
63
import { Dokument } from 'lib/types/types';
74
import { logDokumentoversiktEvent } from 'lib/utils/amplitude';
85
import { formatDate } from 'lib/utils/date';
96
import { useEffect, useMemo, useState } from 'react';
7+
import { FormattedMessage, useIntl } from 'react-intl';
8+
9+
const MELDEKORT_TITTEL = 'Meldekort for uke';
10+
11+
type SortType = 'datoAsc' | 'datoDesc';
1012

1113
const getAvsender = (type: string) => {
1214
switch (type) {
@@ -27,24 +29,20 @@ const getNumberOfPages = (dokumenter: Dokument[], pageSize: number) => {
2729

2830
export const Dokumentoversikt = ({ dokumenter }: { dokumenter: Dokument[] }) => {
2931
const [sorterteDokumenter, setSorterteDokumenter] = useState(dokumenter);
30-
const [sortType, setSortType] = useState('datoAsc');
32+
const [sortType, setSortType] = useState<SortType>('datoAsc');
3133
const [pageNumber, setPageNumber] = useState(1);
32-
const [searchFilter, setSearchFilter] = useState('');
33-
const [visMeldekort, setVisMeldekort] = useState(true);
34+
const [visMeldekort, setVisMeldekort] = useState(false);
3435

35-
const { formatMessage } = useFeatureToggleIntl();
36+
const intl = useIntl();
3637

3738
const filtrerteDokumenter = useMemo(() => {
3839
return sorterteDokumenter.filter((dokument) => {
39-
if (searchFilter) {
40-
return (
41-
!dokument.tittel.toLowerCase().includes(searchFilter.toLowerCase()) ||
42-
getAvsender(dokument.type).toLowerCase().includes(searchFilter.toLowerCase())
43-
);
40+
if (dokument.tittel.includes(MELDEKORT_TITTEL)) {
41+
return visMeldekort;
4442
}
4543
return true;
4644
});
47-
}, [sorterteDokumenter, searchFilter]);
45+
}, [sorterteDokumenter, visMeldekort]);
4846

4947
const sortedPaginatedDocuments = useMemo(() => {
5048
const startIndex = (pageNumber - 1) * PAGE_SIZE;
@@ -57,25 +55,21 @@ export const Dokumentoversikt = ({ dokumenter }: { dokumenter: Dokument[] }) =>
5755
return getNumberOfPages(filtrerteDokumenter, PAGE_SIZE);
5856
}, [filtrerteDokumenter]);
5957

58+
const inneholderMeldekort = useMemo(() => {
59+
return sorterteDokumenter.some((dokument) => dokument.tittel.includes(MELDEKORT_TITTEL));
60+
}, [sorterteDokumenter]);
61+
6062
useEffect(() => {
6163
const numberOfPages = getNumberOfPages(filtrerteDokumenter, PAGE_SIZE);
6264
if (pageNumber > numberOfPages) {
6365
setPageNumber(numberOfPages);
6466
}
6567
}, [filtrerteDokumenter, pageNumber]);
6668

67-
useEffect(() => {
68-
if (visMeldekort) {
69-
setSearchFilter('Meldekort for uke');
70-
} else {
71-
setSearchFilter('');
72-
}
73-
}, [visMeldekort]);
74-
7569
const onSortChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
7670
const value = e.target.value;
7771
logDokumentoversiktEvent(antallSider, `sorter etter ${value}`);
78-
setSortType(value);
72+
setSortType(value as SortType);
7973
};
8074

8175
useEffect(() => {
@@ -93,26 +87,26 @@ export const Dokumentoversikt = ({ dokumenter }: { dokumenter: Dokument[] }) =>
9387

9488
return (
9589
<div className={styles.container}>
96-
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
97-
<Select label="Sorter etter" onChange={onSortChange}>
98-
<option value="datoAsc">Nyeste først</option>
99-
<option value="datoDesc">Eldste først</option>
100-
</Select>
101-
{/*<Search
102-
label="Søk i dokumentoversikten"
103-
onChange={(value) => setSearchFilter(value)}
104-
onClear={() => setSearchFilter('')}
105-
hideLabel={false}
106-
/>*/}
107-
<Checkbox
108-
value={visMeldekort}
109-
checked={!visMeldekort}
110-
onChange={() => setVisMeldekort(!visMeldekort)}
90+
<div className={styles.inputWrapper}>
91+
<Select
92+
label={intl.formatMessage({ id: 'dokumentOversikt.sorter.label' })}
93+
onChange={onSortChange}
94+
className={`${styles.select} ${!inneholderMeldekort && styles.noCheckbox}`}
11195
>
112-
Vis meldekort
113-
</Checkbox>
96+
<option value="datoAsc">
97+
<FormattedMessage id="dokumentOversikt.sorter.datoAsc" />
98+
</option>
99+
<option value="datoDesc">
100+
<FormattedMessage id="dokumentOversikt.sorter.datoDesc" />
101+
</option>
102+
</Select>
103+
{inneholderMeldekort && (
104+
<Checkbox value={visMeldekort} onChange={() => setVisMeldekort(!visMeldekort)}>
105+
<FormattedMessage id="dokumentOversikt.visMeldekort" />
106+
</Checkbox>
107+
)}
114108
</div>
115-
<ul style={{ listStyle: 'none', margin: '0', padding: '0' }}>
109+
<ul className={styles.documentList}>
116110
{sortedPaginatedDocuments.map((document) => {
117111
return (
118112
<li
@@ -125,12 +119,16 @@ export const Dokumentoversikt = ({ dokumenter }: { dokumenter: Dokument[] }) =>
125119
href={`/aap/mine-aap/api/dokument/?journalpostId=${document.journalpostId}&dokumentId=${document.dokumentId}`}
126120
target="_blank"
127121
onClick={() => logDokumentoversiktEvent(antallSider, 'klikk lenke')}
122+
lang="no"
128123
>
129124
{document.tittel}
130125
</Link>
131126
</span>
132127
<Detail style={{ color: 'var(--a-text-default' }}>
133-
Sendt av {getAvsender(document.type)} den {formatDate(document.dato)}
128+
<FormattedMessage
129+
id="dokumentOversikt.avsender"
130+
values={{ name: getAvsender(document.type), date: formatDate(document.dato) }}
131+
/>
134132
</Detail>
135133
</div>
136134
</li>

‎components/PageContainer/PageContainer.module.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
.mainContainer {
2-
margin-bottom: var(--a-spacing-32);
2+
/*margin-bottom: var(--a-spacing-32);*/
33
}

‎lib/translations/nb.json

+9
Original file line numberDiff line numberDiff line change
@@ -182,5 +182,14 @@
182182
"logoutModal": {
183183
"title": "Du har blitt logget ut",
184184
"buttonText": "Logg inn på nytt"
185+
},
186+
"dokumentOversikt": {
187+
"sorter": {
188+
"label": "Sorter etter",
189+
"datoAsc": "Nyeste først",
190+
"datoDesc": "Eldste først"
191+
},
192+
"visMeldekort": "Vis meldekort",
193+
"avsender": "Sendt av {name} den {date}"
185194
}
186195
}

‎lib/translations/nn.json

+9
Original file line numberDiff line numberDiff line change
@@ -182,5 +182,14 @@
182182
"logoutModal": {
183183
"title": "Du har blitt logga ut",
184184
"buttonText": "Logg inn på nytt"
185+
},
186+
"dokumentOversikt": {
187+
"sorter": {
188+
"label": "Sorter etter",
189+
"datoAsc": "Nyaste først",
190+
"datoDesc": "Eldste først"
191+
},
192+
"visMeldekort": "Vis meldekort",
193+
"avsender": "Sendt av {name} den {date}"
185194
}
186195
}

‎pages/ny.tsx

+13-11
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { getDocuments } from './api/dokumenter';
22
import { getSøknader } from './api/soknader/soknader';
33
import { beskyttetSide, getAccessToken } from '@navikt/aap-felles-innbygger-utils';
4-
import { BodyShort, Button, Heading, Ingress, LinkPanel, Select } from '@navikt/ds-react';
4+
import { BodyShort, Button, Heading, Ingress } from '@navikt/ds-react';
55
import { Card } from 'components/Card/Card';
66
import { Dokumentoversikt } from 'components/DokumentoversiktNy/Dokumentoversikt';
77
import { NyttigÅVite } from 'components/NyttigÅVite/NyttigÅVite';
@@ -65,17 +65,19 @@ const Index = ({ søknader, dokumenter }: { søknader: Søknad[]; dokumenter: Do
6565
<Button variant="secondary">Meld endring</Button>
6666
</Card>
6767
</PageComponentFlexContainer>
68-
<PageComponentFlexContainer subtleBackground style={{ maxWidth: '600px' }}>
69-
<Heading level="2" size="medium" spacing>
70-
Dokumentoversikt
71-
</Heading>
72-
<BodyShort spacing>
73-
Her finner du dine søknader, vedlegg, vedtak, brev, samtalerefater og meldinger om AAP og
74-
oppfølging.
75-
</BodyShort>
76-
<BodyShort spacing>{formatMessage('dokumentoversikt.manglendeDokument.tekst')}</BodyShort>
68+
<PageComponentFlexContainer subtleBackground>
69+
<div style={{ maxWidth: '600px' }}>
70+
<Heading level="2" size="medium" spacing>
71+
Dokumentoversikt
72+
</Heading>
73+
<BodyShort spacing>
74+
Her finner du dine søknader, vedlegg, vedtak, brev, samtalerefater og meldinger om AAP
75+
og oppfølging.
76+
</BodyShort>
77+
<BodyShort spacing>{formatMessage('dokumentoversikt.manglendeDokument.tekst')}</BodyShort>
7778

78-
<Dokumentoversikt dokumenter={dokumenter} />
79+
<Dokumentoversikt dokumenter={dokumenter} />
80+
</div>
7981
</PageComponentFlexContainer>
8082
</PageContainer>
8183
);

0 commit comments

Comments
 (0)