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

root validation impl

Browse Source
This commit is contained in:
Niels Lyngsø
2024-05-23 16:07:56 +02:00
parent e5bc273b63
commit d29c2d6c86
14 changed files with 69 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts
View File

@@ -11,6 +11,8 @@ import { html, customElement, state, repeat, css, property, nothing } from '@umb
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import '../block-grid-entry/index.js';
import { UmbSorterController, type UmbSorterConfig, type resolvePlacementArgs } from '@umbraco-cms/backoffice/sorter';
import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
/**
* Notice this utility method is not really shareable with others as it also takes areas into account. [NL]
@@ -98,7 +100,7 @@ const SORTER_CONFIG: UmbSorterConfig<UmbBlockGridLayoutModel, UmbBlockGridEntryE
* @element umb-block-grid-entries
*/
@customElement('umb-block-grid-entries')
export class UmbBlockGridEntriesElement extends UmbLitElement {
export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElement) {
//
// TODO: Make sure Sorter callbacks handles columnSpan when retrieving a new entry.
@@ -131,6 +133,7 @@ export class UmbBlockGridEntriesElement extends UmbLitElement {
public set areaKey(value: string | null | undefined) {
this._areaKey = value;
this.#context.setAreaKey(value ?? null);
this.#setupValidation();
}
public get areaKey(): string | null | undefined {
return this._areaKey;
@@ -197,6 +200,36 @@ export class UmbBlockGridEntriesElement extends UmbLitElement {
});
}
async #setupValidation() {
if (this._areaKey === null) {
// This validation setup is not be as configurable as it should be, but it is a start. Alternatively we should consume the manager and observe the configuration. [NL]
const manager = await this.#context.getManager();
const config = manager.getEditorConfiguration();
const min = config?.getValueByAlias<UmbNumberRangeValueType>('validationLimit')?.min ?? 0;
const max = config?.getValueByAlias<UmbNumberRangeValueType>('validationLimit')?.max ?? Infinity;
this.addValidator(
'rangeUnderflow',
() => {
return this.localize.term('validation_entriesShort', [min, min - (this._layoutEntries.length ?? 0)]);
},
() => {
return (this._layoutEntries.length ?? 0) < min;
},
);
this.addValidator(
'rangeOverflow',
() => {
return this.localize.term('validation_entriesExceed', [max, (this._layoutEntries.length ?? 0) - max]);
},
() => {
return (this._layoutEntries.length ?? 0) > max;
},
);
}
}
// TODO: Missing ability to jump directly to creating a Block, when there is only one Block Type. [NL]
render() {
return html`

18
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts
View File

@@ -7,16 +7,19 @@ import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extensi
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
import type { UmbBlockTypeGroup } from '@umbraco-cms/backoffice/block-type';
import type { UmbBlockGridTypeModel, UmbBlockGridValueModel } from '@umbraco-cms/backoffice/block-grid';
import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models';
import '../../components/block-grid-entries/index.js';
import { observeMultiple } from '@umbraco-cms/backoffice/observable-api';
import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
/**
* @element umb-property-editor-ui-block-grid
*/
@customElement('umb-property-editor-ui-block-grid')
export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implements UmbPropertyEditorUiElement {
export class UmbPropertyEditorUIBlockGridElement
extends UmbFormControlMixin<UmbBlockGridValueModel, typeof UmbLitElement>(UmbLitElement)
implements UmbPropertyEditorUiElement
{
#context = new UmbBlockGridManagerContext(this);
//
private _value: UmbBlockGridValueModel = {
@@ -28,10 +31,10 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
if (!config) return;
const validationLimit = config.getValueByAlias<NumberRangeValueType>('validationLimit');
/*const validationLimit = config.getValueByAlias<NumberRangeValueType>('validationLimit');
this._limitMin = validationLimit?.min;
this._limitMax = validationLimit?.max;
this.#limitMin = validationLimit?.min;
this.#limitMax = validationLimit?.max;*/
const blocks = config.getValueByAlias<Array<UmbBlockGridTypeModel>>('blocks') ?? [];
this.#context.setBlockTypes(blocks);
@@ -45,11 +48,6 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement
this.#context.setEditorConfiguration(config);
}
//
@state()
private _limitMin?: number;
@state()
private _limitMax?: number;
@state()
private _layoutColumns?: number;

4
src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts
View File

@@ -14,7 +14,7 @@ import {
} from '@umbraco-cms/backoffice/property-editor';
import type { UmbBlockLayoutBaseModel } from '@umbraco-cms/backoffice/block';
import type { UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/block-type';
import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models';
import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/modal';
import type { UmbSorterConfig } from '@umbraco-cms/backoffice/sorter';
import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
@@ -74,7 +74,7 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
if (!config) return;
const validationLimit = config.getValueByAlias<NumberRangeValueType>('validationLimit');
const validationLimit = config.getValueByAlias<UmbNumberRangeValueType>('validationLimit');
this._limitMin = validationLimit?.min;
this._limitMax = validationLimit?.max;

3
src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-manager.context.ts
View File

@@ -68,6 +68,9 @@ export abstract class UmbBlockManagerContext<
setEditorConfiguration(configs: UmbPropertyEditorConfigCollection) {
this._editorConfiguration.setValue(configs);
}
getEditorConfiguration(): UmbPropertyEditorConfigCollection | undefined {
return this._editorConfiguration.getValue();
}
setBlockTypes(blockTypes: Array<BlockType>) {
this.#blockTypes.setValue(blockTypes);

4
src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts
View File

@@ -2,7 +2,7 @@ import { css, customElement, html, ifDefined, property, state } from '@umbraco-c
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models';
import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
function getNumberOrUndefined(value: string) {
@@ -43,7 +43,7 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen
}
@property({ type: Object })
validationRange?: NumberRangeValueType;
validationRange?: UmbNumberRangeValueType;
private updateValue() {
const newValue =

2
src/Umbraco.Web.UI.Client/src/packages/core/models/index.ts
View File

@@ -9,7 +9,7 @@ export interface ServertimeOffset {
offset: number;
}
export interface NumberRangeValueType {
export interface UmbNumberRangeValueType {
min?: number;
max?: number;
}

1
src/Umbraco.Web.UI.Client/src/packages/core/validation/mixins/form-control.mixin.ts
View File

@@ -96,7 +96,6 @@ export function UmbFormControlMixin<
/**
* Value of this form control.
* If you dont want the setFormValue to be called on the ElementInternals, then prevent calling this method, by not calling super.value = newValue in your implementation of the value setter method.
* @type {string}
* @attr value
* @default ''

4
src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts
View File

@@ -2,7 +2,7 @@ import type { UmbInputDocumentTypeElement } from '../../components/input-documen
import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models';
import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
@@ -14,7 +14,7 @@ export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
if (!config) return;
const minMax = config?.getValueByAlias<NumberRangeValueType>('validationLimit');
const minMax = config?.getValueByAlias<UmbNumberRangeValueType>('validationLimit');
this.min = minMax?.min ?? 0;
this.max = minMax?.max ?? Infinity;

4
src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts
View File

@@ -3,7 +3,7 @@ import { UMB_DOCUMENT_ENTITY_TYPE } from '../../entity.js';
import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models';
import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
import type { UmbTreeStartNode } from '@umbraco-cms/backoffice/tree';
@@ -16,7 +16,7 @@ export class UmbPropertyEditorUIDocumentPickerElement extends UmbLitElement impl
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
if (!config) return;
const minMax = config.getValueByAlias<NumberRangeValueType>('validationLimit');
const minMax = config.getValueByAlias<UmbNumberRangeValueType>('validationLimit');
if (minMax) {
this._min = minMax.min && minMax.min > 0 ? minMax.min : 0;
this._max = minMax.max && minMax.max > 0 ? minMax.max : 1;

10
src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts
View File

@@ -2,7 +2,7 @@ import type { UmbInputMediaTypeElement } from '../../components/index.js';
import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models';
import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
@@ -14,7 +14,7 @@ export class UmbPropertyEditorUIMediaTypePickerElement extends UmbLitElement imp
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
if (!config) return;
const minMax = config?.getValueByAlias<NumberRangeValueType>('validationLimit');
const minMax = config?.getValueByAlias<UmbNumberRangeValueType>('validationLimit');
this.min = minMax?.min ?? 0;
this.max = minMax?.max ?? Infinity;
}
@@ -32,11 +32,7 @@ export class UmbPropertyEditorUIMediaTypePickerElement extends UmbLitElement imp
render() {
return html`
<umb-input-media-type
.min=${this.min}
.max=${this.max}
.value=${this.value ?? ''}
@change=${this.#onChange}>
<umb-input-media-type .min=${this.min} .max=${this.max} .value=${this.value ?? ''} @change=${this.#onChange}>
</umb-input-media-type>
`;
}

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

@@ -2,7 +2,7 @@ import { html, customElement, property } from '@umbraco-cms/backoffice/external/
import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models';
import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
import type { UmbInputMediaElement } from '@umbraco-cms/backoffice/media';
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
@@ -25,7 +25,7 @@ export class UmbPropertyEditorUIMediaEntityPickerElement extends UmbLitElement i
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
if (!config) return;
const minMax = config?.getValueByAlias<NumberRangeValueType>('validationLimit');
const minMax = config?.getValueByAlias<UmbNumberRangeValueType>('validationLimit');
this.#min = minMax?.min ?? 0;
this.#max = minMax?.max ?? Infinity;
}

4
src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts
View File

@@ -4,7 +4,7 @@ import { customElement, html, property, state } from '@umbraco-cms/backoffice/ex
import { UmbId } from '@umbraco-cms/backoffice/id';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models';
import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
@@ -49,7 +49,7 @@ export class UmbPropertyEditorUIMediaPickerElement extends UmbLitElement impleme
const filter = config.getValueByAlias<string>('filter');
this._allowedMediaTypes = filter?.split(',') ?? [];
const minMax = config.getValueByAlias<NumberRangeValueType>('validationLimit');
const minMax = config.getValueByAlias<UmbNumberRangeValueType>('validationLimit');
this._limitMin = minMax?.min ?? 0;
this._limitMax = minMax?.max ?? Infinity;
}

4
src/Umbraco.Web.UI.Client/src/packages/members/member-group/property-editor/member-group-picker/property-editor-ui-member-group-picker.element.ts
View File

@@ -1,7 +1,7 @@
import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models';
import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
import type { UmbInputMemberGroupElement } from '@umbraco-cms/backoffice/member-group';
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
@@ -17,7 +17,7 @@ export class UmbPropertyEditorUIMemberGroupPickerElement extends UmbLitElement i
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
if (!config) return;
const minMax = config?.getValueByAlias<NumberRangeValueType>('validationLimit');
const minMax = config?.getValueByAlias<UmbNumberRangeValueType>('validationLimit');
this.min = minMax?.min ?? 0;
this.max = minMax?.max ?? Infinity;
}

12
src/Umbraco.Web.UI.Client/src/packages/property-editors/number-range/property-editor-ui-number-range.element.ts
View File

@@ -3,7 +3,7 @@ import { customElement, html, property, state } from '@umbraco-cms/backoffice/ex
import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models';
import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
@@ -14,7 +14,7 @@ import '../../core/components/input-number-range/input-number-range.element.js';
*/
@customElement('umb-property-editor-ui-number-range')
export class UmbPropertyEditorUINumberRangeElement
extends UmbFormControlMixin<NumberRangeValueType | undefined, typeof UmbLitElement>(UmbLitElement, undefined)
extends UmbFormControlMixin<UmbNumberRangeValueType | undefined, typeof UmbLitElement>(UmbLitElement, undefined)
implements UmbPropertyEditorUiElement
{
@state()
@@ -24,10 +24,10 @@ export class UmbPropertyEditorUINumberRangeElement
_maxValue?: number;
@state()
_validationRange?: NumberRangeValueType;
_validationRange?: UmbNumberRangeValueType;
@property({ type: Object })
public set value(value: NumberRangeValueType | undefined) {
public set value(value: UmbNumberRangeValueType | undefined) {
this.#value = value || { min: undefined, max: undefined };
this._minValue = value?.min;
this._maxValue = value?.max;
@@ -35,11 +35,11 @@ export class UmbPropertyEditorUINumberRangeElement
public get value() {
return this.#value;
}
#value: NumberRangeValueType = { min: undefined, max: undefined };
#value: UmbNumberRangeValueType = { min: undefined, max: undefined };
public set config(config: UmbPropertyEditorConfigCollection) {
if (!config) return;
this._validationRange = config.getValueByAlias<NumberRangeValueType>('validationRange');
this._validationRange = config.getValueByAlias<UmbNumberRangeValueType>('validationRange');
}
#onChange(event: CustomEvent & { target: UmbInputNumberRangeElement }) {