Mer bugfixing for react-hook-forms og oppdatering/refaktor

#deploy-test-frontend

apps/dolly-frontend/src/main/js/src/components/fagsystem/arbeidsplassen/form/partials/EraseFillButtons.tsx

@@ -7,14 +7,20 @@ export const EraseFillButtons = ({ formMethods, path, initialErase, initialFill
 			<div className="flexbox--flex-wrap">
 				<Button
 					kind="eraser"
-					onClick={() => formMethods.setValue(path, initialErase)}
+					onClick={() => {
+						formMethods.setValue(path, initialErase)
+						formMethods.trigger(path)
+					}}
 					style={{ position: 'initial' }}
 				>
 					TØM SKJEMA
 				</Button>
 				<Button
 					kind="edit"
-					onClick={() => formMethods.setValue(path, initialFill)}
+					onClick={() => {
+						formMethods.setValue(path, initialFill)
+						formMethods.trigger(path)
+					}}
 					style={{ position: 'initial', marginLeft: '7px' }}
 				>
 					FYLL SKJEMA

apps/dolly-frontend/src/main/js/src/components/fagsystem/arbeidsplassen/form/partials/JobboenskerForm.tsx

@@ -1,7 +1,6 @@
 import { FormikSelect } from '@/components/ui/form/inputs/select/Select'
 import * as React from 'react'
 import { SelectOptionsManager as Options } from '@/service/SelectOptions'
-import _get from 'lodash/get'
 import { Vis } from '@/components/bestillingsveileder/VisAttributt'
 import { EraseFillButtons } from '@/components/fagsystem/arbeidsplassen/form/partials/EraseFillButtons'
 import {
@@ -20,6 +19,7 @@ export const JobboenskerForm = ({ formMethods }) => {
 			}
 		})
 		formMethods.setValue(`${jobboenskerPath}.occupations`, yrker)
+		formMethods.trigger(`${jobboenskerPath}.occupations`)
 	}
 
 	const setOmraader = (options) => {
@@ -30,6 +30,7 @@ export const JobboenskerForm = ({ formMethods }) => {
 			}
 		})
 		formMethods.setValue(`${jobboenskerPath}.locations`, omraader)
+		formMethods.trigger(`${jobboenskerPath}.locations`)
 	}
 
 	return (
@@ -43,9 +44,7 @@ export const JobboenskerForm = ({ formMethods }) => {
 					size="grow"
 					isClearable={false}
 					isMulti={true}
-					value={_get(formMethods.getValues(), `${jobboenskerPath}.occupations`)?.map(
-						(y) => y.styrk08,
-					)}
+					value={formMethods.getValues(`${jobboenskerPath}.occupations`)?.map((y) => y.styrk08)}
 					onChange={(options) => setYrker(options)}
 				/>
 				<FormikSelect
@@ -55,7 +54,7 @@ export const JobboenskerForm = ({ formMethods }) => {
 					size="grow"
 					isClearable={false}
 					isMulti={true}
-					value={_get(formMethods.getValues(), `${jobboenskerPath}.locations`)?.map((o) => o.code)}
+					value={formMethods.getValues(`${jobboenskerPath}.locations`)?.map((o) => o.code)}
 					onChange={(options) => setOmraader(options)}
 				/>
 			</div>

apps/dolly-frontend/src/main/js/src/components/fagsystem/brregstub/form/partials/orgnrToggle.tsx

@@ -8,6 +8,7 @@ import { EgneOrganisasjoner } from '@/components/fagsystem/brregstub/form/partia
 import { useDollyEnvironments } from '@/utils/hooks/useEnvironments'
 import { OrganisasjonLoader } from '@/components/organisasjonSelect/OrganisasjonLoader'
 import { UseFormReturn } from 'react-hook-form/dist/types'
+import { ORGANISASJONSTYPE_TOGGLE } from '@/components/fagsystem/inntektstub/form/partials/orgnummerToggle'
 
 interface OrgnrToggleProps {
 	path: string
@@ -22,10 +23,13 @@ export const OrgnrToggle = ({
 	setEnhetsinfo,
 	warningMessage,
 }: OrgnrToggleProps) => {
-	const [inputType, setInputType] = useState(inputValg.fraFellesListe)
+	const [inputType, setInputType] = useState(
+		sessionStorage.getItem(ORGANISASJONSTYPE_TOGGLE) || inputValg.fraFellesListe,
+	)
 	const { dollyEnvironments: aktiveMiljoer } = useDollyEnvironments()
 
 	const handleToggleChange = (value: string) => {
+		sessionStorage.setItem(ORGANISASJONSTYPE_TOGGLE, value)
 		setInputType(value)
 		clearEnhetsinfo()
 	}
@@ -43,6 +47,7 @@ export const OrgnrToggle = ({
 		}
 		oldValues['orgNr'] = null
 		formMethods.setValue(path, oldValues)
+		formMethods.trigger(path)
 	}
 
 	const handleChange = (event: React.ChangeEvent<any>) => {

apps/dolly-frontend/src/main/js/src/components/fagsystem/inntektsmelding/form/partials/orgnrToogle.tsx

@@ -7,16 +7,20 @@ import {
 } from '@/components/organisasjonSelect/OrganisasjonToogleGruppe'
 import { EgneOrganisasjoner } from '@/components/fagsystem/brregstub/form/partials/EgneOrganisasjoner'
 import { UseFormReturn } from 'react-hook-form/dist/types'
+import { ORGANISASJONSTYPE_TOGGLE } from '@/components/fagsystem/inntektstub/form/partials/orgnummerToggle'
 
 interface OrgnrToggleProps {
 	path: string
 	formMethods: UseFormReturn
 }
 
 export const OrgnrToggle = ({ path, formMethods }: OrgnrToggleProps) => {
-	const [inputType, setInputType] = useState(inputValg.fraFellesListe)
+	const [inputType, setInputType] = useState(
+		sessionStorage.getItem(ORGANISASJONSTYPE_TOGGLE) || inputValg.fraFellesListe,
+	)
 
 	const handleToggleChange = (value: string) => {
+		sessionStorage.setItem(ORGANISASJONSTYPE_TOGGLE, value)
 		setInputType(value)
 		formMethods.setValue(path, '')
 	}

apps/dolly-frontend/src/main/js/src/components/fagsystem/inntektstub/form/partials/inntektsinformasjonLister/inntektForm.tsx

@@ -7,7 +7,7 @@ import { useBoolean } from 'react-use'
 import { ToggleGroup } from '@navikt/ds-react'
 import { UseFormReturn } from 'react-hook-form/dist/types'
 
-const INNTEKTSTYPE_TOGGLE = 'INNTEKTSTYPE_TOGGLE'
+const INNTEKTSTYPE_FORENKLET_TOGGLE = 'INNTEKTSTYPE_FORENKLET_TOGGLE'
 
 export enum FormType {
 	STANDARD = 'standard',
@@ -58,7 +58,7 @@ const simpleValues = {
 
 export const InntektForm = ({ formMethods, inntektsinformasjonPath }: data) => {
 	const [formSimple, setFormSimple] = useBoolean(
-		sessionStorage.getItem(INNTEKTSTYPE_TOGGLE) === FormType.FORENKLET,
+		sessionStorage.getItem(INNTEKTSTYPE_FORENKLET_TOGGLE) === FormType.FORENKLET,
 	)
 
 	useEffect(() => {
@@ -67,7 +67,7 @@ export const InntektForm = ({ formMethods, inntektsinformasjonPath }: data) => {
 
 	const changeFormType = (type: FormType) => {
 		const eventValueSimple = type === FormType.FORENKLET
-		sessionStorage.setItem(INNTEKTSTYPE_TOGGLE, type)
+		sessionStorage.setItem(INNTEKTSTYPE_FORENKLET_TOGGLE, type)
 		setFormSimple(eventValueSimple)
 
 		const restValues = eventValueSimple && { ...simpleValues }
@@ -90,7 +90,7 @@ export const InntektForm = ({ formMethods, inntektsinformasjonPath }: data) => {
 		<>
 			<div className="toggle--wrapper">
 				<ToggleGroup
-					defaultValue={FormType.STANDARD}
+					defaultValue={formSimple ? FormType.FORENKLET : FormType.STANDARD}
 					onChange={(value: FormType) => changeFormType(value)}
 					size={'small'}
 					style={{ backgroundColor: '#ffffff' }}

apps/dolly-frontend/src/main/js/src/components/fagsystem/inntektstub/form/partials/orgnummerToggle.tsx

@@ -28,12 +28,10 @@ export const OrgnummerToggle = ({ formMethods, opplysningspliktigPath, path }: P
 	const [inputType, setInputType] = useState(
 		sessionStorage.getItem(ORGANISASJONSTYPE_TOGGLE) || inputValg.fraFellesListe,
 	)
-	const [error, setError] = useState(null)
 	const [success, setSuccess] = useBoolean(false)
 	const [loading, setLoading] = useBoolean(false)
 	const [environment, setEnvironment] = useState(null)
 	const [orgnummer, setOrgnummer] = useState(formMethods.watch(path) || null)
-	console.log('path: ', path) //TODO - SLETT MEG
 
 	const { organisasjon } = useFasteDataOrganisasjon(orgnummer)
 
@@ -47,30 +45,29 @@ export const OrgnummerToggle = ({ formMethods, opplysningspliktigPath, path }: P
 	const handleChange = (value: { juridiskEnhet: string; orgnr: string }) => {
 		opplysningspliktigPath && formMethods.setValue(`${opplysningspliktigPath}`, value.juridiskEnhet)
 		formMethods.trigger(opplysningspliktigPath)
-		formMethods.setValue(`${path}`, value.orgnr)
+		formMethods.setValue(path, value.orgnr)
 	}
-	//TODO: Fikse henting fra testnav-org-service
 
 	const handleManualOrgChange = (org: string, miljo: string) => {
 		if (!org || !miljo) {
 			return
 		}
-		setError(null)
+		formMethods.clearErrors(path)
 		setLoading(true)
 		setSuccess(false)
 		OrgserviceApi.getOrganisasjonInfo(org, miljo)
 			.then((response: { data: { enhetType: string; juridiskEnhet: any; orgnummer: any } }) => {
 				setLoading(false)
 				if (!validEnhetstyper.includes(response.data.enhetType)) {
-					setError('Organisasjonen må være av type BEDR eller AAFY')
+					formMethods.setError(path, { message: 'Organisasjonen må være av type BEDR eller AAFY' })
 					return
 				}
 				if (!response.data.juridiskEnhet) {
 					if (organisasjon?.overenhet) {
 						opplysningspliktigPath &&
 							formMethods.setValue(`${opplysningspliktigPath}`, organisasjon.overenhet)
 					} else {
-						setError('Organisasjonen mangler juridisk enhet')
+						formMethods.setError(path, { message: 'Organisasjonen mangler juridisk enhet' })
 						return
 					}
 				}
@@ -82,7 +79,7 @@ export const OrgnummerToggle = ({ formMethods, opplysningspliktigPath, path }: P
 			})
 			.catch(() => {
 				setLoading(false)
-				setError('Fant ikke organisasjonen i ' + miljo)
+				formMethods.setError(path, { message: 'Fant ikke organisasjonen i ' + miljo })
 			})
 	}
 
@@ -110,18 +107,14 @@ export const OrgnummerToggle = ({ formMethods, opplysningspliktigPath, path }: P
 					path={path}
 					environment={environment}
 					miljoeOptions={aktiveMiljoer}
-					error={error}
 					loading={loading}
 					success={success}
 					onTextBlur={(event) => {
-						console.log('event: ', event) //TODO - SLETT MEG
 						const org = event.target.value
 						setOrgnummer(org)
 						handleManualOrgChange(org, environment)
 					}}
 					onMiljoeChange={(event) => {
-						console.log('orgnummer: ', orgnummer) //TODO - SLETT MEG
-						console.log('event2: ', event) //TODO - SLETT MEG
 						setEnvironment(event.value)
 						handleManualOrgChange(orgnummer, event.value)
 					}}

apps/dolly-frontend/src/main/js/src/components/inntektStub/validerInntekt/index.tsx

@@ -31,7 +31,7 @@ const InntektStub = ({ inntektPath }) => {
 	} = inntektValues
 
 	useEffect(() => {
-		if (inntektstype !== '') {
+		if (!_.isEmpty(inntektstype)) {
 			InntektstubService.validate(_.omitBy(inntektValues, (value) => value === '' || !value)).then(
 				(response) => {
 					setFields(response)

apps/dolly-frontend/src/main/js/src/components/organisasjonSelect/OrganisasjonMedMiljoeSelect.tsx

@@ -8,7 +8,6 @@ interface OrgProps {
 	path: string
 	environment: string
 	miljoeOptions: string[]
-	error: string
 	success: boolean
 	loading?: boolean
 	onTextBlur: (event: React.ChangeEvent<any>) => void
@@ -30,10 +29,12 @@ export const OrganisasjonMedMiljoeSelect = ({
 			value: value.id,
 			label: value.label,
 		}))
+	const parentPath = path.substring(0, path.lastIndexOf('.'))
 
 	return (
 		<div className={'flexbox--align-start'}>
 			<DollyTextInput
+				fieldName={`${parentPath}.opplysningspliktig`}
 				name={path}
 				type="number"
 				size="xlarge"

apps/dolly-frontend/src/main/js/src/components/ui/form/inputs/label/Label.tsx

@@ -15,14 +15,13 @@ const StyledLabel = styled.label`
 	text-transform: uppercase;
 `
 
-export const Label = ({ name, label, info = null, containerClass = null, children }) => {
+export const Label = ({ name, fieldName, label, info = null, containerClass = null, children }) => {
 	const {
 		getFieldState,
 		formState: { touchedFields, dirtyFields },
 	} = useFormContext() || useForm()
-	const { error } = getFieldState(name)
-	const isTouched = _.has(touchedFields, name)
-	const isDirtied = _.has(dirtyFields, name)
+	const isTouched = _.has(touchedFields, name) || _.has(touchedFields, fieldName)
+	const error = getFieldState(fieldName)?.error || getFieldState(name)?.error
 	const errorContext: ShowErrorContextType = useContext(ShowErrorContext)
 	const feilmelding = error?.message
 	const wrapClass = cn('skjemaelement', containerClass, {
@@ -47,7 +46,7 @@ export const Label = ({ name, label, info = null, containerClass = null, childre
 				</StyledLabel>
 			)}
 			{children}
-			{!_.isEmpty(feilmelding) && (errorContext?.showError || isTouched || isDirtied) && (
+			{!_.isEmpty(feilmelding) && (errorContext?.showError || isTouched) && (
 				<div role="alert" aria-live="assertive">
 					<div className="skjemaelement__feilmelding">{feilmelding}</div>
 				</div>

apps/dolly-frontend/src/main/js/src/components/ui/form/inputs/select/Select.tsx

@@ -161,14 +161,14 @@ const P_FormikSelect = ({ feil, ...props }: SelectProps) => {
 		}
 		field.onChange(SyntEvent(field.name, value))
 		if (props.afterChange) props.afterChange(selected)
+		formMethods.trigger(props.name)
 	}
 
 	const handleBlur = () => field?.onBlur?.(SyntEvent(field.name))
 
 	return (
 		<DollySelect
 			name={field.name}
-			value={field.value}
 			onChange={handleChange}
 			onBlur={handleBlur}
 			feil={

apps/dolly-frontend/src/main/js/src/components/ui/form/inputs/textInput/TextInput.tsx

@@ -73,6 +73,7 @@ export const TextInput = React.forwardRef(
 )
 
 export const DollyTextInput = (props: {
+	fieldName?: string
 	name: string
 	label?: string
 	value?: any