Feature/better trigger handling

apps/dolly-frontend/src/main/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dolly",
-  "version": "3.0.46",
+  "version": "3.0.47",
   "type": "module",
   "description": "",
   "main": "index.js",

apps/dolly-frontend/src/main/js/src/components/bestillingsveileder/stegVelger/StegVelger.tsx

@@ -47,13 +47,15 @@ export const StegVelger = ({ initialValues, onSubmit }) => {
 
 	const mutate = useMatchMutate()
 
+	const validationPaths = Object.keys(DollyValidation?.fields)
+
 	const isLastStep = () => step === STEPS.length - 1
 	const handleNext = () => {
-		formMethods.trigger().then((valid) => {
+		formMethods.trigger(validationPaths).then(() => {
 			const errorFelter = Object.keys(formMethods.formState.errors)
 			const kunEnvironmentError = errorFelter.length === 1 && errorFelter[0] === 'environments'
 			const kunGruppeIdError = errorFelter.length === 1 && errorFelter[0] === 'gruppeId'
-			if (!valid && step === 1 && !kunEnvironmentError && !kunGruppeIdError) {
+			if (errorFelter.length > 0 && step === 1 && !kunEnvironmentError && !kunGruppeIdError) {
 				console.warn('Feil i form, stopper navigering videre')
 				console.error(formMethods.formState.errors)
 				errorContext?.setShowError(true)

apps/dolly-frontend/src/main/js/src/components/ui/form/inputs/datepicker/Datepicker.tsx

@@ -17,55 +17,50 @@ import { convertInputToDate } from '@/components/ui/form/DateFormatUtils'
 registerLocale('nb', locale_nb)
 
 export const DollyDatepicker = (props: any) => {
-	const format = props.format || 'DD.MM.YYYY'
+	const {
+		excludeDates,
+		disabled,
+		onChange,
+		minDate = subYears(new Date(), 125),
+		name,
+		label,
+		maxDate = addYears(new Date(), 5),
+		format,
+	} = props
+	const dateFormat = format || 'DD.MM.YYYY'
 	const formMethods = useFormContext()
-	const existingValue = formMethods.watch(props.name)
+	const existingValue = formMethods.watch(name)
 	const [showDatepicker, setShowDatepicker] = useState(false)
-	const [input, setInput] = useState(existingValue ? formatDate(existingValue, format) : '')
-	const [errorMessage, setErrorMessage] = useState('')
+	const [input, setInput] = useState(existingValue ? formatDate(existingValue, dateFormat) : '')
 
 	const getDatepickerProps = useCallback(() => {
 		return useDatepicker({
-			fromDate: props.minDate || subYears(new Date(), 125),
-			toDate: props.maxDate || addYears(new Date(), 5),
-			disabled: props.excludeDates,
+			fromDate: minDate,
+			toDate: maxDate,
+			disabled: excludeDates,
 		})
-	}, [props.minDate, props.maxDate, props.excludeDates, input])
+	}, [minDate, maxDate, excludeDates, input])
 
 	const { datepickerProps, setSelected } = getDatepickerProps()
 
 	useEffect(() => {
 		const date = convertInputToDate(existingValue)
-		setInput(date?.isValid?.() ? formatDate(date, format) : existingValue)
-		formMethods.trigger(props.name).then(() => {
+		setInput(date?.isValid?.() ? formatDate(date, dateFormat) : existingValue)
+		formMethods.trigger(`manual.${name}`).then(() => {
 			validateDate(date)
 		})
 	}, [])
 
-	useEffect(() => {
-		if (errorMessage) {
-			formMethods.setError(props.name, {
-				type: 'invalid-date',
-				message: errorMessage,
-			})
-		} else {
-			formMethods.clearErrors(props.name)
-		}
-	}, [errorMessage])
-
 	const validateDate = (date) => {
-		if (!date || date.isValid?.()) {
-			setErrorMessage(null)
-			formMethods.clearErrors(props.name)
-		} else if (date.isAfter?.(props.maxDate) || date.isBefore?.(props.minDate)) {
-			setErrorMessage('Dato utenfor gyldig periode')
-			formMethods.setError(props.name, {
+		if (date?.isAfter?.(maxDate) || date?.isBefore?.(minDate)) {
+			formMethods.setError(`manual.${name}`, {
 				type: 'invalid-date',
 				message: 'Dato utenfor gyldig periode',
 			})
+		} else if (!date || date.isValid?.()) {
+			formMethods.clearErrors(`manual.${name}`)
 		} else {
-			setErrorMessage('Ugyldig dato-format')
-			formMethods.setError(props.name, {
+			formMethods.setError(`manual.${name}`, {
 				type: 'invalid-date-format',
 				message: 'Ugyldig dato-format',
 			})
@@ -74,12 +69,12 @@ export const DollyDatepicker = (props: any) => {
 
 	const setFormDate = (date) => {
 		const formDate = date.isValid?.() ? date.toDate() : date
-		props.onChange?.(formDate)
+		onChange?.(formDate)
 		const dateStr = formDate?.toISOString?.().substring?.(0, 19)
-		formMethods.setValue(props.name, dateStr || date, {
+		formMethods.setValue(name, dateStr || date, {
 			shouldTouch: true,
 		})
-		formMethods.trigger(props.name).then(() => {
+		formMethods.trigger(`manual.${name}`).then(() => {
 			validateDate(date)
 		})
 	}
@@ -94,7 +89,8 @@ export const DollyDatepicker = (props: any) => {
 		}
 
 		setFormDate(date)
-		setInput(formatDate(date, format))
+		setInput(formatDate(date, dateFormat))
+		validateDate(date)
 	}
 
 	const DateInput = (
@@ -108,11 +104,11 @@ export const DollyDatepicker = (props: any) => {
 				setInput(value)
 			}}
 			onBlur={handleInputBlur}
-			isDisabled={props.disabled}
+			isDisabled={disabled}
 			input={input}
 			icon={'calendar'}
 			datepickerOnclick={() => {
-				if (!props.disabled) {
+				if (!disabled) {
 					setShowDatepicker((prev) => !prev)
 				}
 			}}
@@ -121,7 +117,7 @@ export const DollyDatepicker = (props: any) => {
 
 	return (
 		<InputWrapper {...props}>
-			<Label name={props.name} label={props.label}>
+			<Label name={name} label={label}>
 				{(showDatepicker && (
 					<DatePicker
 						{...datepickerProps}
@@ -130,8 +126,8 @@ export const DollyDatepicker = (props: any) => {
 
 							const date = convertInputToDate(val, true)
 							setFormDate(date)
-							setInput(formatDate(date, format))
-							formMethods.trigger(props.name).then(() => {
+							setInput(formatDate(date, dateFormat))
+							formMethods.trigger(`manual.${name}`).then(() => {
 								validateDate(date)
 							})
 							setShowDatepicker(false)

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

@@ -37,7 +37,10 @@ export const Label = ({
 		formState: { touchedFields },
 	} = useFormContext() || useForm()
 	const isTouched = _.has(touchedFields, name) || _.has(touchedFields, fieldName)
-	const error = getFieldState(fieldName)?.error || getFieldState(name)?.error
+	const error =
+		getFieldState(fieldName)?.error ||
+		getFieldState(name)?.error ||
+		getFieldState(`manual.${name}`)?.error
 	const errorContext: ShowErrorContextType = useContext(ShowErrorContext)
 	const feilmelding = error?.message
 	const wrapClass = cn('skjemaelement', containerClass, {

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

@@ -200,7 +200,8 @@ const P_FormSelect = ({ feil, ...props }: SelectProps) => {
 				(errorContext?.showError || isTouched) &&
 				(feil ||
 					formMethods?.getFieldState(props.name)?.error ||
-					formMethods?.getFieldState(props.fieldName)?.error)
+					formMethods?.getFieldState(props.fieldName)?.error ||
+					formMethods?.getFieldState(`manual.${props.name}`)?.error)
 			}
 			{...props}
 		/>

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

@@ -94,7 +94,10 @@ export const TextInput = React.forwardRef(
 		const input = props.input || props.value
 		const [fieldValue, setFieldValue] = useState(props.input || watch(name) || '')
 		const isTouched = _.has(touchedFields, name) || _.has(touchedFields, fieldName)
-		const feil = getFieldState(name)?.error || getFieldState(fieldName)?.error
+		const feil =
+			getFieldState(name)?.error ||
+			getFieldState(fieldName)?.error ||
+			getFieldState(`manual.${name}`)?.error
 		const visFeil = feil && (errorContext?.showError || isTouched)
 		const css = cn('skjemaelement__input', className, {
 			'skjemaelement__input--harFeil': visFeil,

apps/dolly-frontend/src/main/js/src/utils/DataFormatter.tsx

@@ -30,6 +30,9 @@ export const formatDate = (date: any, formatString?: string) => {
 	if (!date) {
 		return date
 	}
+	if (date?.length > 19) {
+		date = date.substring(0, 19)
+	}
 	if (isDate(date)) {
 		const customdayjs = initDayjs()
 		return customdayjs(date).format(formatString || 'DD.MM.YYYY')

apps/dolly-frontend/src/main/js/src/utils/GenererGyldigNorskBankkonto.tsx

@@ -38,7 +38,7 @@ const gyldigKontonummerMod11 = (kontonummer: string) => {
 	}
 }
 
-export const generateValidKontoOptions = (kontonummer?: string) => {
+export const generateValidKontoOptions = (kontonummer?: string): any => {
 	const kontoArray = _.isEmpty(kontonummer) ? [] : [{ value: kontonummer, label: kontonummer }]
 	let numIterations = 0
 	while (kontoArray.length < 10 && numIterations < 100) {