From 2bb211eb8d6f1e0d330f00e6e55857200c4e0279 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 20 Dec 2023 20:44:40 +0100 Subject: [PATCH] eliminate input context for now. --- .../components/input-block-type/index.ts | 1 - .../input-block-type.context.ts | 38 --------------- .../input-block-type.element.ts | 48 ++++++++++++++----- .../workspace/block-type-workspace.context.ts | 3 +- 4 files changed, 38 insertions(+), 52 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.context.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/index.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/index.ts index e4947feac4..b0fad1a6d5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/index.ts @@ -1,2 +1 @@ export * from './input-block-type.element.js'; -export * from './input-block-type.context.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.context.ts deleted file mode 100644 index 097c471a6b..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.context.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { UmbBlockTypeBase } from '../../types.js'; -import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api'; -import { UmbBaseController } from '@umbraco-cms/backoffice/class-api'; -import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api'; -import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; -import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal'; - -export class UmbBlockTypeInputContext extends UmbBaseController { - #types = new UmbArrayState([], (type) => type.contentElementTypeKey); - types = this.#types.asObservable(); - - #blockTypeWorkspaceModalRegistration; - - constructor(host: UmbControllerHostElement, onWorkspaceRoutePathChanged: (routePath: string) => void) { - super(host, 'blockTypeInput'); - - this.#blockTypeWorkspaceModalRegistration = new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL) - .addAdditionalPath('block-type') - .onSetup(() => { - return { data: { entityType: 'block-type', preset: {} } }; - }) - .observeRouteBuilder((routeBuilder) => { - onWorkspaceRoutePathChanged(routeBuilder({})); - }); - } - - create() { - //TODO: make flow of picking a element type first, and then: - this.#blockTypeWorkspaceModalRegistration.open({}, 'create/element-type-key'); - // TODO: Move to on submit: - this.getHostElement().dispatchEvent(new UmbChangeEvent()); - } - - requestRemoveItem(contentTypeKey: string) { - alert('request remove ' + contentTypeKey); - this.getHostElement().dispatchEvent(new UmbChangeEvent()); - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts index 382f91c955..b9f1d26746 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts @@ -1,7 +1,9 @@ +import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal'; import { UmbBlockTypeBase } from '../../types.js'; -import { UmbBlockTypeInputContext } from './input-block-type.context.js'; import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; +import { appendToFrozenArray } from '@umbraco-cms/backoffice/observable-api'; @customElement('umb-input-block-type') export class UmbInputBlockTypeElement extends UmbLitElement { @@ -12,7 +14,7 @@ export class UmbInputBlockTypeElement(this, (workspacePath) => (this._workspacePath = workspacePath)); + #blockTypeWorkspaceModalRegistration; constructor() { super(); - this.observe(this.#context.types, (types) => { - const oldTypes = this._items; - this._items = types; - this.requestUpdate('_items', oldTypes); - }); + this.#blockTypeWorkspaceModalRegistration = new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL) + .addAdditionalPath('block-type') + .onSetup(() => { + return { data: { entityType: 'block-type', preset: {} } }; + }) + // Set to any, to overwrite TS, as the Modal Token does not know about the type of the data. (We could make a Modal Token specific for this type, or a way to cast it more properly, but I skipped this for now.) + .onSubmit((value: any) => { + console.log('got', value); + this._items = appendToFrozenArray(this._items, value, (x) => x.contentElementTypeKey); + }) + .observeRouteBuilder((routeBuilder) => { + const newpath = routeBuilder({}); + console.log('_workspacePath', newpath); + this._workspacePath = newpath; + }); + } + + create() { + //TODO: make flow of picking a element type first, and then: + this.#blockTypeWorkspaceModalRegistration.open({}, 'create/element-type-key'); + // TODO: Move to on submit: + this.getHostElement().dispatchEvent(new UmbChangeEvent()); + } + + requestRemoveItem(contentTypeKey: string) { + alert('request remove ' + contentTypeKey); + this.getHostElement().dispatchEvent(new UmbChangeEvent()); } protected getFormElement() { @@ -46,27 +70,27 @@ export class UmbInputBlockTypeElement this.#context.create()} label="open"> + this.create()} label="open"> Add `; } - #renderItem(item: BlockType) { + #renderItem = (item: BlockType) => { return html` - this.#context.requestRemoveItem(item.contentElementTypeKey)} label="Remove block"> + this.requestRemoveItem(item.contentElementTypeKey)} label="Remove block"> `; - } + }; static styles = [ css` diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts index ffb83641fd..4e7cb6bd46 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts @@ -87,12 +87,13 @@ export default class UmbBlockTypeWorkspaceContext