-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Vtao-skjema * feat. endret så fadder får faddernavn fra vtao og ikke kontaktperson sit navn * feat. viser bare felt for fadder om det er vtao * la til mulighet for å oppdatere VTAO fadder kontaktinformasjon via endre kontaktinformation * feat. lagt til måned og år for vtao tillskuddsperioder * feat. la til stillingstype for vtao * Skjul VTAO-filter via feature-toggle * FeatureToggle for VTAO * feat. perioder viser første perioder til siste med elipser mellom Co-authored-by: Magnus Rom <[email protected]> Co-authored-by: Odd Andreas Sørsæther <[email protected]> Co-authored-by: d142796 <[email protected]>
- Loading branch information
4 people
authored
Jun 26, 2024
1 parent
1ebe592
commit 79f7546
Showing
21 changed files
with
511 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
57 changes: 57 additions & 0 deletions
57
src/AvtaleSide/steg/BeregningTilskudd/BeregningVTAOTilskuddSteg.less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| @import (reference) '../../../tiltak_variabler.less'; | ||
|
|
||
| .beregningTilskuddSteg { | ||
| &__valuta-input { | ||
| width: 50%; | ||
| & > .input { | ||
| margin-top: 1rem; | ||
| } | ||
| } | ||
|
|
||
| &__alert { | ||
| margin-top: 1rem; | ||
| } | ||
|
|
||
| &__tilskuddsprosent-heading, | ||
| &__tilskuddsprosent { | ||
| margin-bottom: 1.25rem; | ||
| } | ||
|
|
||
| &__rad { | ||
| margin-bottom: 2rem; | ||
| } | ||
|
|
||
| &__tjenestepensjon, | ||
| &__arbeidsgiveravgift { | ||
| .navds-form-field { | ||
| & > input, | ||
| & > div { | ||
| width: 55%; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &__lonn-tittel { | ||
| padding-bottom: 0.5rem; | ||
| } | ||
|
|
||
| &__otpSats { | ||
| position: relative; | ||
|
|
||
| &--label { | ||
| position: absolute; | ||
| bottom: 0.675rem; | ||
| left: 3rem; | ||
| } | ||
| } | ||
|
|
||
| &__lonn-per-mnd-seksjon { | ||
| &:nth-child(n) { | ||
| margin-bottom: 0.5rem; | ||
|
|
||
| & > ul { | ||
| margin: 0.5rem 0; | ||
| } | ||
| } | ||
| } | ||
| } |
59 changes: 59 additions & 0 deletions
59
src/AvtaleSide/steg/BeregningTilskudd/BeregningVTAOTilskuddSteg.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import { AvtaleContext } from '@/AvtaleProvider'; | ||
| import { InnloggetBrukerContext } from '@/InnloggingBoundary/InnloggingBoundary'; | ||
| import SkjemaTittel from '@/komponenter/form/SkjemaTittel'; | ||
| import Innholdsboks from '@/komponenter/Innholdsboks/Innholdsboks'; | ||
| import LagreKnapp from '@/komponenter/LagreKnapp/LagreKnapp'; | ||
| import VerticalSpacer from '@/komponenter/layout/VerticalSpacer'; | ||
| import BEMHelper from '@/utils/bem'; | ||
| import { Column, Row } from '@/komponenter/NavGrid/Grid'; | ||
| import { BodyShort, Heading, TextField } from '@navikt/ds-react'; | ||
| import { FunctionComponent, useContext } from 'react'; | ||
| import VisningTilskuddsperioder from '@/AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioder'; | ||
| import HenteKontonummer from '@/komponenter/form/henteKontornummer/HenteKontonummer'; | ||
| import './BeregningTilskuddSteg.less'; | ||
| import AvtaleStatus from '@/AvtaleSide/AvtaleStatus/AvtaleStatus'; | ||
| import VisueltDisabledInputFelt from '@/komponenter/VisueltDisabledInputFelt/VisueltDisabledInputFelt'; | ||
| import VisningTilskuddsperioderVtao from './visningTilskuddsperioder/VisningTilskuddsperioderVtao'; | ||
|
|
||
| const cls = BEMHelper('beregningTilskuddSteg'); | ||
|
|
||
| const BeregningTilskuddSteg: FunctionComponent = () => { | ||
| const innloggetBruker = useContext(InnloggetBrukerContext); | ||
|
|
||
| const { avtale, lagreAvtale } = useContext(AvtaleContext); | ||
|
|
||
| return ( | ||
| <> | ||
| <AvtaleStatus /> | ||
| <Innholdsboks> | ||
| <SkjemaTittel>Beregning av tilskudd</SkjemaTittel> | ||
| <Heading level="2" size="small" className={cls.element('lonn-tittel')}> | ||
| Hvor mye dekker tilskuddet? | ||
| </Heading> | ||
| <BodyShort size="small"> | ||
| Arbeidsgiveren får et tilskudd fra NAV for varig tilrettelagt arbeid. Tilskuddssatsen er 6 808 | ||
| kroner per måned. Satsen settes årlig av departementet og avtale- og refusjonsløsningen vil | ||
| automatisk oppdateres når det kommer nye satser. | ||
| </BodyShort> | ||
| <VerticalSpacer rem={2} /> | ||
| <div className={cls.element('rad')}> | ||
| <VisueltDisabledInputFelt | ||
| label="Månedlig tilskuddssats" | ||
| description="Sats for 2024" | ||
| tekst={'6808 kr'} | ||
| /> | ||
| </div> | ||
| <VisningTilskuddsperioderVtao></VisningTilskuddsperioderVtao> | ||
| <Row className={cls.element('rad-kontonummer')}> | ||
| <Column md="12" className={cls.element('kontonummer')}> | ||
| <HenteKontonummer /> | ||
| </Column> | ||
| </Row> | ||
| <VerticalSpacer rem={2} /> | ||
| <LagreKnapp lagre={lagreAvtale} label={'Lagre'} suksessmelding={'Avtale lagret'} /> | ||
| </Innholdsboks> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default BeregningTilskuddSteg; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
103 changes: 103 additions & 0 deletions
103
...de/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioderTabellVtao.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| import React, { useContext, useState } from 'react'; | ||
| import { BodyShort, Label } from '@navikt/ds-react'; | ||
| import { TilskuddsPeriode } from '@/types/avtale'; | ||
| import { formatterDato, NORSK_DATO_FORMAT } from '@/utils/datoUtils'; | ||
| import EtikettStatus from '@/BeslutterSide/EtikettStatus'; | ||
| import { formatterPenger } from '@/utils/PengeUtils'; | ||
| import InfoRundtTilskuddsperioder from '@/AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/InfoRundtTilskuddsperioder'; | ||
| import BEMHelper from '@/utils/bem'; | ||
| import { InnloggetBrukerContext } from '@/InnloggingBoundary/InnloggingBoundary'; | ||
| import { AvtaleContext } from '@/AvtaleProvider'; | ||
| import moment from 'moment'; | ||
| import { | ||
| antallAktiveTilskuddsperioder, | ||
| getIndexVisningForTilskuddsperiode, | ||
| } from '@/AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/visningTilskuddsperiodeUtils'; | ||
|
|
||
| interface Properties { | ||
| className: string; | ||
| } | ||
|
|
||
| const VisningTilskuddsperioderTabellVtao: React.FC<Properties> = ({ className }: Properties) => { | ||
| const [visAllePerioder, setVisAllePerioder] = useState(false); | ||
| const innloggetBruker = useContext(InnloggetBrukerContext); | ||
| const { avtale } = useContext(AvtaleContext); | ||
| const { startIndexVisning, sluttIndexVisning } = getIndexVisningForTilskuddsperiode(avtale, visAllePerioder); | ||
| const cls = BEMHelper(className); | ||
| const sistePeriode = avtale.tilskuddPeriode.at(antallAktiveTilskuddsperioder(avtale) - 1); | ||
|
|
||
| return ( | ||
| <div className={cls.element('tabell')}> | ||
| <div className={cls.element('tabell-ingress')}> | ||
| <Label>Tilskudd for perioder</Label> | ||
| {innloggetBruker.erNavAnsatt && <Label>Status</Label>} | ||
| <Label>Inntil</Label> | ||
| <Label> | ||
| Ubetalt | ||
| <br /> | ||
| refusjon | ||
| </Label> | ||
| </div> | ||
| {avtale.tilskuddPeriode | ||
| .filter((p: TilskuddsPeriode) => p.aktiv) | ||
| .slice(startIndexVisning, sluttIndexVisning) | ||
| .map((periode: TilskuddsPeriode, index: number) => { | ||
| return ( | ||
| <div> | ||
| <div key={index} className={cls.element('tabell-innslag')}> | ||
| <BodyShort size="small"> | ||
| {formatterDato(periode.startDato, NORSK_DATO_FORMAT)} -{' '} | ||
| {formatterDato(periode.sluttDato, NORSK_DATO_FORMAT)} | ||
| </BodyShort> | ||
| {innloggetBruker.erNavAnsatt && ( | ||
| <BodyShort> | ||
| <EtikettStatus tilskuddsperiodestatus={periode.status} size="small" /> | ||
| </BodyShort> | ||
| )} | ||
| <BodyShort size="small" style={{ minWidth: '4rem' }}> | ||
| {formatterPenger(periode.beløp)} | ||
| </BodyShort> | ||
| <BodyShort size="small" style={{ minWidth: '4rem' }}> | ||
| {formatterDato(periode.sluttDato, 'MMM YYYY')} | ||
| </BodyShort> | ||
| </div> | ||
| </div> | ||
| ); | ||
| })} | ||
| {!visAllePerioder && sistePeriode && ( | ||
| <div> | ||
| <div key={1} className={cls.element('tabell-innslag')}> | ||
| ... | ||
| </div> | ||
| <div className={cls.element('tabell-innslag')}> | ||
| <BodyShort size="small"> | ||
| {formatterDato(sistePeriode.startDato, NORSK_DATO_FORMAT)} -{' '} | ||
| {formatterDato(sistePeriode.sluttDato, NORSK_DATO_FORMAT)} | ||
| </BodyShort> | ||
| {innloggetBruker.erNavAnsatt && ( | ||
| <BodyShort> | ||
| <EtikettStatus tilskuddsperiodestatus={sistePeriode.status} size="small" /> | ||
| </BodyShort> | ||
| )} | ||
| <BodyShort size="small" style={{ minWidth: '4rem' }}> | ||
| {formatterPenger(sistePeriode.beløp)} | ||
| </BodyShort> | ||
| <BodyShort size="small" style={{ minWidth: '4rem' }}> | ||
| {formatterDato(sistePeriode.sluttDato, 'MMM YYYY')} | ||
| </BodyShort> | ||
| </div> | ||
| </div> | ||
| )} | ||
| <InfoRundtTilskuddsperioder | ||
| className={cls.className} | ||
| gjeldendeInnholdStartdato={avtale.gjeldendeInnhold.startDato} | ||
| gjeldendeInnholdSluttdato={avtale.gjeldendeInnhold.sluttDato} | ||
| antallAktiveTilskuddsperioder={antallAktiveTilskuddsperioder(avtale)} | ||
| setVisAllePerioder={setVisAllePerioder} | ||
| visAllePerioder={visAllePerioder} | ||
| tiltakstype={avtale.tiltakstype} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; | ||
| export default VisningTilskuddsperioderTabellVtao; |
30 changes: 30 additions & 0 deletions
30
...aleSide/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioderVtao.less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| .visning-tilskuddsperioder { | ||
| &__header { | ||
| margin-bottom: 2rem; | ||
| } | ||
|
|
||
| &__tabell-ingress { | ||
| margin-bottom: 0.25rem; | ||
| } | ||
|
|
||
| &__tabell-ingress, | ||
| &__tabell-innslag { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| } | ||
|
|
||
| &__tabell-innslag { | ||
| border-top: 1px solid #c6c2bf; | ||
| padding: 1rem 0; | ||
| } | ||
|
|
||
| &__melding-arbeidsgiver, | ||
| &__melding-arbeidsgiver-text { | ||
| margin: 1rem 0; | ||
| } | ||
|
|
||
| &__info-redusert-prosentsats { | ||
| margin-bottom: 1rem; | ||
| } | ||
| } |
28 changes: 28 additions & 0 deletions
28
...taleSide/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioderVtao.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import { AvtaleContext } from '@/AvtaleProvider'; | ||
| import BEMHelper from '@/utils/bem'; | ||
| import { Accordion, BodyShort, Label } from '@navikt/ds-react'; | ||
| import { FunctionComponent, useContext } from 'react'; | ||
| import './visningTilskuddsperioder.less'; | ||
| import VerticalSpacer from '@/komponenter/layout/VerticalSpacer'; | ||
| import VisningTilskuddsperioderTabellVtao from './VisningTilskuddsperioderTabellVtao'; | ||
|
|
||
| const VisningTilskuddsperioderVtao: FunctionComponent = () => { | ||
| const { avtale } = useContext(AvtaleContext); | ||
| const cls = BEMHelper('visning-tilskuddsperioder'); | ||
|
|
||
| return ( | ||
| <div className={cls.className}> | ||
| <Label> | ||
| Oversikt over tilskudd fra {avtale.gjeldendeInnhold.startDato} - {avtale.gjeldendeInnhold.sluttDato} | ||
| </Label> | ||
| <BodyShort size="small">(2024 - satser)</BodyShort> | ||
| <VerticalSpacer rem={2} /> | ||
| <div className={cls.element('container')}> | ||
| <div className={cls.element('header')}> | ||
| <VisningTilskuddsperioderTabellVtao className={cls.className} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
| export default VisningTilskuddsperioderVtao; |
Oops, something went wrong.