From 9ff930113972b5b8951eeb434e79be59c841a227 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 15 Apr 2024 13:01:04 +0200 Subject: [PATCH] use contentEditor for document blueprints --- .../workspace/manifests.ts | 2 +- ...-workspace-view-edit-properties.element.ts | 71 -------- ...ueprint-workspace-view-edit-tab.element.ts | 88 --------- ...t-blueprint-workspace-view-edit.element.ts | 169 ------------------ 4 files changed, 1 insertion(+), 329 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/views/edit/document-blueprint-workspace-view-edit-properties.element.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/views/edit/document-blueprint-workspace-view-edit-tab.element.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/views/edit/document-blueprint-workspace-view-edit.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/manifests.ts index b0061305da..04051c8db9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/manifests.ts @@ -22,9 +22,9 @@ const workspace: ManifestWorkspace = { const workspaceViews: Array = [ { type: 'workspaceView', + kind: 'contentEditor', alias: 'Umb.WorkspaceView.DocumentBlueprint.Edit', name: 'Document Blueprint Workspace Edit View', - element: () => import('./views/edit/document-blueprint-workspace-view-edit.element.js'), weight: 200, meta: { label: '#general_content', diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/views/edit/document-blueprint-workspace-view-edit-properties.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/views/edit/document-blueprint-workspace-view-edit-properties.element.ts deleted file mode 100644 index ebabfa0fe7..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/views/edit/document-blueprint-workspace-view-edit-properties.element.ts +++ /dev/null @@ -1,71 +0,0 @@ -import { UMB_DOCUMENT_BLUEPRINT_WORKSPACE_CONTEXT } from '../../document-blueprint-workspace.context-token.js'; -import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type'; -import { UmbContentTypePropertyStructureHelper } from '@umbraco-cms/backoffice/content-type'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import type { UmbDocumentTypeDetailModel } from '@umbraco-cms/backoffice/document-type'; - -@customElement('umb-document-blueprint-workspace-view-edit-properties') -export class UmbDocumentBlueprintWorkspaceViewEditPropertiesElement extends UmbLitElement { - @property({ type: String, attribute: 'container-id', reflect: false }) - public get containerId(): string | null | undefined { - return this.#propertyStructureHelper.getContainerId(); - } - public set containerId(value: string | null | undefined) { - this.#propertyStructureHelper.setContainerId(value); - } - - #propertyStructureHelper = new UmbContentTypePropertyStructureHelper(this); - - @state() - _propertyStructure?: Array; - - constructor() { - super(); - - this.consumeContext(UMB_DOCUMENT_BLUEPRINT_WORKSPACE_CONTEXT, (workspaceContext) => { - this.#propertyStructureHelper.setStructureManager(workspaceContext.structure); - }); - this.observe( - this.#propertyStructureHelper.propertyStructure, - (propertyStructure) => { - this._propertyStructure = propertyStructure; - }, - null, - ); - } - - render() { - return this._propertyStructure - ? repeat( - this._propertyStructure, - (property) => property.alias, - (property) => - html` `, - ) - : ''; - } - - static styles = [ - UmbTextStyles, - css` - .property { - border-bottom: 1px solid var(--uui-color-divider); - } - .property:last-child { - border-bottom: 0; - } - `, - ]; -} - -export default UmbDocumentBlueprintWorkspaceViewEditPropertiesElement; - -declare global { - interface HTMLElementTagNameMap { - 'umb-document-blueprint-workspace-view-edit-properties': UmbDocumentBlueprintWorkspaceViewEditPropertiesElement; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/views/edit/document-blueprint-workspace-view-edit-tab.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/views/edit/document-blueprint-workspace-view-edit-tab.element.ts deleted file mode 100644 index ed60a266fc..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/views/edit/document-blueprint-workspace-view-edit-tab.element.ts +++ /dev/null @@ -1,88 +0,0 @@ -import { UMB_DOCUMENT_BLUEPRINT_WORKSPACE_CONTEXT } from '../../document-blueprint-workspace.context-token.js'; -import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import type { UmbPropertyTypeContainerModel } from '@umbraco-cms/backoffice/content-type'; -import { UmbContentTypeContainerStructureHelper } from '@umbraco-cms/backoffice/content-type'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; - -import './document-blueprint-workspace-view-edit-properties.element.js'; - -@customElement('umb-document-blueprint-workspace-view-edit-tab') -export class UmbDocumentBlueprintWorkspaceViewEditTabElement extends UmbLitElement { - @property({ type: String }) - public get containerId(): string | null | undefined { - return this._containerId; - } - public set containerId(value: string | null | undefined) { - this._containerId = value; - this.#groupStructureHelper.setContainerId(value); - } - @state() - private _containerId?: string | null; - - #groupStructureHelper = new UmbContentTypeContainerStructureHelper(this); - - @state() - _groups: Array = []; - - @state() - _hasProperties = false; - - constructor() { - super(); - - this.consumeContext(UMB_DOCUMENT_BLUEPRINT_WORKSPACE_CONTEXT, (workspaceContext) => { - this.#groupStructureHelper.setStructureManager(workspaceContext.structure); - }); - this.observe(this.#groupStructureHelper.mergedContainers, (groups) => { - this._groups = groups; - }); - this.observe(this.#groupStructureHelper.hasProperties, (hasProperties) => { - this._hasProperties = hasProperties; - }); - } - - render() { - return html` - ${this._hasProperties - ? html` - - - - ` - : ''} - ${repeat( - this._groups, - (group) => group.id, - (group) => - html` - - `, - )} - `; - } - - static styles = [ - UmbTextStyles, - css` - uui-box { - --uui-box-default-padding: 0 var(--uui-size-space-5); - } - uui-box:not(:first-child) { - margin-top: var(--uui-size-layout-1); - } - `, - ]; -} - -export default UmbDocumentBlueprintWorkspaceViewEditTabElement; - -declare global { - interface HTMLElementTagNameMap { - 'umb-document-blueprint-workspace-view-edit-tab': UmbDocumentBlueprintWorkspaceViewEditTabElement; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/views/edit/document-blueprint-workspace-view-edit.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/views/edit/document-blueprint-workspace-view-edit.element.ts deleted file mode 100644 index 9f897c0e3b..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/views/edit/document-blueprint-workspace-view-edit.element.ts +++ /dev/null @@ -1,169 +0,0 @@ -import { UMB_DOCUMENT_BLUEPRINT_WORKSPACE_CONTEXT } from '../../document-blueprint-workspace.context-token.js'; -import type { UmbDocumentBlueprintWorkspaceViewEditTabElement } from './document-blueprint-workspace-view-edit-tab.element.js'; -import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import type { UmbPropertyTypeContainerModel } from '@umbraco-cms/backoffice/content-type'; -import { UmbContentTypeContainerStructureHelper } from '@umbraco-cms/backoffice/content-type'; -import type { UmbRoute, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router'; -import { encodeFolderName } from '@umbraco-cms/backoffice/router'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry'; - -@customElement('umb-document-blueprint-workspace-view-edit') -export class UmbDocumentBlueprintWorkspaceViewEditElement extends UmbLitElement implements UmbWorkspaceViewElement { - //@state() - //private _hasRootProperties = false; - - @state() - private _hasRootGroups = false; - - @state() - private _routes: UmbRoute[] = []; - - @state() - private _tabs?: Array; - - @state() - private _routerPath?: string; - - @state() - private _activePath = ''; - - private _workspaceContext?: typeof UMB_DOCUMENT_BLUEPRINT_WORKSPACE_CONTEXT.TYPE; - - private _tabsStructureHelper = new UmbContentTypeContainerStructureHelper(this); - - constructor() { - super(); - - this._tabsStructureHelper.setIsRoot(true); - this._tabsStructureHelper.setContainerChildType('Tab'); - this.observe( - this._tabsStructureHelper.mergedContainers, - (tabs) => { - this._tabs = tabs; - this._createRoutes(); - }, - null, - ); - - // _hasRootProperties can be gotten via _tabsStructureHelper.hasProperties. But we do not support root properties currently. - - this.consumeContext(UMB_DOCUMENT_BLUEPRINT_WORKSPACE_CONTEXT, (workspaceContext) => { - this._workspaceContext = workspaceContext; - this._tabsStructureHelper.setStructureManager(workspaceContext.structure); - this._observeRootGroups(); - }); - } - - private _observeRootGroups() { - if (!this._workspaceContext) return; - - this.observe( - this._workspaceContext.structure.hasRootContainers('Group'), - (hasRootGroups) => { - this._hasRootGroups = hasRootGroups; - this._createRoutes(); - }, - '_observeGroups', - ); - } - - private _createRoutes() { - if (!this._tabs || !this._workspaceContext) return; - const routes: UmbRoute[] = []; - - if (this._tabs.length > 0) { - this._tabs?.forEach((tab) => { - const tabName = tab.name ?? ''; - routes.push({ - path: `tab/${encodeFolderName(tabName).toString()}`, - component: () => import('./document-blueprint-workspace-view-edit-tab.element.js'), - setup: (component) => { - (component as UmbDocumentBlueprintWorkspaceViewEditTabElement).containerId = tab.id; - }, - }); - }); - } - - if (this._hasRootGroups) { - routes.push({ - path: '', - component: () => import('./document-blueprint-workspace-view-edit-tab.element.js'), - setup: (component) => { - (component as UmbDocumentBlueprintWorkspaceViewEditTabElement).containerId = null; - }, - }); - } - - if (routes.length !== 0) { - routes.push({ - path: '', - redirectTo: routes[0]?.path, - }); - } - - this._routes = routes; - } - - render() { - if (!this._routes || !this._tabs) return; - return html` - - ${this._routerPath && (this._tabs.length > 1 || (this._tabs.length === 1 && this._hasRootGroups)) - ? html` - ${this._hasRootGroups && this._tabs.length > 0 - ? html` - Content - ` - : ''} - ${repeat( - this._tabs, - (tab) => tab.name, - (tab) => { - const path = this._routerPath + '/tab/' + encodeFolderName(tab.name || ''); - return html`${tab.name}`; - }, - )} - ` - : ''} - - { - this._routerPath = event.target.absoluteRouterPath; - }} - @change=${(event: UmbRouterSlotChangeEvent) => { - this._activePath = event.target.absoluteActiveViewPath || ''; - }}> - - - `; - } - - static styles = [ - UmbTextStyles, - css` - :host { - display: block; - height: 100%; - --uui-tab-background: var(--uui-color-surface); - } - `, - ]; -} - -export default UmbDocumentBlueprintWorkspaceViewEditElement; - -declare global { - interface HTMLElementTagNameMap { - 'umb-document-blueprint-workspace-view-edit': UmbDocumentBlueprintWorkspaceViewEditElement; - } -}