From 914585ad23ef3e91c0d5bce414c09ac434d39f66 Mon Sep 17 00:00:00 2001 From: "https://gitlab.isoad.isogmbh.de/%rmd%" Date: Mon, 18 Dec 2023 09:54:15 +0100 Subject: [PATCH 1/7] add errors props to KolForm --- packages/components/src/components.d.ts | 2 + .../src/components/form/component.tsx | 38 +++++++++++++++++++ .../components/src/components/form/types.ts | 1 + .../appointment-form/DistrictForm.tsx | 1 + 4 files changed, 42 insertions(+) diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts index 6a73ae02b4..1b2f2e6c0a 100644 --- a/packages/components/src/components.d.ts +++ b/packages/components/src/components.d.ts @@ -541,6 +541,7 @@ export namespace Components { "_open"?: boolean; } interface KolForm { + "_errors"?: Record; /** * Gibt die EventCallback-Funktionen für die Form-Events an. */ @@ -3351,6 +3352,7 @@ declare namespace LocalJSX { "_open"?: boolean; } interface KolForm { + "_errors"?: Record; /** * Gibt die EventCallback-Funktionen für die Form-Events an. */ diff --git a/packages/components/src/components/form/component.tsx b/packages/components/src/components/form/component.tsx index bb9dc4ab97..670da803d4 100644 --- a/packages/components/src/components/form/component.tsx +++ b/packages/components/src/components/form/component.tsx @@ -28,9 +28,35 @@ export class KolForm implements API { } }; + private readonly handleLinkClick = (event: Event) => { + const href = (event.target as HTMLAnchorElement | undefined)?.href; + if (href) { + const hrefUrl = new URL(href); + + const targetElement = document.querySelector(hrefUrl.hash); + if (targetElement && typeof targetElement.focus === 'function') { + targetElement.focus(); + } + } + }; + public render(): JSX.Element { return (
+ {this._errors && ( + + Bitte korrigieren Sie folgende Fehler: + + + )} {this.state._requiredText === true ? (

{translate('kol-form-description')} @@ -55,6 +81,8 @@ export class KolForm implements API { */ @Prop() public _requiredText?: Stringified = true; + @Prop() public _errors?: Record; + @State() public state: States = {}; @Watch('_on') @@ -76,8 +104,18 @@ export class KolForm implements API { } } + @Watch('_errors') + public validateErrors(value?: Record): void { + if (typeof value === 'object' && value !== null) { + this.state = { + ...this.state, + _errors: value, + }; + } + } public componentWillLoad(): void { this.validateOn(this._on); this.validateRequiredText(this._requiredText); + this.validateErrors(this._errors); } } diff --git a/packages/components/src/components/form/types.ts b/packages/components/src/components/form/types.ts index 416cd18232..10792fcb2d 100644 --- a/packages/components/src/components/form/types.ts +++ b/packages/components/src/components/form/types.ts @@ -12,6 +12,7 @@ type RequiredProps = NonNullable; type OptionalProps = { on: KoliBriFormCallbacks; requiredText: string | boolean; + errors: Record; }; export type Props = Generic.Element.Members; diff --git a/packages/samples/react/src/scenarios/appointment-form/DistrictForm.tsx b/packages/samples/react/src/scenarios/appointment-form/DistrictForm.tsx index 2f8fe84e0f..1fc3a50478 100644 --- a/packages/samples/react/src/scenarios/appointment-form/DistrictForm.tsx +++ b/packages/samples/react/src/scenarios/appointment-form/DistrictForm.tsx @@ -42,6 +42,7 @@ export function DistrictForm() { ) : null} { void form.submitForm(); From 5b145c7f92a5a255176d88550f658a788035a6f1 Mon Sep 17 00:00:00 2001 From: "https://gitlab.isoad.isogmbh.de/%rmd%" Date: Tue, 19 Dec 2023 15:06:42 +0100 Subject: [PATCH 2/7] Implement error list in KolForm --- packages/components/src/components.d.ts | 4 +-- .../src/components/form/component.tsx | 16 +++++++++--- .../components/src/components/form/types.ts | 7 +++++- .../appointment-form/DistrictForm.tsx | 25 ++++++++++++------- 4 files changed, 36 insertions(+), 16 deletions(-) diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts index 1b2f2e6c0a..130aed1cf2 100644 --- a/packages/components/src/components.d.ts +++ b/packages/components/src/components.d.ts @@ -541,7 +541,7 @@ export namespace Components { "_open"?: boolean; } interface KolForm { - "_errors"?: Record; + "_errors"?: ErrorListPropType[]; /** * Gibt die EventCallback-Funktionen für die Form-Events an. */ @@ -3352,7 +3352,7 @@ declare namespace LocalJSX { "_open"?: boolean; } interface KolForm { - "_errors"?: Record; + "_errors"?: ErrorListPropType[]; /** * Gibt die EventCallback-Funktionen für die Form-Events an. */ diff --git a/packages/components/src/components/form/component.tsx b/packages/components/src/components/form/component.tsx index 670da803d4..5a40d3c5bf 100644 --- a/packages/components/src/components/form/component.tsx +++ b/packages/components/src/components/form/component.tsx @@ -5,6 +5,11 @@ import { Stringified } from '../../types/common'; import { watchBoolean, watchString } from '../../utils/prop.validators'; import { API, KoliBriFormCallbacks, States } from './types'; +type ErrorListPropType = { + message: string; + selector: string; +}; + /** * @slot - Inhalt der Form. */ @@ -35,6 +40,7 @@ export class KolForm implements API { const targetElement = document.querySelector(hrefUrl.hash); if (targetElement && typeof targetElement.focus === 'function') { + targetElement.scrollIntoView({ behavior: 'smooth' }); targetElement.focus(); } } @@ -43,14 +49,15 @@ export class KolForm implements API { public render(): JSX.Element { return ( - {this._errors && ( + {this._errors && Object.keys(this._errors).length > 0 && ( Bitte korrigieren Sie folgende Fehler: