yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

life cycle update fix

Browse Source
This commit is contained in:
Niels Lyngsø
2024-04-30 10:21:44 +02:00
parent 7313c4260b
commit 21f1bc6e6d
5 changed files with 76 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/Umbraco.Web.UI.Client/src/libs/context-api/consume/context-consumer.ts
View File

@@ -91,9 +91,10 @@ export class UmbContextConsumer<BaseType = unknown, ResultType extends BaseType
protected setInstance(instance: ResultType): void {
this.#instance = instance;
this.#callback?.(instance);
if (instance !== undefined) {
this.#promiseResolver?.(instance);
const promiseResolver = this.#promiseResolver; // Get the promise resolver, as it might be destroyed as a reaction of the callback [NL]
this.#callback?.(instance); // Resolve callback first as it might perform something you like completed before resolving the promise, as the promise might be used to determine when things are ready/initiated [NL]
if (promiseResolver && instance !== undefined) {
promiseResolver(instance);
this.#promise = undefined;
}
}

1
src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/index.ts
View File

@@ -1,2 +1,3 @@
export * from './composition-picker/composition-picker-modal.token.js';
export * from './property-type-settings/property-type-settings-modal.token.js';
export * from './property-type-settings/property-type-settings-modal.context-token.js';

12
src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/property-type-settings/property-type-settings-modal.context-token.ts Normal file
View File

@@ -0,0 +1,12 @@
import type { UmbPropertyTypeWorkspaceContext } from './property-type-settings-modal.context.js';
import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
import type { UmbWorkspaceContext } from '@umbraco-cms/backoffice/workspace';
export const UMB_PROPERTY_TYPE_WORKSPACE_CONTEXT = new UmbContextToken<
UmbWorkspaceContext,
UmbPropertyTypeWorkspaceContext
>(
'UmbWorkspaceContext',
undefined,
(context): context is UmbPropertyTypeWorkspaceContext => context.getEntityType() === 'property-type',
);

28
src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/property-type-settings/property-type-settings-modal.context.ts
View File

@@ -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<UmbPropertyTypeWorkspaceContext>
implements UmbWorkspaceContext
{
#modal?: UmbModalContext<UmbPropertyTypeSettingsModalData, UmbPropertyTypeSettingsModalValue>;
constructor(host: UmbControllerHost) {
super(host, UMB_PROPERTY_TYPE_WORKSPACE_CONTEXT);
this.consumeContext(UMB_MODAL_CONTEXT, (context) => {
this.#modal = context as UmbModalContext<UmbPropertyTypeSettingsModalData, UmbPropertyTypeSettingsModalValue>;
});
}
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',
);

77
src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts
View File

@@ -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<T> {
[key: string]: Array<T>;
@@ -25,6 +28,8 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement<
UmbDataTypePickerFlowModalData,
UmbDataTypePickerFlowModalValue
> {
#initPromise!: Promise<unknown>;
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<UmbDataTypeItemModel> = [];
@@ -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) {