From 586998ca93ea59627f41af530125a1b5fed1e653 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 16 Mar 2023 16:59:41 +0100 Subject: [PATCH] add route to media types --- .../media-type-workspace-edit.element.ts | 69 +++++++++++++++++++ .../workspace/media-type-workspace.element.ts | 60 +++++----------- .../workspace/media-workspace-edit.element.ts | 3 +- 3 files changed, 88 insertions(+), 44 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/workspace/media-type-workspace-edit.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/workspace/media-type-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/workspace/media-type-workspace-edit.element.ts new file mode 100644 index 0000000000..b1b9497677 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/workspace/media-type-workspace-edit.element.ts @@ -0,0 +1,69 @@ +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { css, html } from 'lit'; +import { customElement, state } from 'lit/decorators.js'; +import { UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui'; +import { UmbWorkspaceMediaTypeContext } from './media-type-workspace.context'; +import { UmbLitElement } from '@umbraco-cms/element'; + +@customElement('umb-media-type-workspace-edit') +export class UmbMediaTypeWorkspaceEditElement extends UmbLitElement { + static styles = [ + UUITextStyles, + css` + #header { + display: flex; + padding: 0 var(--uui-size-space-6); + gap: var(--uui-size-space-4); + width: 100%; + } + uui-input { + width: 100%; + } + `, + ]; + + @state() + private _mediaTypeName?: string | null = ''; + #workspaceContext?: UmbWorkspaceMediaTypeContext; + + constructor() { + super(); + + this.consumeContext('umbWorkspaceContext', (instance) => { + this.#workspaceContext = instance; + this.#observeName(); + }); + } + + #observeName() { + if (!this.#workspaceContext) return; + this.observe(this.#workspaceContext.name, (name) => { + this._mediaTypeName = name; + }); + } + + // TODO. find a way where we don't have to do this for all Workspaces. + #handleInput(event: UUIInputEvent) { + if (event instanceof UUIInputEvent) { + const target = event.composedPath()[0] as UUIInputElement; + + if (typeof target?.value === 'string') { + this.#workspaceContext?.setName(target.value); + } + } + } + + render() { + return html` + + `; + } +} + +export default UmbMediaTypeWorkspaceEditElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-media-type-workspace-edit': UmbMediaTypeWorkspaceEditElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/workspace/media-type-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/workspace/media-type-workspace.element.ts index 10c235c581..7235c843d0 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/workspace/media-type-workspace.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/workspace/media-type-workspace.element.ts @@ -1,13 +1,13 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, html } from 'lit'; -import { customElement, property, state } from 'lit/decorators.js'; -import { UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui'; -import { UmbWorkspaceEntityElement } from '../../../../backoffice/shared/components/workspace/workspace-entity-element.interface'; +import { customElement, state } from 'lit/decorators.js'; import { UmbWorkspaceMediaTypeContext } from './media-type-workspace.context'; +import { UmbMediaTypeWorkspaceEditElement } from './media-type-workspace-edit.element'; import { UmbLitElement } from '@umbraco-cms/element'; +import { IRoutingInfo } from '@umbraco-cms/router'; @customElement('umb-media-type-workspace') -export class UmbMediaTypeWorkspaceElement extends UmbLitElement implements UmbWorkspaceEntityElement { +export class UmbMediaTypeWorkspaceElement extends UmbLitElement { static styles = [ UUITextStyles, css` @@ -23,49 +23,23 @@ export class UmbMediaTypeWorkspaceElement extends UmbLitElement implements UmbWo `, ]; - @state() - private _unique?: string; - - @state() - private _mediaTypeName?: string | null = ''; - - @property() - id!: string; - #workspaceContext = new UmbWorkspaceMediaTypeContext(this); + #element = new UmbMediaTypeWorkspaceEditElement(); - public load(entityKey: string) { - this.#workspaceContext.load(entityKey); - this._unique = entityKey; - } - - public create() { - this.#workspaceContext.createScaffold(); - } - - async connectedCallback() { - super.connectedCallback(); - - this.observe(this.#workspaceContext.name, (name) => { - this._mediaTypeName = name; - }); - } - - // TODO. find a way where we don't have to do this for all Workspaces. - #handleInput(event: UUIInputEvent) { - if (event instanceof UUIInputEvent) { - const target = event.composedPath()[0] as UUIInputElement; - - if (typeof target?.value === 'string') { - this.#workspaceContext.setName(target.value); - } - } - } + @state() + _routes: any[] = [ + { + path: 'edit/:key', + component: () => this.#element, + setup: (component: HTMLElement, info: IRoutingInfo) => { + const key = info.match.params.key; + this.#workspaceContext.load(key); + }, + }, + ]; render() { - return html` - - `; + return html``; } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace-edit.element.ts index e2886b6386..e7f23ea7bc 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace-edit.element.ts @@ -32,7 +32,8 @@ export class UmbMediaWorkspaceEditElement extends UmbLitElement { } #observeKey() { - this.observe(this.#umbWorkspaceContext?.data, (data) => (this._key = data.key)); + if (!this.#umbWorkspaceContext) return; + this.observe(this.#umbWorkspaceContext.data, (data) => (this._key = data?.key)); } render() {