add media type folder workspace

Author: madsrasmussen

src/packages/media/media-types/tree/folder/index.ts

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

src/packages/media/media-types/tree/folder/manifests.ts

@@ -1,6 +1,7 @@
 import { UMB_MEDIA_TYPE_FOLDER_ENTITY_TYPE } from '../../entity.js';
 import { UMB_MEDIA_TYPE_FOLDER_REPOSITORY_ALIAS } from './repository/constants.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/media/media-types/tree/folder/workspace/constants.ts

@@ -0,0 +1 @@
+export const UMB_MEDIA_TYPE_FOLDER_WORKSPACE_ALIAS = 'Umb.Workspace.MediaType.Folder';

src/packages/media/media-types/tree/folder/workspace/index.ts

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

src/packages/media/media-types/tree/folder/workspace/manifests.ts

@@ -0,0 +1,34 @@
+import { UMB_MEDIA_TYPE_FOLDER_ENTITY_TYPE } from '../../../entity.js';
+import { UMB_MEDIA_TYPE_FOLDER_WORKSPACE_ALIAS } from './constants.js';
+import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'workspace',
+		kind: 'routable',
+		alias: UMB_MEDIA_TYPE_FOLDER_WORKSPACE_ALIAS,
+		name: 'Media Type Folder Workspace',
+		api: () => import('./media-type-folder-workspace.context.js'),
+		meta: {
+			entityType: UMB_MEDIA_TYPE_FOLDER_ENTITY_TYPE,
+		},
+	},
+	{
+		type: 'workspaceAction',
+		kind: 'default',
+		alias: 'Umb.WorkspaceAction.MediaType.Folder.Save',
+		name: 'Save Media Type Folder Workspace Action',
+		api: UmbSubmitWorkspaceAction,
+		meta: {
+			label: '#buttons_save',
+			look: 'primary',
+			color: 'positive',
+		},
+		conditions: [
+			{
+				alias: 'Umb.Condition.WorkspaceAlias',
+				match: UMB_MEDIA_TYPE_FOLDER_WORKSPACE_ALIAS,
+			},
+		],
+	},
+];

src/packages/media/media-types/tree/folder/workspace/media-type-folder-editor.element.ts

@@ -0,0 +1,75 @@
+import { UMB_MEDIA_TYPE_FOLDER_WORKSPACE_ALIAS } from './constants.js';
+import { UMB_MEDIA_TYPE_FOLDER_WORKSPACE_CONTEXT } from './media-type-folder.workspace.context-token.js';
+import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
+import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
+import { umbFocus, UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { umbBindToValidation } from '@umbraco-cms/backoffice/validation';
+
+const elementName = 'umb-media-type-folder-workspace-editor';
+@customElement(elementName)
+export class UmbMediaTypeFolderWorkspaceEditorElement extends UmbLitElement {
+	@state()
+	private _name = '';
+
+	#workspaceContext?: typeof UMB_MEDIA_TYPE_FOLDER_WORKSPACE_CONTEXT.TYPE;
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_MEDIA_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 ?? '';
+			}
+		});
+	}
+
+	#handleInput(event: UUIInputEvent) {
+		if (event instanceof UUIInputEvent) {
+			const target = event.composedPath()[0] as UUIInputElement;
+
+			if (typeof target?.value === 'string') {
+				this.#workspaceContext?.setName(target.value);
+			}
+		}
+	}
+
+	override render() {
+		return html`<umb-workspace-editor alias=${UMB_MEDIA_TYPE_FOLDER_WORKSPACE_ALIAS}>
+			<uui-input
+				slot="header"
+				id="nameInput"
+				.value=${this._name ?? ''}
+				@input="${this.#handleInput}"
+				required
+				${umbBindToValidation(this, `$.name`, this._name)}
+				${umbFocus()}></uui-input>
+		</umb-workspace-editor>`;
+	}
+
+	static override styles = [
+		UmbTextStyles,
+		css`
+			#nameInput {
+				flex: 1 1 auto;
+			}
+		`,
+	];
+}
+
+export { UmbMediaTypeFolderWorkspaceEditorElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		[elementName]: UmbMediaTypeFolderWorkspaceEditorElement;
+	}
+}

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

@@ -0,0 +1,49 @@
+import { UMB_MEDIA_TYPE_FOLDER_ENTITY_TYPE } from '../../../entity.js';
+import { UMB_MEDIA_TYPE_FOLDER_REPOSITORY_ALIAS, type UmbMediaTypeFolderRepository } from '../repository/index.js';
+import { UMB_MEDIA_TYPE_FOLDER_WORKSPACE_ALIAS } from './constants.js';
+import { UmbMediaTypeFolderWorkspaceEditorElement } from './media-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 UmbMediaTypeFolderWorkspaceContext
+	extends UmbEntityDetailWorkspaceContextBase<UmbFolderModel, UmbMediaTypeFolderRepository>
+	implements UmbSubmittableWorkspaceContext, UmbRoutableWorkspaceContext
+{
+	public readonly name = this._data.createObservablePartOfCurrent((data) => data?.name);
+
+	constructor(host: UmbControllerHost) {
+		super(host, {
+			workspaceAlias: UMB_MEDIA_TYPE_FOLDER_WORKSPACE_ALIAS,
+			entityType: UMB_MEDIA_TYPE_FOLDER_ENTITY_TYPE,
+			detailRepositoryAlias: UMB_MEDIA_TYPE_FOLDER_REPOSITORY_ALIAS,
+		});
+
+		this.routes.setRoutes([
+			{
+				path: 'edit/:unique',
+				component: UmbMediaTypeFolderWorkspaceEditorElement,
+				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 { UmbMediaTypeFolderWorkspaceContext as api };

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

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