From 96bcf3f97d8eb38919b6850a4f63f58406a00156 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 27 Sep 2024 08:31:45 +0200 Subject: [PATCH] add media type folder workspace --- .../media/media-types/tree/folder/index.ts | 1 + .../media-types/tree/folder/manifests.ts | 2 + .../tree/folder/workspace/constants.ts | 1 + .../tree/folder/workspace/index.ts | 2 + .../tree/folder/workspace/manifests.ts | 34 +++++++++ .../media-type-folder-editor.element.ts | 75 +++++++++++++++++++ .../media-type-folder-workspace.context.ts | 49 ++++++++++++ ...dia-type-folder.workspace.context-token.ts | 14 ++++ 8 files changed, 178 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/constants.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/media-type-folder-editor.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/media-type-folder-workspace.context.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/media-type-folder.workspace.context-token.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/index.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/index.ts index 3d76f338dd..388ec6aca4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/index.ts @@ -1 +1,2 @@ export * from './repository/index.js'; +export * from './workspace/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/manifests.ts index f3f7aef488..aed70b4e5b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/manifests.ts +++ b/src/Umbraco.Web.UI.Client/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 = [ { @@ -24,4 +25,5 @@ export const manifests: Array = [ }, }, ...repositoryManifests, + ...workspaceManifests, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/constants.ts new file mode 100644 index 0000000000..a7adda918f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/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'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/index.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/index.ts new file mode 100644 index 0000000000..6900f93f4d --- /dev/null +++ b/src/Umbraco.Web.UI.Client/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'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/manifests.ts new file mode 100644 index 0000000000..a385a330fd --- /dev/null +++ b/src/Umbraco.Web.UI.Client/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 = [ + { + 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, + }, + ], + }, +]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/media-type-folder-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/media-type-folder-editor.element.ts new file mode 100644 index 0000000000..8a3f7b50ec --- /dev/null +++ b/src/Umbraco.Web.UI.Client/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` + + `; + } + + static override styles = [ + UmbTextStyles, + css` + #nameInput { + flex: 1 1 auto; + } + `, + ]; +} + +export { UmbMediaTypeFolderWorkspaceEditorElement as element }; + +declare global { + interface HTMLElementTagNameMap { + [elementName]: UmbMediaTypeFolderWorkspaceEditorElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/media-type-folder-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/media-type-folder-workspace.context.ts new file mode 100644 index 0000000000..01f74a2969 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/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 + 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 }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/media-type-folder.workspace.context-token.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/media-type-folder.workspace.context-token.ts new file mode 100644 index 0000000000..559393090b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/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, +);