feat. perioder viser første perioder til siste med elipser mellom

navikt · Jun 21, 2024 · e19a977 · e19a977
1 parent e993178
commit e19a977
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 28 deletions.
diff --git a/...AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/InfoRundtTilskuddsperioder.tsx b/...AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/InfoRundtTilskuddsperioder.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { formatterDato, NORSK_DATO_FORMAT } from '@/utils/datoUtils';
 import { Button } from '@navikt/ds-react';
 import BEMHelper from '@/utils/bem';
+import moment from 'moment';
+import { formatterPenger } from '@/utils/PengeUtils';
 
 interface Props {
     className: string;
@@ -26,9 +28,10 @@ const InfoRundtTilskuddsperioder: React.FC<Props> = ({
     return (
         <>
             <div className={cls.element('tabell-innslag')}>
-                Avtalen varer fra {formatterDato(gjeldendeInnholdStartdato, NORSK_DATO_FORMAT)} til{' '}
-                {formatterDato(gjeldendeInnholdSluttdato, NORSK_DATO_FORMAT)}. Det tilsvarer{' '}
-                {antallAktiveTilskuddsperioder} tilskuddsperioder.
+                Avtalen varer i {moment(gjeldendeInnholdSluttdato).diff(gjeldendeInnholdStartdato, 'years')} {'år.'}
+                <br />
+                Det tilsvarer en refusjon til arbeisgiver på ca {formatterPenger(6808 * 12)} i året og totalt{' '}
+                {formatterPenger(antallAktiveTilskuddsperioder * 6808)} kr for hele perioden .
             </div>
             {!visAllePerioder && (
                 <Button size="small" onClick={() => setVisAllePerioder(true)}>

diff --git a/...de/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioderTabellVtao.tsx b/...de/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioderTabellVtao.tsx
@@ -24,6 +24,8 @@ const VisningTilskuddsperioderTabellVtao: React.FC<Properties> = ({ className }:
     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')}>
@@ -36,39 +38,56 @@ const VisningTilskuddsperioderTabellVtao: React.FC<Properties> = ({ className }:
                     refusjon
                 </Label>
             </div>
-
             {avtale.tilskuddPeriode
                 .filter((p: TilskuddsPeriode) => p.aktiv)
+                .slice(startIndexVisning, sluttIndexVisning)
                 .map((periode: TilskuddsPeriode, index: number) => {
-                    if (index < startIndexVisning || index > sluttIndexVisning) {
-                        return null;
-                    } else if (index !== 0 && (index === startIndexVisning || index === sluttIndexVisning)) {
-                        return (
-                            <div key={index} className={cls.element('tabell-innslag')}>
-                                ...
-                            </div>
-                        );
-                    }
                     return (
-                        <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" />
+                        <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>
-                            )}
-                            <BodyShort size="small" style={{ minWidth: '4rem' }}>
-                                {formatterPenger(periode.beløp)}
-                            </BodyShort>
-                            <BodyShort size="small" style={{ minWidth: '4rem' }}>
-                                {formatterDato(periode.sluttDato, 'MMM YYYY')}
-                            </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}