render create options

src/Umbraco.Web.UI.Client/src/packages/user/user/collection/action/create-user-collection-action.element.ts

@@ -1,13 +1,7 @@
-import { UMB_CREATE_USER_MODAL } from '../../modals/create/create-user-modal.token.js';
-import type { UmbUserKindType } from '../../utils/index.js';
-import { UmbUserKind } from '../../utils/index.js';
 import { html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
-import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity';
-import { UMB_ENTITY_CONTEXT } from '@umbraco-cms/backoffice/entity';
-import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action';
-import { UmbRequestReloadChildrenOfEntityEvent } from '@umbraco-cms/backoffice/entity-action';
+import { UmbExtensionsApiInitializer } from '@umbraco-cms/backoffice/extension-api';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 
 const elementName = 'umb-create-user-collection-action-button';
 @customElement(elementName)
@@ -15,83 +9,92 @@ export class UmbCollectionActionButtonElement extends UmbLitElement {
 	@state()
 	private _popoverOpen = false;
 
-	async #onClick(event: Event, kind: UmbUserKindType) {
-		event.stopPropagation();
-		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
-		const entityContext = await this.getContext(UMB_ENTITY_CONTEXT);
+	@state()
+	private _multipleOptions = false;
 
-		const unique = entityContext.getUnique();
-		const entityType = entityContext.getEntityType();
+	#apiControllers: Array<any> = [];
+	#createLabel = this.localize.term('general_create');
 
-		if (unique === undefined) throw new Error('Missing unique');
-		if (!entityType) throw new Error('Missing entityType');
-
-		const modalContext = modalManager.open(this, UMB_CREATE_USER_MODAL, {
-			data: {
-				user: {
-					kind,
-				},
-			},
-		});
-
-		modalContext
-			?.onSubmit()
-			.then(() => {
-				this.#requestReloadChildrenOfEntity({ entityType, unique });
-			})
-			.catch(async () => {
-				// modal is closed after creation instead of navigating to the new user.
-				// We therefore need to reload the children of the entity
-				this.#requestReloadChildrenOfEntity({ entityType, unique });
-			});
-	}
-
-	async #requestReloadChildrenOfEntity({ entityType, unique }: UmbEntityModel) {
-		const eventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT);
-		const event = new UmbRequestReloadChildrenOfEntityEvent({
-			entityType,
-			unique,
-		});
-
-		eventContext.dispatchEvent(event);
-	}
-
-	#onPopoverToggle(event: ToggleEvent) {
+	#onPopoverToggle(event: PointerEvent) {
 		// TODO: This ignorer is just neede for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-ignore
 		this._popoverOpen = event.newState === 'open';
 	}
 
-	override render() {
-		const label = this.localize.term('general_create');
+	async #onClick(event: Event, controller: any) {
+		event.stopPropagation();
+		await controller.api.execute();
+	}
 
+	constructor() {
+		super();
+
+		new UmbExtensionsApiInitializer(
+			this,
+			umbExtensionsRegistry,
+			'entityCreateOptionAction',
+			[],
+			undefined,
+			(controllers) => {
+				this.#apiControllers = controllers;
+				this._multipleOptions = controllers.length > 1;
+			},
+		);
+	}
+
+	override render() {
+		return this._multipleOptions ? this.#renderMultiOptionAction() : this.#renderSingleOptionAction();
+	}
+
+	#renderSingleOptionAction() {
+		return html` <uui-button
+			label=${this.#createLabel}
+			color="default"
+			look="outline"
+			@click=${(event: Event) => this.#onClick(event, this.#apiControllers[0])}></uui-button>`;
+	}
+
+	#renderMultiOptionAction() {
 		return html`
-			<uui-button popovertarget="collection-action-menu-popover" label=${label} color="default" look="outline">
-				${label}
+			<uui-button
+				popovertarget="collection-action-menu-popover"
+				label=${this.#createLabel}
+				color="default"
+				look="outline">
+				${this.#createLabel}
 				<uui-symbol-expand .open=${this._popoverOpen}></uui-symbol-expand>
 			</uui-button>
+			${this.#renderDropdown()}
+		`;
+	}
+
+	#renderDropdown() {
+		return html`
 			<uui-popover-container
 				id="collection-action-menu-popover"
 				placement="bottom-start"
 				@toggle=${this.#onPopoverToggle}>
 				<umb-popover-layout>
 					<uui-scroll-container>
-						<uui-menu-item
-							label=${this.localize.term('user_userKindDefault')}
-							@click=${(event: Event) => this.#onClick(event, UmbUserKind.DEFAULT)}>
-							<umb-icon slot="icon" name="icon-user"></umb-icon>
-						</uui-menu-item>
-						<uui-menu-item
-							label=${this.localize.term('user_userKindApi')}
-							@click=${(event: Event) => this.#onClick(event, UmbUserKind.API)}>
-							<umb-icon slot="icon" name="icon-unplug"></umb-icon>
-						</uui-menu-item>
+						${this.#apiControllers.map((controller) => this.#renderMenuItem(controller))}
 					</uui-scroll-container>
 				</umb-popover-layout>
 			</uui-popover-container>
 		`;
 	}
+
+	#renderMenuItem(controller: any) {
+		const label = controller.manifest.meta.label
+			? this.localize.string(controller.manifest.meta.label)
+			: controller.manifest.meta.name;
+
+		return html`
+			<uui-menu-item label=${label} @click=${(event: Event) => this.#onClick(event, controller)}>
+				<umb-icon slot="icon" name="icon-user"></umb-icon>
+			</uui-menu-item>
+		`;
+	}
 }
 
 export { UmbCollectionActionButtonElement as element };