add create member entity action

Author: madsrasmussen

src/packages/members/member/entity-actions/create/create.action.ts

@@ -0,0 +1,19 @@
+import { UMB_MEMBER_CREATE_OPTIONS_MODAL } from './member-create-options-modal.token.js';
+import type { UmbEntityActionArgs } from '@umbraco-cms/backoffice/entity-action';
+import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
+
+export class UmbCreateMemberEntityAction extends UmbEntityActionBase<never> {
+	constructor(host: UmbControllerHost, args: UmbEntityActionArgs<never>) {
+		super(host, args);
+	}
+
+	override async execute() {
+		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
+		const modalContext = modalManager.open(this, UMB_MEMBER_CREATE_OPTIONS_MODAL);
+		await modalContext.onSubmit();
+	}
+}
+
+export { UmbCreateMemberEntityAction as api };

src/packages/members/member/entity-actions/create/manifests.ts

@@ -0,0 +1,29 @@
+import { UMB_MEMBER_ROOT_ENTITY_TYPE } from '../../entity.js';
+import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
+
+const entityActions: Array<ManifestTypes> = [
+	{
+		type: 'entityAction',
+		kind: 'default',
+		alias: 'Umb.EntityAction.Member.Create',
+		name: 'Create Member Entity Action',
+		weight: 1200,
+		api: () => import('./create.action.js'),
+		forEntityTypes: [UMB_MEMBER_ROOT_ENTITY_TYPE],
+		meta: {
+			icon: 'icon-add',
+			label: '#actions_create',
+		},
+	},
+];
+
+const modals: Array<ManifestTypes> = [
+	{
+		type: 'modal',
+		alias: 'Umb.Modal.Member.CreateOptions',
+		name: 'Member Create Options Modal',
+		js: () => import('./member-create-options-modal.element.js'),
+	},
+];
+
+export const manifests: Array<ManifestTypes> = [...entityActions, ...modals];

src/packages/members/member/entity-actions/create/member-create-options-modal.element.ts

@@ -0,0 +1,105 @@
+import type {
+	UmbMemberCreateOptionsModalData,
+	UmbMemberCreateOptionsModalValue,
+} from './member-create-options-modal.token.js';
+import { html, customElement, state, repeat, css } from '@umbraco-cms/backoffice/external/lit';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
+
+import { UmbMemberTypeTreeRepository } from '@umbraco-cms/backoffice/member-type';
+import { UMB_CREATE_MEMBER_WORKSPACE_PATH_PATTERN, UMB_MEMBER_WORKSPACE_PATH } from '../../paths.js';
+
+const elementName = 'umb-member-create-options-modal';
+@customElement(elementName)
+export class UmbMemberCreateOptionsModalElement extends UmbModalBaseElement<
+	UmbMemberCreateOptionsModalData,
+	UmbMemberCreateOptionsModalValue
+> {
+	@state()
+	private _options: Array<{ label: string; unique: string; icon: string }> = [];
+
+	#memberTypeTreeRepository = new UmbMemberTypeTreeRepository(this);
+
+	override firstUpdated() {
+		this.#getOptions();
+	}
+
+	async #getOptions() {
+		//TODO: Should we use the tree repository or make a collection repository?
+		//TODO: And how would we get all the member types?
+		//TODO: This only works because member types can't have folders.
+		const { data } = await this.#memberTypeTreeRepository.requestTreeRootItems({});
+		if (!data) return;
+
+		this._options = data.items.map((item) => {
+			return {
+				label: item.name,
+				unique: item.unique,
+				icon: item.icon || '',
+			};
+		});
+	}
+
+	// close the modal when navigating
+	#onOpen(event: Event, unique: string) {
+		event?.stopPropagation();
+		// TODO: the href does not emit an event, so we need to use the click event
+		const path = UMB_CREATE_MEMBER_WORKSPACE_PATH_PATTERN.generateAbsolute({
+			memberTypeUnique: unique,
+		});
+		history.pushState(null, '', path);
+		this._submitModal();
+	}
+
+	override render() {
+		return html`
+			<umb-body-layout headline=${this.localize.term('actions_create')}>
+				${this.#renderOptions()}
+				<uui-button
+					slot="actions"
+					id="cancel"
+					label=${this.localize.term('general_cancel')}
+					@click="${this._rejectModal}"></uui-button>
+			</umb-body-layout>
+		`;
+	}
+
+	#renderOptions() {
+		return html`
+			<uui-box>
+				${repeat(
+					this._options,
+					(option) => option.unique,
+					(option) => html`
+						<uui-ref-node
+							.name=${this.localize.string(option.label)}
+							@open=${(event) => this.#onOpen(event, option.unique)}>
+							<umb-icon slot="icon" name=${option.icon || 'icon-circle-dotted'}></umb-icon>
+						</uui-ref-node>
+					`,
+				)}
+			</uui-box>
+		`;
+	}
+
+	static override styles = [
+		UmbTextStyles,
+		css`
+			#blank {
+				border-bottom: 1px solid var(--uui-color-border);
+			}
+
+			#edit-permissions {
+				margin-top: var(--uui-size-6);
+			}
+		`,
+	];
+}
+
+export { UmbMemberCreateOptionsModalElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		[elementName]: UmbMemberCreateOptionsModalElement;
+	}
+}

src/packages/members/member/entity-actions/create/member-create-options-modal.token.ts

@@ -0,0 +1,17 @@
+import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface UmbMemberCreateOptionsModalData {}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface UmbMemberCreateOptionsModalValue {}
+
+export const UMB_MEMBER_CREATE_OPTIONS_MODAL = new UmbModalToken<
+	UmbMemberCreateOptionsModalData,
+	UmbMemberCreateOptionsModalValue
+>('Umb.Modal.Member.CreateOptions', {
+	modal: {
+		type: 'sidebar',
+		size: 'small',
+	},
+});

src/packages/members/member/entity-actions/manifests.ts

@@ -1,8 +1,8 @@
 import { UMB_MEMBER_DETAIL_REPOSITORY_ALIAS, UMB_MEMBER_ITEM_REPOSITORY_ALIAS } from '../repository/index.js';
 import { UMB_MEMBER_ENTITY_TYPE } from '../entity.js';
-import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
+import { manifests as createManifests } from './create/manifests.js';
 
-const entityActions: Array<ManifestTypes> = [
+export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'entityAction',
 		kind: 'delete',
@@ -14,6 +14,5 @@ const entityActions: Array<ManifestTypes> = [
 			itemRepositoryAlias: UMB_MEMBER_ITEM_REPOSITORY_ALIAS,
 		},
 	},
+	...createManifests,
 ];
-
-export const manifests: Array<ManifestTypes> = [...entityActions];

src/packages/members/member/paths.ts

@@ -1,3 +1,4 @@
+import { UmbPathPattern } from '@umbraco-cms/backoffice/router';
 import { UMB_MEMBER_MANAGEMENT_SECTION_PATHNAME } from '../section/paths.js';
 import { UMB_MEMBER_ENTITY_TYPE, UMB_MEMBER_ROOT_ENTITY_TYPE } from './entity.js';
 import { UMB_WORKSPACE_PATH_PATTERN } from '@umbraco-cms/backoffice/workspace';
@@ -11,3 +12,7 @@ export const UMB_MEMBER_ROOT_WORKSPACE_PATH = UMB_WORKSPACE_PATH_PATTERN.generat
 	sectionName: UMB_MEMBER_MANAGEMENT_SECTION_PATHNAME,
 	entityType: UMB_MEMBER_ROOT_ENTITY_TYPE,
 });
+
+export const UMB_CREATE_MEMBER_WORKSPACE_PATH_PATTERN = new UmbPathPattern<{
+	memberTypeUnique: string;
+}>('create/:memberTypeUnique', UMB_MEMBER_WORKSPACE_PATH);