Skip to content

Commit 7b36578

Browse files
ole-kristian-rudjordole-kristian-rudjord
authored
Bytter til Aksel-komponent FileUpload (#1537)
* Oppdaterer ds-react, ds-css, aksel-icons til 7.10.0 * Legger til LastOppVedlegg2 * Legger til LastOppVedlegg2 * Endrer til separate lister for accpeted og rejected filer + Slettet utkommentert kode * Legger til request for riktige filer * Rydder opp i koden * Fikser addFile * Fjerner acceptedFiles state * Endrer til norske og mer beskrivende navn på variabler * Fikser fil-feil ved å legge til hele File som property i IVedlegg (wip) * Fikser feil ved at fil ikke eksisterte i nyeVedlegg * Endrer placeholder tekster * Flytter kode fra LastOppVedlegg2 til ny useFilopplaster2.tsx * Legger til feilmeldinger for maks antall filer * Fikser visning feilmelding for maksFilerNådd * Flytter kode til egen Filopplaster2.tsx fil * Legger til Sanity tekster * Legger til flere Sanity tekster * Legger til Sanity feilmeldinger * eslint fix for imports * Legger tilbake utkommentert kode * Fikser Sanity feilmeldinger * Fjerner fil/File som del av IVedlegg * Fikser imports for File-relaterte typer og ubrukt LastOppVedlegg * Legger til feature toggle for å toggle bruk av ny eller gammel LastOppVedlegg komponent * Legger til Sanity tekster / translatinos for Filopplaster2 * Endrer Sanity API navn for fileupload.dropzone translations og legger til translations for fileupload.item * Setter tilbake maks antall filer til 25 i useFilopplaster2.tsx * Legger til error catch i useFilopplaster2.tsx * Forbedrer lesbarhet * Fjerner AxiosError type og wrapMedSystemetLaster * Legger til uploading status på filer under opplastning * Legger til egen feilmelding tekst når filer er under opplastning + Fikser setAvvsiteFiler ved å bruke 'eksisterendeAvvisteFiler' * Legger til prøv på nytt funksjonalitet * Legger til kommentar og forbedrer navn på variabler
1 parent a16ab02 commit 7b36578

File tree

9 files changed

+602
-37
lines changed

9 files changed

+602
-37
lines changed

‎package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -83,9 +83,9 @@
8383
"@formatjs/intl-datetimeformat": "^6.17.2",
8484
"@formatjs/intl-numberformat": "^8.10.0",
8585
"@grafana/faro-web-sdk": "^1.13.2",
86-
"@navikt/aksel-icons": "^6.1.3",
87-
"@navikt/ds-css": "^6.1.3",
88-
"@navikt/ds-react": "^6.1.3",
86+
"@navikt/aksel-icons": "^7.10.0",
87+
"@navikt/ds-css": "^7.10.0",
88+
"@navikt/ds-react": "^7.10.0",
8989
"@navikt/familie-form-elements": "^15.0.0",
9090
"@navikt/familie-logging": "^7.0.3",
9191
"@navikt/familie-skjema": "^8.0.8",

‎src/frontend/components/SøknadsSteg/Dokumentasjon/Dokumentasjon.tsx

+18-5
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Alert, BodyShort, Heading, VStack } from '@navikt/ds-react';
66
import { RessursStatus } from '@navikt/familie-typer';
77

88
import { useApp } from '../../../context/AppContext';
9+
import { useFeatureToggles } from '../../../context/FeatureToggleContext';
910
import useFørsteRender from '../../../hooks/useFørsteRender';
1011
import { useSendInnSkjema } from '../../../hooks/useSendInnSkjema';
1112
import { IDokumentasjon, IVedlegg } from '../../../typer/dokumentasjon';
@@ -20,6 +21,7 @@ import { VedleggOppsummering } from '../../Felleskomponenter/VedleggOppsummering
2021
import { hentVedleggOppsummering } from '../../Felleskomponenter/VedleggOppsummering/vedleggOppsummering.domene';
2122

2223
import LastOppVedlegg from './LastOppVedlegg';
24+
import LastOppVedlegg2 from './LastOppVedlegg2';
2325

2426
// Vedlegg er lagret 48 timer
2527
export const erVedleggstidspunktGyldig = (vedleggTidspunkt: string): boolean => {
@@ -29,6 +31,7 @@ export const erVedleggstidspunktGyldig = (vedleggTidspunkt: string): boolean =>
2931

3032
const Dokumentasjon: React.FC = () => {
3133
const { søknad, settSøknad, innsendingStatus, tekster, plainTekst } = useApp();
34+
const { toggles } = useFeatureToggles();
3235
const { sendInnSkjema } = useSendInnSkjema();
3336
const [slettaVedlegg, settSlettaVedlegg] = useState<IVedlegg[]>([]);
3437

@@ -149,11 +152,21 @@ const Dokumentasjon: React.FC = () => {
149152
</>
150153
)}
151154
{relevateDokumentasjoner.map((dokumentasjon, index) => (
152-
<LastOppVedlegg
153-
key={index}
154-
dokumentasjon={dokumentasjon}
155-
oppdaterDokumentasjon={oppdaterDokumentasjon}
156-
/>
155+
<>
156+
{toggles.BRUK_NY_LAST_OPP_VEDLEGG_KOMPONENT ? (
157+
<LastOppVedlegg2
158+
key={index}
159+
dokumentasjon={dokumentasjon}
160+
oppdaterDokumentasjon={oppdaterDokumentasjon}
161+
/>
162+
) : (
163+
<LastOppVedlegg
164+
key={index}
165+
dokumentasjon={dokumentasjon}
166+
oppdaterDokumentasjon={oppdaterDokumentasjon}
167+
/>
168+
)}
169+
</>
157170
))}
158171
{innsendingStatus.status === RessursStatus.FEILET && <Feilside />}
159172
</VStack>

‎src/frontend/components/SøknadsSteg/Dokumentasjon/LastOppVedlegg2.tsx

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import React from 'react';
2+
3+
import { Checkbox, FormSummary, VStack } from '@navikt/ds-react';
4+
5+
import { useApp } from '../../../context/AppContext';
6+
import {
7+
dokumentasjonsbehovTilBeskrivelseSanityApiNavn,
8+
dokumentasjonsbehovTilTittelSanityApiNavn,
9+
IDokumentasjon,
10+
IVedlegg,
11+
} from '../../../typer/dokumentasjon';
12+
import { Dokumentasjonsbehov } from '../../../typer/kontrakt/dokumentasjon';
13+
import { LocaleRecordBlock, Typografi } from '../../../typer/sanity/sanity';
14+
import { slåSammen } from '../../../utils/slåSammen';
15+
import TekstBlock from '../../Felleskomponenter/Sanity/TekstBlock';
16+
17+
import Filopplaster2 from './filopplaster/Filopplaster2';
18+
import { useFilopplaster2 } from './filopplaster/useFilopplaster2';
19+
20+
interface Props {
21+
dokumentasjon: IDokumentasjon;
22+
oppdaterDokumentasjon: (
23+
dokumentasjonsbehov: Dokumentasjonsbehov,
24+
opplastedeVedlegg: IVedlegg[],
25+
harSendtInn: boolean
26+
) => void;
27+
}
28+
29+
const LastOppVedlegg2: React.FC<Props> = ({ dokumentasjon, oppdaterDokumentasjon }) => {
30+
const { søknad, tekster, plainTekst } = useApp();
31+
32+
const dokumentasjonTekster = tekster().DOKUMENTASJON;
33+
34+
const { fjernAlleAvvisteFiler } = useFilopplaster2(
35+
dokumentasjon,
36+
oppdaterDokumentasjon,
37+
dokumentasjonTekster,
38+
plainTekst
39+
);
40+
41+
const settHarSendtInnTidligere = (event: React.ChangeEvent<HTMLInputElement>) => {
42+
const huketAv = event.target.checked;
43+
const vedlegg = huketAv ? [] : dokumentasjon.opplastedeVedlegg;
44+
oppdaterDokumentasjon(dokumentasjon.dokumentasjonsbehov, vedlegg, huketAv);
45+
if (huketAv) {
46+
fjernAlleAvvisteFiler();
47+
}
48+
};
49+
50+
const tittel: LocaleRecordBlock =
51+
dokumentasjonTekster[
52+
dokumentasjonsbehovTilTittelSanityApiNavn(dokumentasjon.dokumentasjonsbehov)
53+
];
54+
55+
const barnDokumentasjonenGjelderFor = søknad.barnInkludertISøknaden.filter(barn =>
56+
dokumentasjon.gjelderForBarnId.find(id => id === barn.id)
57+
);
58+
const barnasNavn = slåSammen(barnDokumentasjonenGjelderFor.map(barn => barn.navn));
59+
60+
const dokumentasjonsbeskrivelse = dokumentasjonsbehovTilBeskrivelseSanityApiNavn(
61+
dokumentasjon.dokumentasjonsbehov
62+
);
63+
64+
return (
65+
<FormSummary>
66+
<FormSummary.Header>
67+
<FormSummary.Heading level="3">
68+
{plainTekst(tittel, { barnetsNavn: barnasNavn })}
69+
</FormSummary.Heading>
70+
</FormSummary.Header>
71+
<VStack gap="6" paddingInline="6" paddingBlock="5 6">
72+
{dokumentasjonsbeskrivelse && (
73+
<div>
74+
<TekstBlock
75+
data-testid={'dokumentasjonsbeskrivelse'}
76+
block={dokumentasjonTekster[dokumentasjonsbeskrivelse]}
77+
flettefelter={{ barnetsNavn: barnasNavn }}
78+
typografi={Typografi.BodyLong}
79+
/>
80+
</div>
81+
)}
82+
83+
{dokumentasjon.dokumentasjonsbehov !== Dokumentasjonsbehov.ANNEN_DOKUMENTASJON && (
84+
<Checkbox
85+
data-testid={'dokumentasjon-er-sendt-inn-checkboks'}
86+
aria-label={`${plainTekst(
87+
dokumentasjonTekster.sendtInnTidligere
88+
)} (${plainTekst(tittel, { barnetsNavn: barnasNavn })})`}
89+
checked={dokumentasjon.harSendtInn}
90+
onChange={settHarSendtInnTidligere}
91+
>
92+
{plainTekst(dokumentasjonTekster.sendtInnTidligere)}
93+
</Checkbox>
94+
)}
95+
96+
{!dokumentasjon.harSendtInn && (
97+
<Filopplaster2
98+
dokumentasjon={dokumentasjon}
99+
oppdaterDokumentasjon={oppdaterDokumentasjon}
100+
/>
101+
)}
102+
</VStack>
103+
</FormSummary>
104+
);
105+
};
106+
107+
export default LastOppVedlegg2;

‎src/frontend/components/SøknadsSteg/Dokumentasjon/filopplaster/Filopplaster2.tsx

+162
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
import React from 'react';
2+
3+
import { FileUpload, Heading, List, VStack } from '@navikt/ds-react';
4+
5+
import { useApp } from '../../../../context/AppContext';
6+
import { IDokumentasjon, IVedlegg } from '../../../../typer/dokumentasjon';
7+
import { Dokumentasjonsbehov } from '../../../../typer/kontrakt/dokumentasjon';
8+
import { uppercaseFørsteBokstav } from '../../../../utils/visning';
9+
10+
import { ECustomFileRejectionReasons, useFilopplaster2 } from './useFilopplaster2';
11+
12+
interface IFilopplasterProps {
13+
dokumentasjon: IDokumentasjon;
14+
oppdaterDokumentasjon: (
15+
dokumentasjonsBehov: Dokumentasjonsbehov,
16+
opplastedeVedlegg: IVedlegg[],
17+
harSendtInn: boolean
18+
) => void;
19+
}
20+
21+
const Filopplaster2: React.FC<IFilopplasterProps> = ({ dokumentasjon, oppdaterDokumentasjon }) => {
22+
const { tekster, plainTekst } = useApp();
23+
24+
const dokumentasjonTekster = tekster().DOKUMENTASJON;
25+
const frittståendeOrdTekster = tekster().FELLES.frittståendeOrd;
26+
27+
const {
28+
filerUnderOpplastning,
29+
avvisteFiler,
30+
MAKS_FILSTØRRELSE_MB,
31+
MAKS_FILSTØRRELSE_BYTES,
32+
MAKS_ANTALL_FILER,
33+
STØTTEDE_FILTYPER,
34+
feilmeldinger,
35+
leggTilVedlegg,
36+
fjernVedlegg,
37+
fjernAvvistFil,
38+
prøvOpplastingAvAvvistFilPåNytt,
39+
} = useFilopplaster2(dokumentasjon, oppdaterDokumentasjon, dokumentasjonTekster, plainTekst);
40+
41+
return (
42+
<FileUpload
43+
translations={{
44+
dropzone: {
45+
button: plainTekst(dokumentasjonTekster.velgFil),
46+
buttonMultiple: plainTekst(dokumentasjonTekster.velgFiler),
47+
dragAndDrop: plainTekst(dokumentasjonTekster.draOgSlippFilenHer),
48+
dragAndDropMultiple: plainTekst(dokumentasjonTekster.draOgSlippFilerHer),
49+
drop: uppercaseFørsteBokstav(plainTekst(frittståendeOrdTekster.slipp)),
50+
or: plainTekst(frittståendeOrdTekster.eller),
51+
disabled: plainTekst(
52+
filerUnderOpplastning.length > 0
53+
? dokumentasjonTekster.filopplastingDeaktivertFilerErUnderOpplastning
54+
: dokumentasjonTekster.filopplastingDeaktivert
55+
),
56+
disabledFilelimit: plainTekst(
57+
dokumentasjonTekster.filopplastingDeaktivertMaksAntallFiler
58+
),
59+
},
60+
item: {
61+
retryButtonTitle: plainTekst(dokumentasjonTekster.lastOppFilenPaNytt),
62+
deleteButtonTitle: plainTekst(dokumentasjonTekster.slettFilen),
63+
uploading: plainTekst(dokumentasjonTekster.lasterOpp),
64+
downloading: plainTekst(dokumentasjonTekster.lasterNed),
65+
},
66+
}}
67+
>
68+
<VStack gap="6">
69+
<FileUpload.Dropzone
70+
label={plainTekst(dokumentasjonTekster.lastOppFiler)}
71+
description={
72+
<List as="ul" size="small">
73+
<List.Item>{`${plainTekst(dokumentasjonTekster.stottedeFiltyper)} ${STØTTEDE_FILTYPER.join(' ')}`}</List.Item>
74+
<List.Item>{`${plainTekst(dokumentasjonTekster.maksFilstorrelse)} ${MAKS_FILSTØRRELSE_MB} MB`}</List.Item>
75+
<List.Item>{`${plainTekst(dokumentasjonTekster.maksAntallFiler)} ${MAKS_ANTALL_FILER}`}</List.Item>
76+
</List>
77+
}
78+
accept={STØTTEDE_FILTYPER.join(',')}
79+
maxSizeInBytes={MAKS_FILSTØRRELSE_BYTES}
80+
fileLimit={{
81+
max: MAKS_ANTALL_FILER,
82+
current: dokumentasjon.opplastedeVedlegg.length,
83+
}}
84+
// Dersom disabled blir satt til false her vil dette overskrive disabled-staten som blir satt av "fileLimit" prop-en. Derfor settes den til undefined slik at "fileLimit" fungerer som forventet.
85+
disabled={filerUnderOpplastning.length > 0 ? true : undefined}
86+
onSelect={nyeFiler => leggTilVedlegg(nyeFiler)}
87+
/>
88+
89+
{(dokumentasjon.opplastedeVedlegg.length > 0 ||
90+
filerUnderOpplastning.length > 0) && (
91+
<VStack gap="2">
92+
<Heading level="4" size="xsmall">
93+
{`${plainTekst(frittståendeOrdTekster.vedlegg)} (${dokumentasjon.opplastedeVedlegg.length + filerUnderOpplastning.length})`}
94+
</Heading>
95+
<VStack as="ul" gap="3">
96+
{dokumentasjon.opplastedeVedlegg.map((opplastetVedlegg, index) => (
97+
<FileUpload.Item
98+
as="li"
99+
key={index}
100+
file={{
101+
name: opplastetVedlegg.navn,
102+
size: opplastetVedlegg.størrelse,
103+
}}
104+
button={{
105+
action: 'delete',
106+
onClick: () => fjernVedlegg(opplastetVedlegg),
107+
}}
108+
/>
109+
))}
110+
{filerUnderOpplastning.map((filUnderOpplastning, index) => (
111+
<FileUpload.Item
112+
as="li"
113+
key={index}
114+
file={{
115+
name: filUnderOpplastning.file.name,
116+
size: filUnderOpplastning.file.size,
117+
}}
118+
status="uploading"
119+
/>
120+
))}
121+
</VStack>
122+
</VStack>
123+
)}
124+
125+
{avvisteFiler.length > 0 && (
126+
<VStack gap="2">
127+
<Heading level="4" size="xsmall">
128+
{`${plainTekst(frittståendeOrdTekster.vedleggMedFeil)} (${avvisteFiler.length})`}
129+
</Heading>
130+
<VStack as="ul" gap="3">
131+
{avvisteFiler.map((fil, index) => (
132+
<FileUpload.Item
133+
as="li"
134+
key={index}
135+
file={{
136+
name: fil.file.name,
137+
size: fil.file.size,
138+
}}
139+
error={feilmeldinger[fil.reasons[0]]}
140+
button={
141+
fil.reasons[0] === ECustomFileRejectionReasons.UKJENT_FEIL
142+
? {
143+
action: 'retry',
144+
onClick: () =>
145+
prøvOpplastingAvAvvistFilPåNytt(fil),
146+
}
147+
: {
148+
action: 'delete',
149+
onClick: () => fjernAvvistFil(fil),
150+
}
151+
}
152+
/>
153+
))}
154+
</VStack>
155+
</VStack>
156+
)}
157+
</VStack>
158+
</FileUpload>
159+
);
160+
};
161+
162+
export default Filopplaster2;

0 commit comments

Comments
 (0)