render most basic folder workspace

Author: madsrasmussen

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

@@ -1 +1,2 @@
 export * from './constants.js';
+export * from './document-type-folder.repository.js';

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

@@ -1,18 +1,20 @@
 import { UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE } from '../../../entity.js';
-import type { UmbDocumentTypeFolderRepository } from '../repository/index.js';
+import {
+	UMB_DOCUMENT_TYPE_FOLDER_REPOSITORY_ALIAS,
+	type UmbDocumentTypeFolderRepository,
+} from '../repository/index.js';
 import { UMB_DOCUMENT_TYPE_FOLDER_WORKSPACE_ALIAS } from './constants.js';
 import { UmbFolderWorkspaceEditorElement } from './folder-editor.element.js';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import {
 	UmbEntityDetailWorkspaceContextBase,
 	type UmbRoutableWorkspaceContext,
 	type UmbSubmittableWorkspaceContext,
-	UmbWorkspaceIsNewRedirectController,
 } from '@umbraco-cms/backoffice/workspace';
 import type { IRoutingInfo, PageComponent } from '@umbraco-cms/backoffice/router';
 import type { UmbFolderModel } from '@umbraco-cms/backoffice/tree';
 
-export class UmbScriptWorkspaceContext
+export class UmbDocumentTypeFolderWorkspaceContext
 	extends UmbEntityDetailWorkspaceContextBase<UmbFolderModel, UmbDocumentTypeFolderRepository>
 	implements UmbSubmittableWorkspaceContext, UmbRoutableWorkspaceContext
 {
@@ -25,25 +27,10 @@ export class UmbScriptWorkspaceContext
 		super(host, {
 			workspaceAlias: UMB_DOCUMENT_TYPE_FOLDER_WORKSPACE_ALIAS,
 			entityType: UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE,
-			detailRepositoryAlias: 'Umb.Repository.DocumentType.Folder',
+			detailRepositoryAlias: UMB_DOCUMENT_TYPE_FOLDER_REPOSITORY_ALIAS,
 		});
 
 		this.routes.setRoutes([
-			{
-				path: 'create/parent/:entityType/:parentUnique',
-				component: UmbFolderWorkspaceEditorElement,
-				setup: async (component: PageComponent, info: IRoutingInfo) => {
-					const parentEntityType = info.match.params.entityType;
-					const parentUnique = info.match.params.parentUnique === 'null' ? null : info.match.params.parentUnique;
-					this.createScaffold({ parent: { entityType: parentEntityType, unique: parentUnique } });
-
-					new UmbWorkspaceIsNewRedirectController(
-						this,
-						this,
-						this.getHostElement().shadowRoot!.querySelector('umb-router-slot')!,
-					);
-				},
-			},
 			{
 				path: 'edit/:unique',
 				component: UmbFolderWorkspaceEditorElement,
@@ -65,4 +52,4 @@ export class UmbScriptWorkspaceContext
 	}
 }
 
-export { UmbScriptWorkspaceContext as api };
+export { UmbDocumentTypeFolderWorkspaceContext as api };

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

@@ -0,0 +1,14 @@
+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';
+
+export const UMB_DOCUMENT_TYPE_FOLDER_WORKSPACE_CONTEXT = new UmbContextToken<
+	UmbWorkspaceContext,
+	UmbDocumentTypeFolderWorkspaceContext
+>(
+	'UmbWorkspaceContext',
+	undefined,
+	(context): context is UmbDocumentTypeFolderWorkspaceContext =>
+		context.getEntityType?.() === UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE,
+);

src/packages/documents/document-types/tree/folder/workspace/folder-collection-workspace-view.element.ts

@@ -1,15 +1,37 @@
-import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
-import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element';
+import { UMB_DOCUMENT_TYPE_FOLDER_WORKSPACE_ALIAS } from './constants.js';
+import { UMB_DOCUMENT_TYPE_FOLDER_WORKSPACE_CONTEXT } from './document-type-folder.workspace.context-token.js';
+import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 
 const elementName = 'umb-folder-workspace-editor';
 @customElement(elementName)
 export class UmbFolderWorkspaceEditorElement extends UmbLitElement {
+	@state()
+	private _name = '';
+
+	#workspaceContext?: typeof UMB_DOCUMENT_TYPE_FOLDER_WORKSPACE_CONTEXT.TYPE;
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_DOCUMENT_TYPE_FOLDER_WORKSPACE_CONTEXT, (workspaceContext) => {
+			this.#workspaceContext = workspaceContext;
+			this.#observeName();
+		});
+	}
+
+	#observeName() {
+		if (!this.#workspaceContext) return;
+		this.observe(this.#workspaceContext.name, (name) => {
+			if (name !== this._name) {
+				this._name = name ?? '';
+			}
+		});
+	}
+
 	override render() {
-		return html`<umb-workspace-editor alias="Umb.Workspace.DocumentType.Folder">
-			<div id="header" slot="header">
-				<uui-input label="Folder name" value="" ${umbFocus()}></uui-input>
-			</div>
+		return html`<umb-workspace-editor headline=${this._name} alias=${UMB_DOCUMENT_TYPE_FOLDER_WORKSPACE_ALIAS}>
 		</umb-workspace-editor>`;
 	}
 

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

@@ -12,21 +12,4 @@ export const manifests: Array<UmbExtensionManifest> = [
 			entityType: UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE,
 		},
 	},
-	{
-		type: 'workspaceView',
-		alias: 'Umb.WorkspaceView.DocumentType.FolderCollection',
-		name: 'Document Type Folder Collection Workspace View',
-		element: () => import('./folder-collection-workspace-view.element.js'),
-		meta: {
-			pathname: 'folder',
-			label: 'Folder',
-			icon: 'folder',
-		},
-		conditions: [
-			{
-				alias: 'Umb.Condition.WorkspaceAlias',
-				match: UMB_DOCUMENT_TYPE_FOLDER_WORKSPACE_ALIAS,
-			},
-		],
-	},
 ];