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

implemented native validation

Browse Source
This commit is contained in:
Niels Lyngsø
2023-01-11 19:23:34 +01:00
parent 7ca0a9cd25
commit 5c0b70d54f
3 changed files with 35 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts
View File

@@ -63,7 +63,6 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen
return this._selectedKeys;
}
public set selectedKeys(keys: Array<string>) {
console.log("selectedKeys", keys);
this._selectedKeys = keys;
super.value = keys.join(',');
this._observePickedDocuments();
@@ -86,16 +85,17 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen
constructor() {
super();
this.addValidator(
'rangeUnderflow',
() => this.minMessage,
() => !!this.min && (this._value as string).length < this.min
);
this.addValidator(
'rangeOverflow',
() => this.maxMessage,
() => !!this.max && (this._value as string).length > this.max
);
// TODO: Figure out why validator does not work. + Look into implementing the Validation message UUI part.
this.addValidator(
'rangeUnderflow',
() => this.minMessage,
() => !!this.min && this._selectedKeys.length < this.min
);
this.addValidator(
'rangeOverflow',
() => this.maxMessage,
() => !!this.max && this._selectedKeys.length > this.max
);
this.consumeContext('umbDocumentStore', (instance) => {
this._documentStore = instance
@@ -108,7 +108,7 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen
}
protected getFormElement() {
return this;
return undefined;
}
private _observePickedDocuments() {

4
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-property-layout/workspace-property-layout.element.ts
View File

@@ -59,7 +59,9 @@ export class UmbWorkspacePropertyLayoutElement extends LitElement {
<p>${this.description}</p>
</div>
<div>
<slot name="editor"></slot>
<uui-form-validation-message>
<slot name="editor"></slot>
</uui-form-validation-message>
</div>
`;
}

24
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/content-picker/property-editor-ui-document-picker.element.ts
View File

@@ -1,11 +1,10 @@
import { html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { UmbLitElement } from '@umbraco-cms/element';
// eslint-disable-next-line import/no-named-as-default
import type { UmbInputDocumentPickerElement } from 'src/backoffice/shared/components/input-document-picker/input-document-picker.element';
import 'src/backoffice/shared/components/input-document-picker/input-document-picker.element';
import type { DataTypePropertyData } from '@umbraco-cms/models';
// TODO: rename to Document Picker
@customElement('umb-property-editor-ui-document-picker')
export class UmbPropertyEditorUIContentPickerElement extends UmbLitElement {
/*
@@ -30,7 +29,19 @@ export class UmbPropertyEditorUIContentPickerElement extends UmbLitElement {
// TODO: Use config for something.
@property({ type: Array, attribute: false })
public config = [];
public set config(config: Array<DataTypePropertyData>) {
const validationLimit = config.find(x => x.alias === 'validationLimit');
console.log("got config", validationLimit)
this._limitMin = (validationLimit?.value as any).min;
this._limitMax = (validationLimit?.value as any).max;
}
@state()
private _limitMin?:number;
@state()
private _limitMax?:number;
private _onChange(event: CustomEvent) {
@@ -45,7 +56,12 @@ export class UmbPropertyEditorUIContentPickerElement extends UmbLitElement {
render() {
return html`
<umb-input-document-picker @change=${this._onChange} .selectedKeys=${this._value}>Add</umb-input-document-picker>
<umb-input-document-picker
@change=${this._onChange}
.selectedKeys=${this._value}
.min=${this._limitMin}
.max=${this._limitMax}
>Add</umb-input-document-picker>
`;
}