From fad9d25203b85b4f8aa80b0dc98cb1a279a0becf Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 16 Mar 2023 08:53:21 +0100 Subject: [PATCH] move routing into the element --- .../language-workspace-edit.element.ts | 76 +++++++++++++ .../language/language-workspace.context.ts | 16 +-- .../language/language-workspace.element.ts | 107 +++++------------- .../languages/workspace/language/manifests.ts | 1 - ...language-details-workspace-view.element.ts | 8 +- 5 files changed, 108 insertions(+), 100 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace-edit.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace-edit.element.ts new file mode 100644 index 0000000000..90d6b010bb --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace-edit.element.ts @@ -0,0 +1,76 @@ +import { UUITextStyles } from '@umbraco-ui/uui-css'; +import { css, html } from 'lit'; +import { customElement, state } from 'lit/decorators.js'; +import { ifDefined } from 'lit-html/directives/if-defined.js'; +import { UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui'; +import { UmbLanguageWorkspaceContext } from './language-workspace.context'; +import { UmbLitElement } from '@umbraco-cms/element'; +import { LanguageModel } from '@umbraco-cms/backend-api'; + +@customElement('umb-language-workspace-thingy') +export class UmbLanguageWorkspaceThingyElement 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%; + } + `, + ]; + + #workspaceContext?: UmbLanguageWorkspaceContext; + + @state() + _language?: LanguageModel; + + constructor() { + super(); + + this.consumeContext('umbWorkspaceContext', (context) => { + this.#workspaceContext = context; + this.#observeData(); + }); + } + + #observeData() { + if (!this.#workspaceContext) return; + this.observe(this.#workspaceContext.data, (data) => { + this._language = data; + }); + } + + #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 UmbLanguageWorkspaceThingyElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-language-workspace-thingy': UmbLanguageWorkspaceThingyElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts index 085d8b327c..3e2f185b20 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts @@ -16,19 +16,6 @@ export class UmbLanguageWorkspaceContext extends UmbWorkspaceContext import('./language-workspace-edit.element'), + setup: (component: HTMLElement, info: IRoutingInfo) => { + this.#languageWorkspaceContext.load(info.match.params.isoCode); + }, + }, ]; - @property({ type: Object, attribute: false }) - location?: UmbRouteLocation; - - @state() - _language?: LanguageModel; - - #workspaceContext?: UmbLanguageWorkspaceContext; - - constructor() { - super(); - - this.consumeContext('umbWorkspaceContext', (context) => { - this.#workspaceContext = context; - this.#observeData(); - this.#init(); - }); - } - - #init() { - const isoCode = this.location?.params?.isoCode; - - // TODO: implement actions "events" and show loading state - if (this.location?.name === 'create') { - this.#workspaceContext?.createScaffold(); - } else if (this.location?.name === 'edit' && isoCode) { - this.#workspaceContext?.load(isoCode); - } - } - - #observeData() { - if (!this.#workspaceContext) return; - this.observe(this.#workspaceContext.data, (data) => { - this._language = data; - }); - } - - #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() { - if (!this._language) return nothing; - - return html` - - - - `; + return html` { + this.#routerPath = event.target.absoluteRouterPath; + }}>`; } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/manifests.ts index 09a1ff1b7c..5ea3b6533d 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/manifests.ts @@ -8,7 +8,6 @@ const workspace: ManifestWorkspace = { loader: () => import('./language-workspace.element'), meta: { entityType: 'language', - context: () => import('./language-workspace.context'), }, }; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/details/language-details-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/details/language-details-workspace-view.element.ts index 0c27e84f7d..509af2682f 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/details/language-details-workspace-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/details/language-details-workspace-view.element.ts @@ -10,8 +10,8 @@ import { UmbChangeEvent } from '@umbraco-cms/events'; import { UmbLitElement } from '@umbraco-cms/element'; import { LanguageModel } from '@umbraco-cms/backend-api'; -@customElement('umb-edit-language-workspace-view') -export class UmbEditLanguageWorkspaceViewElement extends UmbLitElement { +@customElement('umb-language-details-workspace-view') +export class UmbLanguageDetailsWorkspaceViewElement extends UmbLitElement { static styles = [ UUITextStyles, css` @@ -209,10 +209,10 @@ export class UmbEditLanguageWorkspaceViewElement extends UmbLitElement { } } -export default UmbEditLanguageWorkspaceViewElement; +export default UmbLanguageDetailsWorkspaceViewElement; declare global { interface HTMLElementTagNameMap { - 'umb-edit-language-workspace-view': UmbEditLanguageWorkspaceViewElement; + 'umb-language-details-workspace-view': UmbLanguageDetailsWorkspaceViewElement; } }