register script folder workspace

Author: madsrasmussen

src/packages/templating/scripts/tree/folder/manifests.ts

@@ -1,6 +1,7 @@
 import { UMB_SCRIPT_FOLDER_ENTITY_TYPE } from '../../entity.js';
 import { UMB_SCRIPT_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 UMB_DELETE_SCRIPT_FOLDER_ENTITY_ACTION_ALIAS = 'Umb.EntityAction.Script.Folder.Delete';
 
@@ -16,4 +17,5 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 	},
 	...repositoryManifests,
+	...workspaceManifests,
 ];

src/packages/templating/scripts/tree/folder/workspace/constants.ts

@@ -0,0 +1 @@
+export const UMB_SCRIPT_FOLDER_WORKSPACE_ALIAS = 'Umb.Workspace.Script.Folder';

src/packages/templating/scripts/tree/folder/workspace/index.ts

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

src/packages/templating/scripts/tree/folder/workspace/manifests.ts

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

src/packages/templating/scripts/tree/folder/workspace/script-type-folder-editor.element.ts

@@ -0,0 +1,47 @@
+import { UMB_SCRIPT_FOLDER_WORKSPACE_ALIAS } from './constants.js';
+import { UMB_SCRIPT_FOLDER_WORKSPACE_CONTEXT } from './script-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-script-folder-workspace-editor';
+@customElement(elementName)
+export class UmbScriptFolderWorkspaceEditorElement extends UmbLitElement {
+	@state()
+	private _name = '';
+
+	#workspaceContext?: typeof UMB_SCRIPT_FOLDER_WORKSPACE_CONTEXT.TYPE;
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_SCRIPT_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_SCRIPT_FOLDER_WORKSPACE_ALIAS}>
+		</umb-workspace-editor>`;
+	}
+
+	static override styles = [UmbTextStyles, css``];
+}
+
+export { UmbScriptFolderWorkspaceEditorElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		[elementName]: UmbScriptFolderWorkspaceEditorElement;
+	}
+}

src/packages/templating/scripts/tree/folder/workspace/script-type-folder-workspace.context.ts

@@ -0,0 +1,52 @@
+import { UMB_SCRIPT_FOLDER_REPOSITORY_ALIAS, type UmbScriptFolderRepository } from '../repository/index.js';
+import { UMB_SCRIPT_FOLDER_ENTITY_TYPE } from '../../../entity.js';
+import { UMB_SCRIPT_FOLDER_WORKSPACE_ALIAS } from './constants.js';
+import { UmbScriptFolderWorkspaceEditorElement } from './script-type-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 UmbScriptFolderWorkspaceContext
+	extends UmbEntityDetailWorkspaceContextBase<UmbFolderModel, UmbScriptFolderRepository>
+	implements UmbSubmittableWorkspaceContext, UmbRoutableWorkspaceContext
+{
+	public readonly data = this._data.current;
+	public readonly unique = this._data.createObservablePartOfCurrent((data) => data?.unique);
+	public readonly entityType = this._data.createObservablePartOfCurrent((data) => data?.entityType);
+	public readonly name = this._data.createObservablePartOfCurrent((data) => data?.name);
+
+	constructor(host: UmbControllerHost) {
+		super(host, {
+			workspaceAlias: UMB_SCRIPT_FOLDER_WORKSPACE_ALIAS,
+			entityType: UMB_SCRIPT_FOLDER_ENTITY_TYPE,
+			detailRepositoryAlias: UMB_SCRIPT_FOLDER_REPOSITORY_ALIAS,
+		});
+
+		this.routes.setRoutes([
+			{
+				path: 'edit/:unique',
+				component: UmbScriptFolderWorkspaceEditorElement,
+				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 { UmbScriptFolderWorkspaceContext as api };

src/packages/templating/scripts/tree/folder/workspace/script-type-folder.workspace.context-token.ts

@@ -0,0 +1,13 @@
+import { UMB_SCRIPT_FOLDER_ENTITY_TYPE } from '../../../entity.js';
+import type { UmbScriptFolderWorkspaceContext } from './script-type-folder-workspace.context.js';
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+import type { UmbWorkspaceContext } from '@umbraco-cms/backoffice/workspace';
+
+export const UMB_SCRIPT_FOLDER_WORKSPACE_CONTEXT = new UmbContextToken<
+	UmbWorkspaceContext,
+	UmbScriptFolderWorkspaceContext
+>(
+	'UmbWorkspaceContext',
+	undefined,
+	(context): context is UmbScriptFolderWorkspaceContext => context.getEntityType?.() === UMB_SCRIPT_FOLDER_ENTITY_TYPE,
+);