From 49256c2d5a2b5e2b6d148858d05237e9c7f407e0 Mon Sep 17 00:00:00 2001 From: Frode Hansen Date: Mon, 2 Oct 2023 11:08:28 +0200 Subject: [PATCH] Fix normalarbeidstid number/string --- .../arbeidssituasjonStepUtils.ts" | 50 ++++--- .../form-parts/ArbeidssituasjonAnsatt.tsx" | 2 +- .../form-parts/ArbeidssituasjonFrilans.tsx" | 2 +- .../form-parts/ArbeidssituasjonSN.tsx" | 2 +- .../formik-time-input/FormikTimeInput.tsx | 6 +- packages/sif-common-formik-ds/src/index.ts | 2 +- .../src/utils/numberInputUtils.ts | 4 + .../DurationWeekdaysInput.stories.tsx | 9 +- .../DurationWeekdaysWeek.tsx | 131 +++++++++++------- 9 files changed, 133 insertions(+), 75 deletions(-) diff --git "a/apps/pleiepenger-i-livets-sluttfase-soknad/src/app/s\303\270knad/steps/arbeidssituasjon/arbeidssituasjonStepUtils.ts" "b/apps/pleiepenger-i-livets-sluttfase-soknad/src/app/s\303\270knad/steps/arbeidssituasjon/arbeidssituasjonStepUtils.ts" index 75ee73e876..634a0431e6 100644 --- "a/apps/pleiepenger-i-livets-sluttfase-soknad/src/app/s\303\270knad/steps/arbeidssituasjon/arbeidssituasjonStepUtils.ts" +++ "b/apps/pleiepenger-i-livets-sluttfase-soknad/src/app/s\303\270knad/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/apps/pleiepenger-i-livets-sluttfase-soknad/src/app/s\303\270knad/steps/arbeidssituasjon/form-parts/ArbeidssituasjonAnsatt.tsx" "b/apps/pleiepenger-i-livets-sluttfase-soknad/src/app/s\303\270knad/steps/arbeidssituasjon/form-parts/ArbeidssituasjonAnsatt.tsx" index 5c1b9f9c3f..6809092083 100644 --- "a/apps/pleiepenger-i-livets-sluttfase-soknad/src/app/s\303\270knad/steps/arbeidssituasjon/form-parts/ArbeidssituasjonAnsatt.tsx" +++ "b/apps/pleiepenger-i-livets-sluttfase-soknad/src/app/s\303\270knad/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/apps/pleiepenger-i-livets-sluttfase-soknad/src/app/s\303\270knad/steps/arbeidssituasjon/form-parts/ArbeidssituasjonFrilans.tsx" "b/apps/pleiepenger-i-livets-sluttfase-soknad/src/app/s\303\270knad/steps/arbeidssituasjon/form-parts/ArbeidssituasjonFrilans.tsx" index 09164c375f..a4d897ac5f 100644 --- "a/apps/pleiepenger-i-livets-sluttfase-soknad/src/app/s\303\270knad/steps/arbeidssituasjon/form-parts/ArbeidssituasjonFrilans.tsx" +++ "b/apps/pleiepenger-i-livets-sluttfase-soknad/src/app/s\303\270knad/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/apps/pleiepenger-i-livets-sluttfase-soknad/src/app/s\303\270knad/steps/arbeidssituasjon/form-parts/ArbeidssituasjonSN.tsx" "b/apps/pleiepenger-i-livets-sluttfase-soknad/src/app/s\303\270knad/steps/arbeidssituasjon/form-parts/ArbeidssituasjonSN.tsx" index 64ca3db832..0bc2b66e31 100644 --- "a/apps/pleiepenger-i-livets-sluttfase-soknad/src/app/s\303\270knad/steps/arbeidssituasjon/form-parts/ArbeidssituasjonSN.tsx" +++ "b/apps/pleiepenger-i-livets-sluttfase-soknad/src/app/s\303\270knad/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 index 2cf7b1c6ed..2f70923829 100644 --- 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 extends Omit maxMinutes?: number; timeInputLayout?: TimeInputLayoutProps; timeInputLabels?: TimeInputLabels; + hideErrorMessage?: boolean; } export type FormikTimeInputProps = OwnProps & @@ -36,6 +37,7 @@ function FormikTimeInput({ useFastField, description, timeInputLabels, + hideErrorMessage, ...restProps }: FormikTimeInputProps) { const context = React.useContext(TypedFormikFormContext); @@ -68,7 +70,9 @@ function FormikTimeInput({ { 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 index a96d806df3..41090a8b4c 100644 --- 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 index a7faf41768..908cc99dfa 100644 --- 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 index d4805be0e9..66171fe053 100644 --- 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; const Template: StoryFn = (args) => { - return ; + return ( + { + return 'abc'; + }} + /> + ); }; const dateRange = ISODateRangeToDateRange('2023-05-25/2023-08-08'); diff --git a/packages/sif-common-ui/src/duration-weekdays-input/duration-weekdays-week/DurationWeekdaysWeek.tsx b/packages/sif-common-ui/src/duration-weekdays-input/duration-weekdays-week/DurationWeekdaysWeek.tsx index 67b8932bf6..f7b92a5b7b 100644 --- a/packages/sif-common-ui/src/duration-weekdays-input/duration-weekdays-week/DurationWeekdaysWeek.tsx +++ b/packages/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 = ({ headingLevel = '3', validate, }) => { + const context = React.useContext(TypedFormikFormContext); + const formikContext = useFormikContext(); 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( + + {context?.fieldErrorHandler ? context.fieldErrorHandler(fieldError, fieldName) : fieldError} + , + ); + } + }); + } + + if (datesInWeekAndMonth.length === 0) { + return null; + } + return (
- - Uke {isoWeek} - -
-
- {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; - } +
0 ? {errors} : undefined} + legend={ + + Uke {isoWeek} + + }> +
+
+ {datesInWeekAndMonth.map((date, index) => { + const dayName = dateFormatter.day(date).substring(0, 3); + const dateIsDisabled = allDisabledDates.some((disabledDate) => + dayjs(disabledDate).isSame(date, 'day'), + ); - return ( -
- - {`${dayName}. ${date.getDate()}.`} - } - ariaText={dateFormatter.dayDateMonth(date)} - /> - - } - name={`${formikFieldName}.${dateToISODate(date)}`} - disabled={dateIsDisabled} - timeInputLayout={{ - direction: 'vertical', - compact: true, - }} - timeInputLabels={{ - minutes: , - hours: , - }} - validate={validate ? (value) => validate(date, value) : undefined} - /> -
- ); - })} + return ( +
+ + {`${dayName}. ${date.getDate()}.`} + } + ariaText={dateFormatter.dayDateMonth(date)} + /> + + } + name={`${formikFieldName}.${dateToISODate(date)}`} + disabled={dateIsDisabled} + timeInputLayout={{ + direction: 'vertical', + compact: true, + }} + timeInputLabels={{ + minutes: , + hours: , + }} + validate={validate ? (value) => validate(date, value) : undefined} + /> +
+ ); + })} +
-
+
); };