Fix normalarbeidstid number/string

navikt · Oct 2, 2023 · 49256c2 · 49256c2
1 parent 806f4d6
commit 49256c2
Show file tree

Hide file tree

Showing 9 changed files with 133 additions and 75 deletions.
diff --git a/...ivets-sluttfase-soknad/src/app/søknad/steps/arbeidssituasjon/arbeidssituasjonStepUtils.ts b/...ivets-sluttfase-soknad/src/app/søknad/steps/arbeidssituasjon/arbeidssituasjonStepUtils.ts
@@ -1,18 +1,23 @@
+import {
+    DateRange,
+    getNumberFromNumberInputValue,
+    getStringForNumberInputValue,
+    YesOrNo,
+} from '@navikt/sif-common-formik-ds/lib';
+import datepickerUtils from '@navikt/sif-common-formik-ds/lib/components/formik-datepicker/datepickerUtils';
 import dayjs from 'dayjs';
-import { DateRange, YesOrNo } from '@navikt/sif-common-formik-ds/lib';
-import { AnsattFormData } from './form-parts/ArbeidssituasjonAnsatt';
-import { FrilansFormData } from './form-parts/ArbeidssituasjonFrilans';
-import { SelvstendigFormData } from './form-parts/ArbeidssituasjonSN';
-import { ArbeidssituasjonFormValues } from './ArbeidssituasjonStep';
-import { ArbeidssituasjonSøknadsdata, Søknadsdata } from '../../../types/søknadsdata/Søknadsdata';
 import { Arbeidsgiver, ArbeidsgiverType } from '../../../types/Arbeidsgiver';
 import { ArbeidFrilansSøknadsdata } from '../../../types/søknadsdata/ArbeidFrilansSøknadsdata';
 import { ArbeidSelvstendigSøknadsdata } from '../../../types/søknadsdata/ArbeidSelvstendigSøknadsdata';
 import { ArbeidAnsattSøknadsdata, ArbeidsgivereSøknadsdata } from '../../../types/søknadsdata/ArbeidsgivereSøknadsdata';
-import { VernepliktigSøknadsdata } from '../../../types/søknadsdata/VernepliktigSøknadsdata';
 import { OpptjeningUtlandSøknadsdata } from '../../../types/søknadsdata/OpptjeningUtlandSøknadsdata';
+import { ArbeidssituasjonSøknadsdata, Søknadsdata } from '../../../types/søknadsdata/Søknadsdata';
 import { UtenlandskNæringSøknadsdata } from '../../../types/søknadsdata/UtenlandskNæringSøknadsdata';
-import datepickerUtils from '@navikt/sif-common-formik-ds/lib/components/formik-datepicker/datepickerUtils';
+import { VernepliktigSøknadsdata } from '../../../types/søknadsdata/VernepliktigSøknadsdata';
+import { ArbeidssituasjonFormValues } from './ArbeidssituasjonStep';
+import { AnsattFormData } from './form-parts/ArbeidssituasjonAnsatt';
+import { FrilansFormData } from './form-parts/ArbeidssituasjonFrilans';
+import { SelvstendigFormData } from './form-parts/ArbeidssituasjonSN';
 
 export const isYesOrNoAnswered = (answer?: YesOrNo) => {
     return answer !== undefined && (answer === YesOrNo.NO || answer === YesOrNo.YES);
@@ -123,14 +128,14 @@ const getFrilansDafaultValues = (frilans?: ArbeidFrilansSøknadsdata): FrilansFo
                     jobberFortsattSomFrilans: YesOrNo.NO,
                     startdato: frilans.startdato,
                     sluttdato: frilans.sluttdato,
-                    jobberNormaltTimer: frilans.jobberNormaltTimer,
+                    jobberNormaltTimer: getStringForNumberInputValue(frilans.jobberNormaltTimer),
                 };
             case 'pågående':
                 return {
                     harHattInntektSomFrilanser: YesOrNo.YES,
                     jobberFortsattSomFrilans: YesOrNo.YES,
                     startdato: frilans.startdato,
-                    jobberNormaltTimer: frilans.jobberNormaltTimer,
+                    jobberNormaltTimer: getStringForNumberInputValue(frilans.jobberNormaltTimer),
                 };
         }
     }
@@ -154,7 +159,7 @@ const getSelvstendigDefaultValues = (selvstendig?: ArbeidSelvstendigSøknadsdata
                     harHattInntektSomSN: YesOrNo.YES,
                     harFlereVirksomheter: selvstendig.harFlereVirksomheter ? YesOrNo.YES : YesOrNo.NO,
                     virksomhet: selvstendig.virksomhet,
-                    jobberNormaltTimer: selvstendig.jobberNormaltTimer,
+                    jobberNormaltTimer: getStringForNumberInputValue(selvstendig.jobberNormaltTimer),
                 };
         }
     }
@@ -203,12 +208,12 @@ const getArbeidsgiverFormDataFromSøknadsData = (
                 return {
                     erAnsatt: YesOrNo.NO,
                     sluttetFørSøknadsperiode: YesOrNo.NO,
-                    jobberNormaltTimer: arbeidsgiverSøknadsdata.jobberNormaltTimer,
+                    jobberNormaltTimer: getStringForNumberInputValue(arbeidsgiverSøknadsdata.jobberNormaltTimer),
                 };
             case 'pågående':
                 return {
                     erAnsatt: YesOrNo.YES,
-                    jobberNormaltTimer: arbeidsgiverSøknadsdata.jobberNormaltTimer,
+                    jobberNormaltTimer: getStringForNumberInputValue(arbeidsgiverSøknadsdata.jobberNormaltTimer),
                 };
         }
     }
@@ -339,8 +344,7 @@ export const getFrilansSøknadsdataFromFormValues = (
     frilansoppdrag: Arbeidsgiver[],
     søknadsperiode: DateRange,
 ): ArbeidFrilansSøknadsdata | undefined => {
-    const { harHattInntektSomFrilanser, jobberFortsattSomFrilans, startdato, sluttdato, jobberNormaltTimer } =
-        frilansFormdata;
+    const { harHattInntektSomFrilanser, jobberFortsattSomFrilans, startdato, sluttdato } = frilansFormdata;
     const erFrilanser = harHattInntektSomFrilanser === YesOrNo.YES;
 
     const brukerHarFrilansOppdrag = harFrilansoppdrag(frilansoppdrag);
@@ -369,6 +373,8 @@ export const getFrilansSøknadsdataFromFormValues = (
         };
     }
 
+    const jobberNormaltTimer = getNumberFromNumberInputValue(frilansFormdata.jobberNormaltTimer);
+
     if (brukerHarFrilansISøknadsPeriode && jobberNormaltTimer && startdato) {
         if (jobberFortsattSomFrilans === YesOrNo.NO && sluttdato) {
             return {
@@ -386,7 +392,7 @@ export const getFrilansSøknadsdataFromFormValues = (
             erFrilanser: true,
             jobberFortsattSomFrilans: true,
             startdato,
-            jobberNormaltTimer,
+            jobberNormaltTimer: jobberNormaltTimer,
         };
     }
 
@@ -407,7 +413,7 @@ export const getSelvstendigSøknadsdataFromFormValues = (
     selvstendigFormData: SelvstendigFormData,
     søknadsperiode: DateRange,
 ): ArbeidSelvstendigSøknadsdata | undefined => {
-    const { harHattInntektSomSN, harFlereVirksomheter, virksomhet, jobberNormaltTimer } = selvstendigFormData;
+    const { harHattInntektSomSN, harFlereVirksomheter, virksomhet } = selvstendigFormData;
 
     if (harHattInntektSomSN === YesOrNo.NO) {
         return {
@@ -416,6 +422,7 @@ export const getSelvstendigSøknadsdataFromFormValues = (
         };
     }
 
+    const jobberNormaltTimer = getNumberFromNumberInputValue(selvstendigFormData.jobberNormaltTimer);
     if (!virksomhet || !jobberNormaltTimer) {
         return undefined;
     }
@@ -454,21 +461,22 @@ export const getArbeidsgiverSøknadsdataFromFormData = (
 };
 
 export const getArbeidAnsattSøknadsdata = (ansatt: AnsattFormData): ArbeidAnsattSøknadsdata | undefined => {
-    if (ansatt.erAnsatt === YesOrNo.YES && ansatt.jobberNormaltTimer) {
+    const jobberNormaltTimer = getNumberFromNumberInputValue(ansatt.jobberNormaltTimer);
+    if (ansatt.erAnsatt === YesOrNo.YES && jobberNormaltTimer) {
         return {
             type: 'pågående',
             arbeidsgiver: ansatt.arbeidsgiver,
             erAnsattISøknadsperiode: true,
-            jobberNormaltTimer: ansatt.jobberNormaltTimer,
+            jobberNormaltTimer,
         };
     }
 
-    if (ansatt.erAnsatt === YesOrNo.NO && ansatt.sluttetFørSøknadsperiode === YesOrNo.NO && ansatt.jobberNormaltTimer) {
+    if (ansatt.erAnsatt === YesOrNo.NO && ansatt.sluttetFørSøknadsperiode === YesOrNo.NO && jobberNormaltTimer) {
         return {
             type: 'sluttetISøknadsperiode',
             arbeidsgiver: ansatt.arbeidsgiver,
             erAnsattISøknadsperiode: true,
-            jobberNormaltTimer: ansatt.jobberNormaltTimer,
+            jobberNormaltTimer,
         };
     }
 

diff --git a/...ttfase-soknad/src/app/søknad/steps/arbeidssituasjon/form-parts/ArbeidssituasjonAnsatt.tsx b/...ttfase-soknad/src/app/søknad/steps/arbeidssituasjon/form-parts/ArbeidssituasjonAnsatt.tsx
@@ -19,7 +19,7 @@ export enum AnsattFormFields {
 
 export interface AnsattFormData {
     arbeidsgiver: Arbeidsgiver;
-    [AnsattFormFields.jobberNormaltTimer]?: number;
+    [AnsattFormFields.jobberNormaltTimer]?: string;
     [AnsattFormFields.erAnsatt]?: YesOrNo;
     [AnsattFormFields.sluttetFørSøknadsperiode]?: YesOrNo;
 }

diff --git a/...tfase-soknad/src/app/søknad/steps/arbeidssituasjon/form-parts/ArbeidssituasjonFrilans.tsx b/...tfase-soknad/src/app/søknad/steps/arbeidssituasjon/form-parts/ArbeidssituasjonFrilans.tsx
@@ -30,7 +30,7 @@ export interface FrilansFormData {
     jobberFortsattSomFrilans?: YesOrNo;
     startdato?: ISODate;
     sluttdato?: ISODate;
-    jobberNormaltTimer?: number;
+    jobberNormaltTimer?: string;
 }
 
 const { YesOrNoQuestion, DatePicker, NumberInput } = getTypedFormComponents<

diff --git a/...-sluttfase-soknad/src/app/søknad/steps/arbeidssituasjon/form-parts/ArbeidssituasjonSN.tsx b/...-sluttfase-soknad/src/app/søknad/steps/arbeidssituasjon/form-parts/ArbeidssituasjonSN.tsx
@@ -24,7 +24,7 @@ export interface SelvstendigFormData {
     harHattInntektSomSN?: YesOrNo;
     harFlereVirksomheter?: YesOrNo;
     virksomhet?: Virksomhet;
-    jobberNormaltTimer?: number;
+    jobberNormaltTimer?: string;
 }
 
 interface Props {

diff --git a/packages/sif-common-formik-ds/src/components/formik-time-input/FormikTimeInput.tsx b/packages/sif-common-formik-ds/src/components/formik-time-input/FormikTimeInput.tsx
@@ -15,6 +15,7 @@ interface OwnProps<FieldName> extends Omit<TextFieldProps, 'name' | 'onChange'>
     maxMinutes?: number;
     timeInputLayout?: TimeInputLayoutProps;
     timeInputLabels?: TimeInputLabels;
+    hideErrorMessage?: boolean;
 }
 
 export type FormikTimeInputProps<FieldName, ErrorType> = OwnProps<FieldName> &
@@ -36,6 +37,7 @@ function FormikTimeInput<FieldName, ErrorType>({
     useFastField,
     description,
     timeInputLabels,
+    hideErrorMessage,
     ...restProps
 }: FormikTimeInputProps<FieldName, ErrorType>) {
     const context = React.useContext(TypedFormikFormContext);
@@ -68,7 +70,9 @@ function FormikTimeInput<FieldName, ErrorType>({
                     <SkjemagruppeQuestion
                         className={skjemagruppeClassName}
                         ref={ref}
-                        error={getErrorPropForFormikInput({ field, form, context, error })}
+                        error={
+                            hideErrorMessage ? undefined : getErrorPropForFormikInput({ field, form, context, error })
+                        }
                         id={name as any}
                         onFocus={(evt) => {
                             if (evt.target.id === ref.current.props?.id) {

diff --git a/packages/sif-common-formik-ds/src/index.ts b/packages/sif-common-formik-ds/src/index.ts
@@ -29,7 +29,7 @@ export * from './utils/typedFormErrorUtils';
 export * from './components/getTypedFormComponents';
 export * from './validation/types';
 export * from './components/formik-modal-form/types';
+export * from './utils/numberInputUtils';
 export { ISOStringToDate, dateToISOString } from './components/formik-datepicker/datepickerUtils';
-export { getNumberFromNumberInputValue } from './utils/numberInputUtils';
 
 export { QuestionConfig, QuestionVisibility, Questions } from './question-config/index';
diff --git a/packages/sif-common-formik-ds/src/utils/numberInputUtils.ts b/packages/sif-common-formik-ds/src/utils/numberInputUtils.ts
@@ -12,3 +12,7 @@ export const getNumberFromNumberInputValue = (inputValue: string | undefined): n
     }
     return numValue;
 };
+
+export const getStringForNumberInputValue = (value?: number): string => {
+    return value === undefined ? '' : `${value}`.replace(/\./g, ',');
+};
diff --git a/packages/sif-common-ui/src/duration-weekdays-input/DurationWeekdaysInput.stories.tsx b/packages/sif-common-ui/src/duration-weekdays-input/DurationWeekdaysInput.stories.tsx
@@ -12,7 +12,14 @@ export default {
 } as Meta<typeof DurationWeekdaysInput>;
 
 const Template: StoryFn<typeof DurationWeekdaysInput> = (args) => {
-    return <DurationWeekdaysInput {...args} />;
+    return (
+        <DurationWeekdaysInput
+            {...args}
+            validateDate={() => {
+                return 'abc';
+            }}
+        />
+    );
 };
 
 const dateRange = ISODateRangeToDateRange('2023-05-25/2023-08-08');

diff --git a/...sif-common-ui/src/duration-weekdays-input/duration-weekdays-week/DurationWeekdaysWeek.tsx b/...sif-common-ui/src/duration-weekdays-input/duration-weekdays-week/DurationWeekdaysWeek.tsx
@@ -1,9 +1,15 @@
 /* eslint-disable no-console */
-import { Heading } from '@navikt/ds-react';
+import { Fieldset, Heading } from '@navikt/ds-react';
 import React from 'react';
 import AriaAlternative from '@navikt/sif-common-core-ds/lib/atoms/aria-alternative/AriaAlternative';
 import bemUtils from '@navikt/sif-common-core-ds/lib/utils/bemUtils';
-import { FormikTimeInput, ValidationError, ValidationResult } from '@navikt/sif-common-formik-ds/lib';
+import {
+    FormikTimeInput,
+    getErrorForField,
+    TypedFormikFormContext,
+    ValidationError,
+    ValidationResult,
+} from '@navikt/sif-common-formik-ds/lib';
 import {
     dateFormatter,
     DateRange,
@@ -13,6 +19,7 @@ import {
     getWeekDateRange,
 } from '@navikt/sif-common-utils/lib';
 import dayjs from 'dayjs';
+import { useFormikContext } from 'formik';
 import './durationWeekdaysWeek.scss';
 
 interface Props {
@@ -37,62 +44,90 @@ const DurationWeekdaysWeek: React.FunctionComponent<Props> = ({
     headingLevel = '3',
     validate,
 }) => {
+    const context = React.useContext(TypedFormikFormContext);
+    const formikContext = useFormikContext<any>();
     const fullWeek = getWeekDateRange(week.from, true);
     const dates = getDatesInDateRange(fullWeek);
     const isoWeek = dayjs(fullWeek.from).isoWeek();
     const datesOutsideRange = getDatesInWeekOutsideDateRange(fullWeek.from, week);
     const allDisabledDates = [...disabledDates, ...datesOutsideRange];
 
+    const datesInWeekAndMonth = dates.filter(
+        (date) => dayjs(date).isAfter(week.from, 'month') === false && dayjs(date).isAfter(week.to, 'day') === false,
+    );
+
+    const errors: React.ReactNode[] = [];
+    if (context?.showErrors) {
+        datesInWeekAndMonth.forEach((date, index) => {
+            const fieldName = `${formikFieldName}.${dateToISODate(date)}`;
+            const fieldError = getErrorForField(fieldName, formikContext.errors);
+            if (fieldError) {
+                errors.push(
+                    <span style={{ display: 'block' }} key={index}>
+                        {context?.fieldErrorHandler ? context.fieldErrorHandler(fieldError, fieldName) : fieldError}
+                    </span>,
+                );
+            }
+        });
+    }
+
+    if (datesInWeekAndMonth.length === 0) {
+        return null;
+    }
+
     return (
         <div className={bem.block}>
-            <Heading size="xsmall" level={headingLevel} className={bem.element('weekNumber')}>
-                Uke {isoWeek}
-            </Heading>
-            <div className={bem.element('daysWrapper')}>
-                <div className={bem.element('days')}>
-                    {dates.map((date, index) => {
-                        const dayName = dateFormatter.day(date).substring(0, 3);
-                        const dateIsDisabled = allDisabledDates.some((disabledDate) =>
-                            dayjs(disabledDate).isSame(date, 'day'),
-                        );
-
-                        if (dayjs(date).isAfter(week.from, 'month') || dayjs(date).isAfter(week.to, 'day')) {
-                            return null;
-                        }
+            <Fieldset
+                error={errors.length > 0 ? <span>{errors}</span> : undefined}
+                legend={
+                    <Heading size="xsmall" level={headingLevel} className={bem.element('weekNumber')}>
+                        Uke {isoWeek}
+                    </Heading>
+                }>
+                <div className={bem.element('daysWrapper')}>
+                    <div className={bem.element('days')}>
+                        {datesInWeekAndMonth.map((date, index) => {
+                            const dayName = dateFormatter.day(date).substring(0, 3);
+                            const dateIsDisabled = allDisabledDates.some((disabledDate) =>
+                                dayjs(disabledDate).isSame(date, 'day'),
+                            );
 
-                        return (
-                            <div className={bem.element('day', dateIsDisabled ? 'disabled' : '')} key={index}>
-                                <FormikTimeInput
-                                    label={
-                                        <span className={bem.element('dayLegend', dateIsDisabled ? 'disabled' : '')}>
-                                            <AriaAlternative
-                                                visibleText={
-                                                    <span
-                                                        className={bem.element(
-                                                            'dayName',
-                                                        )}>{`${dayName}. ${date.getDate()}.`}</span>
-                                                }
-                                                ariaText={dateFormatter.dayDateMonth(date)}
-                                            />
-                                        </span>
-                                    }
-                                    name={`${formikFieldName}.${dateToISODate(date)}`}
-                                    disabled={dateIsDisabled}
-                                    timeInputLayout={{
-                                        direction: 'vertical',
-                                        compact: true,
-                                    }}
-                                    timeInputLabels={{
-                                        minutes: <AriaAlternative visibleText="Min." ariaText="Minutter" />,
-                                        hours: <AriaAlternative visibleText="Timer" ariaText="Timer" />,
-                                    }}
-                                    validate={validate ? (value) => validate(date, value) : undefined}
-                                />
-                            </div>
-                        );
-                    })}
+                            return (
+                                <div className={bem.element('day', dateIsDisabled ? 'disabled' : '')} key={index}>
+                                    <FormikTimeInput
+                                        hideErrorMessage={false}
+                                        label={
+                                            <span
+                                                className={bem.element('dayLegend', dateIsDisabled ? 'disabled' : '')}>
+                                                <AriaAlternative
+                                                    visibleText={
+                                                        <span
+                                                            className={bem.element(
+                                                                'dayName',
+                                                            )}>{`${dayName}. ${date.getDate()}.`}</span>
+                                                    }
+                                                    ariaText={dateFormatter.dayDateMonth(date)}
+                                                />
+                                            </span>
+                                        }
+                                        name={`${formikFieldName}.${dateToISODate(date)}`}
+                                        disabled={dateIsDisabled}
+                                        timeInputLayout={{
+                                            direction: 'vertical',
+                                            compact: true,
+                                        }}
+                                        timeInputLabels={{
+                                            minutes: <AriaAlternative visibleText="Min." ariaText="Minutter" />,
+                                            hours: <AriaAlternative visibleText="Timer" ariaText="Timer" />,
+                                        }}
+                                        validate={validate ? (value) => validate(date, value) : undefined}
+                                    />
+                                </div>
+                            );
+                        })}
+                    </div>
                 </div>
-            </div>
+            </Fieldset>
         </div>
     );
 };