feat. korrige komma i desimaltall flere steder

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<Props> = ({ 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(),
             }),
         );

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<Props> = ({ 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(),
         })),
     );

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<Props> = ({ 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<HTMLInputElement>) => {

src/AvtaleSide/steg/BeregningTilskudd/UtregningPanel.tsx

@@ -46,7 +46,7 @@ const UtregningPanel: FunctionComponent<Beregningsgrunnlag> = (props) => {
                             labelIkon={<StillingsprosentIkon />}
                             labelTekst="Stillingsprosent"
                             verdiOperator={<ProsentTegn />}
-                            verdi={props.stillingprosent ? formaterNorskeTall(props.stillingprosent) : 0}
+                            verdi={formaterNorskeTall(props.stillingprosent) || 0}
                             ikkePenger
                         />
                         <Utregningsrad

src/AvtaleSide/steg/BeregningTilskudd/tilskuddsPerioder/TilskuddsPerioderVeileder.tsx

@@ -2,7 +2,7 @@ import EtikettStatus from '@/BeslutterSide/EtikettStatus';
 import { TilskuddsPeriode } from '@/types/avtale';
 import BEMHelper from '@/utils/bem';
 import { formatterPeriode } from '@/utils/datoUtils';
-import { formatterProsent } from '@/utils/formatterProsent';
+import { formaterProsent } from '@/utils/formaterProsent';
 import { formaterPenger } from '@/utils/PengeUtils';
 import { FunctionComponent } from 'react';
 import './tilskuddsPerioder.less';
@@ -36,7 +36,7 @@ const TilskuddsPerioderVeileder: FunctionComponent<Props> = (props) => {
                                 <td aria-label={`Startdato ${periode.startDato} og sluttdato ${periode.sluttDato}`}>
                                     {formatterPeriode(periode.startDato, periode.sluttDato)}
                                 </td>
-                                <td>{formatterProsent(periode.lonnstilskuddProsent)}</td>
+                                <td>{formaterProsent(periode.lonnstilskuddProsent)}</td>
                                 <td>{formaterPenger(periode.beløp)}</td>
                                 <td>
                                     <EtikettStatus tilskuddsperiodestatus={periode.status} size="small" />

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';

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<HTMLInputElement>) =>

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<HTMLInputElement> = (e) => {

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'),
     ),

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> = (props) => {
                                             {formatterPeriode(periode.startDato, periode.sluttDato, 'DD.MM.YY')}
                                         </td>
                                         <td>{formaterPenger(periode.beløp)}</td>
-                                        <td>{formatterProsent(periode.lonnstilskuddProsent)}</td>
+                                        <td>{formaterProsent(periode.lonnstilskuddProsent)}</td>
                                         <td>{formatterDato(periode.kanBesluttesFom, NORSK_DATO_FORMAT)}</td>
                                         <td>{periode.status === 'GODKJENT' ? periode.enhet : enhet}</td>
                                         <td>

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<InputProps> = (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<InputProps> = (props: PropsWithChild
             step={step}
             validatorer={validatorer}
             maxLength={3}
-            toFormatted={formatterProsent}
+            toFormatted={formaterProsent}
             max={max}
             min={min}
             {...other}

src/utils/formaterProsent.ts

@@ -0,0 +1,9 @@
+import { formaterNorskeTall, parseNorskeTallFraInput } from '@/utils/tallUtils';
+
+export const formaterProsent = <T>(value: T): string => {
+    const valueSomTall = parseNorskeTallFraInput(value);
+    if (!valueSomTall && valueSomTall !== 0) {
+        return '';
+    }
+    return `${formaterNorskeTall(valueSomTall)} %`;
+};

src/utils/tallUtils.ts

@@ -1,10 +1,14 @@
 const numberFormat = new Intl.NumberFormat('nb-NO', { style: 'decimal', maximumFractionDigits: 2 });
 
-export const formaterNorskeTall = <T>(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 = <T>(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 = <T>(value: T): number | undefined =>
     typeof value === 'string' && value !== ''