diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/folder/index.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/folder/index.ts index 3d76f338dd..388ec6aca4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/folder/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/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/templating/partial-views/tree/folder/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/folder/manifests.ts index 45945addca..3641c2888c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/folder/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/folder/manifests.ts @@ -1,6 +1,7 @@ import { UMB_PARTIAL_VIEW_FOLDER_ENTITY_TYPE } from '../../entity.js'; import { UMB_PARTIAL_VIEW_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_PARTIAL_VIEW_FOLDER_ENTITY_ACTION_ALIAS = 'Umb.EntityAction.PartialView.Folder.Delete'; @@ -16,4 +17,5 @@ export const manifests: Array = [ }, }, ...repositoryManifests, + ...workspaceManifests, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/folder/workspace/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/folder/workspace/constants.ts new file mode 100644 index 0000000000..7a4f967904 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/folder/workspace/constants.ts @@ -0,0 +1 @@ +export const UMB_PARTIAL_VIEW_FOLDER_WORKSPACE_ALIAS = 'Umb.Workspace.PartialView.Folder'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/folder/workspace/index.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/folder/workspace/index.ts new file mode 100644 index 0000000000..4f07201dcf --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/folder/workspace/index.ts @@ -0,0 +1 @@ +export * from './constants.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/folder/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/folder/workspace/manifests.ts new file mode 100644 index 0000000000..9c0f40003e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/folder/workspace/manifests.ts @@ -0,0 +1,15 @@ +import { UMB_PARTIAL_VIEW_FOLDER_ENTITY_TYPE } from '../../../entity.js'; +import { UMB_PARTIAL_VIEW_FOLDER_WORKSPACE_ALIAS } from './constants.js'; + +export const manifests: Array = [ + { + type: 'workspace', + kind: 'routable', + alias: UMB_PARTIAL_VIEW_FOLDER_WORKSPACE_ALIAS, + name: 'Partial View Folder Workspace', + api: () => import('./partial-view-folder-workspace.context.js'), + meta: { + entityType: UMB_PARTIAL_VIEW_FOLDER_ENTITY_TYPE, + }, + }, +]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/folder/workspace/partial-view-folder-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/folder/workspace/partial-view-folder-workspace-editor.element.ts new file mode 100644 index 0000000000..58cbe9a003 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/folder/workspace/partial-view-folder-workspace-editor.element.ts @@ -0,0 +1,47 @@ +import { UMB_PARTIAL_VIEW_FOLDER_WORKSPACE_ALIAS } from './constants.js'; +import { UMB_PARTIAL_VIEW_FOLDER_WORKSPACE_CONTEXT } from './partial-view-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-partial-view-folder-workspace-editor'; +@customElement(elementName) +export class UmbPartialViewFolderWorkspaceEditorElement extends UmbLitElement { + @state() + private _name = ''; + + #workspaceContext?: typeof UMB_PARTIAL_VIEW_FOLDER_WORKSPACE_CONTEXT.TYPE; + + constructor() { + super(); + + this.consumeContext(UMB_PARTIAL_VIEW_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` + `; + } + + static override styles = [UmbTextStyles, css``]; +} + +export { UmbPartialViewFolderWorkspaceEditorElement as element }; + +declare global { + interface HTMLElementTagNameMap { + [elementName]: UmbPartialViewFolderWorkspaceEditorElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/folder/workspace/partial-view-folder-workspace.context-token.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/folder/workspace/partial-view-folder-workspace.context-token.ts new file mode 100644 index 0000000000..1f767c2096 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/folder/workspace/partial-view-folder-workspace.context-token.ts @@ -0,0 +1,14 @@ +import { UMB_PARTIAL_VIEW_FOLDER_ENTITY_TYPE } from '../../../entity.js'; +import type { UmbPartialViewFolderWorkspaceContext } from './partial-view-folder-workspace.context.js'; +import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; +import type { UmbWorkspaceContext } from '@umbraco-cms/backoffice/workspace'; + +export const UMB_PARTIAL_VIEW_FOLDER_WORKSPACE_CONTEXT = new UmbContextToken< + UmbWorkspaceContext, + UmbPartialViewFolderWorkspaceContext +>( + 'UmbWorkspaceContext', + undefined, + (context): context is UmbPartialViewFolderWorkspaceContext => + context.getEntityType?.() === UMB_PARTIAL_VIEW_FOLDER_ENTITY_TYPE, +); diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/folder/workspace/partial-view-folder-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/folder/workspace/partial-view-folder-workspace.context.ts new file mode 100644 index 0000000000..17eeb41277 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/folder/workspace/partial-view-folder-workspace.context.ts @@ -0,0 +1,49 @@ +import { UMB_PARTIAL_VIEW_FOLDER_REPOSITORY_ALIAS, type UmbPartialViewFolderRepository } from '../repository/index.js'; +import { UMB_PARTIAL_VIEW_FOLDER_ENTITY_TYPE } from '../../../entity.js'; +import { UMB_PARTIAL_VIEW_FOLDER_WORKSPACE_ALIAS } from './constants.js'; +import { UmbPartialViewFolderWorkspaceEditorElement } from './partial-view-folder-workspace-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 UmbPartialViewFolderWorkspaceContext + extends UmbEntityDetailWorkspaceContextBase + implements UmbSubmittableWorkspaceContext, UmbRoutableWorkspaceContext +{ + public readonly name = this._data.createObservablePartOfCurrent((data) => data?.name); + + constructor(host: UmbControllerHost) { + super(host, { + workspaceAlias: UMB_PARTIAL_VIEW_FOLDER_WORKSPACE_ALIAS, + entityType: UMB_PARTIAL_VIEW_FOLDER_ENTITY_TYPE, + detailRepositoryAlias: UMB_PARTIAL_VIEW_FOLDER_REPOSITORY_ALIAS, + }); + + this.routes.setRoutes([ + { + path: 'edit/:unique', + component: UmbPartialViewFolderWorkspaceEditorElement, + 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 { UmbPartialViewFolderWorkspaceContext as api };