From 9df07e73f09d71656dedb1cd7184acdc50c770d7 Mon Sep 17 00:00:00 2001 From: Aleksei Poroshin <69150024+poroshinaleksei@users.noreply.github.com> Date: Tue, 17 Dec 2024 13:24:55 +0100 Subject: [PATCH] Bytt panel til box (#2805) * Bytt panel til box soknadsperioder * Box Listepaneler * Fix box i pdfVisning * Fix panel OLP * Bytt Panel i EksisterendePerioder OMPUT * Bytt Panel Arbeidstakerperioder * Bytt Panel i UtenlandsoppholdContainer * Fix Arbeidstakerperioder * ArbeidstakerContainer OMPUT * Bytt Panel i Periodepaneler * Bytt Panel i Arbeidstakerperioder --- src/app/components/ArbeidstidInfo.tsx | 9 +- src/app/components/Listepaneler.tsx | 46 +- src/app/components/Periodepaneler.tsx | 7 +- .../containers/ArbeidsforholdPanel.tsx | 18 +- .../containers/Arbeidstakerperioder.tsx | 50 ++- .../Arbeidstaker/Arbeidstaker.tsx | 26 +- .../Arbeidstakerperioder.tsx | 58 +-- .../arbeidstid/ArbeidstidKalender.tsx | 35 +- src/app/components/pdf/PdfVisning.tsx | 8 +- src/app/components/pdf/pdfVisning.less | 8 +- src/app/components/punchPage.less | 4 +- src/app/i18n/nb.json | 15 + .../components/EksisterendePerioder.tsx" | 20 +- .../components/Arbeidstaker.tsx" | 50 ++- .../components/ArbeidstakerContainer.tsx" | 16 +- .../components/Fravaersperiode.tsx" | 2 +- .../components/Frilanser.tsx" | 194 ++++---- .../components/Medlemskap.tsx" | 140 +++--- .../SelvstendigNaeringsdrivende.tsx" | 421 +++++++++--------- .../components/Utenlandsopphold.tsx" | 140 +++--- .../components/arbeidsforhold.less" | 2 +- .../containers/Periodepaneler.tsx" | 37 +- .../containers/Soknadsperioder.tsx" | 36 +- .../containers/UtenlandsoppholdContainer.tsx" | 17 +- .../EndringAvSoknadsperioder.tsx" | 1 - .../containers/PLSPunchForm.tsx" | 2 - .../containers/Soknadsperioder.tsx" | 68 +-- .../Arbeidsforhold/ArbeidsforholdPanel.tsx" | 347 +++++++++------ .../Arbeidstaker/Arbeidstaker.tsx" | 25 +- .../Arbeidsforhold/Arbeidstakerperioder.tsx" | 48 +- .../EndringAvS\303\270knadsperioder.tsx" | 1 - .../pleiepenger/containers/PSBPunchForm.tsx" | 3 +- .../Soknadsperioder/Soknadsperioder.tsx" | 6 +- .../Utenlandsopphold/Utenlandsopphold.tsx" | 1 - 34 files changed, 1020 insertions(+), 841 deletions(-) diff --git a/src/app/components/ArbeidstidInfo.tsx b/src/app/components/ArbeidstidInfo.tsx index 6699649aa..28829d040 100644 --- a/src/app/components/ArbeidstidInfo.tsx +++ b/src/app/components/ArbeidstidInfo.tsx @@ -1,14 +1,17 @@ import React from 'react'; + import { FormattedMessage } from 'react-intl'; -import { Alert } from '@navikt/ds-react'; +import { Alert, Heading } from '@navikt/ds-react'; export const arbeidstidInformasjon = () => { return (
-

+ + -

+ + diff --git a/src/app/components/Listepaneler.tsx b/src/app/components/Listepaneler.tsx index 886400edf..f3b1f741b 100644 --- a/src/app/components/Listepaneler.tsx +++ b/src/app/components/Listepaneler.tsx @@ -1,10 +1,10 @@ import React from 'react'; import classNames from 'classnames'; -import { Fieldset, Panel } from '@navikt/ds-react'; +import { Box, Button, Fieldset, Heading } from '@navikt/ds-react'; import { FormattedMessage, IntlShape } from 'react-intl'; import { GetErrorMessage, GetUhaandterteFeil } from 'app/models/types'; -import intlHelper from 'app/utils/intlUtils'; + import UhaanderteFeilmeldinger from 'app/components/skjema/UhaanderteFeilmeldinger'; import BinSvg from '../assets/SVG/BinSVG'; import AddCircleSvg from '../assets/SVG/AddCircleSVG'; @@ -45,13 +45,13 @@ export interface IListepanelerProps { type ItemInfo = any; -export const Listepaneler: React.FunctionComponent> = ( - props: IListepanelerProps, -) => { - const { items, initialItem, className, textLeggTil } = props; - const itemsWithInitialItem = items.length > 0 ? items : [initialItem]; +export const Listepaneler: React.FC> = (props: IListepanelerProps) => { const { intl, + items, + initialItem, + className, + textLeggTil, component, editSoknad, editSoknadState, @@ -61,6 +61,7 @@ export const Listepaneler: React.FunctionComponent> getUhaandterteFeil, getErrorMessage, } = props; + const itemsWithInitialItem = items.length > 0 ? items : [initialItem]; const editItem: (index: number, iteminfo: Partial) => ItemInfo[] = ( index: number, @@ -109,25 +110,25 @@ export const Listepaneler: React.FunctionComponent> items!.map((itemInfo, itemIndex) => { const panelid = props.panelid(itemIndex); return ( -
{feilkodeprefiks === 'arbeidstid.arbeidstaker' && itemsWithInitialItem.length > 1 && ( -

+ -

+ )} + {!!medSlettKnapp && itemsWithInitialItem.length > 1 && (
- + + +
)} + {!!component && component( itemInfo, @@ -153,9 +156,10 @@ export const Listepaneler: React.FunctionComponent> intl, )}
- + ); })} + {feilkodeprefiks && ( (getUhaandterteFeil && getUhaandterteFeil(feilkodeprefiks)) || []} @@ -163,18 +167,16 @@ export const Listepaneler: React.FunctionComponent> )} {kanHaFlere && ( - + + )} ); diff --git a/src/app/components/Periodepaneler.tsx b/src/app/components/Periodepaneler.tsx index 52910d24d..d7cf002f8 100644 --- a/src/app/components/Periodepaneler.tsx +++ b/src/app/components/Periodepaneler.tsx @@ -1,19 +1,17 @@ import React from 'react'; -import { IntlShape } from 'react-intl'; +import { useIntl } from 'react-intl'; import { Box } from '@navikt/ds-react'; import { PeriodInput } from 'app/components/period-input/PeriodInput'; import UhaanderteFeilmeldinger from 'app/components/skjema/UhaanderteFeilmeldinger'; import { GetErrorMessage, GetUhaandterteFeil } from 'app/models/types'; - import AddCircleSvg from '../assets/SVG/AddCircleSVG'; import BinSvg from '../assets/SVG/BinSVG'; import { IPeriode } from '../models/types/Periode'; import intlHelper from '../utils/intlUtils'; interface Props { - intl: IntlShape; periods: IPeriode[]; // Liste over periodisert informasjon initialPeriode: IPeriode; kanHaFlere: boolean; // Objektet som legges til når man legger til en ny periode i lista @@ -31,7 +29,6 @@ interface Props { } export const Periodepaneler: React.FC = ({ - intl, periods, initialPeriode, kanHaFlere, @@ -47,6 +44,8 @@ export const Periodepaneler: React.FC = ({ onAdd, onRemove, }: Props) => { + const intl = useIntl(); + const editInfo: (index: number, periodeinfo: Partial) => IPeriode[] = ( index: number, periodeinfo: Partial, diff --git a/src/app/components/arbeidsforhold/containers/ArbeidsforholdPanel.tsx b/src/app/components/arbeidsforhold/containers/ArbeidsforholdPanel.tsx index e2d3e787e..04d7c11ce 100644 --- a/src/app/components/arbeidsforhold/containers/ArbeidsforholdPanel.tsx +++ b/src/app/components/arbeidsforhold/containers/ArbeidsforholdPanel.tsx @@ -117,7 +117,9 @@ const ArbeidsforholdPanel = ({ handleFrilanserChange((event.target as HTMLInputElement).value as JaNei); }} /> + + {!opptjening.frilanser?.jobberFortsattSomFrilans && ( {arbeidstidInformasjon()} + + handleArbeidsforholdChange(Arbeidsforhold.ARBEIDSTAKER, e.target.checked)} checked={getCheckedValueArbeid(Arbeidsforhold.ARBEIDSTAKER)} /> + + {!!soknad.arbeidstid?.arbeidstakerList?.length && ( )} + + {!!soknad.opptjeningAktivitet.frilanser && ( - + {frilanserperioder()} )} + handleArbeidsforholdChange(Arbeidsforhold.SELVSTENDIG, e.target.checked)} checked={getCheckedValueArbeid(Arbeidsforhold.SELVSTENDIG)} /> + {!!soknad.opptjeningAktivitet.selvstendigNaeringsdrivende && ( <> - {intlHelper(intl, 'skjema.sn.info')} + - + + {selvstendigperioder()} )} + (getUhaandterteFeil && getUhaandterteFeil('ytelse.arbeidstid')) || []} /> diff --git a/src/app/components/arbeidsforhold/containers/Arbeidstakerperioder.tsx b/src/app/components/arbeidsforhold/containers/Arbeidstakerperioder.tsx index 54446665d..628df74f9 100644 --- a/src/app/components/arbeidsforhold/containers/Arbeidstakerperioder.tsx +++ b/src/app/components/arbeidsforhold/containers/Arbeidstakerperioder.tsx @@ -1,15 +1,14 @@ -import classNames from 'classnames'; import React, { useEffect, useState } from 'react'; -import { FormattedMessage, useIntl } from 'react-intl'; -import { Fieldset, Panel } from '@navikt/ds-react'; +import classNames from 'classnames'; +import { FormattedMessage, useIntl } from 'react-intl'; +import { Fieldset, Box, Button, Heading } from '@navikt/ds-react'; import AddCircleSvg from 'app/assets/SVG/AddCircleSVG'; import BinSvg from 'app/assets/SVG/BinSVG'; import UhaanderteFeilmeldinger from 'app/components/skjema/UhaanderteFeilmeldinger'; import { ArbeidsgivereResponse } from 'app/models/types/ArbeidsgivereResponse'; import Organisasjon from 'app/models/types/Organisasjon'; -import intlHelper from 'app/utils/intlUtils'; import { finnArbeidsgivere } from '../../../api/api'; import { Arbeidstaker, IPeriode } from '../../../models/types'; @@ -18,7 +17,7 @@ import ArbeidstakerComponent from './ArbeidstakerComponent'; type ItemInfo = any; -interface ArbeidstakerperioderProps { +interface Props { soknad: IPLSSoknad; eksisterendeSoknadsperioder: IPeriode[]; initialArbeidstaker: Arbeidstaker; @@ -36,9 +35,11 @@ const Arbeidstakerperioder = ({ updateSoknadState, getErrorMessage, getUhaandterteFeil, -}: ArbeidstakerperioderProps): JSX.Element => { +}: Props): JSX.Element => { const intl = useIntl(); + const [arbeidsgivere, setArbeidsgivere] = useState([]); + const { arbeidstid, soekerId } = soknad; useEffect(() => { @@ -106,33 +107,36 @@ const Arbeidstakerperioder = ({ }; return ( -
+
{items?.map((currentItem, currentItemIndex) => { const panelid = `arbeidstakerpanel_${currentItemIndex}`; + const getHarDuplikatOrgnr = () => items.filter( (item) => item.organisasjonsnummer && item.organisasjonsnummer === currentItem.organisasjonsnummer, ).length > 1; + return ( - -
+
{itemsWithInitialItem.length > 1 && ( -

+ -

+ )} + {itemsWithInitialItem.length > 1 && (
-
- {intlHelper(intl, 'skjema.arbeid.arbeidstaker.fjernarbeidsgiver')} - + + +
)} + + (getUhaandterteFeil && @@ -174,20 +181,19 @@ const Arbeidstakerperioder = ({ } /> - + ); })} - + + ); }; diff --git a/src/app/components/arbeidsforholdFormik/Arbeidstaker/Arbeidstaker.tsx b/src/app/components/arbeidsforholdFormik/Arbeidstaker/Arbeidstaker.tsx index e4401d411..2576994c7 100644 --- a/src/app/components/arbeidsforholdFormik/Arbeidstaker/Arbeidstaker.tsx +++ b/src/app/components/arbeidsforholdFormik/Arbeidstaker/Arbeidstaker.tsx @@ -1,16 +1,15 @@ -import { Field, FieldProps, useFormikContext } from 'formik'; -import { RadioPanelGruppe } from 'nav-frontend-skjema'; import React, { useEffect, useReducer } from 'react'; -import { IntlShape } from 'react-intl'; +import { useIntl } from 'react-intl'; +import { Field, FieldProps, useFormikContext } from 'formik'; +import { RadioPanelGruppe } from 'nav-frontend-skjema'; import { Checkbox, Fieldset } from '@navikt/ds-react'; - import { ApiPath } from 'app/apiConfig'; import VerticalSpacer from 'app/components/VerticalSpacer'; import ArbeidstidKalender from 'app/components/arbeidstid/ArbeidstidKalender'; import SelectFormik from 'app/components/formikInput/SelectFormik'; import usePrevious from 'app/hooks/usePrevious'; -import { IArbeidstidPeriodeMedTimer, IPeriode } from 'app/models/types'; +import { IArbeidstidPeriodeMedTimer, IPeriode, Periode } from 'app/models/types'; import ArbeidsgiverResponse from 'app/models/types/ArbeidsgiverResponse'; import { Arbeidstaker, OrgOrPers } from 'app/models/types/Arbeidstaker'; import { OLPSoknad } from 'app/models/types/OLPSoknad'; @@ -18,36 +17,37 @@ import Organisasjon from 'app/models/types/Organisasjon'; import { get } from 'app/utils'; import intlHelper from 'app/utils/intlUtils'; import { kunTall } from 'app/utils/patterns'; - +import pfArbeidstakerReducer from './pfArbeidstakerReducer'; import TextFieldFormik from '../../formikInput/TextFieldFormik'; import ActionType from './actionTypes'; + import './arbeidstaker.less'; -import pfArbeidstakerReducer from './pfArbeidstakerReducer'; -interface ArbeidstakerComponentProps { +interface Props { søkerId: string; arbeidstaker: Arbeidstaker; listeelementindex: number; - intl: IntlShape; arbeidsgivere: Organisasjon[]; harDuplikatOrgnr?: boolean; - nyeSoknadsperioder: IPeriode[]; + nyeSoknadsperioder: IPeriode[] | Periode[]; eksisterendeSoknadsperioder: IPeriode[]; name: string; } -const ArbeidstakerComponent: React.FC = ({ +const ArbeidstakerComponent: React.FC = ({ søkerId, arbeidstaker, listeelementindex, - intl, arbeidsgivere, harDuplikatOrgnr, nyeSoknadsperioder, eksisterendeSoknadsperioder, name, }): JSX.Element => { + const intl = useIntl(); + const harArbeidsgivere = arbeidsgivere?.length > 0; + const { setFieldValue } = useFormikContext(); const [state, dispatch] = useReducer(pfArbeidstakerReducer, { @@ -125,7 +125,7 @@ const ArbeidstakerComponent: React.FC = ({ const selectedType = organisasjonsnummer === null ? 'p' : 'o'; return ( -
+
{/* {({ field, form }: FieldProps) => ( diff --git a/src/app/components/arbeidsforholdFormik/Arbeidstakerperioder.tsx b/src/app/components/arbeidsforholdFormik/Arbeidstakerperioder.tsx index 9d2342eef..1b980fe2e 100644 --- a/src/app/components/arbeidsforholdFormik/Arbeidstakerperioder.tsx +++ b/src/app/components/arbeidsforholdFormik/Arbeidstakerperioder.tsx @@ -1,9 +1,9 @@ -import classNames from 'classnames'; -import { FieldArray, useFormikContext } from 'formik'; import React, { useEffect, useState } from 'react'; -import { FormattedMessage, useIntl } from 'react-intl'; -import { Fieldset, Panel } from '@navikt/ds-react'; +import classNames from 'classnames'; +import { FieldArray, useFormikContext } from 'formik'; +import { FormattedMessage } from 'react-intl'; +import { Fieldset, Heading, Box, Button } from '@navikt/ds-react'; import { finnArbeidsgivere } from 'app/api/api'; import AddCircleSvg from 'app/assets/SVG/AddCircleSVG'; @@ -14,11 +14,9 @@ import { ArbeidsgivereResponse } from 'app/models/types/ArbeidsgivereResponse'; import { Arbeidstaker } from 'app/models/types/Arbeidstaker'; import { OLPSoknad } from 'app/models/types/OLPSoknad'; import Organisasjon from 'app/models/types/Organisasjon'; -import intlHelper from 'app/utils/intlUtils'; - import ArbeidstakerComponent from './Arbeidstaker/Arbeidstaker'; -interface ArbeidstakerperioderProps { +interface Props { eksisterendePerioder: IPeriode[]; initialArbeidstaker: Arbeidstaker; @@ -29,9 +27,9 @@ const Arbeidstakerperioder = ({ initialArbeidstaker, eksisterendePerioder, getUhaandterteFeil, -}: ArbeidstakerperioderProps): JSX.Element => { - const intl = useIntl(); +}: Props): JSX.Element => { const [arbeidsgivere, setArbeidsgivere] = useState([]); + const { values } = useFormikContext(); const { arbeidstid, soekerId, soeknadsperiode } = values; @@ -50,34 +48,37 @@ const Arbeidstakerperioder = ({ ( -
+
{items?.map((currentItem, currentItemIndex) => { const panelid = `arbeidstakerpanel_${currentItemIndex}`; + const getHarDuplikatOrgnr = () => items.filter( (item) => item.organisasjonsnummer && item.organisasjonsnummer === currentItem.organisasjonsnummer, ).length > 1; + return ( - -
+
{itemsWithInitialItem.length > 1 && ( -

+ -

+ )} + {itemsWithInitialItem.length > 1 && (
-
- {intlHelper(intl, 'skjema.arbeid.arbeidstaker.fjernarbeidsgiver')} - + + +
)} + + (getUhaandterteFeil && @@ -114,20 +115,19 @@ const Arbeidstakerperioder = ({ } />
- + ); })} - + +
)} /> diff --git a/src/app/components/arbeidstid/ArbeidstidKalender.tsx b/src/app/components/arbeidstid/ArbeidstidKalender.tsx index f4b2f0fdb..582838c3a 100644 --- a/src/app/components/arbeidstid/ArbeidstidKalender.tsx +++ b/src/app/components/arbeidstid/ArbeidstidKalender.tsx @@ -1,9 +1,8 @@ -import dayjs from 'dayjs'; import React, { useState } from 'react'; -import { useIntl } from 'react-intl'; +import dayjs from 'dayjs'; +import { FormattedMessage } from 'react-intl'; import { Button, Heading, Modal } from '@navikt/ds-react'; - import { ArbeidstidPeriodeMedTimer, IArbeidstidPeriodeMedTimer, @@ -14,9 +13,7 @@ import { } from 'app/models/types'; import { ArbeidstidInfo } from 'app/models/types/ArbeidstidInfo'; import { formats, removeDatesFromPeriods } from 'app/utils'; -import intlHelper from 'app/utils/intlUtils'; import { arbeidstidPeriodeTilKalenderdag } from 'app/utils/mappingUtils'; - import VerticalSpacer from '../VerticalSpacer'; import DateContent from '../calendar/DateContent'; import TidsbrukKalenderContainer from '../calendar/TidsbrukKalenderContainer'; @@ -31,15 +28,15 @@ export interface ArbeidstidKalenderProps { eksisterendeSoknadsperioder: IPeriode[]; } -export default function ArbeidstidKalender({ +const ArbeidstidKalender = ({ arbeidstidInfo, updateSoknad, updateSoknadState, nyeSoknadsperioder = [], eksisterendeSoknadsperioder = [], -}: ArbeidstidKalenderProps) { - const intl = useIntl(); +}: ArbeidstidKalenderProps) => { const [visArbeidstidLengrePerioder, setVisArbeidstidLengrePerioder] = useState(false); + const toggleVisArbeidstidLengrePerioder = () => setVisArbeidstidLengrePerioder(!visArbeidstidLengrePerioder); const gyldigePerioder = [...(nyeSoknadsperioder || []), ...eksisterendeSoknadsperioder].filter(Boolean); @@ -90,14 +87,19 @@ export default function ArbeidstidKalender({ }; return ( - <> - - Arbeidstid i søknadsperioden - +
+
+ + + +
+ + + setVisArbeidstidLengrePerioder(false)} @@ -121,6 +123,7 @@ export default function ArbeidstidKalender({ /> + {!!gyldigePerioder.length && ( )} - +
); -} +}; + +export default ArbeidstidKalender; diff --git a/src/app/components/pdf/PdfVisning.tsx b/src/app/components/pdf/PdfVisning.tsx index 0eafcea98..115d7d0ea 100644 --- a/src/app/components/pdf/PdfVisning.tsx +++ b/src/app/components/pdf/PdfVisning.tsx @@ -4,7 +4,7 @@ import React, { useEffect, useMemo, useState } from 'react'; import { FormattedMessage } from 'react-intl'; import { Back, Next } from '@navikt/ds-icons'; -import { Button, Panel, ToggleGroup } from '@navikt/ds-react'; +import { Button, Box, ToggleGroup } from '@navikt/ds-react'; import { IJournalpostDokumenter } from 'app/models/enums/Journalpost/JournalpostDokumenter'; @@ -102,7 +102,7 @@ const PdfVisning: React.FunctionComponent = ({ journalpostDoku defaultSize={{ width: '60%', height: '100%' }} minWidth={400} > - + {dokumenter.length > 1 && (
= ({ journalpostDoku
)} +