Skip to content

Commit

Permalink
Opprett nye datoformateringsfunksjoner som bruker date-fns
Browse files Browse the repository at this point in the history
  • Loading branch information
@Oddsor
Oddsor committed Jan 17, 2025
1 parent cdf3e78 commit d22ee9b
Show file tree
Hide file tree
Showing 2 changed files with 112 additions and 63 deletions.
125 changes: 62 additions & 63 deletions ...de/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioderTabellVtao.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import React, { useContext, useEffect, useState } from 'react';
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 { formaterDatoNy, formaterPeriodeNy, NORSK_DATO_FORMAT_NY } from '@/utils/datoUtils';
import EtikettStatus from '@/BeslutterSide/EtikettStatus';
import { formaterPenger } 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 { getYear, addDays } from 'date-fns';
import {
antallAktiveTilskuddsperioder,
getIndexVisningForTilskuddsperiode,
Expand All @@ -18,17 +18,62 @@ interface Properties {
className: string;
}

const tilskuddsperiodeRad = ({
key,
cls,
avtaleOpprettet,
erNavAnsatt,
periode,
}: {
key?: number;
cls: any;
avtaleOpprettet: Date;
erNavAnsatt: boolean;
periode: TilskuddsPeriode;
}) => {
const periodeAar = getYear(new Date(periode.startDato));
// Hvis tilskuddsperioden gjelder for et tidligere år enn når avtalen er opprettet,
// så vil vi vise en liten notis om at VTAO-satsen er basert på et lavere beløp
const erITidligereAar = periodeAar < getYear(avtaleOpprettet);
return (
<div key={key} className={cls.element('tabell-innslag')}>
<div>
<BodyShort size="small">
{formaterPeriodeNy(periode.startDato, periode.sluttDato, NORSK_DATO_FORMAT_NY)}
</BodyShort>
{erITidligereAar && (
<BodyShort size="small" textColor="subtle">
Sats for {periodeAar}
</BodyShort>
)}
</div>
{erNavAnsatt && (
<BodyShort>
<EtikettStatus tilskuddsperiodestatus={periode.status} size="small" />
</BodyShort>
)}
<BodyShort size="small" style={{ minWidth: '4rem' }}>
{periode.beløp !== null ? formaterPenger(periode.beløp) : '-'}
</BodyShort>
<BodyShort size="small" style={{ minWidth: '4rem' }}>
{formaterDatoNy(addDays(new Date(periode.sluttDato), 3).toString(), 'dd MMM yyyy')}
</BodyShort>
</div>
);
};

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);
const sistePeriodeAar = sistePeriode ? moment(sistePeriode?.startDato).year() : undefined;
const sistePeriodeErITidligereAar = sistePeriodeAar
? sistePeriodeAar < moment(avtale.opprettetTidspunkt).year()
: false;
const sistePeriode =
antallAktiveTilskuddsperioder(avtale) - 1 > sluttIndexVisning
? avtale.tilskuddPeriode.at(antallAktiveTilskuddsperioder(avtale) - 1)
: undefined;
const avtaleOpprettet = new Date(avtale.opprettetTidspunkt);
const erNavAnsatt = innloggetBruker.erNavAnsatt;

return (
<div className={cls.element('tabell')}>
Expand All @@ -41,67 +86,21 @@ const VisningTilskuddsperioderTabellVtao: React.FC<Properties> = ({ className }:
{avtale.tilskuddPeriode
.filter((p: TilskuddsPeriode) => p.aktiv)
.slice(startIndexVisning, sluttIndexVisning)
.map((periode: TilskuddsPeriode, index: number) => {
const periodeAar = moment(periode.startDato).year();
const erITidligereAar = periodeAar < moment(avtale.opprettetTidspunkt).year();
return (
<div>
<div key={index} className={cls.element('tabell-innslag')}>
<div>
<BodyShort size="small">
{formatterDato(periode.startDato, NORSK_DATO_FORMAT)} -{' '}
{formatterDato(periode.sluttDato, NORSK_DATO_FORMAT)}
</BodyShort>
{erITidligereAar && (
<BodyShort size="small" textColor="subtle">
Sats for {periodeAar}
</BodyShort>
)}
</div>
{innloggetBruker.erNavAnsatt && (
<BodyShort>
<EtikettStatus tilskuddsperiodestatus={periode.status} size="small" />
</BodyShort>
)}
<BodyShort size="small" style={{ minWidth: '4rem' }}>
{periode.beløp !== null ? formaterPenger(periode.beløp) : '-'}
</BodyShort>
<BodyShort size="small" style={{ minWidth: '4rem' }}>
{formatterDato(moment(periode.sluttDato).add(3, 'days').toString(), 'DD MMM YYYY')}
</BodyShort>
</div>
</div>
);
.map((periode: TilskuddsPeriode, key: number) => {
return tilskuddsperiodeRad({
key,
periode,
avtaleOpprettet,
cls,
erNavAnsatt,
});
})}
{!visAllePerioder && sistePeriode && (
<div>
<div key={1} className={cls.element('tabell-innslag')}>
...
</div>
<div className={cls.element('tabell-innslag')}>
<div>
<BodyShort size="small">
{formatterDato(sistePeriode.startDato, NORSK_DATO_FORMAT)} -{' '}
{formatterDato(sistePeriode.sluttDato, NORSK_DATO_FORMAT)}
</BodyShort>
{sistePeriodeErITidligereAar && (
<BodyShort size="small" textColor="subtle">
Sats for {sistePeriodeAar}
</BodyShort>
)}
</div>
{innloggetBruker.erNavAnsatt && (
<BodyShort>
<EtikettStatus tilskuddsperiodestatus={sistePeriode.status} size="small" />
</BodyShort>
)}
<BodyShort size="small" style={{ minWidth: '4rem' }}>
{sistePeriode.beløp !== null ? formaterPenger(sistePeriode.beløp) : '-'}
</BodyShort>
<BodyShort size="small" style={{ minWidth: '4rem' }}>
{formatterDato(moment(sistePeriode.sluttDato).add(3, 'days').toString(), 'DD MMM YYYY')}
</BodyShort>
</div>
{tilskuddsperiodeRad({ cls, erNavAnsatt, avtaleOpprettet, periode: sistePeriode })}
</div>
)}
<InfoRundtTilskuddsperioder
Expand Down
50 changes: 50 additions & 0 deletions src/utils/datoUtils.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import moment from 'moment';
import 'moment/dist/locale/nb';
moment.locale('nb');
import { format } from 'date-fns';
import { nb } from 'date-fns/locale';

export const datoIkkeTilbakeITid = (dato: Date) => {
return moment().isSameOrBefore(dato, 'date');
Expand Down Expand Up @@ -31,9 +33,26 @@ export const accurateHumanize = (duration: moment.Duration, accuracy: number = 2
.join(', ');
};

/**
* @deprecated
*/
export const NORSK_DATO_OG_TID_FORMAT = 'DD.MM.YYYY HH:mm';
/**
* @deprecated
*/
export const NORSK_DATO_FORMAT = 'DD.MM.YYYY';
/**
* For bruk når man formaterer med date-fns (ikke moment)
*/
export const NORSK_DATO_FORMAT_NY = 'dd.MM.yyyy';

/**
* Formater en dato gitt en formateringsstring.
*
* Bør fases ut til fordel for `formaterDatoNy`
*
* @deprecated
*/
export const formatterDato = (dato: string, format: string = NORSK_DATO_OG_TID_FORMAT) => {
try {
if (dato === '-999999999-01-01') return '';
Expand All @@ -44,6 +63,37 @@ export const formatterDato = (dato: string, format: string = NORSK_DATO_OG_TID_F
}
};

/**
* Formater en dato gitt en formateringsstring.
*
* Bruker date-fns, og ikke moment.
*/
export const formaterDatoNy = (dato: string, formatString: string = NORSK_DATO_OG_TID_FORMAT) => {
try {
if (dato === '-999999999-01-01') return '';
const formatertDato = format(dato, formatString, { locale: nb });
return !formatertDato.includes('NaN') ? formatertDato : dato;
} catch (e) {
return dato;
}
};

/**
* Formater en (tilskudds)periode gitt en formateringsstring.
*
* Bruker date-fns, og ikke moment.
*/
export const formaterPeriodeNy = (fra: string, til: string, format: string = NORSK_DATO_FORMAT) => {
return formaterDatoNy(fra, format) + ' – ' + formaterDatoNy(til, format);
};

/**
* Formater en (tilskudds)periode gitt en formateringsstring.
*
* Bør fases ut til fordel for `formaterPeriodeNy`.
*
* @deprecated
*/
export const formatterPeriode = (fra: string, til: string, format: string = NORSK_DATO_FORMAT) => {
return formatterDato(fra, format) + ' – ' + formatterDato(til, format);
};
Expand Down

0 comments on commit d22ee9b

Please sign in to comment.