From 9dec9544d45de2849b2c02475c9fe7421af04dc3 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Tue, 12 Dec 2023 13:47:03 +0100 Subject: [PATCH 1/3] element types only filter --- .../tree-picker/tree-picker-modal.element.ts | 1 + .../src/packages/core/tree/tree.context.ts | 2 ++ .../src/packages/core/tree/tree.element.ts | 20 ++++++++++++- .../document-type-input.element.ts | 28 +++++++++++++++---- 4 files changed, 45 insertions(+), 6 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts index 2b0a0c991a..991e270cd1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts @@ -46,6 +46,7 @@ export class UmbTreePickerModalElement diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.context.ts index ddd3c0af26..4128dbcaba 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.context.ts @@ -49,6 +49,8 @@ export class UmbTreeContextBase public repository?: UmbTreeRepository; public selectableFilter?: (item: TreeItemType) => boolean = () => true; + public filter?: (item: TreeItemType) => boolean = () => true; + #treeAlias?: string; #initResolver?: () => void; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts index 72a2a8194e..414d074ddc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts @@ -66,6 +66,15 @@ export class UmbTreeElement extends UmbLitElement { this.#treeContext.selectableFilter = newVal; } + @property() + get filter() { + return this.#treeContext.filter; + } + set filter(newVal) { + console.log(typeof newVal); + this.#treeContext.filter = newVal; + } + @state() private _items: TreeItemPresentationModel[] = []; @@ -97,7 +106,16 @@ export class UmbTreeElement extends UmbLitElement { if (asObservable) { this.#rootItemsObserver = this.observe(asObservable(), (rootItems) => { const oldValue = this._items; - this._items = rootItems; + if (this.filter) { + const items: Array = []; + rootItems.forEach((rootItem) => { + const filtered = this.filter!(rootItem); + if (filtered) items.push(rootItem); + }); + this._items = items; + } else { + this._items = rootItems; + } this.requestUpdate('_items', oldValue); }); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/document-type-input/document-type-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/document-type-input/document-type-input.element.ts index 121f921f4a..ed1f48b65c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/document-type-input/document-type-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/document-type-input/document-type-input.element.ts @@ -1,5 +1,5 @@ import { UmbDocumentTypePickerContext } from './document-type-input.context.js'; -import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit'; import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import type { DocumentTypeItemResponseModel } from '@umbraco-cms/backoffice/backend-api'; @@ -7,6 +7,15 @@ import { splitStringToArray } from '@umbraco-cms/backoffice/utils'; @customElement('umb-document-type-input') export class UmbDocumentTypeInputElement extends FormControlMixin(UmbLitElement) { + /** + * Selects the element types only + * @type {boolean} + * @attr + * @default false + */ + @property({ type: Boolean, attribute: 'element-types-only' }) + elementTypesOnly: boolean = false; + /** * This is a minimum amount of selected items in this input. * @type {number} @@ -102,19 +111,28 @@ export class UmbDocumentTypeInputElement extends FormControlMixin(UmbLitElement) return undefined; } + #openPicker() { + if (this.elementTypesOnly) { + this.#pickerContext.openPicker({ + hideTreeRoot: true, + filter: (x) => x.isElement!, + }); + } else { + this.#pickerContext.openPicker({ hideTreeRoot: true }); + } + } + render() { return html` ${this._items?.map((item) => this._renderItem(item))} - this.#pickerContext.openPicker()} label="open" - >Add + Add `; } private _renderItem(item: DocumentTypeItemResponseModel) { if (!item.id) return; return html` - + this.#pickerContext.requestRemoveItem(item.id!)} From 09d9af8270b0321686f6c2a925c824762588597e Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Wed, 13 Dec 2023 13:47:36 +0100 Subject: [PATCH 2/3] pickable filter --- .../src/packages/core/tree/tree.element.ts | 1 - .../document-type-input/document-type-input.element.ts | 2 +- .../structure/document-type-workspace-view-structure.element.ts | 1 + 3 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts index 414d074ddc..5b767176d6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts @@ -71,7 +71,6 @@ export class UmbTreeElement extends UmbLitElement { return this.#treeContext.filter; } set filter(newVal) { - console.log(typeof newVal); this.#treeContext.filter = newVal; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/document-type-input/document-type-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/document-type-input/document-type-input.element.ts index ed1f48b65c..5286fb0a32 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/document-type-input/document-type-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/document-type-input/document-type-input.element.ts @@ -115,7 +115,7 @@ export class UmbDocumentTypeInputElement extends FormControlMixin(UmbLitElement) if (this.elementTypesOnly) { this.#pickerContext.openPicker({ hideTreeRoot: true, - filter: (x) => x.isElement!, + pickableFilter: (x) => x.isElement!, }); } else { this.#pickerContext.openPicker({ hideTreeRoot: true }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.ts index dddbdcda73..d4de79e2da 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.ts @@ -60,6 +60,7 @@ export class UmbDocumentTypeWorkspaceViewStructureElement extends UmbLitElement