From a3f28906721fbf98161a85a7e0fee8380a15ae3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 20 Dec 2023 22:13:59 +0100 Subject: [PATCH] working context api proxy --- .../input-block-type.element.ts | 6 ---- .../workspace/block-type-workspace.context.ts | 32 +++++++++++-------- .../block-type/workspace/views/manifests.ts | 6 ++-- .../backoffice-modal-container.element.ts | 4 +-- .../modal-route-registration.controller.ts | 5 +++ .../core/modal/modal-route-registration.ts | 24 +++++++++----- .../src/packages/core/modal/modal.context.ts | 4 +++ .../src/packages/core/modal/modal.element.ts | 21 +++++++++++- .../property/property/property.context.ts | 12 +++++++ 9 files changed, 81 insertions(+), 33 deletions(-) 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 b9f1d26746..ced57a5bc1 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 @@ -33,14 +33,8 @@ export class UmbInputBlockTypeElement { 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; }); } 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 4e7cb6bd46..4b9bd720da 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 @@ -1,12 +1,12 @@ import type { UmbBlockTypeBase } from '../types.js'; -import { UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property'; +import { UMB_PROPERTY_CONTEXT, UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property'; import { UmbInvariantableWorkspaceContextInterface, UmbEditableWorkspaceContextBase, UmbWorkspaceContextInterface, UmbInvariantWorkspacePropertyDatasetContext, } from '@umbraco-cms/backoffice/workspace'; -import { UmbArrayState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api'; +import { UmbArrayState, UmbObjectState, appendToFrozenArray } from '@umbraco-cms/backoffice/observable-api'; import { UmbControllerHost, UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api'; import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; import { PropertyEditorConfigProperty } from '@umbraco-cms/backoffice/extension-registry'; @@ -36,22 +36,19 @@ export default class UmbBlockTypeWorkspaceContext { + this.observe(context.value, (value) => { + console.log('Got value from prop', value); + }); + }); } async create(contentElementTypeId: string) { - console.log('Contenxt Create', contentElementTypeId); - let data: BlockTypeData = { + const data: BlockTypeData = { contentElementTypeKey: contentElementTypeId, } as BlockTypeData; - if (this.modalContext) { - data = { ...data, ...this.modalContext.data.preset }; - } + this.setIsNew(true); this.#data.next(data); return { data }; @@ -94,6 +91,15 @@ export default class UmbBlockTypeWorkspaceContext { + // TODO: We should most likely consume already, in this way I avoid having the reset this consumption. + context.setValue( + appendToFrozenArray(context.getValue() ?? [], this.#data.getValue(), (x) => x?.contentElementTypeKey), + ); + }); + this.saveComplete(this.#data.value); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/views/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/views/manifests.ts index fde92a07e4..307a9abf89 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/views/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/views/manifests.ts @@ -5,11 +5,11 @@ import type { ManifestWorkspaceAction, ManifestWorkspaceView } from '@umbraco-cm const workspaceActions: Array = [ { type: 'workspaceAction', - alias: 'Umb.WorkspaceAction.DataType.Save', - name: 'Save Data Type Workspace Action', + alias: 'Umb.WorkspaceAction.BlockType.Save', + name: 'Save Block Type Workspace Action', api: UmbSaveWorkspaceAction, meta: { - label: 'Save', + label: 'Submit', look: 'primary', color: 'positive', }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/backoffice-modal-container/backoffice-modal-container.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/backoffice-modal-container/backoffice-modal-container.element.ts index 1306f34051..90c6671e3a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/backoffice-modal-container/backoffice-modal-container.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/backoffice-modal-container/backoffice-modal-container.element.ts @@ -32,8 +32,8 @@ export class UmbBackofficeModalContainerElement extends UmbLitElement { this.observe(this._modalManager.modals, (modals) => this.#createModalElements(modals)); } - /** We cannot render the umb-modal element directly in the uui-modal-container because it wont get reconised by UUI. - * We therefore have a helper class which creates the uui-modal element and returns it. */ + /** We cannot render the umb-modal element directly in the uui-modal-container because it wont get recognized by UUI. + * We therefore have a helper class which creates the uui-modal element and returns it. */ #createModalElements(modals: Array) { this._modals = modals; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.controller.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.controller.ts index 6193733185..dd138126db 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.controller.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.controller.ts @@ -9,6 +9,7 @@ export class UmbModalRouteRegistrationController | string) { super(alias, null); + this.#host = host; this.#init = new UmbContextConsumerController(host, UMB_ROUTE_CONTEXT_TOKEN, (_routeContext) => { this.#routeContext = _routeContext; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts index 1be60b13e0..2311801ad2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/modal-route-registration.ts @@ -34,10 +34,17 @@ export class UmbModalRouteRegistration void; #onRejectCallback?: () => void; - #modalManagerContext: UmbModalContext | undefined; + #modalContext: UmbModalContext | undefined; #routeBuilder?: UmbModalRouteBuilder; #urlBuilderCallback: ((urlBuilder: UmbModalRouteBuilder) => void) | undefined; + /** + * Should returns the host element of the modal, but this simple registration is not capable of that. So it has to be overwritten by a more specific implementation. + */ + protected getControllerHostElement(): EventTarget | undefined { + return undefined; + } + // Notice i removed the key in the transferring to this class. constructor(modalAlias: UmbModalToken | string, path: string | null = null) { this.#key = UmbId.new(); @@ -69,7 +76,7 @@ export class UmbModalRouteRegistration void) { @@ -116,11 +123,11 @@ export class UmbModalRouteRegistration { this.#onSubmitCallback?.(data); - this.#modalManagerContext = undefined; + this.#modalContext = undefined; }; #onReject = () => { this.#onRejectCallback?.(); - this.#modalManagerContext = undefined; + this.#modalContext = undefined; }; async routeSetup(router: IRouterSlot, modalManagerContext: UmbModalManagerContext, params: Params) { @@ -133,12 +140,13 @@ export class UmbModalRouteRegistration extends EventTarget { + // #submitPromise: Promise; #submitResolver?: (value: ModalValue) => void; #submitRejecter?: (reason?: UmbModalRejectReason) => void; @@ -31,6 +33,7 @@ export class UmbModalContext; #value; @@ -43,6 +46,7 @@ export class UmbModalContext { + if (!this.#modalContext) return; + if (this.#modalContext.originTarget) { + event.stopPropagation(); + const clonedEvent = new UmbContextRequestEventImplementation( + event.contextAlias, + event.apiAlias, + event.callback, + ); + this.#modalContext.originTarget.dispatchEvent(clonedEvent); + } + }) as EventListener); + } this.#modalContext.onSubmit().then( () => { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.context.ts index 21bb1b1517..6a67faa405 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.context.ts @@ -113,11 +113,23 @@ export class UmbPropertyContext extends UmbBaseController { public setDescription(description: WorkspacePropertyData['description']) { this.#data.update({ description }); } + /** + * Set the value of this property. + * @param value {ValueType} the whole value to be set + */ public setValue(value: WorkspacePropertyData['value']) { const alias = this.#data.getValue().alias; if (!this.#datasetContext || !alias) return; this.#datasetContext?.setPropertyValue(alias, value); } + /** + * Gets the current value of this property. + * Notice this is not reactive, you should us the `value` observable for that. + * @returns {ValueType} + */ + public getValue(): WorkspacePropertyData['value'] { + return this.#data.getValue().value; + } public setConfig(config: WorkspacePropertyData['config'] | undefined) { this.#data.update({ config }); }