yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Input Entity Data Picker: wire up client validation (#20456)

Browse Source 
trigger client validation if the amount configuration is not met
This commit is contained in:
Mads Rasmussen
2025-10-10 14:47:39 +02:00
committed by GitHub
parent c037323910
commit c68a26cb5f
2 changed files with 34 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/Umbraco.Web.UI.Client/src/packages/property-editors/entity-data-picker/input/input-entity-data.element.ts
View File

@@ -4,12 +4,14 @@ import { splitStringToArray, type UmbConfigCollectionModel } from '@umbraco-cms/
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
import type { UmbRepositoryItemsStatus } from '@umbraco-cms/backoffice/repository';
import type { UmbItemModel } from '@umbraco-cms/backoffice/entity-item';
import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
@customElement('umb-input-entity-data')
export class UmbInputEntityDataElement extends UUIFormControlMixin(UmbLitElement, '') {
export class UmbInputEntityDataElement extends UmbFormControlMixin<string | undefined, typeof UmbLitElement>(
UmbLitElement,
) {
#sorter = new UmbSorterController<string>(this, {
getUniqueOfElement: (element) => {
return element.id;
@@ -95,12 +97,13 @@ export class UmbInputEntityDataElement extends UUIFormControlMixin(UmbLitElement
return this.#pickerInputContext.getSelection();
}
@property()
public override set value(uniques: string) {
this.selection = splitStringToArray(uniques);
@property({ type: String })
public override set value(selectionString: string | undefined) {
this.selection = splitStringToArray(selectionString);
super.value = selectionString; // Call the parent setter to ensure the value change is triggered in the FormControlMixin. [NL]
}
public override get value(): string {
return this.selection.join(',');
public override get value(): string | undefined {
return this.selection.length > 0 ? this.selection.join(',') : undefined;
}
/**

29
src/Umbraco.Web.UI.Client/src/packages/property-editors/entity-data-picker/property-editor/entity-data-picker-property-editor-ui.element.ts
View File

@@ -8,14 +8,14 @@ import type {
UmbPropertyEditorUiElement,
} from '@umbraco-cms/backoffice/property-editor';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
// import of local component
import '../input/input-entity-data.element.js';
import type { UmbConfigCollectionModel } from '@umbraco-cms/backoffice/utils';
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
import type { ManifestPropertyEditorDataSource } from '@umbraco-cms/backoffice/property-editor-data-source';
import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
// import of local component
import '../input/input-entity-data.element.js';
@customElement('umb-entity-data-picker-property-editor-ui')
export class UmbEntityDataPickerPropertyEditorUIElement
extends UmbFormControlMixin<UmbEntityDataPickerPropertyEditorValue | undefined, typeof UmbLitElement>(
@@ -111,9 +111,28 @@ export class UmbEntityDataPickerPropertyEditorUIElement
return this.shadowRoot?.querySelector<UmbInputEntityDataElement>('umb-input-entity-data')?.focus();
}
override firstUpdated(changedProperties: Map<string | number | symbol, unknown>) {
super.firstUpdated(changedProperties);
this.addFormControlElement(this.shadowRoot!.querySelector('umb-input-entity-data')!);
if (this._min && this._max && this._min > this._max) {
console.warn(
`Property (Entity Data Picker) has been misconfigured, 'min' is greater than 'max'. Please correct your data type configuration.`,
this,
);
}
}
#onChange(event: CustomEvent & { target: UmbInputEntityDataElement }) {
this.value = event.target.selection;
this.dispatchEvent(new UmbChangeEvent());
const selection = event.target.selection;
// Ensure the value is of the correct type before setting it.
if (Array.isArray(selection)) {
this.value = selection;
this.dispatchEvent(new UmbChangeEvent());
} else {
throw new Error('Selection is not of type array. Cannot set property value.');
}
}
override render() {