Feature: Folder Children Collection Workspace View

src/packages/core/collection/components/boolean-table-column-view/boolean-table-column-view.element.ts

@@ -1,8 +1,7 @@
 import { html, nothing, customElement, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
-const elementName = 'umb-boolean-table-column-view';
-@customElement(elementName)
+@customElement('umb-boolean-table-column-view')
 export class UmbBooleanTableColumnViewElement extends UmbLitElement {
 	@property({ attribute: false })
 	value = false;
@@ -14,6 +13,6 @@ export class UmbBooleanTableColumnViewElement extends UmbLitElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		[elementName]: UmbBooleanTableColumnViewElement;
+		'umb-boolean-table-column-view': UmbBooleanTableColumnViewElement;
 	}
 }

src/packages/core/collection/components/index.ts

@@ -1,9 +1,9 @@
+import './boolean-table-column-view/boolean-table-column-view.element.js';
 import './collection-action-bundle.element.js';
 import './collection-filter-field.element.js';
 import './collection-selection-actions.element.js';
 import './collection-toolbar.element.js';
 import './collection-view-bundle.element.js';
-import './boolean-table-column-view/boolean-table-column-view.element.js';
 import './pagination/collection-pagination.element.js';
 
 export * from './collection-action-bundle.element.js';

src/packages/core/collection/components/pagination/collection-pagination.element.ts

@@ -63,6 +63,10 @@ export class UmbCollectionPaginationElement extends UmbLitElement {
 		UmbTextStyles,
 		css`
 			:host {
+				display: contents;
+			}
+
+			uui-pagination {
 				display: block;
 				margin-top: var(--uui-size-layout-1);
 			}

src/packages/core/collection/default/collection-default.element.ts

@@ -113,11 +113,11 @@ export class UmbCollectionDefaultElement extends UmbLitElement {
 			}
 
 			#router {
-				display: none;
+				visibility: hidden;
 			}
 
 			.has-items #router {
-				display: block;
+				visibility: visible;
 			}
 
 			#empty-state {

src/packages/core/workspace/entity-detail/entity-detail-workspace-base.ts

@@ -11,7 +11,7 @@ import {
 } from '@umbraco-cms/backoffice/entity-action';
 import { UmbExtensionApiInitializer } from '@umbraco-cms/backoffice/extension-api';
 import { umbExtensionsRegistry, type ManifestRepository } from '@umbraco-cms/backoffice/extension-registry';
-import type { UmbDetailRepository, UmbRepositoryResponseWithAsObservable } from '@umbraco-cms/backoffice/repository';
+import type { UmbDetailRepository } from '@umbraco-cms/backoffice/repository';
 
 export interface UmbEntityDetailWorkspaceContextArgs {
 	entityType: string;
@@ -47,7 +47,6 @@ export abstract class UmbEntityDetailWorkspaceContextBase<
 	public readonly unique = this._data.createObservablePartOfCurrent((data) => data?.unique);
 
 	protected _getDataPromise?: Promise<any>;
-
 	protected _detailRepository?: DetailRepositoryType;
 
 	#entityContext = new UmbEntityContext(this);
@@ -71,6 +70,7 @@ export abstract class UmbEntityDetailWorkspaceContextBase<
 	constructor(host: UmbControllerHost, args: UmbEntityWorkspaceContextArgs) {
 		super(host, args.workspaceAlias);
 		this.#entityType = args.entityType;
+		this.#entityContext.setEntityType(this.#entityType);
 		window.addEventListener('willchangestate', this.#onWillNavigate);
 		this.#observeRepository(args.detailRepositoryAlias);
 	}
@@ -119,12 +119,9 @@ export abstract class UmbEntityDetailWorkspaceContextBase<
 		return this.#parent.getValue()?.entityType;
 	}
 
-	/**
-	 * Load the workspace data
-	 * @param {string} unique The unique identifier of the entity to load.
-	 * @returns { Promise<UmbRepositoryResponseWithAsObservable<DetailModelType>> } The data of the entity.
-	 */
-	async load(unique: string): Promise<UmbRepositoryResponseWithAsObservable<DetailModelType>> {
+	async load(unique: string) {
+		this.#entityContext.setEntityType(this.#entityType);
+		this.#entityContext.setUnique(unique);
 		await this.#init;
 		this.resetState();
 		this._getDataPromise = this._detailRepository!.requestByUnique(unique);
@@ -133,8 +130,6 @@ export abstract class UmbEntityDetailWorkspaceContextBase<
 		const data = response.data;
 
 		if (data) {
-			this.#entityContext.setEntityType(this.#entityType);
-			this.#entityContext.setUnique(unique);
 			this._data.setPersisted(data);
 			this._data.setCurrent(data);
 			this.setIsNew(false);

src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts

@@ -1,5 +1,5 @@
 import type { UmbDocumentTypeItemModel } from '../../repository/index.js';
-import { UMB_DOCUMENT_TYPE_WORKSPACE_MODAL } from '../../workspace/document-type-workspace.modal-token.js';
+import { UMB_DOCUMENT_TYPE_WORKSPACE_MODAL } from '../../workspace/document-type/document-type-workspace.modal-token.js';
 import type { UmbDocumentTypeTreeItemModel } from '../../tree/types.js';
 import { UMB_EDIT_DOCUMENT_TYPE_WORKSPACE_PATH_PATTERN } from '../../paths.js';
 import { UmbDocumentTypePickerInputContext } from './input-document-type.context.js';

src/packages/documents/document-types/entity-actions/create/manifests.ts

@@ -1,4 +1,5 @@
-import { UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE, UMB_DOCUMENT_TYPE_ROOT_ENTITY_TYPE } from '../../entity.js';
+import { UMB_DOCUMENT_TYPE_ROOT_ENTITY_TYPE } from '../../entity.js';
+import { UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE } from '../../tree/index.js';
 
 export const manifests: Array<UmbExtensionManifest> = [
 	{

src/packages/documents/document-types/entity.ts

@@ -1,10 +1,10 @@
+import type { UmbDocumentTypeFolderEntityType } from './tree/index.js';
+
 export const UMB_DOCUMENT_TYPE_ENTITY_TYPE = 'document-type';
 export const UMB_DOCUMENT_TYPE_ROOT_ENTITY_TYPE = 'document-type-root';
-export const UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE = 'document-type-folder';
 
 export type UmbDocumentTypeEntityType = typeof UMB_DOCUMENT_TYPE_ENTITY_TYPE;
 export type UmbDocumentTypeRootEntityType = typeof UMB_DOCUMENT_TYPE_ROOT_ENTITY_TYPE;
-export type UmbDocumentTypeFolderEntityType = typeof UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE;
 
 export type UmbDocumentTypeEntityTypeUnion =
 	| UmbDocumentTypeEntityType

src/packages/documents/document-types/tree/document-type.tree.server.data-source.ts

@@ -1,9 +1,6 @@
-import {
-	UMB_DOCUMENT_TYPE_ENTITY_TYPE,
-	UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE,
-	UMB_DOCUMENT_TYPE_ROOT_ENTITY_TYPE,
-} from '../entity.js';
+import { UMB_DOCUMENT_TYPE_ENTITY_TYPE, UMB_DOCUMENT_TYPE_ROOT_ENTITY_TYPE } from '../entity.js';
 import type { UmbDocumentTypeTreeItemModel } from './types.js';
+import { UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE } from './folder/index.js';
 import type {
 	UmbTreeAncestorsOfRequestArgs,
 	UmbTreeChildrenOfRequestArgs,

src/packages/documents/document-types/tree/folder/entity.ts

@@ -0,0 +1,2 @@
+export const UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE = 'document-type-folder';
+export type UmbDocumentTypeFolderEntityType = typeof UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE;

src/packages/documents/document-types/tree/folder/index.ts

@@ -1,2 +1,3 @@
 export * from './repository/index.js';
 export * from './workspace/index.js';
+export * from './entity.js';

src/packages/documents/document-types/tree/folder/manifests.ts

@@ -1,7 +1,7 @@
-import { UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE } from '../../entity.js';
-import { UMB_DOCUMENT_TYPE_FOLDER_REPOSITORY_ALIAS } from './repository/constants.js';
-import { manifests as workspaceManifests } from './workspace/manifests.js';
 import { manifests as repositoryManifests } from './repository/manifests.js';
+import { manifests as workspaceManifests } from './workspace/manifests.js';
+import { UMB_DOCUMENT_TYPE_FOLDER_REPOSITORY_ALIAS } from './repository/constants.js';
+import { UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE } from './entity.js';
 
 export const manifests: Array<UmbExtensionManifest> = [
 	{

src/packages/documents/document-types/tree/folder/repository/document-type-folder.server.data-source.ts

@@ -1,4 +1,4 @@
-import { UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE } from '../../../entity.js';
+import { UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE } from '../entity.js';
 import type { UmbFolderModel } from '@umbraco-cms/backoffice/tree';
 import { DocumentTypeService } from '@umbraco-cms/backoffice/external/backend-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';

src/packages/documents/document-types/tree/folder/types.ts

@@ -1,5 +1,5 @@
-import type { UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE } from '../../entity.js';
 import type { UmbDocumentTypeTreeItemModel } from '../types.js';
+import type { UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE } from './entity.js';
 
 export interface UmbDocumentTypeFolderTreeItemModel extends UmbDocumentTypeTreeItemModel {
 	entityType: typeof UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE;

src/packages/documents/document-types/tree/folder/workspace/document-type-folder-workspace.context.ts

@@ -1,8 +1,8 @@
-import { UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE } from '../../../entity.js';
 import {
 	UMB_DOCUMENT_TYPE_FOLDER_REPOSITORY_ALIAS,
 	type UmbDocumentTypeFolderRepository,
 } from '../repository/index.js';
+import { UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE } from '../entity.js';
 import { UMB_DOCUMENT_TYPE_FOLDER_WORKSPACE_ALIAS } from './constants.js';
 import { UmbDocumentTypeFolderWorkspaceEditorElement } from './document-type-folder-editor.element.js';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';

src/packages/documents/document-types/tree/folder/workspace/document-type-folder.workspace.context-token.ts

@@ -1,4 +1,4 @@
-import { UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE } from '../../../entity.js';
+import { UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE } from '../entity.js';
 import type { UmbDocumentTypeFolderWorkspaceContext } from './document-type-folder-workspace.context.js';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import type { UmbWorkspaceContext } from '@umbraco-cms/backoffice/workspace';

src/packages/documents/document-types/tree/folder/workspace/index.ts

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

src/packages/documents/document-types/tree/folder/workspace/manifests.ts

@@ -1,4 +1,4 @@
-import { UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE } from '../../../entity.js';
+import { UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE } from '../entity.js';
 import { UMB_DOCUMENT_TYPE_FOLDER_WORKSPACE_ALIAS } from './constants.js';
 import { UMB_WORKSPACE_CONDITION_ALIAS, UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
 

src/packages/documents/document-types/tree/folder/workspace/paths.ts

@@ -0,0 +1,14 @@
+import { UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE } from '../entity.js';
+import { UmbPathPattern } from '@umbraco-cms/backoffice/router';
+import { UMB_SETTINGS_SECTION_PATHNAME } from '@umbraco-cms/backoffice/settings';
+import { UMB_WORKSPACE_PATH_PATTERN } from '@umbraco-cms/backoffice/workspace';
+
+export const UMB_DOCUMENT_TYPE_FOLDER_WORKSPACE_PATH = UMB_WORKSPACE_PATH_PATTERN.generateAbsolute({
+	sectionName: UMB_SETTINGS_SECTION_PATHNAME,
+	entityType: UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE,
+});
+
+export const UMB_EDIT_DOCUMENT_TYPE_FOLDER_WORKSPACE_PATH_PATTERN = new UmbPathPattern<{ unique: string }>(
+	'edit/:unique',
+	UMB_DOCUMENT_TYPE_FOLDER_WORKSPACE_PATH,
+);

src/packages/documents/document-types/tree/index.ts

@@ -1,4 +1,5 @@
 export { UMB_DOCUMENT_TYPE_TREE_STORE_CONTEXT } from './document-type.tree.store.context-token.js';
-export { UMB_DOCUMENT_TYPE_TREE_REPOSITORY_ALIAS, UMB_DOCUMENT_TYPE_TREE_ALIAS } from './constants.js';
+export * from './constants.js';
 export * from './folder/index.js';
+export * from './tree-item-children/collection/index.js';
 export type * from './types.js';

src/packages/documents/document-types/tree/manifests.ts

@@ -1,15 +1,14 @@
-import {
-	UMB_DOCUMENT_TYPE_ENTITY_TYPE,
-	UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE,
-	UMB_DOCUMENT_TYPE_ROOT_ENTITY_TYPE,
-} from '../entity.js';
+import { UMB_DOCUMENT_TYPE_ENTITY_TYPE, UMB_DOCUMENT_TYPE_ROOT_ENTITY_TYPE } from '../entity.js';
+import { UMB_DOCUMENT_TYPE_ROOT_WORKSPACE_ALIAS } from '../workspace/document-type-root/index.js';
 import {
 	UMB_DOCUMENT_TYPE_TREE_ALIAS,
 	UMB_DOCUMENT_TYPE_TREE_REPOSITORY_ALIAS,
 	UMB_DOCUMENT_TYPE_TREE_STORE_ALIAS,
 } from './constants.js';
+import { UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE, UMB_DOCUMENT_TYPE_FOLDER_WORKSPACE_ALIAS } from './folder/index.js';
 import { manifests as folderManifests } from './folder/manifests.js';
-import { manifests as reloadManifests } from './reload-tree-item-children/manifests.js';
+import { manifests as treeItemChildrenManifests } from './tree-item-children/manifests.js';
+import { UMB_DOCUMENT_TYPE_TREE_ITEM_CHILDREN_COLLECTION_ALIAS } from './tree-item-children/collection/index.js';
 
 export const manifests: Array<UmbExtensionManifest> = [
 	{
@@ -45,15 +44,23 @@ export const manifests: Array<UmbExtensionManifest> = [
 		],
 	},
 	{
-		type: 'workspace',
-		kind: 'default',
-		alias: 'Umb.Workspace.DocumentType.Root',
-		name: 'Document Type Root Workspace',
+		type: 'workspaceView',
+		kind: 'collection',
+		alias: 'Umb.WorkspaceView.DocumentType.TreeItemChildrenCollection',
+		name: 'Document Type Tree Item Children Collection Workspace View',
 		meta: {
-			entityType: UMB_DOCUMENT_TYPE_ROOT_ENTITY_TYPE,
-			headline: '#treeHeaders_documentTypes',
+			label: '#general_design',
+			pathname: 'design',
+			icon: 'icon-member-dashed-line',
+			collectionAlias: UMB_DOCUMENT_TYPE_TREE_ITEM_CHILDREN_COLLECTION_ALIAS,
 		},
+		conditions: [
+			{
+				alias: 'Umb.Condition.WorkspaceAlias',
+				oneOf: [UMB_DOCUMENT_TYPE_ROOT_WORKSPACE_ALIAS, UMB_DOCUMENT_TYPE_FOLDER_WORKSPACE_ALIAS],
+			},
+		],
 	},
 	...folderManifests,
-	...reloadManifests,
+	...treeItemChildrenManifests,
 ];

src/packages/documents/document-types/tree/tree-item-children/collection/constants.ts

@@ -0,0 +1 @@
+export const UMB_DOCUMENT_TYPE_TREE_ITEM_CHILDREN_COLLECTION_ALIAS = 'Umb.Collection.DocumentType.TreeItemChildren';

src/packages/documents/document-types/tree/tree-item-children/collection/index.ts

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

src/packages/documents/document-types/tree/tree-item-children/collection/manifests.ts

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

src/packages/documents/document-types/tree/tree-item-children/collection/repository/constants.ts

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

src/packages/documents/document-types/tree/tree-item-children/collection/repository/document-type-tree-item-children-collection.repository.ts

@@ -0,0 +1,33 @@
+import { UmbDocumentTypeTreeRepository } from '../../../document-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 UmbDocumentTypeTreeItemChildrenCollectionRepository
+	extends UmbRepositoryBase
+	implements UmbCollectionRepository
+{
+	#treeRepository = new UmbDocumentTypeTreeRepository(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 { UmbDocumentTypeTreeItemChildrenCollectionRepository as api };

src/packages/documents/document-types/tree/tree-item-children/collection/repository/index.ts

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

src/packages/documents/document-types/tree/tree-item-children/collection/repository/manifests.ts

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

src/packages/documents/document-types/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 UmbDocumentTypeTreeItemChildrenCollectionFilterModel extends UmbCollectionFilterModel {
+	parent: UmbEntityModel;
+}