From e13fa55ada2748a48f1da5b609c3d7154a97f487 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 16 Feb 2023 14:12:57 +0100 Subject: [PATCH] validation? --- .../input-multi-url-picker.element.ts | 24 +++++++++---------- ...erty-editor-ui-multi-url-picker.element.ts | 20 +++++++--------- 2 files changed, 19 insertions(+), 25 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts index 4bac03b304..bc65dcb756 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts @@ -3,11 +3,9 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property } from 'lit/decorators.js'; import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins'; import { UmbLitElement } from '@umbraco-cms/element'; -import { FolderTreeItemModel } from '@umbraco-cms/backend-api'; import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/modal'; -import { UmbObserverController } from '@umbraco-cms/observable-api'; -export interface Link { +export interface MultiUrlData { icon?: string; name?: string; published?: boolean; @@ -86,7 +84,7 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen overlaySize?: 'small' | 'medium' | 'large' | 'full'; @property() - links: Array = []; + multiUrls: Array = []; private _modalService?: UmbModalService; @@ -95,12 +93,12 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen this.addValidator( 'rangeUnderflow', () => this.minMessage, - () => !!this.min && this.links.length < this.min + () => !!this.min && this.multiUrls.length < this.min ); this.addValidator( 'rangeOverflow', () => this.maxMessage, - () => !!this.max && this.links.length > this.max + () => !!this.max && this.multiUrls.length > this.max ); this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (instance) => { @@ -109,11 +107,11 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen } private _removeItem(index: number) { - this.links.splice(index, 1); + this.multiUrls.splice(index, 1); this.requestUpdate(); } - private _openPicker(data?: Link, index?: number) { + private _openPicker(data?: MultiUrlData, index?: number) { const modalHandler = this._modalService?.linkPicker( { name: data?.name || undefined, @@ -130,21 +128,21 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen overlaySize: this.overlaySize || 'small', } ); - modalHandler?.onClose().then((newUrl: Link) => { + modalHandler?.onClose().then((newUrl: MultiUrlData) => { if (!newUrl) return; - if (index !== undefined && index >= 0) this.links[index] = newUrl; - else this.links.push(newUrl); + if (index !== undefined && index >= 0) this.multiUrls[index] = newUrl; + else this.multiUrls.push(newUrl); this.requestUpdate(); }); } render() { - return html`${this.links?.map((link, index) => this._renderItem(link, index))} + return html`${this.multiUrls?.map((link, index) => this._renderItem(link, index))} Add`; } - private _renderItem(link: Link, index: number) { + private _renderItem(link: MultiUrlData, index: number) { return html` diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts index a360d8c23b..41163b19bb 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts @@ -1,8 +1,10 @@ import { html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property, state } from 'lit/decorators.js'; -import { ifDefined } from 'lit-html/directives/if-defined.js'; -import { UmbInputMultiUrlPickerElement } from '../../../components/input-multi-url-picker/input-multi-url-picker.element'; +import { + UmbInputMultiUrlPickerElement, + MultiUrlData, +} from '../../../../shared/components/input-multi-url-picker/input-multi-url-picker.element'; import { UmbLitElement } from '@umbraco-cms/element'; import { DataTypePropertyModel } from '@umbraco-cms/backend-api'; @@ -14,14 +16,8 @@ import { DataTypePropertyModel } from '@umbraco-cms/backend-api'; export class UmbPropertyEditorUIMultiUrlPickerElement extends UmbLitElement { static styles = [UUITextStyles]; - private _value: string[] = []; - @property({ type: Array }) - public get value(): string[] { - return this._value; - } - public set value(value: string[]) { - this._value = value || []; - } + @property() + value: MultiUrlData[] = []; @property({ type: Array, attribute: false }) public set config(config: DataTypePropertyModel[]) { @@ -56,7 +52,7 @@ export class UmbPropertyEditorUIMultiUrlPickerElement extends UmbLitElement { private _minNumber?: number; private _onChange(event: CustomEvent) { - //this._value = (event.target as UmbInputMultiUrlPickerElement); + //TODO: Do something about the values this.dispatchEvent(new CustomEvent('property-value-change')); } @@ -68,7 +64,7 @@ export class UmbPropertyEditorUIMultiUrlPickerElement extends UmbLitElement { .ignoreUserStartNodes=${this._ignoreUserStartNodes} .max=${this._maxNumber} .min=${this._minNumber} - .selectedKeys="${this._value}">`; + .links="${this.value}">`; } }