From 0326b87cfdf9bd60ca6626a6af17aaaf5a8e6897 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 23 Apr 2024 12:38:17 +0200 Subject: [PATCH] tree picker create action button --- ...i-block-grid-type-configuration.element.ts | 20 ++++- .../input-block-type.element.ts | 88 ++++++++++++------- .../tree-picker/tree-picker-modal.element.ts | 29 ++++-- .../tree-picker/tree-picker-modal.token.ts | 5 +- .../modals/workspace-modal.element.ts | 4 +- 5 files changed, 100 insertions(+), 46 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts index 8129fb2739..b309c9ceae 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts @@ -19,7 +19,11 @@ import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UMB_BLOCK_GRID_TYPE, type UmbBlockGridTypeGroupType } from '@umbraco-cms/backoffice/block-grid'; import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; -import { UMB_PROPERTY_DATASET_CONTEXT, type UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property'; +import { + UMB_PROPERTY_CONTEXT, + UMB_PROPERTY_DATASET_CONTEXT, + type UmbPropertyDatasetContext, +} from '@umbraco-cms/backoffice/property'; import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal'; import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; @@ -70,6 +74,9 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement this.#mapValuesToBlockGroups(); } + @state() + public _alias?: string; + @property({ type: Object, attribute: false }) public config?: UmbPropertyEditorConfigCollection; @@ -86,8 +93,13 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement constructor() { super(); - this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (instance) => { - this.#datasetContext = instance; + + this.consumeContext(UMB_PROPERTY_CONTEXT, async (context) => { + this._alias = context.getAlias(); + }); + + this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (context) => { + this.#datasetContext = context; //this.#observeBlocks(); this.#observeBlockGroups(); }); @@ -203,6 +215,7 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement return html`
${this._notGroupedBlockTypes ? html` { + // TODO: Investigate if onEnd is called when a container move has been performed, if not then I would say it should be. [NL] this.dispatchEvent(new CustomEvent('change', { detail: { moveComplete: true } })); }, }); + #elementPickerModal; @property({ type: Array, attribute: false }) public set value(items) { @@ -42,9 +44,20 @@ export class UmbInputBlockTypeElement< return this._items; } + @property({ type: String }) + public set propertyAlias(value: string | undefined) { + this.#elementPickerModal.setUniquePathValue('propertyAlias', value); + } + public get propertyAlias(): string | undefined { + return undefined; + } + @property({ type: String }) workspacePath?: string; + @state() + private _pickerPath?: string; + @state() private _items: Array = []; @@ -60,31 +73,42 @@ export class UmbInputBlockTypeElement< this.#filter = value as Array; }); }); - } - async create() { - const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT); + this.#elementPickerModal = new UmbModalRouteRegistrationController(this, UMB_DOCUMENT_TYPE_PICKER_MODAL) + .addUniquePaths(['propertyAlias']) + .onSetup(() => { + return { + data: { + hideTreeRoot: true, + multiple: false, + createAction: { + entityType: UMB_DOCUMENT_TYPE_ENTITY_TYPE, + preset: { isElementType: true }, + }, + pickableFilter: (docType) => + // Only pick elements: + docType.isElement && + // Prevent picking the an already used element type: + this.#filter && + this.#filter.find((x) => x.contentElementTypeKey === docType.unique) === undefined, + }, + value: { + selection: [], + }, + }; + }) + .onSubmit((value) => { + const selectedElementType = value.selection[0]; - // TODO: Make as mode for the Picker Modal, so the click to select immediately submits the modal(And in that mode we do not want to see a Submit button). - const modalContext = modalManager.open(this, UMB_DOCUMENT_TYPE_PICKER_MODAL, { - data: { - hideTreeRoot: true, - multiple: false, - pickableFilter: (docType) => - // Only pick elements: - docType.isElement && - // Prevent picking the an already used element type: - this.#filter && - this.#filter.find((x) => x.contentElementTypeKey === docType.unique) === undefined, - }, - }); - - const modalValue = await modalContext?.onSubmit(); - const selectedElementType = modalValue.selection[0]; - - if (selectedElementType) { - this.dispatchEvent(new CustomEvent('create', { detail: { contentElementTypeKey: selectedElementType } })); - } + if (selectedElementType) { + this.dispatchEvent(new CustomEvent('create', { detail: { contentElementTypeKey: selectedElementType } })); + } + }) + .observeRouteBuilder((routeBuilder) => { + const oldPath = this._pickerPath; + this._pickerPath = routeBuilder({}); + this.requestUpdate('_pickerPath', oldPath); + }); } deleteItem(contentElementTypeKey: string) { @@ -131,12 +155,14 @@ export class UmbInputBlockTypeElement< }; #renderButton() { - return html` - this.create()} label="open"> - - Add - - `; + return this._pickerPath + ? html` + + + Add + + ` + : null; } static styles = [ diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts index b093cde9da..47bf3661af 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts @@ -1,6 +1,6 @@ import type { UmbTreeSelectionConfiguration } from '../types.js'; import type { UmbTreePickerModalData, UmbTreePickerModalValue } from './tree-picker-modal.token.js'; -import { html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit'; +import { html, customElement, state, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit'; import { UMB_WORKSPACE_MODAL, UmbModalBaseElement, @@ -21,9 +21,6 @@ export class UmbTreePickerModalElement { - return { data: { entityType: 'document-type', preset: {} } }; + .onSetup(async () => { + return { data: createActionData }; + }) + .onSubmit((value) => { + console.log('got', value); + //this.value = value; + //this.modalContext?.dispatchEvent(new UmbSelectedEvent()); }) .observeRouteBuilder((routeBuilder) => { - this._createPath = routeBuilder({}); + const oldPath = this._createPath; + this._createPath = routeBuilder({}) + 'create'; + this.requestUpdate('_createPath', oldPath); }); } } @@ -95,6 +100,12 @@ export class UmbTreePickerModalElement
+ ${this._createPath + ? html` ` + : nothing} extends UmbPickerModalData { treeAlias?: string; + // Consider if it makes sense to move this into the UmbPickerModalData interface, but for now this is a TreePicker feature. [NL] + createAction?: UmbTreePickerModalCreateActionData; } export interface UmbTreePickerModalValue extends UmbPickerModalValue {} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/modals/workspace-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/modals/workspace-modal.element.ts index 5a9722e24d..9d702fc1d8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/modals/workspace-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/modals/workspace-modal.element.ts @@ -1,13 +1,13 @@ import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import type { CSSResultGroup } from '@umbraco-cms/backoffice/external/lit'; import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; -import type { UmbWorkspaceData } from '@umbraco-cms/backoffice/modal'; +import type { UmbWorkspaceModalData } from '@umbraco-cms/backoffice/modal'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-workspace-modal') export class UmbWorkspaceModalElement extends UmbLitElement { @property({ attribute: false }) - data?: UmbWorkspaceData; + data?: UmbWorkspaceModalData; /** * TODO: Consider if this binding and events integration is the right for communicating back the modal handler. Or if we should go with some Context API. like a Modal Context API.