diff --git a/src/Umbraco.Web.UI.Client/src/libs/context-api/consume/context-consumer.ts b/src/Umbraco.Web.UI.Client/src/libs/context-api/consume/context-consumer.ts index e4cbaacc6e..e737275ae2 100644 --- a/src/Umbraco.Web.UI.Client/src/libs/context-api/consume/context-consumer.ts +++ b/src/Umbraco.Web.UI.Client/src/libs/context-api/consume/context-consumer.ts @@ -91,9 +91,10 @@ export class UmbContextConsumer( + 'UmbWorkspaceContext', + undefined, + (context): context is UmbPropertyTypeWorkspaceContext => context.getEntityType() === 'property-type', +); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/property-type-settings/property-type-settings-modal.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/property-type-settings/property-type-settings-modal.context.ts index 76c94f8483..708329c498 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/property-type-settings/property-type-settings-modal.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/property-type-settings/property-type-settings-modal.context.ts @@ -1,7 +1,12 @@ +import { UMB_PROPERTY_TYPE_WORKSPACE_CONTEXT } from './property-type-settings-modal.context-token.js'; +import type { + UmbPropertyTypeSettingsModalData, + UmbPropertyTypeSettingsModalValue, +} from './property-type-settings-modal.token.js'; import type { UmbWorkspaceContext } from '@umbraco-cms/backoffice/workspace'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; +import { UMB_MODAL_CONTEXT, type UmbModalContext } from '@umbraco-cms/backoffice/modal'; export const UMB_PROPERTY_TYPE_WORKSPACE_ALIAS = 'Umb.Workspace.PropertyType'; @@ -12,8 +17,14 @@ export class UmbPropertyTypeWorkspaceContext extends UmbContextBase implements UmbWorkspaceContext { + #modal?: UmbModalContext; + constructor(host: UmbControllerHost) { super(host, UMB_PROPERTY_TYPE_WORKSPACE_CONTEXT); + + this.consumeContext(UMB_MODAL_CONTEXT, (context) => { + this.#modal = context as UmbModalContext; + }); } get workspaceAlias() { @@ -21,21 +32,16 @@ export class UmbPropertyTypeWorkspaceContext } getUnique() { - return undefined; + return this.#modal?.getValue()?.alias ?? ''; } getEntityType() { return 'property-type'; } + + getLabel() { + return this.#modal?.getValue()?.name ?? ''; + } } export default UmbPropertyTypeWorkspaceContext; - -export const UMB_PROPERTY_TYPE_WORKSPACE_CONTEXT = new UmbContextToken< - UmbWorkspaceContext, - UmbPropertyTypeWorkspaceContext ->( - 'UmbWorkspaceContext', - undefined, - (context): context is UmbPropertyTypeWorkspaceContext => context.getEntityType() === 'property-type', -); diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts index 8c3c42f62b..8f219a0ae4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts @@ -15,7 +15,10 @@ import type { UmbDataTypeItemModel } from '@umbraco-cms/backoffice/data-type'; import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/modal'; import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; import { umbFocus } from '@umbraco-cms/backoffice/lit-element'; -import { UMB_CONTENT_TYPE_WORKSPACE_CONTEXT, UMB_PROPERTY_TYPE_CONTEXT } from '@umbraco-cms/backoffice/content-type'; +import { + UMB_CONTENT_TYPE_WORKSPACE_CONTEXT, + UMB_PROPERTY_TYPE_WORKSPACE_CONTEXT, +} from '@umbraco-cms/backoffice/content-type'; interface GroupedItems { [key: string]: Array; @@ -25,6 +28,8 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement< UmbDataTypePickerFlowModalData, UmbDataTypePickerFlowModalValue > { + #initPromise!: Promise; + public set data(value: UmbDataTypePickerFlowModalData) { super.data = value; this._submitLabel = this.data?.submitLabel ?? this._submitLabel; @@ -42,7 +47,7 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement< @state() private _dataTypePickerModalRouteBuilder?: UmbModalRouteBuilder; - private _createDataTypeModal: UmbModalRouteRegistrationController; + private _createDataTypeModal!: UmbModalRouteRegistrationController; #collectionRepository; #dataTypes: Array = []; @@ -53,6 +58,37 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement< super(); this.#collectionRepository = new UmbDataTypeCollectionRepository(this); + this.#init(); + } + + private _createDataType(propertyEditorUiAlias: string) { + // TODO: Could be nice with a more pretty way to prepend to the URL: + // Open create modal: + console.log('_createDataType', propertyEditorUiAlias); + this._createDataTypeModal.open( + { uiAlias: propertyEditorUiAlias }, + `create/parent/${UMB_DATA_TYPE_ENTITY_TYPE}/null`, + ); + } + + async #init() { + this.#initPromise = Promise.all([ + this.observe( + (await this.#collectionRepository.requestCollection({ skip: 0, take: 100 })).asObservable(), + (dataTypes) => { + this.#dataTypes = dataTypes; + this._performFiltering(); + }, + '_repositoryItemsObserver', + ).asPromise(), + this.observe(umbExtensionsRegistry.byType('propertyEditorUi'), (propertyEditorUIs) => { + // Only include Property Editor UIs which has Property Editor Schema Alias + this.#propertyEditorUIs = propertyEditorUIs.filter( + (propertyEditorUi) => !!propertyEditorUi.meta.propertyEditorSchemaAlias, + ); + this._performFiltering(); + }).asPromise(), + ]); new UmbModalRouteRegistrationController(this, UMB_DATA_TYPE_PICKER_FLOW_DATA_TYPE_PICKER_MODAL) .addAdditionalPath(':uiAlias') @@ -81,14 +117,15 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement< .addAdditionalPath(':uiAlias') .onSetup(async (params) => { const contentContextConsumer = this.consumeContext(UMB_CONTENT_TYPE_WORKSPACE_CONTEXT, () => { - //this.removeUmbController(contentContextConsumer); + this.removeUmbController(contentContextConsumer); }).passContextAliasMatches(); - const propContextConsumer = this.consumeContext(UMB_PROPERTY_TYPE_CONTEXT, () => { - //this.removeUmbController(propContextConsumer); + const propContextConsumer = this.consumeContext(UMB_PROPERTY_TYPE_WORKSPACE_CONTEXT, () => { + this.removeUmbController(propContextConsumer); }).passContextAliasMatches(); const [contentContext, propContext] = await Promise.all([ contentContextConsumer.asPromise(), propContextConsumer.asPromise(), + this.#initPromise, ]); const propertyEditorName = this.#propertyEditorUIs.find((ui) => ui.alias === params.uiAlias)?.name; const dataTypeName = `${contentContext?.getName() ?? ''} - ${propContext.getLabel() ?? ''} - ${propertyEditorName}`; @@ -104,36 +141,6 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement< this._select(value?.unique); this._submitModal(); }); - - this.#init(); - } - - private _createDataType(propertyEditorUiAlias: string) { - // TODO: Could be nice with a more pretty way to prepend to the URL: - // Open create modal: - this._createDataTypeModal.open( - { uiAlias: propertyEditorUiAlias }, - `create/parent/${UMB_DATA_TYPE_ENTITY_TYPE}/null`, - ); - } - - async #init() { - this.observe( - (await this.#collectionRepository.requestCollection({ skip: 0, take: 100 })).asObservable(), - (dataTypes) => { - this.#dataTypes = dataTypes; - this._performFiltering(); - }, - '_repositoryItemsObserver', - ); - - this.observe(umbExtensionsRegistry.byType('propertyEditorUi'), (propertyEditorUIs) => { - // Only include Property Editor UIs which has Property Editor Schema Alias - this.#propertyEditorUIs = propertyEditorUIs.filter( - (propertyEditorUi) => !!propertyEditorUi.meta.propertyEditorSchemaAlias, - ); - this._performFiltering(); - }); } private _handleDataTypeClick(dataType: UmbDataTypeItemModel) {