implement folder workspace for data type folders

madsrasmussen · madsrasmussen · commit 6bc1883b7bea · 2024-09-26T11:45:45.000+02:00
diff --git a/src/packages/data-type/tree/folder/index.ts b/src/packages/data-type/tree/folder/index.ts
@@ -1,2 +1,2 @@
-export { UmbDataTypeFolderRepository } from './data-type-folder.repository.js';
-export { UMB_DATA_TYPE_FOLDER_REPOSITORY_ALIAS } from './manifests.js';
+export * from './repository/index.js';
+export * from './workspace/index.js';
diff --git a/src/packages/data-type/tree/folder/manifests.ts b/src/packages/data-type/tree/folder/manifests.ts
@@ -1,13 +1,9 @@
 import { UMB_DATA_TYPE_FOLDER_ENTITY_TYPE } from '../../entity.js';
-export const UMB_DATA_TYPE_FOLDER_REPOSITORY_ALIAS = 'Umb.Repository.DataType.Folder';
+import { UMB_DATA_TYPE_FOLDER_REPOSITORY_ALIAS } from './repository/index.js';
+import { manifests as workspaceManifests } from './workspace/manifests.js';
+import { manifests as repositoryManifests } from './repository/manifests.js';
 
 export const manifests: Array<UmbExtensionManifest> = [
-	{
-		type: 'repository',
-		alias: UMB_DATA_TYPE_FOLDER_REPOSITORY_ALIAS,
-		name: 'Data Type Folder Repository',
-		api: () => import('./data-type-folder.repository.js'),
-	},
 	{
 		type: 'entityAction',
 		kind: 'folderUpdate',
@@ -28,4 +24,6 @@ export const manifests: Array<UmbExtensionManifest> = [
 			folderRepositoryAlias: UMB_DATA_TYPE_FOLDER_REPOSITORY_ALIAS,
 		},
 	},
+	...repositoryManifests,
+	...workspaceManifests,
 ];
diff --git a/src/packages/data-type/tree/folder/repository/constants.ts b/src/packages/data-type/tree/folder/repository/constants.ts
@@ -0,0 +1,2 @@
+export const UMB_DATA_TYPE_FOLDER_REPOSITORY_ALIAS = 'Umb.Repository.DataType.Folder';
+export const UMB_DATA_TYPE_FOLDER_STORE_ALIAS = 'Umb.Store.DataType.Folder';
diff --git a/src/packages/data-type/tree/folder/repository/data-type-folder.repository.ts b/src/packages/data-type/tree/folder/repository/data-type-folder.repository.ts
@@ -1,4 +1,5 @@
 import { UmbDataTypeFolderServerDataSource } from './data-type-folder.server.data-source.js';
+import { UMB_DATA_TYPE_FOLDER_STORE_CONTEXT } from './data-type-folder.store.context-token.js';
 import { UmbDetailRepositoryBase } from '@umbraco-cms/backoffice/repository';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import type { UmbFolderModel } from '@umbraco-cms/backoffice/tree';
@@ -8,7 +9,7 @@ export class UmbDataTypeFolderRepository extends UmbDetailRepositoryBase<
 	UmbDataTypeFolderServerDataSource
 > {
 	constructor(host: UmbControllerHost) {
-		super(host, UmbDataTypeFolderServerDataSource);
+		super(host, UmbDataTypeFolderServerDataSource, UMB_DATA_TYPE_FOLDER_STORE_CONTEXT);
 	}
 }
 
diff --git a/src/packages/data-type/tree/folder/repository/data-type-folder.server.data-source.ts b/src/packages/data-type/tree/folder/repository/data-type-folder.server.data-source.ts
@@ -1,4 +1,4 @@
-import { UMB_DATA_TYPE_FOLDER_ENTITY_TYPE } from '../../entity.js';
+import { UMB_DATA_TYPE_FOLDER_ENTITY_TYPE } from '../../../entity.js';
 import type { UmbFolderModel } from '@umbraco-cms/backoffice/tree';
 import { DataTypeService } from '@umbraco-cms/backoffice/external/backend-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
diff --git a/src/packages/data-type/tree/folder/repository/data-type-folder.store.context-token.ts b/src/packages/data-type/tree/folder/repository/data-type-folder.store.context-token.ts
@@ -0,0 +1,4 @@
+import type { UmbDataTypeFolderStore } from './data-type-folder.store.js';
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+
+export const UMB_DATA_TYPE_FOLDER_STORE_CONTEXT = new UmbContextToken<UmbDataTypeFolderStore>('UmbDataTypeFolderStore');
diff --git a/src/packages/data-type/tree/folder/repository/data-type-folder.store.ts b/src/packages/data-type/tree/folder/repository/data-type-folder.store.ts
@@ -0,0 +1,22 @@
+import { UMB_DATA_TYPE_FOLDER_STORE_CONTEXT } from './data-type-folder.store.context-token.js';
+import { UmbDetailStoreBase } from '@umbraco-cms/backoffice/store';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import type { UmbFolderModel } from '@umbraco-cms/backoffice/tree';
+
+/**
+ * @class UmbDataTypeStore
+ * @augments {UmbStoreBase}
+ * @description - Data Store for Data Types
+ */
+export class UmbDataTypeFolderStore extends UmbDetailStoreBase<UmbFolderModel> {
+	/**
+	 * Creates an instance of UmbDataTypeStore.
+	 * @param {UmbControllerHost} host - The controller host for this controller to be appended to
+	 * @memberof UmbDataTypeStore
+	 */
+	constructor(host: UmbControllerHost) {
+		super(host, UMB_DATA_TYPE_FOLDER_STORE_CONTEXT.toString());
+	}
+}
+
+export { UmbDataTypeFolderStore as api };
diff --git a/src/packages/data-type/tree/folder/repository/index.ts b/src/packages/data-type/tree/folder/repository/index.ts
@@ -0,0 +1,2 @@
+export { UmbDataTypeFolderRepository } from './data-type-folder.repository.js';
+export * from './constants.js';
diff --git a/src/packages/data-type/tree/folder/repository/manifests.ts b/src/packages/data-type/tree/folder/repository/manifests.ts
@@ -0,0 +1,16 @@
+import { UMB_DATA_TYPE_FOLDER_REPOSITORY_ALIAS, UMB_DATA_TYPE_FOLDER_STORE_ALIAS } from './constants.js';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'repository',
+		alias: UMB_DATA_TYPE_FOLDER_REPOSITORY_ALIAS,
+		name: 'Data Type Folder Repository',
+		api: () => import('./data-type-folder.repository.js'),
+	},
+	{
+		type: 'store',
+		alias: UMB_DATA_TYPE_FOLDER_STORE_ALIAS,
+		name: 'Data Type Folder Store',
+		api: () => import('./data-type-folder.store.js'),
+	},
+];
diff --git a/src/packages/data-type/tree/folder/workspace/constants.ts b/src/packages/data-type/tree/folder/workspace/constants.ts
@@ -0,0 +1 @@
+export const UMB_DATA_TYPE_FOLDER_WORKSPACE_ALIAS = 'Umb.Workspace.DataType.Folder';
diff --git a/src/packages/data-type/tree/folder/workspace/data-type-folder-editor.element.ts b/src/packages/data-type/tree/folder/workspace/data-type-folder-editor.element.ts
@@ -0,0 +1,47 @@
+import { UMB_DATA_TYPE_FOLDER_WORKSPACE_ALIAS } from './constants.js';
+import { UMB_DATA_TYPE_FOLDER_WORKSPACE_CONTEXT } from './data-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-data-type-folder-workspace-editor';
+@customElement(elementName)
+export class UmbDataTypeFolderWorkspaceEditorElement extends UmbLitElement {
+	@state()
+	private _name = '';
+
+	#workspaceContext?: typeof UMB_DATA_TYPE_FOLDER_WORKSPACE_CONTEXT.TYPE;
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_DATA_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 headline=${this._name} alias=${UMB_DATA_TYPE_FOLDER_WORKSPACE_ALIAS}>
+		</umb-workspace-editor>`;
+	}
+
+	static override styles = [UmbTextStyles, css``];
+}
+
+export { UmbDataTypeFolderWorkspaceEditorElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		[elementName]: UmbDataTypeFolderWorkspaceEditorElement;
+	}
+}
diff --git a/src/packages/data-type/tree/folder/workspace/data-type-folder-workspace.context.ts b/src/packages/data-type/tree/folder/workspace/data-type-folder-workspace.context.ts
@@ -0,0 +1,52 @@
+import { UMB_DATA_TYPE_FOLDER_ENTITY_TYPE } from '../../../entity.js';
+import { UMB_DATA_TYPE_FOLDER_REPOSITORY_ALIAS, type UmbDataTypeFolderRepository } from '../repository/index.js';
+import { UMB_DATA_TYPE_FOLDER_WORKSPACE_ALIAS } from './constants.js';
+import { UmbDataTypeFolderWorkspaceEditorElement } from './data-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 UmbDataTypeFolderWorkspaceContext
+	extends UmbEntityDetailWorkspaceContextBase<UmbFolderModel, UmbDataTypeFolderRepository>
+	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_DATA_TYPE_FOLDER_WORKSPACE_ALIAS,
+			entityType: UMB_DATA_TYPE_FOLDER_ENTITY_TYPE,
+			detailRepositoryAlias: UMB_DATA_TYPE_FOLDER_REPOSITORY_ALIAS,
+		});
+
+		this.routes.setRoutes([
+			{
+				path: 'edit/:unique',
+				component: UmbDataTypeFolderWorkspaceEditorElement,
+				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 { UmbDataTypeFolderWorkspaceContext as api };
diff --git a/src/packages/data-type/tree/folder/workspace/data-type-folder.workspace.context-token.ts b/src/packages/data-type/tree/folder/workspace/data-type-folder.workspace.context-token.ts
@@ -0,0 +1,14 @@
+import { UMB_DATA_TYPE_FOLDER_ENTITY_TYPE } from '../../../entity.js';
+import type { UmbDataTypeFolderWorkspaceContext } from './data-type-folder-workspace.context.js';
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+import type { UmbWorkspaceContext } from '@umbraco-cms/backoffice/workspace';
+
+export const UMB_DATA_TYPE_FOLDER_WORKSPACE_CONTEXT = new UmbContextToken<
+	UmbWorkspaceContext,
+	UmbDataTypeFolderWorkspaceContext
+>(
+	'UmbWorkspaceContext',
+	undefined,
+	(context): context is UmbDataTypeFolderWorkspaceContext =>
+		context.getEntityType?.() === UMB_DATA_TYPE_FOLDER_ENTITY_TYPE,
+);
diff --git a/src/packages/data-type/tree/folder/workspace/index.ts b/src/packages/data-type/tree/folder/workspace/index.ts
@@ -0,0 +1,2 @@
+export * from './constants.js';
+export * from './data-type-folder.workspace.context-token.js';
diff --git a/src/packages/data-type/tree/folder/workspace/manifests.ts b/src/packages/data-type/tree/folder/workspace/manifests.ts
@@ -0,0 +1,15 @@
+import { UMB_DATA_TYPE_FOLDER_ENTITY_TYPE } from '../../../entity.js';
+import { UMB_DATA_TYPE_FOLDER_WORKSPACE_ALIAS } from './constants.js';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'workspace',
+		kind: 'routable',
+		alias: UMB_DATA_TYPE_FOLDER_WORKSPACE_ALIAS,
+		name: 'Data Type Folder Workspace',
+		api: () => import('./data-type-folder-workspace.context.js'),
+		meta: {
+			entityType: UMB_DATA_TYPE_FOLDER_ENTITY_TYPE,
+		},
+	},
+];

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export const UMB_DATA_TYPE_FOLDER_REPOSITORY_ALIAS = 'Umb.Repository.DataType.Folder';`
	`2`	`+export const UMB_DATA_TYPE_FOLDER_STORE_ALIAS = 'Umb.Store.DataType.Folder';`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`import { UmbDataTypeFolderServerDataSource } from './data-type-folder.server.data-source.js';`
	`2`	`+import { UMB_DATA_TYPE_FOLDER_STORE_CONTEXT } from './data-type-folder.store.context-token.js';`
`2`	`3`	`import { UmbDetailRepositoryBase } from '@umbraco-cms/backoffice/repository';`
`3`	`4`	`import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';`
`4`	`5`	`import type { UmbFolderModel } from '@umbraco-cms/backoffice/tree';`
`@@ -8,7 +9,7 @@ export class UmbDataTypeFolderRepository extends UmbDetailRepositoryBase<`
`8`	`9`	`UmbDataTypeFolderServerDataSource`
`9`	`10`	`> {`
`10`	`11`	`constructor(host: UmbControllerHost) {`
`11`		`- super(host, UmbDataTypeFolderServerDataSource);`
	`12`	`+ super(host, UmbDataTypeFolderServerDataSource, UMB_DATA_TYPE_FOLDER_STORE_CONTEXT);`
`12`	`13`	`}`
`13`	`14`	`}`
`14`	`15`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { UMB_DATA_TYPE_FOLDER_ENTITY_TYPE } from '../../entity.js';`
	`1`	`+import { UMB_DATA_TYPE_FOLDER_ENTITY_TYPE } from '../../../entity.js';`
`2`	`2`	`import type { UmbFolderModel } from '@umbraco-cms/backoffice/tree';`
`3`	`3`	`import { DataTypeService } from '@umbraco-cms/backoffice/external/backend-api';`
`4`	`4`	`import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export { UmbDataTypeFolderRepository } from './data-type-folder.repository.js';`
	`2`	`+export * from './constants.js';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export const UMB_DATA_TYPE_FOLDER_WORKSPACE_ALIAS = 'Umb.Workspace.DataType.Folder';`