diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-blueprints/workspace/document-blueprint-root-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-blueprints/workspace/document-blueprint-root-workspace.element.ts index 0cd1a02646..b1440f2681 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-blueprints/workspace/document-blueprint-root-workspace.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-blueprints/workspace/document-blueprint-root-workspace.element.ts @@ -4,7 +4,7 @@ import { customElement } from 'lit/decorators.js'; @customElement('umb-document-blueprint-root-workspace') export class UmbDocumentBlueprintRootWorkspaceElement extends LitElement { render() { - return html`
Document Blueprint Root Workspace
`; + return html`
Document Blueprint Root Workspace
`; } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace-edit.element.ts new file mode 100644 index 0000000000..4aa94d78e3 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace-edit.element.ts @@ -0,0 +1,116 @@ +import { UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { css, html } from 'lit'; +import { customElement, state } from 'lit/decorators.js'; +import { UMB_ICON_PICKER_MODAL_TOKEN } from '../../../shared/modals/icon-picker'; +import { UmbWorkspaceDocumentTypeContext } from './document-type-workspace.context'; +import type { DocumentTypeResponseModel } from '@umbraco-cms/backend-api'; +import { UmbLitElement } from '@umbraco-cms/element'; +import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal'; + +@customElement('umb-document-type-workspace-edit') +export class UmbDocumentTypeWorkspaceEditElement extends UmbLitElement { + static styles = [ + UUITextStyles, + css` + :host { + display: block; + width: 100%; + height: 100%; + } + + #header { + display: flex; + flex: 1 1 auto; + margin: 0 var(--uui-size-layout-1); + } + + #name { + width: 100%; + flex: 1 1 auto; + align-items: center; + } + + #alias { + padding: 0 var(--uui-size-space-3); + } + + #icon { + font-size: calc(var(--uui-size-layout-3) / 2); + } + `, + ]; + + private _icon = { + color: '#000000', + name: 'umb:document-dashed-line', + }; + + private _workspaceContext: UmbWorkspaceDocumentTypeContext = new UmbWorkspaceDocumentTypeContext(this); + + @state() + private _documentType?: DocumentTypeResponseModel; + + private _modalContext?: UmbModalContext; + + constructor() { + super(); + + this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { + this._modalContext = instance; + }); + + this.observe(this._workspaceContext.data, (data) => { + // TODO: make method to identify if data is of type DocumentType + this._documentType = data as DocumentType; + }); + } + + // TODO. find a way where we don't have to do this for all workspaces. + private _handleInput(event: UUIInputEvent) { + if (event instanceof UUIInputEvent) { + const target = event.composedPath()[0] as UUIInputElement; + + if (typeof target?.value === 'string') { + this._workspaceContext?.setName(target.value); + } + } + } + + private async _handleIconClick() { + const modalHandler = this._modalContext?.open(UMB_ICON_PICKER_MODAL_TOKEN); + + modalHandler?.onSubmit().then((saved) => { + if (saved.icon) this._workspaceContext?.setIcon(saved.icon); + // TODO save color ALIAS as well + }); + } + + render() { + return html` + + + +
Keyboard Shortcuts
+ + `; + } +} + +export default UmbDocumentTypeWorkspaceEditElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-document-type-workspace-edit': UmbDocumentTypeWorkspaceEditElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.element.ts index c2faf5e302..d604b80c91 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.element.ts @@ -1,118 +1,34 @@ -import { UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; -import { css, html } from 'lit'; +import { html } from 'lit'; import { customElement, state } from 'lit/decorators.js'; -import type { UmbWorkspaceEntityElement } from '../../../shared/components/workspace/workspace-entity-element.interface'; -import { UMB_ICON_PICKER_MODAL_TOKEN } from '../../../shared/modals/icon-picker'; +import { IRoutingInfo } from '@umbraco-cms/router'; import { UmbWorkspaceDocumentTypeContext } from './document-type-workspace.context'; -import type { DocumentTypeResponseModel } from '@umbraco-cms/backend-api'; import { UmbLitElement } from '@umbraco-cms/element'; -import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '@umbraco-cms/modal'; + +import './document-type-workspace-edit.element'; @customElement('umb-document-type-workspace') -export class UmbDocumentTypeWorkspaceElement extends UmbLitElement implements UmbWorkspaceEntityElement { - static styles = [ - UUITextStyles, - css` - :host { - display: block; - width: 100%; - height: 100%; - } +export class UmbDocumentTypeWorkspaceElement extends UmbLitElement { + static styles = [UUITextStyles]; - #header { - display: flex; - flex: 1 1 auto; - margin: 0 var(--uui-size-layout-1); - } + #workspaceContext: UmbWorkspaceDocumentTypeContext = new UmbWorkspaceDocumentTypeContext(this); - #name { - width: 100%; - flex: 1 1 auto; - align-items: center; - } - - #alias { - padding: 0 var(--uui-size-space-3); - } - - #icon { - font-size: calc(var(--uui-size-layout-3) / 2); - } - `, - ]; - - private _icon = { - color: '#000000', - name: 'umb:document-dashed-line', - }; - - private _workspaceContext: UmbWorkspaceDocumentTypeContext = new UmbWorkspaceDocumentTypeContext(this); + #element = document.createElement('umb-document-type-workspace-edit'); @state() - private _documentType?: DocumentTypeResponseModel; - - private _modalContext?: UmbModalContext; - - constructor() { - super(); - - this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { - this._modalContext = instance; - }); - - this.observe(this._workspaceContext.data, (data) => { - // TODO: make method to identify if data is of type DocumentType - this._documentType = data as DocumentType; - }); - } - - public load(entityKey: string) { - this._workspaceContext.load(entityKey); - } - - public create(parentKey: string | null) { - this._workspaceContext.createScaffold(parentKey); - } - - // TODO. find a way where we don't have to do this for all workspaces. - private _handleInput(event: UUIInputEvent) { - if (event instanceof UUIInputEvent) { - const target = event.composedPath()[0] as UUIInputElement; - - if (typeof target?.value === 'string') { - this._workspaceContext?.setName(target.value); - } - } - } - - private async _handleIconClick() { - const modalHandler = this._modalContext?.open(UMB_ICON_PICKER_MODAL_TOKEN); - - modalHandler?.onSubmit().then((saved) => { - if (saved.icon) this._workspaceContext?.setIcon(saved.icon); - // TODO save color ALIAS as well - }); - } + _routes = [ + { + path: 'edit/:key', + component: () => this.#element, + setup: (component: HTMLElement, info: IRoutingInfo) => { + const key = info.match.params.key; + this.#workspaceContext.load(key); + }, + }, + ]; render() { - return html` - - - -
Keyboard Shortcuts
- - `; + return html` `; } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.stories.ts index 19eec3849c..4ea7c3095f 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.stories.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.stories.ts @@ -1,4 +1,4 @@ -import './document-type-workspace.element'; +import './document-type-workspace-edit.element'; import { Meta, Story } from '@storybook/web-components'; import { html } from 'lit-html'; import { ifDefined } from 'lit/directives/if-defined.js';