From bc4c6355a363947a8d39cecab92f5cbeeece6520 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 19 Oct 2023 16:24:17 +0200 Subject: [PATCH] load element depends on type --- .../input-tree/input-tree.context.ts | 36 --- .../input-tree/input-tree.element.ts | 220 +++++++++--------- .../property-editor-ui-tree-picker.element.ts | 36 +-- 3 files changed, 112 insertions(+), 180 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.context.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.context.ts deleted file mode 100644 index d3ffc05b8e..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.context.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input'; -import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api'; -import { UMB_DOCUMENT_PICKER_MODAL, UMB_MEDIA_TREE_PICKER_MODAL } from '@umbraco-cms/backoffice/modal'; -import { ItemResponseModelBaseModel } from '@umbraco-cms/backoffice/backend-api'; - -export type NodeType = 'content' | 'member' | 'media'; - -export type StartNode = { - type?: NodeType; - query?: string | null; - id?: string | null; -}; - -export class UmbNodeTreePickerContext extends UmbPickerInputContext { - #type: NodeType = 'content'; - - constructor(host: UmbControllerHostElement, type: 'content' | 'media' | 'member' = 'content') { - const context = { - repository: 'Umb.Repository.Document', - token: UMB_DOCUMENT_PICKER_MODAL, - }; - - // TODO => if member - - if (type === 'media') { - context.repository = 'Umb.Repository.Media'; - context.token = UMB_MEDIA_TREE_PICKER_MODAL; - } - super(host, context.repository, context.token); - this.#type = type; - } - - getType() { - return this.#type; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts index e9f8d5e235..2c63053e83 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts @@ -1,9 +1,16 @@ -import { NodeType, StartNode, UmbNodeTreePickerContext } from './input-tree.context.js'; import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import type { ItemResponseModelBaseModel } from '@umbraco-cms/backoffice/backend-api'; import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; +import { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document'; + +export type NodeType = 'content' | 'member' | 'media'; + +export type StartNode = { + type?: NodeType; + query?: string | null; + id?: string | null; +}; @customElement('umb-input-tree') export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) { @@ -11,70 +18,29 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) { return undefined; } - /** - * This is a minimum amount of selected items in this input. - * @type {number} - * @attr - * @default 0 - */ - public get min(): number { - return this.#pickerContext?.min || 0; - } - public set min(value: number) { - if (this.#pickerContext) { - this.#pickerContext.min = value; - } - } + @state() + type?: StartNode['type']; - /** - * Min validation message. - * @type {boolean} - * @attr - * @default - */ - @property({ type: String, attribute: 'min-message' }) - minMessage = 'This field need more items'; + @state() + query?: string; - /** - * This is a maximum amount of selected items in this input. - * @type {number} - * @attr - * @default Infinity - */ - public get max(): number { - return this.#pickerContext?.max || 0; - } - public set max(value: number) { - if (this.#pickerContext) { - this.#pickerContext.max = value; - } - } + @state() + startId?: string; - /** - * Max validation message. - * @type {boolean} - * @attr - * @default - */ - @property({ type: String, attribute: 'min-message' }) - maxMessage = 'This field exceeds the allowed amount of items'; + @state() + min = 0; - public get selectedIds(): Array { - return this.#pickerContext?.getSelection() ?? []; - } - public set selectedIds(ids: Array) { - this.#pickerContext?.setSelection(ids); - } + @state() + max = 0; - public get type(): NodeType | undefined { - return this.#pickerContext?.getType(); - } + @state() + filter?: string; - @property() - public set value(idsString: string) { - // Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection. - this.selectedIds = idsString.split(/[ ,]+/); - } + @state() + showOpenButton?: boolean; + + @state() + ignoreUserStartNodes?: boolean; @property({ attribute: false }) public set configuration(value: UmbPropertyEditorConfigCollection | undefined) { @@ -82,80 +48,108 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) { ...(value ? value.toObject() : {}), }; - this.#setup(config.startNode.type); + this.type = config.startNode.type.toLowerCase() as StartNode['type']; + this.query = config.query; + this.startId = config.startNode.id; + this.min = config.minNumber; this.max = config.maxNumber; + + this.filter = config.filter; + this.showOpenButton = config.showOpenButton; + this.ignoreUserStartNodes = config.ignoreUserStartNodes; + } + + @property() + set value(newValue: string | string[]) { + super.value = newValue; + this.items = newValue.split(','); + } + get value(): string { + return super.value as string; } @state() - private _items?: Array; + items: Array = []; - #pickerContext?: UmbNodeTreePickerContext; - - #setup(type: NodeType = 'content') { - this.#pickerContext = new UmbNodeTreePickerContext(this, type); - this.observe(this.#pickerContext.selection, (selection) => (super.value = selection.join(','))); - this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems)); + #onChange(event: CustomEvent) { + this.items = (event.target as UmbInputDocumentElement).selectedIds; + this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true })); } constructor() { super(); - - /* - TODO => only if pickrecontext exists - this.addValidator( - 'rangeUnderflow', - () => this.minMessage, - () => !!this.min && this.#pickerContext.getSelection().length < this.min, - ); - - this.addValidator( - 'rangeOverflow', - () => this.maxMessage, - () => !!this.max && this.#pickerContext.getSelection().length > this.max, - ); - */ - - //this.#pickerContext = new UmbNodePickerContext(this, this.type); - - //this.observe(this.#pickerContext.selection, (selection) => (super.value = selection.join(','))); - //this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems)); } render() { - return html` ${this._items?.map((item) => this.#renderItem(item))} ${this.#renderButton()} `; + return html`${this.#renderElement()} +

${this.#renderTip()}

`; } - #renderButton() { - if (this._items && this.max && this._items.length >= this.max) return; - return html` - items: ${this._items?.length} - max: ${this.max} - this.#pickerContext?.openPicker()} - label=${this.localize.term('general_add')}> - ${this.localize.term('general_add')} - - `; + #renderTip() { + if (this.items.length && this.items.length !== this.max) { + if (this.items.length > this.max) { + return `You can only have up to ${this.max} item(s) selected`; + } + if (this.min === this.max && this.min !== 0) { + return `Add ${this.min - this.items.length} more item(s)`; + } + if (this.min === 0 && this.max) { + return `Add up to ${this.max} items`; + } + if (this.min > 0 && this.max > 0) { + return `Add between ${this.min} and ${this.max} item(s)`; + } + if (this.items.length < this.min) { + return `You need to add at least ${this.min} items`; + } + } + return ''; } - #renderItem(item: ItemResponseModelBaseModel) { - const icon = this.type === 'media' ? 'umb:picture' : this.type === 'member' ? 'umb:user' : 'umb:document'; - return html` - - `; + #renderElement() { + switch (this.type) { + case 'content': + return html``; + case 'media': + return html``; + case 'member': + return html` + `; + default: + return html`Type not found`; + } } static styles = [ css` - #add-button { - width: 100%; - } - - uui-icon { - display: block; - margin: 0 auto; + p { + margin: 0; + color: var(--uui-color-border-emphasis); } `, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts index 00c12e846f..58cec9ee8e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts @@ -1,5 +1,4 @@ -import { StartNode } from '../../../components/input-tree/input-tree.context.js'; -import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; +import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @@ -15,47 +14,22 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen @property() value = ''; - @state() - startNode?: StartNode; - - @state() - filter?: string; - - @state() - ignoreUserStartNodes?: boolean; - - @state() - showOpenButton?: boolean; - - @state() - minNumber?: number; - - @state() - maxNumber?: number; - #configuration?: UmbPropertyEditorConfigCollection; @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection | undefined) { this.#configuration = config; - - this.startNode = config?.getValueByAlias('startNode'); - - this.filter = config?.getValueByAlias('filter'); - this.ignoreUserStartNodes = config?.getValueByAlias('ignoreUserStartNodes'); - this.showOpenButton = config?.getValueByAlias('showOpenButton'); - - this.minNumber = config?.getValueByAlias('minNumber'); - this.maxNumber = config?.getValueByAlias('maxNumber'); } #onChange(e: CustomEvent) { - this.value = (e.target as UmbInputTreeElement).value; + this.value = (e.target as UmbInputTreeElement).items.join(','); this.dispatchEvent(new CustomEvent('property-value-change')); } render() { - return html``; + return html`${this.value}`; } static styles = [UmbTextStyles];