From 6343c9b4e975d7d5c2a89ed9a2c4cf8450d187aa Mon Sep 17 00:00:00 2001 From: Eirik Vigeland Date: Thu, 19 Dec 2024 10:51:28 +0100 Subject: [PATCH] feat. korrige komma i desimaltall flere steder --- .../steg/BeregningTilskudd/Arbeidsgiveravgift.tsx | 4 ++-- .../steg/BeregningTilskudd/Feriepenger.tsx | 4 ++-- .../ObligatoriskTjenestepensjon.tsx | 3 ++- .../steg/BeregningTilskudd/UtregningPanel.tsx | 2 +- .../tilskuddsPerioder/TilskuddsPerioderVeileder.tsx | 4 ++-- .../EndreStillingbeskrivelse.tsx | 1 - .../endreTilskudd/EndreTilskuddsberegning.tsx | 3 ++- .../AntallDagerInput/AntallDagerInput.tsx | 3 ++- .../StillingsprosentInput/StillingsprosentInput.tsx | 1 + .../BeslutterTilskuddsperioder.tsx | 4 ++-- src/komponenter/form/ProsentInput.tsx | 8 ++++---- src/utils/formaterProsent.ts | 9 +++++++++ src/utils/formatterProsent.ts | 6 ------ src/utils/tallUtils.ts | 12 ++++++++---- 14 files changed, 37 insertions(+), 27 deletions(-) create mode 100644 src/utils/formaterProsent.ts delete mode 100644 src/utils/formatterProsent.ts diff --git a/src/AvtaleSide/steg/BeregningTilskudd/Arbeidsgiveravgift.tsx b/src/AvtaleSide/steg/BeregningTilskudd/Arbeidsgiveravgift.tsx index 41510ff2c..6bc7fcd6b 100644 --- a/src/AvtaleSide/steg/BeregningTilskudd/Arbeidsgiveravgift.tsx +++ b/src/AvtaleSide/steg/BeregningTilskudd/Arbeidsgiveravgift.tsx @@ -1,7 +1,7 @@ import React, { useContext } from 'react'; import { Column, Row } from '@/komponenter/NavGrid/Grid'; import SelectInput from '@/komponenter/form/SelectInput'; -import { parseFloatIfFloatable } from '@/utils'; +import { formaterNorskeTall, parseFloatIfFloatable } from '@/utils'; import { BEMWrapper } from '@/utils/bem'; import { AvtaleContext } from '@/AvtaleProvider'; @@ -17,7 +17,7 @@ const Arbeidsgiveravgift: React.FC = ({ cls }: Props) => { const satserVerdier = [{ label: 'Velg', value: '' }]; satser.forEach((sats: number) => satserVerdier.push({ - label: (sats * 100).toFixed(1) + ' %', + label: formaterNorskeTall(sats * 100) + ' %', value: sats.toString(), }), ); diff --git a/src/AvtaleSide/steg/BeregningTilskudd/Feriepenger.tsx b/src/AvtaleSide/steg/BeregningTilskudd/Feriepenger.tsx index e3cd9cd31..194ed3a27 100644 --- a/src/AvtaleSide/steg/BeregningTilskudd/Feriepenger.tsx +++ b/src/AvtaleSide/steg/BeregningTilskudd/Feriepenger.tsx @@ -3,7 +3,7 @@ import { Column, Row } from '@/komponenter/NavGrid/Grid'; import { BEMWrapper } from '@/utils/bem'; import { AvtaleContext } from '@/AvtaleProvider'; import SelectInput from '@/komponenter/form/SelectInput'; -import { parseFloatIfFloatable } from '@/utils'; +import { formaterNorskeTall, parseFloatIfFloatable } from '@/utils'; interface Props { cls: BEMWrapper; @@ -13,7 +13,7 @@ const Feriepenger: React.FC = ({ cls }: Props) => { const feriepengeAlternativer = [{ label: 'Velg', value: '' }].concat( [0, 0.102, 0.12, 0.125, 0.143].map((sats: number) => ({ - label: (sats * 100).toFixed(1) + ' %', + label: formaterNorskeTall(sats * 100) + ' %', value: sats.toString(), })), ); diff --git a/src/AvtaleSide/steg/BeregningTilskudd/ObligatoriskTjenestepensjon.tsx b/src/AvtaleSide/steg/BeregningTilskudd/ObligatoriskTjenestepensjon.tsx index 75fb90993..51ee35d3b 100644 --- a/src/AvtaleSide/steg/BeregningTilskudd/ObligatoriskTjenestepensjon.tsx +++ b/src/AvtaleSide/steg/BeregningTilskudd/ObligatoriskTjenestepensjon.tsx @@ -3,6 +3,7 @@ import { Column, Row } from '@/komponenter/NavGrid/Grid'; import ProsentInput from '@/komponenter/form/ProsentInput'; import { BEMWrapper } from '@/utils/bem'; import { AvtaleContext } from '@/AvtaleProvider'; +import { formaterNorskeTall } from '@/utils'; interface Props { cls: BEMWrapper; @@ -22,7 +23,7 @@ const ObligatoriskTjenestepensjon: React.FC = ({ cls }: Props) => { autoComplete={'off'} value={ avtale.gjeldendeInnhold.otpSats !== undefined && avtale.gjeldendeInnhold.otpSats !== null - ? (avtale.gjeldendeInnhold.otpSats * 100).toFixed(2) + ? formaterNorskeTall(avtale.gjeldendeInnhold.otpSats * 100) : '' } onChange={(event: React.ChangeEvent) => { diff --git a/src/AvtaleSide/steg/BeregningTilskudd/UtregningPanel.tsx b/src/AvtaleSide/steg/BeregningTilskudd/UtregningPanel.tsx index 494cd8d80..e1e81308d 100644 --- a/src/AvtaleSide/steg/BeregningTilskudd/UtregningPanel.tsx +++ b/src/AvtaleSide/steg/BeregningTilskudd/UtregningPanel.tsx @@ -46,7 +46,7 @@ const UtregningPanel: FunctionComponent = (props) => { labelIkon={} labelTekst="Stillingsprosent" verdiOperator={} - verdi={props.stillingprosent ? formaterNorskeTall(props.stillingprosent) : 0} + verdi={formaterNorskeTall(props.stillingprosent) || 0} ikkePenger /> = (props) => { {formatterPeriode(periode.startDato, periode.sluttDato)} - {formatterProsent(periode.lonnstilskuddProsent)} + {formaterProsent(periode.lonnstilskuddProsent)} {formaterPenger(periode.beløp)} diff --git a/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/endreStillingbeskrivelse/EndreStillingbeskrivelse.tsx b/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/endreStillingbeskrivelse/EndreStillingbeskrivelse.tsx index d18ba1362..840cc2d39 100644 --- a/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/endreStillingbeskrivelse/EndreStillingbeskrivelse.tsx +++ b/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/endreStillingbeskrivelse/EndreStillingbeskrivelse.tsx @@ -3,7 +3,6 @@ import StillingsTittelVelger, { StillingOptions } from '@/AvtaleSide/steg/Stilli import useStilling from '@/AvtaleSide/steg/StillingSteg/useStilling'; import StillingsprosentInput from '@/AvtaleSide/steg/VarighetSteg/StillingsprosentInput/StillingsprosentInput'; import BekreftelseModal from '@/komponenter/modal/BekreftelseModal'; -import PakrevdInput from '@/komponenter/PakrevdInput/PakrevdInput'; import PakrevdTextarea from '@/komponenter/PakrevdTextarea/PakrevdTextarea'; import { EndreStilling, oppdatereStillingbeskrivelse } from '@/services/rest-service'; import BEMHelper from '@/utils/bem'; diff --git a/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/endreTilskudd/EndreTilskuddsberegning.tsx b/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/endreTilskudd/EndreTilskuddsberegning.tsx index 215a7954d..7e391c404 100644 --- a/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/endreTilskudd/EndreTilskuddsberegning.tsx +++ b/src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/endreTilskudd/EndreTilskuddsberegning.tsx @@ -13,6 +13,7 @@ import { Task } from '@navikt/ds-icons/cjs'; import { BodyShort, Link } from '@navikt/ds-react'; import React, { FunctionComponent, useContext, useState } from 'react'; import './EndreTilskuddsberegning.less'; +import { formaterNorskeTall } from '@/utils'; export type EndreBeregning = Pick< Beregningsgrunnlag & Varighet, @@ -123,7 +124,7 @@ const EndreTilskuddsberegning: FunctionComponent = () => { autoComplete={'off'} value={ nyBeregning.otpSats !== undefined && nyBeregning.otpSats !== null - ? (nyBeregning.otpSats * 100).toFixed(0) + ? formaterNorskeTall(nyBeregning.otpSats * 100) : '' } onChange={(event: React.ChangeEvent) => diff --git a/src/AvtaleSide/steg/VarighetSteg/AntallDagerInput/AntallDagerInput.tsx b/src/AvtaleSide/steg/VarighetSteg/AntallDagerInput/AntallDagerInput.tsx index 3a9055c89..deac567ef 100644 --- a/src/AvtaleSide/steg/VarighetSteg/AntallDagerInput/AntallDagerInput.tsx +++ b/src/AvtaleSide/steg/VarighetSteg/AntallDagerInput/AntallDagerInput.tsx @@ -21,6 +21,7 @@ const schema = z.object({ invalid_type_error: 'Antall dager være et tall', required_error: 'Antall dager er påkrevd', }) + .multipleOf(0.01, 'Antall dager kan maks ha 2 desimaler') .min(0.1, 'Antall dager må være større enn 0') .max(7, 'Antall dager må være mindre enn eller lik 7'), ), @@ -39,7 +40,7 @@ function AntallDagerInput(props: Props) { const { field } = useController({ control, name: 'antallDagerPerUke', - defaultValue: formaterNorskeTallFraInput(verdi?.toString() ?? ''), + defaultValue: formaterNorskeTallFraInput(verdi), }); const onChange: React.ChangeEventHandler = (e) => { diff --git a/src/AvtaleSide/steg/VarighetSteg/StillingsprosentInput/StillingsprosentInput.tsx b/src/AvtaleSide/steg/VarighetSteg/StillingsprosentInput/StillingsprosentInput.tsx index cbf101000..0db69a162 100644 --- a/src/AvtaleSide/steg/VarighetSteg/StillingsprosentInput/StillingsprosentInput.tsx +++ b/src/AvtaleSide/steg/VarighetSteg/StillingsprosentInput/StillingsprosentInput.tsx @@ -21,6 +21,7 @@ const schema = z.object({ invalid_type_error: 'Stillingsprosent være et tall', required_error: 'Stillingsprosent er påkrevd', }) + .multipleOf(0.01, 'Stillingsprosent kan maks ha 2 desimaler') .min(0.1, 'Stillingsprosent må være større enn 0') .max(100, 'Stillingsprosent må være mindre enn eller lik 100'), ), diff --git a/src/BeslutterSide/beslutterTilskuddsperioder/BeslutterTilskuddsperioder.tsx b/src/BeslutterSide/beslutterTilskuddsperioder/BeslutterTilskuddsperioder.tsx index 7983052ad..1abad2084 100644 --- a/src/BeslutterSide/beslutterTilskuddsperioder/BeslutterTilskuddsperioder.tsx +++ b/src/BeslutterSide/beslutterTilskuddsperioder/BeslutterTilskuddsperioder.tsx @@ -1,6 +1,6 @@ import { AvtaleContext, Context } from '@/AvtaleProvider'; import { formatterDato, formatterPeriode, NORSK_DATO_FORMAT } from '@/utils/datoUtils'; -import { formatterProsent } from '@/utils/formatterProsent'; +import { formaterProsent } from '@/utils/formaterProsent'; import { formaterPenger } from '@/utils/PengeUtils'; import React, { FunctionComponent, useContext, useRef, useState, useEffect } from 'react'; import EtikettStatus from '../EtikettStatus'; @@ -100,7 +100,7 @@ const BeslutterTilskuddsPerioder: FunctionComponent = (props) => { {formatterPeriode(periode.startDato, periode.sluttDato, 'DD.MM.YY')} {formaterPenger(periode.beløp)} - {formatterProsent(periode.lonnstilskuddProsent)} + {formaterProsent(periode.lonnstilskuddProsent)} {formatterDato(periode.kanBesluttesFom, NORSK_DATO_FORMAT)} {periode.status === 'GODKJENT' ? periode.enhet : enhet} diff --git a/src/komponenter/form/ProsentInput.tsx b/src/komponenter/form/ProsentInput.tsx index 8bbff16d2..9ffb3fe20 100644 --- a/src/komponenter/form/ProsentInput.tsx +++ b/src/komponenter/form/ProsentInput.tsx @@ -1,5 +1,5 @@ import FormattedNumberInput from '@/komponenter/form/FormattedNumberInput'; -import { formatterProsent } from '@/utils/formatterProsent'; +import { formaterProsent } from '@/utils/formaterProsent'; import React, { PropsWithChildren } from 'react'; import { TextFieldProps } from '@navikt/ds-react'; @@ -25,12 +25,12 @@ const ProsentInput: React.FunctionComponent = (props: PropsWithChild }, (v: any) => { if (v && min && v < min) { - return 'Må være over ' + formatterProsent(min); + return 'Må være over ' + formaterProsent(min); } }, (v: any) => { if (v && max && v > max) { - return 'Må være under ' + formatterProsent(max); + return 'Må være under ' + formaterProsent(max); } }, ]; @@ -41,7 +41,7 @@ const ProsentInput: React.FunctionComponent = (props: PropsWithChild step={step} validatorer={validatorer} maxLength={3} - toFormatted={formatterProsent} + toFormatted={formaterProsent} max={max} min={min} {...other} diff --git a/src/utils/formaterProsent.ts b/src/utils/formaterProsent.ts new file mode 100644 index 000000000..5cf7d9ff4 --- /dev/null +++ b/src/utils/formaterProsent.ts @@ -0,0 +1,9 @@ +import { formaterNorskeTall, parseNorskeTallFraInput } from '@/utils/tallUtils'; + +export const formaterProsent = (value: T): string => { + const valueSomTall = parseNorskeTallFraInput(value); + if (!valueSomTall && valueSomTall !== 0) { + return ''; + } + return `${formaterNorskeTall(valueSomTall)} %`; +}; diff --git a/src/utils/formatterProsent.ts b/src/utils/formatterProsent.ts deleted file mode 100644 index f5f3c9eca..000000000 --- a/src/utils/formatterProsent.ts +++ /dev/null @@ -1,6 +0,0 @@ -export const formatterProsent = (value: any): string => { - if (!value) { - return ''; - } - return `${value} %`; -}; diff --git a/src/utils/tallUtils.ts b/src/utils/tallUtils.ts index d865e59d1..da3ba7f82 100644 --- a/src/utils/tallUtils.ts +++ b/src/utils/tallUtils.ts @@ -1,10 +1,14 @@ const numberFormat = new Intl.NumberFormat('nb-NO', { style: 'decimal', maximumFractionDigits: 2 }); -export const formaterNorskeTall = (value: T): string | T => - typeof value === 'number' && !Number.isNaN(value) ? numberFormat.format(Number(value)) : value; +export const formaterNorskeTall = (value: string | number | undefined): string | undefined => { + if (value === undefined) { + return undefined; + } + return !Number.isNaN(Number(value)) ? numberFormat.format(Number(value)) : String(value); +} -export const formaterNorskeTallFraInput = (value: T): string | T => - typeof value === 'string' ? String(value).replace('.', ',') : value; +export const formaterNorskeTallFraInput = (value: string | number | undefined): string => + typeof value === 'string' ? String(value).replace('.', ',') : String(value ?? ''); export const parseNorskeTallFraInput = (value: T): number | undefined => typeof value === 'string' && value !== ''