Member Type Root Collection View / Workspace

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

@@ -1,15 +1,14 @@
-import { html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type { UmbExtensionApiInitializer } from '@umbraco-cms/backoffice/extension-api';
-import { UmbExtensionsApiInitializer } from '@umbraco-cms/backoffice/extension-api';
+import { customElement, html, ifDefined, state } from '@umbraco-cms/backoffice/external/lit';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { UmbExtensionsApiInitializer } from '@umbraco-cms/backoffice/extension-api';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UMB_ENTITY_CONTEXT } from '@umbraco-cms/backoffice/entity';
 import type { ManifestEntityCreateOptionAction } from '@umbraco-cms/backoffice/entity-create-option-action';
+import type { UmbExtensionApiInitializer } from '@umbraco-cms/backoffice/extension-api';
 
 type ManifestType = ManifestEntityCreateOptionAction;
 
-const elementName = 'umb-collection-create-action-button';
-@customElement(elementName)
+@customElement('umb-collection-create-action-button')
 export class UmbCollectionCreateActionButtonElement extends UmbLitElement {
 	@state()
 	private _popoverOpen = false;
@@ -58,7 +57,7 @@ export class UmbCollectionCreateActionButtonElement extends UmbLitElement {
 		if (!this.#entityContext) return;
 
 		const entityType = this.#entityContext.getEntityType();
-		if (!entityType) throw new Error('No entityType found');
+		if (!entityType) throw new Error('No entity type found');
 
 		const unique = this.#entityContext.getUnique();
 		if (unique === undefined) throw new Error('No unique found');
@@ -93,11 +92,16 @@ export class UmbCollectionCreateActionButtonElement extends UmbLitElement {
 	}
 
 	#renderSingleOptionAction() {
-		return html` <uui-button
-			label=${this.#createLabel}
-			color="default"
-			look="outline"
-			@click=${(event: Event) => this.#onClick(event, this._apiControllers[0])}></uui-button>`;
+		const href = this._hrefList[0];
+		return html`
+			<uui-button
+				label=${this.#createLabel}
+				color="default"
+				look="outline"
+				href=${ifDefined(href)}
+				target=${this.#getTarget(href)}
+				@click=${(event: Event) => this.#onClick(event, this._apiControllers[0], href)}></uui-button>
+		`;
 	}
 
 	#renderMultiOptionAction() {
@@ -139,9 +143,9 @@ export class UmbCollectionCreateActionButtonElement extends UmbLitElement {
 		return html`
 			<uui-menu-item
 				label=${label}
-				@click=${(event: Event) => this.#onClick(event, controller, href)}
 				href=${ifDefined(href)}
-				target=${this.#getTarget(href)}>
+				target=${this.#getTarget(href)}
+				@click=${(event: Event) => this.#onClick(event, controller, href)}>
 				<umb-icon slot="icon" .name=${manifest.meta.icon}></umb-icon>
 			</uui-menu-item>
 		`;
@@ -152,6 +156,6 @@ export { UmbCollectionCreateActionButtonElement as element };
 
 declare global {
 	interface HTMLElementTagNameMap {
-		[elementName]: UmbCollectionCreateActionButtonElement;
+		'umb-collection-create-action-button': UmbCollectionCreateActionButtonElement;
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/members/member-type/constants.ts

@@ -1,4 +1,5 @@
 export * from './entity-actions/constants.js';
+export * from './member-type-root/constants.js';
 export * from './paths.js';
 export * from './property-type/constants.js';
 export * from './repository/constants.js';

src/Umbraco.Web.UI.Client/src/packages/members/member-type/entity-actions/manifests.ts

@@ -1,7 +1,7 @@
 import { UMB_MEMBER_TYPE_DETAIL_REPOSITORY_ALIAS, UMB_MEMBER_TYPE_ITEM_REPOSITORY_ALIAS } from '../constants.js';
 import { UMB_MEMBER_TYPE_ENTITY_TYPE } from '../entity.js';
-import { manifests as duplicateManifests } from './duplicate/manifests.js';
 import { manifests as createManifests } from './create/manifests.js';
+import { manifests as duplicateManifests } from './duplicate/manifests.js';
 import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
 
 export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [

src/Umbraco.Web.UI.Client/src/packages/members/member-type/entity.ts

@@ -1,5 +1,5 @@
-export const UMB_MEMBER_TYPE_ROOT_ENTITY_TYPE = 'member-type-root';
 export const UMB_MEMBER_TYPE_ENTITY_TYPE = 'member-type';
+export const UMB_MEMBER_TYPE_ROOT_ENTITY_TYPE = 'member-type-root';
 
 export type UmbMemberTypeEntityType = typeof UMB_MEMBER_TYPE_ENTITY_TYPE;
 export type UmbMemberTypeRootEntityType = typeof UMB_MEMBER_TYPE_ROOT_ENTITY_TYPE;

src/Umbraco.Web.UI.Client/src/packages/members/member-type/index.ts

@@ -2,8 +2,10 @@ import './components/index.js';
 
 export * from './components/index.js';
 export * from './constants.js';
+export * from './member-type-root/index.js';
 export * from './modal/member-type-picker-modal.token.js';
 export * from './repository/index.js';
 export * from './tree/index.js';
 export * from './workspace/constants.js';
+
 export type * from './types.js';

src/Umbraco.Web.UI.Client/src/packages/members/member-type/manifests.ts

@@ -1,16 +1,19 @@
 import { manifests as entityActionsManifests } from './entity-actions/manifests.js';
+import { manifests as memberTypeRootManifests } from './member-type-root/manifests.js';
 import { manifests as menuManifests } from './menu/manifests.js';
 import { manifests as propertyTypeManifests } from './property-type/manifests.js';
 import { manifests as repositoryManifests } from './repository/manifests.js';
 import { manifests as searchManifests } from './search/manifests.js';
 import { manifests as treeManifests } from './tree/manifests.js';
 import { manifests as workspaceManifests } from './workspace/manifests.js';
+
 import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
 
 import './components/index.js';
 
 export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
 	...entityActionsManifests,
+	...memberTypeRootManifests,
 	...menuManifests,
 	...propertyTypeManifests,
 	...repositoryManifests,

src/Umbraco.Web.UI.Client/src/packages/members/member-type/member-type-root/constants.ts

@@ -0,0 +1 @@
+export const UMB_MEMBER_TYPE_ROOT_WORKSPACE_ALIAS = 'Umb.Workspace.MemberType.Root';

src/Umbraco.Web.UI.Client/src/packages/members/member-type/member-type-root/index.ts

@@ -0,0 +1 @@
+export * from './constants.js';

src/Umbraco.Web.UI.Client/src/packages/members/member-type/member-type-root/manifests.ts

@@ -0,0 +1,14 @@
+import { UMB_MEMBER_TYPE_ROOT_ENTITY_TYPE } from '../entity.js';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'workspace',
+		kind: 'default',
+		alias: 'Umb.Workspace.MemberType.Root',
+		name: 'Member Type Root Workspace',
+		meta: {
+			entityType: UMB_MEMBER_TYPE_ROOT_ENTITY_TYPE,
+			headline: '#treeHeaders_memberTypes',
+		},
+	},
+];

src/Umbraco.Web.UI.Client/src/packages/members/member-type/tree/constants.ts

@@ -1,4 +1,7 @@
 export const UMB_MEMBER_TYPE_TREE_REPOSITORY_ALIAS = 'Umb.Repository.MemberType.Tree';
 export const UMB_MEMBER_TYPE_TREE_STORE_ALIAS = 'Umb.Store.MemberType.Tree';
 export const UMB_MEMBER_TYPE_TREE_ALIAS = 'Umb.Tree.MemberType';
+
 export { UMB_MEMBER_TYPE_TREE_STORE_CONTEXT } from './member-type-tree.store.context-token.js';
+
+export * from './tree-item-children/constants.js';

src/Umbraco.Web.UI.Client/src/packages/members/member-type/tree/manifests.ts

@@ -1,10 +1,12 @@
+import { UMB_MEMBER_TYPE_ROOT_WORKSPACE_ALIAS } from '../constants.js';
 import { UMB_MEMBER_TYPE_ENTITY_TYPE, UMB_MEMBER_TYPE_ROOT_ENTITY_TYPE } from '../entity.js';
 import {
 	UMB_MEMBER_TYPE_TREE_ALIAS,
+	UMB_MEMBER_TYPE_TREE_ITEM_CHILDREN_COLLECTION_ALIAS,
 	UMB_MEMBER_TYPE_TREE_REPOSITORY_ALIAS,
 	UMB_MEMBER_TYPE_TREE_STORE_ALIAS,
 } from './constants.js';
-import { manifests as reloadTreeItemChildrenManifest } from './reload-tree-item-children/manifests.js';
+import { manifests as treeItemChildrenManifest } from './tree-item-children/manifests.js';
 
 export const manifests: Array<UmbExtensionManifest> = [
 	{
@@ -36,14 +38,22 @@ export const manifests: Array<UmbExtensionManifest> = [
 		forEntityTypes: [UMB_MEMBER_TYPE_ROOT_ENTITY_TYPE, UMB_MEMBER_TYPE_ENTITY_TYPE],
 	},
 	{
-		type: 'workspace',
-		kind: 'default',
-		alias: 'Umb.Workspace.MemberType.Root',
-		name: 'Member Type Root Workspace',
+		type: 'workspaceView',
+		kind: 'collection',
+		alias: 'Umb.WorkspaceView.MemberType.TreeItemChildrenCollection',
+		name: 'Member Type Tree Item Children Collection Workspace View',
 		meta: {
-			entityType: UMB_MEMBER_TYPE_ROOT_ENTITY_TYPE,
-			headline: '#treeHeaders_memberTypes',
+			label: '#general_design',
+			pathname: 'design',
+			icon: 'icon-member-dashed-line',
+			collectionAlias: UMB_MEMBER_TYPE_TREE_ITEM_CHILDREN_COLLECTION_ALIAS,
 		},
+		conditions: [
+			{
+				alias: 'Umb.Condition.WorkspaceAlias',
+				oneOf: [UMB_MEMBER_TYPE_ROOT_WORKSPACE_ALIAS],
+			},
+		],
 	},
-	...reloadTreeItemChildrenManifest,
+	...treeItemChildrenManifest,
 ];

src/Umbraco.Web.UI.Client/src/packages/members/member-type/tree/tree-item-children/collection/action/manifests.ts

@@ -0,0 +1,17 @@
+import { UMB_MEMBER_TYPE_TREE_ITEM_CHILDREN_COLLECTION_ALIAS } from '../constants.js';
+import { UMB_COLLECTION_ALIAS_CONDITION } from '@umbraco-cms/backoffice/collection';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'collectionAction',
+		kind: 'create',
+		alias: 'Umb.CollectionAction.MemberTypeTreeItemChildren.Create',
+		name: 'Member Type Tree Item Children Collection Create Action',
+		conditions: [
+			{
+				alias: UMB_COLLECTION_ALIAS_CONDITION,
+				match: UMB_MEMBER_TYPE_TREE_ITEM_CHILDREN_COLLECTION_ALIAS,
+			},
+		],
+	},
+];

src/Umbraco.Web.UI.Client/src/packages/members/member-type/tree/tree-item-children/collection/constants.ts

@@ -0,0 +1,2 @@
+export const UMB_MEMBER_TYPE_TREE_ITEM_CHILDREN_COLLECTION_ALIAS = 'Umb.Collection.MemberType.TreeItemChildren';
+export * from './repository/constants.js';

src/Umbraco.Web.UI.Client/src/packages/members/member-type/tree/tree-item-children/collection/index.ts

@@ -0,0 +1,2 @@
+export * from './constants.js';
+export * from './repository/index.js';

src/Umbraco.Web.UI.Client/src/packages/members/member-type/tree/tree-item-children/collection/manifests.ts

@@ -0,0 +1,20 @@
+import { manifests as actionManifests } from './action/manifests.js';
+import { manifests as repositoryManifests } from './repository/manifests.js';
+import { manifests as viewManifests } from './views/manifests.js';
+import { UMB_MEMBER_TYPE_TREE_ITEM_CHILDREN_COLLECTION_ALIAS } from './constants.js';
+import { UMB_MEMBER_TYPE_TREE_ITEM_CHILDREN_COLLECTION_REPOSITORY_ALIAS } from './repository/index.js';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'collection',
+		kind: 'default',
+		alias: UMB_MEMBER_TYPE_TREE_ITEM_CHILDREN_COLLECTION_ALIAS,
+		name: 'Member Type Tree Item Children Collection',
+		meta: {
+			repositoryAlias: UMB_MEMBER_TYPE_TREE_ITEM_CHILDREN_COLLECTION_REPOSITORY_ALIAS,
+		},
+	},
+	...actionManifests,
+	...repositoryManifests,
+	...viewManifests,
+];

src/Umbraco.Web.UI.Client/src/packages/members/member-type/tree/tree-item-children/collection/repository/constants.ts

@@ -0,0 +1,2 @@
+export const UMB_MEMBER_TYPE_TREE_ITEM_CHILDREN_COLLECTION_REPOSITORY_ALIAS =
+	'Umb.Repository.MemberType.TreeItemChildrenCollection';

src/Umbraco.Web.UI.Client/src/packages/members/member-type/tree/tree-item-children/collection/repository/index.ts

@@ -0,0 +1 @@
+export * from './constants.js';

src/Umbraco.Web.UI.Client/src/packages/members/member-type/tree/tree-item-children/collection/repository/manifests.ts

@@ -0,0 +1,10 @@
+import { UMB_MEMBER_TYPE_TREE_ITEM_CHILDREN_COLLECTION_REPOSITORY_ALIAS } from './constants.js';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'repository',
+		alias: UMB_MEMBER_TYPE_TREE_ITEM_CHILDREN_COLLECTION_REPOSITORY_ALIAS,
+		name: 'Member Type Tree Item Children Collection Repository',
+		api: () => import('./member-type-tree-item-children-collection.repository.js'),
+	},
+];

src/Umbraco.Web.UI.Client/src/packages/members/member-type/tree/tree-item-children/collection/repository/member-type-tree-item-children-collection.repository.ts

@@ -0,0 +1,33 @@
+import { UmbMemberTypeTreeRepository } from '../../../member-type-tree.repository.js';
+import type { UmbCollectionFilterModel, UmbCollectionRepository } from '@umbraco-cms/backoffice/collection';
+import { UmbRepositoryBase } from '@umbraco-cms/backoffice/repository';
+import { UMB_ENTITY_CONTEXT, type UmbEntityModel } from '@umbraco-cms/backoffice/entity';
+
+export class UmbMemberTypeTreeItemChildrenCollectionRepository
+	extends UmbRepositoryBase
+	implements UmbCollectionRepository
+{
+	#treeRepository = new UmbMemberTypeTreeRepository(this);
+
+	async requestCollection(filter: UmbCollectionFilterModel) {
+		// TODO: get parent from args
+		const entityContext = await this.getContext(UMB_ENTITY_CONTEXT);
+		if (!entityContext) throw new Error('Entity context not found');
+
+		const entityType = entityContext.getEntityType();
+		const unique = entityContext.getUnique();
+
+		if (!entityType) throw new Error('Entity type not found');
+		if (unique === undefined) throw new Error('Unique not found');
+
+		const parent: UmbEntityModel = { entityType, unique };
+
+		if (parent.unique === null) {
+			return this.#treeRepository.requestTreeRootItems({ skip: filter.skip, take: filter.take });
+		} else {
+			return this.#treeRepository.requestTreeItemsOf({ parent, skip: filter.skip, take: filter.take });
+		}
+	}
+}
+
+export { UmbMemberTypeTreeItemChildrenCollectionRepository as api };

src/Umbraco.Web.UI.Client/src/packages/members/member-type/tree/tree-item-children/collection/types.ts

@@ -0,0 +1,6 @@
+import type { UmbCollectionFilterModel } from '@umbraco-cms/backoffice/collection';
+import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity';
+
+export interface UmbMemberTypeTreeItemChildrenCollectionFilterModel extends UmbCollectionFilterModel {
+	parent: UmbEntityModel;
+}

src/Umbraco.Web.UI.Client/src/packages/members/member-type/tree/tree-item-children/collection/views/manifests.ts

@@ -0,0 +1,23 @@
+import { UMB_MEMBER_TYPE_TREE_ITEM_CHILDREN_COLLECTION_ALIAS } from '../constants.js';
+import { UMB_COLLECTION_ALIAS_CONDITION } from '@umbraco-cms/backoffice/collection';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'collectionView',
+		alias: 'Umb.CollectionView.MemberType.TreeItem.Table',
+		name: 'Member Type Tree Item Table Collection View',
+		element: () => import('./member-type-tree-item-table-collection-view.element.js'),
+		weight: 300,
+		meta: {
+			label: 'Table',
+			icon: 'icon-list',
+			pathName: 'table',
+		},
+		conditions: [
+			{
+				alias: UMB_COLLECTION_ALIAS_CONDITION,
+				match: UMB_MEMBER_TYPE_TREE_ITEM_CHILDREN_COLLECTION_ALIAS,
+			},
+		],
+	},
+];