add workspace for document blueprint folders

Author: madsrasmussen

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

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

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

@@ -1,6 +1,7 @@
 import { UMB_DOCUMENT_BLUEPRINT_FOLDER_ENTITY_TYPE } from '../../entity.js';
 import { UMB_DOCUMENT_BLUEPRINT_FOLDER_REPOSITORY_ALIAS } from './repository/index.js';
 import { manifests as repositoryManifests } from './repository/manifests.js';
+import { manifests as workspaceManifests } from './workspace/manifests.js';
 
 export const manifests: Array<UmbExtensionManifest> = [
 	{
@@ -24,4 +25,5 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 	},
 	...repositoryManifests,
+	...workspaceManifests,
 ];

src/packages/documents/document-blueprints/tree/folder/workspace/constants.ts

@@ -0,0 +1 @@
+export const UMB_DOCUMENT_BLUEPRINT_FOLDER_WORKSPACE_ALIAS = 'Umb.Workspace.DocumentBlueprint.Folder';

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

@@ -0,0 +1,47 @@
+import { UMB_DOCUMENT_BLUEPRINT_FOLDER_WORKSPACE_ALIAS } from './constants.js';
+import { UMB_DOCUMENT_BLUEPRINT_FOLDER_WORKSPACE_CONTEXT } from './document-blueprint-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-data-type-folder-workspace-editor';
+@customElement(elementName)
+export class UmbDocumentBlueprintFolderWorkspaceEditorElement extends UmbLitElement {
+	@state()
+	private _name = '';
+
+	#workspaceContext?: typeof UMB_DOCUMENT_BLUEPRINT_FOLDER_WORKSPACE_CONTEXT.TYPE;
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_DOCUMENT_BLUEPRINT_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 headline=${this._name} alias=${UMB_DOCUMENT_BLUEPRINT_FOLDER_WORKSPACE_ALIAS}>
+		</umb-workspace-editor>`;
+	}
+
+	static override styles = [UmbTextStyles, css``];
+}
+
+export { UmbDocumentBlueprintFolderWorkspaceEditorElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		[elementName]: UmbDocumentBlueprintFolderWorkspaceEditorElement;
+	}
+}

src/packages/documents/document-blueprints/tree/folder/workspace/document-blueprint-folder-workspace.context.ts

@@ -0,0 +1,52 @@
+import { UMB_DOCUMENT_BLUEPRINT_FOLDER_ENTITY_TYPE } from '../../../entity.js';
+import {
+	UMB_DOCUMENT_BLUEPRINT_FOLDER_REPOSITORY_ALIAS,
+	type UmbDocumentBlueprintFolderRepository,
+} from '../repository/index.js';
+import { UMB_DOCUMENT_BLUEPRINT_FOLDER_WORKSPACE_ALIAS } from './constants.js';
+import { UmbDocumentBlueprintFolderWorkspaceEditorElement } from './document-blueprint-folder-editor.element.js';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import {
+	UmbEntityDetailWorkspaceContextBase,
+	type UmbRoutableWorkspaceContext,
+	type UmbSubmittableWorkspaceContext,
+} from '@umbraco-cms/backoffice/workspace';
+import type { IRoutingInfo, PageComponent } from '@umbraco-cms/backoffice/router';
+import type { UmbFolderModel } from '@umbraco-cms/backoffice/tree';
+
+export class UmbDocumentBlueprintFolderWorkspaceContext
+	extends UmbEntityDetailWorkspaceContextBase<UmbFolderModel, UmbDocumentBlueprintFolderRepository>
+	implements UmbSubmittableWorkspaceContext, UmbRoutableWorkspaceContext
+{
+	public readonly name = this._data.createObservablePartOfCurrent((data) => data?.name);
+
+	constructor(host: UmbControllerHost) {
+		super(host, {
+			workspaceAlias: UMB_DOCUMENT_BLUEPRINT_FOLDER_WORKSPACE_ALIAS,
+			entityType: UMB_DOCUMENT_BLUEPRINT_FOLDER_ENTITY_TYPE,
+			detailRepositoryAlias: UMB_DOCUMENT_BLUEPRINT_FOLDER_REPOSITORY_ALIAS,
+		});
+
+		this.routes.setRoutes([
+			{
+				path: 'edit/:unique',
+				component: UmbDocumentBlueprintFolderWorkspaceEditorElement,
+				setup: (component: PageComponent, info: IRoutingInfo) => {
+					const unique = info.match.params.unique;
+					this.load(unique);
+				},
+			},
+		]);
+	}
+
+	/**
+	 * @description Set the name of the script
+	 * @param {string} value
+	 * @memberof UmbScriptWorkspaceContext
+	 */
+	public setName(value: string) {
+		this._data.updateCurrent({ name: value });
+	}
+}
+
+export { UmbDocumentBlueprintFolderWorkspaceContext as api };

src/packages/documents/document-blueprints/tree/folder/workspace/document-blueprint-folder.workspace.context-token.ts

@@ -0,0 +1,14 @@
+import { UMB_DOCUMENT_BLUEPRINT_FOLDER_ENTITY_TYPE } from '../../../entity.js';
+import type { UmbDocumentBlueprintFolderWorkspaceContext } from './document-blueprint-folder-workspace.context.js';
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+import type { UmbWorkspaceContext } from '@umbraco-cms/backoffice/workspace';
+
+export const UMB_DOCUMENT_BLUEPRINT_FOLDER_WORKSPACE_CONTEXT = new UmbContextToken<
+	UmbWorkspaceContext,
+	UmbDocumentBlueprintFolderWorkspaceContext
+>(
+	'UmbWorkspaceContext',
+	undefined,
+	(context): context is UmbDocumentBlueprintFolderWorkspaceContext =>
+		context.getEntityType?.() === UMB_DOCUMENT_BLUEPRINT_FOLDER_ENTITY_TYPE,
+);

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

@@ -0,0 +1,2 @@
+export * from './constants.js';
+export * from './document-blueprint-folder.workspace.context-token.js';

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

@@ -0,0 +1,15 @@
+import { UMB_DOCUMENT_BLUEPRINT_FOLDER_ENTITY_TYPE } from '../../../entity.js';
+import { UMB_DOCUMENT_BLUEPRINT_FOLDER_WORKSPACE_ALIAS } from './constants.js';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'workspace',
+		kind: 'routable',
+		alias: UMB_DOCUMENT_BLUEPRINT_FOLDER_WORKSPACE_ALIAS,
+		name: 'Document Blueprint Folder Workspace',
+		api: () => import('./document-blueprint-folder-workspace.context.js'),
+		meta: {
+			entityType: UMB_DOCUMENT_BLUEPRINT_FOLDER_ENTITY_TYPE,
+		},
+	},
+];