From baef2df4a2cf597c70d358ef1c7bdee08a82dbf3 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 27 Sep 2024 13:35:20 +0200 Subject: [PATCH 01/12] add namable workspace context token + interface --- src/packages/core/workspace/namable/index.ts | 2 ++ .../namable/namable-workspace-context.interface.ts | 8 ++++++++ .../workspace/namable/namable-workspace.context-token.ts | 9 +++++++++ 3 files changed, 19 insertions(+) create mode 100644 src/packages/core/workspace/namable/index.ts create mode 100644 src/packages/core/workspace/namable/namable-workspace-context.interface.ts create mode 100644 src/packages/core/workspace/namable/namable-workspace.context-token.ts diff --git a/src/packages/core/workspace/namable/index.ts b/src/packages/core/workspace/namable/index.ts new file mode 100644 index 0000000000..a95eb59eab --- /dev/null +++ b/src/packages/core/workspace/namable/index.ts @@ -0,0 +1,2 @@ +export * from './namable-workspace-context.interface.js'; +export * from './namable-workspace.context-token.js'; diff --git a/src/packages/core/workspace/namable/namable-workspace-context.interface.ts b/src/packages/core/workspace/namable/namable-workspace-context.interface.ts new file mode 100644 index 0000000000..18863e7619 --- /dev/null +++ b/src/packages/core/workspace/namable/namable-workspace-context.interface.ts @@ -0,0 +1,8 @@ +import type { UmbWorkspaceContext } from '../workspace-context.interface.js'; +import type { Observable } from '@umbraco-cms/backoffice/external/rxjs'; + +export interface UmbNamableWorkspaceContext extends UmbWorkspaceContext { + name: Observable; + getName(): string | undefined; + setName(name: string): void; +} diff --git a/src/packages/core/workspace/namable/namable-workspace.context-token.ts b/src/packages/core/workspace/namable/namable-workspace.context-token.ts new file mode 100644 index 0000000000..60932ba7b9 --- /dev/null +++ b/src/packages/core/workspace/namable/namable-workspace.context-token.ts @@ -0,0 +1,9 @@ +import type { UmbWorkspaceContext } from '../workspace-context.interface.js'; +import type { UmbNamableWorkspaceContext } from './namable-workspace-context.interface.js'; +import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; + +export const UMB_NAMABLE_WORKSPACE_CONTEXT = new UmbContextToken( + 'UmbWorkspaceContext', + undefined, + (context): context is UmbNamableWorkspaceContext => (context as any).getName !== undefined, +); From f1fc2d28d35614e85e7f2034ab446e67a9fcece7 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 27 Sep 2024 13:35:43 +0200 Subject: [PATCH 02/12] add workspace name element --- .../core/workspace/components/index.ts | 1 + .../components/workspace-name/index.ts | 1 + .../workspace-name/workspace-name.element.ts | 72 +++++++++++++++++++ 3 files changed, 74 insertions(+) create mode 100644 src/packages/core/workspace/components/workspace-name/index.ts create mode 100644 src/packages/core/workspace/components/workspace-name/workspace-name.element.ts diff --git a/src/packages/core/workspace/components/index.ts b/src/packages/core/workspace/components/index.ts index f851e0b3cb..11809199a6 100644 --- a/src/packages/core/workspace/components/index.ts +++ b/src/packages/core/workspace/components/index.ts @@ -4,4 +4,5 @@ export * from './workspace-action/index.js'; export * from './workspace-editor/index.js'; export * from './workspace-entity-action-menu/index.js'; export * from './workspace-footer/index.js'; +export * from './workspace-name/index.js'; export * from './workspace-split-view/index.js'; diff --git a/src/packages/core/workspace/components/workspace-name/index.ts b/src/packages/core/workspace/components/workspace-name/index.ts new file mode 100644 index 0000000000..e1aaff695b --- /dev/null +++ b/src/packages/core/workspace/components/workspace-name/index.ts @@ -0,0 +1 @@ +export * from './workspace-name.element.js'; diff --git a/src/packages/core/workspace/components/workspace-name/workspace-name.element.ts b/src/packages/core/workspace/components/workspace-name/workspace-name.element.ts new file mode 100644 index 0000000000..4b9e80882e --- /dev/null +++ b/src/packages/core/workspace/components/workspace-name/workspace-name.element.ts @@ -0,0 +1,72 @@ +import { UMB_NAMABLE_WORKSPACE_CONTEXT } from '../../namable/index.js'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; +import { umbFocus, UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui'; +import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; +import { umbBindToValidation } from '@umbraco-cms/backoffice/validation'; + +@customElement('umb-workspace-name') +export class UmbWorkspaceNameElement extends UmbLitElement { + @state() + private _name = ''; + + #workspaceContext?: typeof UMB_NAMABLE_WORKSPACE_CONTEXT.TYPE; + + constructor() { + super(); + + this.consumeContext(UMB_NAMABLE_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 ?? ''; + } + }); + } + + #onNameInput(event: UUIInputEvent) { + if (event instanceof UUIInputEvent) { + const target = event.composedPath()[0] as UUIInputElement; + + if (typeof target?.value === 'string') { + this.#workspaceContext?.setName(target.value); + } + } + } + + override render() { + return html``; + } + + static override styles = [ + UmbTextStyles, + css` + :host { + display: contents; + } + + #nameInput { + flex: 1 1 auto; + } + `, + ]; +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-workspace-name': UmbWorkspaceNameElement; + } +} From 71fa37ffb696ce4b8c0c7eb3221050fda58708e4 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 27 Sep 2024 13:36:00 +0200 Subject: [PATCH 03/12] use workspace name element in data type workspace --- .../data-type-workspace-editor.element.ts | 60 +------------------ 1 file changed, 3 insertions(+), 57 deletions(-) diff --git a/src/packages/data-type/workspace/data-type-workspace-editor.element.ts b/src/packages/data-type/workspace/data-type-workspace-editor.element.ts index 0f47767628..e05e3c7136 100644 --- a/src/packages/data-type/workspace/data-type-workspace-editor.element.ts +++ b/src/packages/data-type/workspace/data-type-workspace-editor.element.ts @@ -1,65 +1,15 @@ -import { UMB_DATA_TYPE_WORKSPACE_CONTEXT } from './data-type-workspace.context-token.js'; -import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui'; -import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; -import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; -import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element'; -import type { ManifestWorkspace } from '@umbraco-cms/backoffice/workspace'; -import { umbBindToValidation } from '@umbraco-cms/backoffice/validation'; +import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; /** * @element umb-data-type-workspace-editor * @description - Element for displaying the Data Type Workspace edit route. */ @customElement('umb-data-type-workspace-editor') export class UmbDataTypeWorkspaceEditorElement extends UmbLitElement { - @property({ attribute: false }) - manifest?: ManifestWorkspace; - - @state() - private _dataTypeName = ''; - - #workspaceContext?: typeof UMB_DATA_TYPE_WORKSPACE_CONTEXT.TYPE; - - constructor() { - super(); - - this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, (workspaceContext) => { - this.#workspaceContext = workspaceContext; - this.#workspaceContext.createPropertyDatasetContext(this); - this.#observeName(); - }); - } - - #observeName() { - if (!this.#workspaceContext) return; - this.observe(this.#workspaceContext.name, (dataTypeName) => { - if (dataTypeName !== this._dataTypeName) { - this._dataTypeName = dataTypeName ?? ''; - } - }); - } - - // 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); - } - } - } - override render() { return html` - + `; } @@ -71,10 +21,6 @@ export class UmbDataTypeWorkspaceEditorElement extends UmbLitElement { width: 100%; height: 100%; } - - #nameInput { - flex: 1 1 auto; - } `, ]; } From 330a2e471f14bf13c71f3ca9969ec6f22aa0a0fa Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 27 Sep 2024 13:42:42 +0200 Subject: [PATCH 04/12] use name component on member group workspace --- .../member-group-workspace-editor.element.ts | 37 ++----------------- 1 file changed, 3 insertions(+), 34 deletions(-) diff --git a/src/packages/members/member-group/workspace/member-group/member-group-workspace-editor.element.ts b/src/packages/members/member-group/workspace/member-group/member-group-workspace-editor.element.ts index 1e5fbae975..2ef2d6a5d6 100644 --- a/src/packages/members/member-group/workspace/member-group/member-group-workspace-editor.element.ts +++ b/src/packages/members/member-group/workspace/member-group/member-group-workspace-editor.element.ts @@ -1,20 +1,11 @@ import { UMB_MEMBER_GROUP_ROOT_WORKSPACE_PATH } from '../../paths.js'; import { UMB_MEMBER_GROUP_WORKSPACE_CONTEXT } from './member-group-workspace.context-token.js'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { css, html, customElement, property, state, nothing } from '@umbraco-cms/backoffice/external/lit'; -import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element'; -import type { ManifestWorkspace } from '@umbraco-cms/backoffice/workspace'; -import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui'; -import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; +import { css, html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-member-group-workspace-editor') export class UmbMemberGroupWorkspaceEditorElement extends UmbLitElement { - @property({ attribute: false }) - manifest?: ManifestWorkspace; - - @state() - private _name = ''; - @state() private _unique?: string; @@ -26,22 +17,10 @@ export class UmbMemberGroupWorkspaceEditorElement extends UmbLitElement { this.consumeContext(UMB_MEMBER_GROUP_WORKSPACE_CONTEXT, (workspaceContext) => { this.#workspaceContext = workspaceContext; if (!this.#workspaceContext) return; - this.observe(this.#workspaceContext.name, (name) => (this._name = name ?? '')); this.observe(this.#workspaceContext.unique, (unique) => (this._unique = unique ?? undefined)); }); } - // TODO. find a way where we don't have to do this for all Workspaces. - #onInput(event: UUIInputEvent) { - if (event instanceof UUIInputEvent) { - const target = event.composedPath()[0] as UUIInputElement; - - if (typeof target?.value === 'string') { - this.#workspaceContext?.setName(target.value); - } - } - } - #renderActions() { // Actions only works if we have a valid unique. if (!this._unique || this.#workspaceContext?.getIsNew()) return nothing; @@ -52,10 +31,8 @@ export class UmbMemberGroupWorkspaceEditorElement extends UmbLitElement { override render() { return html` + ${this.#renderActions()} - `; @@ -69,14 +46,6 @@ export class UmbMemberGroupWorkspaceEditorElement extends UmbLitElement { width: 100%; height: 100%; } - #header { - display: flex; - align-items: center; - width: 100%; - } - uui-input { - width: 100%; - } `, ]; } From 2e1951b0b942f0b6c7da24ce89b914739064085c Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 27 Sep 2024 13:49:12 +0200 Subject: [PATCH 05/12] implement name methods on user workspace context --- .../user/user/workspace/user/user-workspace.context.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/packages/user/user/workspace/user/user-workspace.context.ts b/src/packages/user/user/workspace/user/user-workspace.context.ts index 72982cec05..5b0d7572db 100644 --- a/src/packages/user/user/workspace/user/user-workspace.context.ts +++ b/src/packages/user/user/workspace/user/user-workspace.context.ts @@ -21,6 +21,7 @@ export class UmbUserWorkspaceContext public readonly avatarRepository: UmbUserAvatarRepository = new UmbUserAvatarRepository(this); public readonly configRepository = new UmbUserConfigRepository(this); + readonly name = this._data.createObservablePartOfCurrent((x) => x?.name); readonly state = this._data.createObservablePartOfCurrent((x) => x?.state); readonly kind = this._data.createObservablePartOfCurrent((x) => x?.kind); readonly userGroupUniques = this._data.createObservablePartOfCurrent((x) => x?.userGroupUniques || []); @@ -110,6 +111,14 @@ export class UmbUserWorkspaceContext return this.avatarRepository.deleteAvatar(unique); } + getName(): string { + return this._data.getCurrent()?.name || ''; + } + + setName(name: string) { + this._data.updateCurrent({ name }); + } + override destroy(): void { this.avatarRepository.destroy(); super.destroy(); From 00b43344c20dd4cfdcd209cd89310f8e77341574 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 27 Sep 2024 13:49:24 +0200 Subject: [PATCH 06/12] use workspace name element --- .../user/user-workspace-editor.element.ts | 24 ++----------------- 1 file changed, 2 insertions(+), 22 deletions(-) diff --git a/src/packages/user/user/workspace/user/user-workspace-editor.element.ts b/src/packages/user/user/workspace/user/user-workspace-editor.element.ts index b65ebebf63..faf77be5ee 100644 --- a/src/packages/user/user/workspace/user/user-workspace-editor.element.ts +++ b/src/packages/user/user/workspace/user/user-workspace-editor.element.ts @@ -3,10 +3,8 @@ import { UMB_USER_ROOT_WORKSPACE_PATH } from '../../paths.js'; import type { UmbUserWorkspaceContext } from './user-workspace.context.js'; import { UMB_USER_WORKSPACE_CONTEXT } from './user-workspace.context-token.js'; import { UMB_USER_WORKSPACE_ALIAS } from './constants.js'; -import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui'; -import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; import { css, html, nothing, customElement, state } from '@umbraco-cms/backoffice/external/lit'; -import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; // import local components. Theses are not meant to be used outside of this component. @@ -37,17 +35,6 @@ export class UmbUserWorkspaceEditorElement extends UmbLitElement { this.observe(this.#workspaceContext.data, (user) => (this._user = user), 'umbUserObserver'); } - // TODO. find a way where we don't have to do this for all workspaces. - #onNameChange(event: UUIInputEvent) { - if (event instanceof UUIInputEvent) { - const target = event.composedPath()[0] as UUIInputElement; - - if (typeof target?.value === 'string') { - this.#workspaceContext?.updateProperty('name', target.value); - } - } - } - override render() { if (!this._user) return html`User not found`; @@ -67,9 +54,7 @@ export class UmbUserWorkspaceEditorElement extends UmbLitElement { #renderHeader() { return html` - + `; } @@ -106,11 +91,6 @@ export class UmbUserWorkspaceEditorElement extends UmbLitElement { height: 100%; } - #header { - width: 100%; - display: grid; - } - #main { display: grid; grid-template-columns: 1fr 350px; From 26e0fae0fd20490de62986e16fcd3f03803dd951 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 27 Sep 2024 14:28:03 +0200 Subject: [PATCH 07/12] use name element --- .../data-type-folder-editor.element.ts | 62 ++----------------- .../data-type-folder-workspace.context.ts | 13 +++- ...ocument-blueprint-folder-editor.element.ts | 59 ++---------------- ...ment-blueprint-folder-workspace.context.ts | 13 +++- .../document-type-folder-editor.element.ts | 62 ++----------------- .../document-type-folder-workspace.context.ts | 13 +++- .../media-type-folder-editor.element.ts | 62 ++----------------- .../media-type-folder-workspace.context.ts | 13 +++- 8 files changed, 63 insertions(+), 234 deletions(-) diff --git a/src/packages/data-type/tree/folder/workspace/data-type-folder-editor.element.ts b/src/packages/data-type/tree/folder/workspace/data-type-folder-editor.element.ts index aaf4f175f7..f766977d53 100644 --- a/src/packages/data-type/tree/folder/workspace/data-type-folder-editor.element.ts +++ b/src/packages/data-type/tree/folder/workspace/data-type-folder-editor.element.ts @@ -1,69 +1,17 @@ -import { UMB_DATA_TYPE_FOLDER_WORKSPACE_ALIAS } from './constants.js'; -import { UMB_DATA_TYPE_FOLDER_WORKSPACE_CONTEXT } from './data-type-folder.workspace.context-token.js'; -import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; -import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui'; -import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; -import { umbFocus, UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { html, customElement } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { umbBindToValidation } from '@umbraco-cms/backoffice/validation'; const elementName = 'umb-data-type-folder-workspace-editor'; @customElement(elementName) export class UmbDataTypeFolderWorkspaceEditorElement extends UmbLitElement { - @state() - private _name = ''; - - #workspaceContext?: typeof UMB_DATA_TYPE_FOLDER_WORKSPACE_CONTEXT.TYPE; - - constructor() { - super(); - - this.consumeContext(UMB_DATA_TYPE_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 ?? ''; - } - }); - } - - #handleInput(event: UUIInputEvent) { - if (event instanceof UUIInputEvent) { - const target = event.composedPath()[0] as UUIInputElement; - - if (typeof target?.value === 'string') { - this.#workspaceContext?.setName(target.value); - } - } - } - override render() { - return html` - + return html` + `; } - static override styles = [ - UmbTextStyles, - css` - #nameInput { - flex: 1 1 auto; - } - `, - ]; + static override styles = [UmbTextStyles]; } export { UmbDataTypeFolderWorkspaceEditorElement as element }; diff --git a/src/packages/data-type/tree/folder/workspace/data-type-folder-workspace.context.ts b/src/packages/data-type/tree/folder/workspace/data-type-folder-workspace.context.ts index c9e7638018..0930ae60e5 100644 --- a/src/packages/data-type/tree/folder/workspace/data-type-folder-workspace.context.ts +++ b/src/packages/data-type/tree/folder/workspace/data-type-folder-workspace.context.ts @@ -37,13 +37,22 @@ export class UmbDataTypeFolderWorkspaceContext } /** - * @description Set the name of the script + * @description Set the name of the data type folder * @param {string} value - * @memberof UmbScriptWorkspaceContext + * @memberof UmbDataTypeFolderWorkspaceContext */ public setName(value: string) { this._data.updateCurrent({ name: value }); } + + /** + * @description Get the name of the data type folder + * @returns {string} + * @memberof UmbDataTypeFolderWorkspaceContext + */ + public getName() { + return this._data.getCurrent()?.name; + } } export { UmbDataTypeFolderWorkspaceContext as api }; diff --git a/src/packages/documents/document-blueprints/tree/folder/workspace/document-blueprint-folder-editor.element.ts b/src/packages/documents/document-blueprints/tree/folder/workspace/document-blueprint-folder-editor.element.ts index 1e5bef9c0c..52a62b6b41 100644 --- a/src/packages/documents/document-blueprints/tree/folder/workspace/document-blueprint-folder-editor.element.ts +++ b/src/packages/documents/document-blueprints/tree/folder/workspace/document-blueprint-folder-editor.element.ts @@ -1,68 +1,17 @@ -import { UMB_DOCUMENT_BLUEPRINT_FOLDER_WORKSPACE_CONTEXT } from './document-blueprint-folder.workspace.context-token.js'; -import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; -import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui'; -import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; -import { umbFocus, UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { html, customElement } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { umbBindToValidation } from '@umbraco-cms/backoffice/validation'; const elementName = 'umb-document-blueprint-folder-workspace-editor'; @customElement(elementName) export class UmbDocumentBlueprintFolderWorkspaceEditorElement extends UmbLitElement { - @state() - private _name = ''; - - #workspaceContext?: typeof UMB_DOCUMENT_BLUEPRINT_FOLDER_WORKSPACE_CONTEXT.TYPE; - - constructor() { - super(); - - this.consumeContext(UMB_DOCUMENT_BLUEPRINT_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 ?? ''; - } - }); - } - - #handleInput(event: UUIInputEvent) { - if (event instanceof UUIInputEvent) { - const target = event.composedPath()[0] as UUIInputElement; - - if (typeof target?.value === 'string') { - this.#workspaceContext?.setName(target.value); - } - } - } - override render() { return html` - + `; } - static override styles = [ - UmbTextStyles, - css` - #nameInput { - flex: 1 1 auto; - } - `, - ]; + static override styles = [UmbTextStyles]; } export { UmbDocumentBlueprintFolderWorkspaceEditorElement as element }; diff --git a/src/packages/documents/document-blueprints/tree/folder/workspace/document-blueprint-folder-workspace.context.ts b/src/packages/documents/document-blueprints/tree/folder/workspace/document-blueprint-folder-workspace.context.ts index 2fffbd70b1..34c64aa011 100644 --- a/src/packages/documents/document-blueprints/tree/folder/workspace/document-blueprint-folder-workspace.context.ts +++ b/src/packages/documents/document-blueprints/tree/folder/workspace/document-blueprint-folder-workspace.context.ts @@ -40,13 +40,22 @@ export class UmbDocumentBlueprintFolderWorkspaceContext } /** - * @description Set the name of the script + * @description Set the name of the document blueprint folder * @param {string} value - * @memberof UmbScriptWorkspaceContext + * @memberof UmbDocumentBlueprintFolderWorkspaceContext */ public setName(value: string) { this._data.updateCurrent({ name: value }); } + + /** + * @description Get the name of the document blueprint folder + * @returns {string} + * @memberof UmbDocumentBlueprintFolderWorkspaceContext + */ + public getName() { + return this._data.getCurrent()?.name; + } } export { UmbDocumentBlueprintFolderWorkspaceContext as api }; diff --git a/src/packages/documents/document-types/tree/folder/workspace/document-type-folder-editor.element.ts b/src/packages/documents/document-types/tree/folder/workspace/document-type-folder-editor.element.ts index 2e548d984f..14cb54bab0 100644 --- a/src/packages/documents/document-types/tree/folder/workspace/document-type-folder-editor.element.ts +++ b/src/packages/documents/document-types/tree/folder/workspace/document-type-folder-editor.element.ts @@ -1,69 +1,17 @@ -import { UMB_DOCUMENT_TYPE_FOLDER_WORKSPACE_ALIAS } from './constants.js'; -import { UMB_DOCUMENT_TYPE_FOLDER_WORKSPACE_CONTEXT } from './document-type-folder.workspace.context-token.js'; -import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; -import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui'; -import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; -import { umbFocus, UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { html, customElement } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { umbBindToValidation } from '@umbraco-cms/backoffice/validation'; const elementName = 'umb-document-type-folder-workspace-editor'; @customElement(elementName) export class UmbDocumentTypeFolderWorkspaceEditorElement extends UmbLitElement { - @state() - private _name = ''; - - #workspaceContext?: typeof UMB_DOCUMENT_TYPE_FOLDER_WORKSPACE_CONTEXT.TYPE; - - constructor() { - super(); - - this.consumeContext(UMB_DOCUMENT_TYPE_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 ?? ''; - } - }); - } - - #handleInput(event: UUIInputEvent) { - if (event instanceof UUIInputEvent) { - const target = event.composedPath()[0] as UUIInputElement; - - if (typeof target?.value === 'string') { - this.#workspaceContext?.setName(target.value); - } - } - } - override render() { - return html` - + return html` + `; } - static override styles = [ - UmbTextStyles, - css` - #nameInput { - flex: 1 1 auto; - } - `, - ]; + static override styles = [UmbTextStyles]; } export { UmbDocumentTypeFolderWorkspaceEditorElement as element }; diff --git a/src/packages/documents/document-types/tree/folder/workspace/document-type-folder-workspace.context.ts b/src/packages/documents/document-types/tree/folder/workspace/document-type-folder-workspace.context.ts index 7055f03015..81ee4598ca 100644 --- a/src/packages/documents/document-types/tree/folder/workspace/document-type-folder-workspace.context.ts +++ b/src/packages/documents/document-types/tree/folder/workspace/document-type-folder-workspace.context.ts @@ -40,13 +40,22 @@ export class UmbDocumentTypeFolderWorkspaceContext } /** - * @description Set the name of the script + * @description Set the name of the document type folder * @param {string} value - * @memberof UmbScriptWorkspaceContext + * @memberof UmbDocumentTypeFolderWorkspaceContext */ public setName(value: string) { this._data.updateCurrent({ name: value }); } + + /** + * @description Get the name of the document type folder + * @returns {string} + * @memberof UmbDocumentTypeFolderWorkspaceContext + */ + public getName() { + return this._data.getCurrent()?.name; + } } export { UmbDocumentTypeFolderWorkspaceContext as api }; diff --git a/src/packages/media/media-types/tree/folder/workspace/media-type-folder-editor.element.ts b/src/packages/media/media-types/tree/folder/workspace/media-type-folder-editor.element.ts index 8a3f7b50ec..01456aee60 100644 --- a/src/packages/media/media-types/tree/folder/workspace/media-type-folder-editor.element.ts +++ b/src/packages/media/media-types/tree/folder/workspace/media-type-folder-editor.element.ts @@ -1,69 +1,17 @@ -import { UMB_MEDIA_TYPE_FOLDER_WORKSPACE_ALIAS } from './constants.js'; -import { UMB_MEDIA_TYPE_FOLDER_WORKSPACE_CONTEXT } from './media-type-folder.workspace.context-token.js'; -import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; -import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui'; -import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; -import { umbFocus, UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { html, customElement } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { umbBindToValidation } from '@umbraco-cms/backoffice/validation'; const elementName = 'umb-media-type-folder-workspace-editor'; @customElement(elementName) export class UmbMediaTypeFolderWorkspaceEditorElement extends UmbLitElement { - @state() - private _name = ''; - - #workspaceContext?: typeof UMB_MEDIA_TYPE_FOLDER_WORKSPACE_CONTEXT.TYPE; - - constructor() { - super(); - - this.consumeContext(UMB_MEDIA_TYPE_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 ?? ''; - } - }); - } - - #handleInput(event: UUIInputEvent) { - if (event instanceof UUIInputEvent) { - const target = event.composedPath()[0] as UUIInputElement; - - if (typeof target?.value === 'string') { - this.#workspaceContext?.setName(target.value); - } - } - } - override render() { - return html` - + return html` + `; } - static override styles = [ - UmbTextStyles, - css` - #nameInput { - flex: 1 1 auto; - } - `, - ]; + static override styles = [UmbTextStyles]; } export { UmbMediaTypeFolderWorkspaceEditorElement as element }; diff --git a/src/packages/media/media-types/tree/folder/workspace/media-type-folder-workspace.context.ts b/src/packages/media/media-types/tree/folder/workspace/media-type-folder-workspace.context.ts index 01f74a2969..c44aee3ee1 100644 --- a/src/packages/media/media-types/tree/folder/workspace/media-type-folder-workspace.context.ts +++ b/src/packages/media/media-types/tree/folder/workspace/media-type-folder-workspace.context.ts @@ -37,13 +37,22 @@ export class UmbMediaTypeFolderWorkspaceContext } /** - * @description Set the name of the script + * @description Set the name of the media type folder * @param {string} value - * @memberof UmbScriptWorkspaceContext + * @memberof UmbMediaTypeFolderWorkspaceContext */ public setName(value: string) { this._data.updateCurrent({ name: value }); } + + /** + * @description Get the name of the media type folder + * @returns {string} + * @memberof UmbMediaTypeFolderWorkspaceContext + */ + public getName() { + return this._data.getCurrent()?.name; + } } export { UmbMediaTypeFolderWorkspaceContext as api }; From f06f53801293bc4cab847e98d340d5517d4f3812 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 27 Sep 2024 15:09:48 +0200 Subject: [PATCH 08/12] use element on language workspace --- .../language-workspace-editor.element.ts | 72 ++----------------- .../language/language-workspace.context.ts | 4 ++ 2 files changed, 11 insertions(+), 65 deletions(-) diff --git a/src/packages/language/workspace/language/language-workspace-editor.element.ts b/src/packages/language/workspace/language/language-workspace-editor.element.ts index 3e83ea0c08..13ef36d333 100644 --- a/src/packages/language/workspace/language/language-workspace-editor.element.ts +++ b/src/packages/language/workspace/language/language-workspace-editor.element.ts @@ -1,17 +1,11 @@ -import type { UmbLanguageDetailModel } from '../../types.js'; import { UMB_LANGUAGE_WORKSPACE_CONTEXT } from './language-workspace.context-token.js'; -import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui'; -import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; -import { css, html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit'; -import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element'; +import { html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; @customElement('umb-language-workspace-editor') export class UmbLanguageWorkspaceEditorElement extends UmbLitElement { #workspaceContext?: typeof UMB_LANGUAGE_WORKSPACE_CONTEXT.TYPE; - @state() - _language?: UmbLanguageDetailModel; - @state() _isNew?: boolean; @@ -20,73 +14,21 @@ export class UmbLanguageWorkspaceEditorElement extends UmbLitElement { this.consumeContext(UMB_LANGUAGE_WORKSPACE_CONTEXT, (context) => { this.#workspaceContext = context; - this.#observeData(); + this.observe(this.#workspaceContext.isNew, (isNew) => (this._isNew = isNew)); }); } - #observeData() { - if (!this.#workspaceContext) return; - this.observe(this.#workspaceContext.data, (data) => { - this._language = data; - }); - this.observe(this.#workspaceContext.isNew, (isNew) => { - this._isNew = isNew; - }); - } - - #handleInput(event: UUIInputEvent) { - if (event instanceof UUIInputEvent) { - const target = event.composedPath()[0] as UUIInputElement; - - if (typeof target?.value === 'string') { - this.#workspaceContext?.setName(target.value); - } - } - } - override render() { return html` - + ${this._isNew + ? html`

Add language

` + : html``} `; } - static override styles = [ - UmbTextStyles, - css` - #header { - display: flex; - gap: var(--uui-size-space-4); - width: 100%; - } - - uui-input { - width: 100%; - } - - strong { - display: flex; - align-items: center; - } - - #footer-into { - padding: 0 var(--uui-size-layout-1); - } - - uui-input:not(:focus) { - border: 1px solid transparent; - } - `, - ]; + static override styles = [UmbTextStyles]; } export default UmbLanguageWorkspaceEditorElement; diff --git a/src/packages/language/workspace/language/language-workspace.context.ts b/src/packages/language/workspace/language/language-workspace.context.ts index ca4456fea0..a0c0db4d18 100644 --- a/src/packages/language/workspace/language/language-workspace.context.ts +++ b/src/packages/language/workspace/language/language-workspace.context.ts @@ -55,6 +55,10 @@ export class UmbLanguageWorkspaceContext this._data.updateCurrent({ name }); } + getName() { + return this._data.getCurrent()?.name; + } + setCulture(unique: string) { this._data.updateCurrent({ unique }); } From 5ede87a8579a07c220f437c0c0f54d6cee9ec805 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 27 Sep 2024 15:15:01 +0200 Subject: [PATCH 09/12] use workspace name in dictionary workspace --- .../dictionary-workspace-editor.element.ts | 61 ++----------------- .../workspace/dictionary-workspace.context.ts | 4 ++ 2 files changed, 8 insertions(+), 57 deletions(-) diff --git a/src/packages/dictionary/workspace/dictionary-workspace-editor.element.ts b/src/packages/dictionary/workspace/dictionary-workspace-editor.element.ts index 3a6b473f77..905120a766 100644 --- a/src/packages/dictionary/workspace/dictionary-workspace-editor.element.ts +++ b/src/packages/dictionary/workspace/dictionary-workspace-editor.element.ts @@ -1,68 +1,15 @@ -import { UMB_DICTIONARY_WORKSPACE_CONTEXT } from './dictionary-workspace.context-token.js'; -import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui'; -import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; -import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; -import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element'; +import { html, customElement } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-dictionary-workspace-editor') export class UmbDictionaryWorkspaceEditorElement extends UmbLitElement { - @state() - private _name?: string | null = ''; - - #workspaceContext?: typeof UMB_DICTIONARY_WORKSPACE_CONTEXT.TYPE; - - constructor() { - super(); - - this.consumeContext(UMB_DICTIONARY_WORKSPACE_CONTEXT, (instance) => { - this.#workspaceContext = instance; - this.#observeName(); - }); - } - - #observeName() { - if (!this.#workspaceContext) return; - this.observe(this.#workspaceContext.name, (name) => (this._name = 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); - } - } - } - override render() { return html` - - + + `; } - - static override styles = [ - css` - #header { - display: flex; - gap: var(--uui-size-space-4); - width: 100%; - } - uui-input { - width: 100%; - } - `, - ]; } export default UmbDictionaryWorkspaceEditorElement; diff --git a/src/packages/dictionary/workspace/dictionary-workspace.context.ts b/src/packages/dictionary/workspace/dictionary-workspace.context.ts index 3f709f8bbf..e85b75a67f 100644 --- a/src/packages/dictionary/workspace/dictionary-workspace.context.ts +++ b/src/packages/dictionary/workspace/dictionary-workspace.context.ts @@ -56,6 +56,10 @@ export class UmbDictionaryWorkspaceContext this._data.updateCurrent({ name }); } + getName() { + return this._data.getCurrent()?.name; + } + setPropertyValue(isoCode: string, translation: string) { const currentData = this._data.getCurrent(); if (!currentData) return; From a8aabab6a76fef536ef3b067b19b6f87887dd45d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 30 Sep 2024 13:40:34 +0200 Subject: [PATCH 10/12] rename workspace-name element --- .../components/workspace-name/workspace-name.element.ts | 6 +++--- .../folder/workspace/data-type-folder-editor.element.ts | 2 +- .../workspace/data-type-workspace-editor.element.ts | 2 +- .../workspace/dictionary-workspace-editor.element.ts | 2 +- .../workspace/document-blueprint-folder-editor.element.ts | 2 +- .../folder/workspace/document-type-folder-editor.element.ts | 2 +- .../workspace/language/language-workspace-editor.element.ts | 2 +- .../folder/workspace/media-type-folder-editor.element.ts | 2 +- .../member-group/member-group-workspace-editor.element.ts | 2 +- .../user/workspace/user/user-workspace-editor.element.ts | 2 +- 10 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/packages/core/workspace/components/workspace-name/workspace-name.element.ts b/src/packages/core/workspace/components/workspace-name/workspace-name.element.ts index 4b9e80882e..2ce5631996 100644 --- a/src/packages/core/workspace/components/workspace-name/workspace-name.element.ts +++ b/src/packages/core/workspace/components/workspace-name/workspace-name.element.ts @@ -6,8 +6,8 @@ import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui'; import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; import { umbBindToValidation } from '@umbraco-cms/backoffice/validation'; -@customElement('umb-workspace-name') -export class UmbWorkspaceNameElement extends UmbLitElement { +@customElement('umb-workspace-editable-name-header') +export class UmbWorkspaceEditableNameHeaderElement extends UmbLitElement { @state() private _name = ''; @@ -67,6 +67,6 @@ export class UmbWorkspaceNameElement extends UmbLitElement { declare global { interface HTMLElementTagNameMap { - 'umb-workspace-name': UmbWorkspaceNameElement; + 'umb-workspace-editable-name-header': UmbWorkspaceEditableNameHeaderElement; } } diff --git a/src/packages/data-type/tree/folder/workspace/data-type-folder-editor.element.ts b/src/packages/data-type/tree/folder/workspace/data-type-folder-editor.element.ts index f766977d53..c088201dd6 100644 --- a/src/packages/data-type/tree/folder/workspace/data-type-folder-editor.element.ts +++ b/src/packages/data-type/tree/folder/workspace/data-type-folder-editor.element.ts @@ -7,7 +7,7 @@ const elementName = 'umb-data-type-folder-workspace-editor'; export class UmbDataTypeFolderWorkspaceEditorElement extends UmbLitElement { override render() { return html` - + `; } diff --git a/src/packages/data-type/workspace/data-type-workspace-editor.element.ts b/src/packages/data-type/workspace/data-type-workspace-editor.element.ts index e05e3c7136..d2a0e097ea 100644 --- a/src/packages/data-type/workspace/data-type-workspace-editor.element.ts +++ b/src/packages/data-type/workspace/data-type-workspace-editor.element.ts @@ -9,7 +9,7 @@ export class UmbDataTypeWorkspaceEditorElement extends UmbLitElement { override render() { return html` - + `; } diff --git a/src/packages/dictionary/workspace/dictionary-workspace-editor.element.ts b/src/packages/dictionary/workspace/dictionary-workspace-editor.element.ts index 905120a766..3b8100c01c 100644 --- a/src/packages/dictionary/workspace/dictionary-workspace-editor.element.ts +++ b/src/packages/dictionary/workspace/dictionary-workspace-editor.element.ts @@ -6,7 +6,7 @@ export class UmbDictionaryWorkspaceEditorElement extends UmbLitElement { override render() { return html` - + `; } diff --git a/src/packages/documents/document-blueprints/tree/folder/workspace/document-blueprint-folder-editor.element.ts b/src/packages/documents/document-blueprints/tree/folder/workspace/document-blueprint-folder-editor.element.ts index 52a62b6b41..2caff2ad23 100644 --- a/src/packages/documents/document-blueprints/tree/folder/workspace/document-blueprint-folder-editor.element.ts +++ b/src/packages/documents/document-blueprints/tree/folder/workspace/document-blueprint-folder-editor.element.ts @@ -7,7 +7,7 @@ const elementName = 'umb-document-blueprint-folder-workspace-editor'; export class UmbDocumentBlueprintFolderWorkspaceEditorElement extends UmbLitElement { override render() { return html` - + `; } diff --git a/src/packages/documents/document-types/tree/folder/workspace/document-type-folder-editor.element.ts b/src/packages/documents/document-types/tree/folder/workspace/document-type-folder-editor.element.ts index 14cb54bab0..7692359e4c 100644 --- a/src/packages/documents/document-types/tree/folder/workspace/document-type-folder-editor.element.ts +++ b/src/packages/documents/document-types/tree/folder/workspace/document-type-folder-editor.element.ts @@ -7,7 +7,7 @@ const elementName = 'umb-document-type-folder-workspace-editor'; export class UmbDocumentTypeFolderWorkspaceEditorElement extends UmbLitElement { override render() { return html` - + `; } diff --git a/src/packages/language/workspace/language/language-workspace-editor.element.ts b/src/packages/language/workspace/language/language-workspace-editor.element.ts index 13ef36d333..420fd46ba8 100644 --- a/src/packages/language/workspace/language/language-workspace-editor.element.ts +++ b/src/packages/language/workspace/language/language-workspace-editor.element.ts @@ -24,7 +24,7 @@ export class UmbLanguageWorkspaceEditorElement extends UmbLitElement { back-path="section/settings/workspace/language-root"> ${this._isNew ? html`

Add language

` - : html``} + : html``} `; } diff --git a/src/packages/media/media-types/tree/folder/workspace/media-type-folder-editor.element.ts b/src/packages/media/media-types/tree/folder/workspace/media-type-folder-editor.element.ts index 01456aee60..8d3d04e8ce 100644 --- a/src/packages/media/media-types/tree/folder/workspace/media-type-folder-editor.element.ts +++ b/src/packages/media/media-types/tree/folder/workspace/media-type-folder-editor.element.ts @@ -7,7 +7,7 @@ const elementName = 'umb-media-type-folder-workspace-editor'; export class UmbMediaTypeFolderWorkspaceEditorElement extends UmbLitElement { override render() { return html` - + `; } diff --git a/src/packages/members/member-group/workspace/member-group/member-group-workspace-editor.element.ts b/src/packages/members/member-group/workspace/member-group/member-group-workspace-editor.element.ts index 2ef2d6a5d6..db86e00419 100644 --- a/src/packages/members/member-group/workspace/member-group/member-group-workspace-editor.element.ts +++ b/src/packages/members/member-group/workspace/member-group/member-group-workspace-editor.element.ts @@ -31,7 +31,7 @@ export class UmbMemberGroupWorkspaceEditorElement extends UmbLitElement { override render() { return html` - + ${this.#renderActions()} diff --git a/src/packages/user/user/workspace/user/user-workspace-editor.element.ts b/src/packages/user/user/workspace/user/user-workspace-editor.element.ts index faf77be5ee..dd4e15ce65 100644 --- a/src/packages/user/user/workspace/user/user-workspace-editor.element.ts +++ b/src/packages/user/user/workspace/user/user-workspace-editor.element.ts @@ -54,7 +54,7 @@ export class UmbUserWorkspaceEditorElement extends UmbLitElement { #renderHeader() { return html` - + `; } From 8f00acb799778980a30f4d0ec705a7ffa56e96bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 30 Sep 2024 13:52:38 +0200 Subject: [PATCH 11/12] name observe controller alias --- .../workspace-name/workspace-name.element.ts | 14 +++++++++----- ...partial-view-folder-workspace-editor.element.ts | 14 +++++++++----- .../script-folder-workspace-editor.element.ts | 14 +++++++++----- .../stylesheet-folder-workspace-editor.element.ts | 14 +++++++++----- 4 files changed, 36 insertions(+), 20 deletions(-) diff --git a/src/packages/core/workspace/components/workspace-name/workspace-name.element.ts b/src/packages/core/workspace/components/workspace-name/workspace-name.element.ts index 2ce5631996..328b6eea68 100644 --- a/src/packages/core/workspace/components/workspace-name/workspace-name.element.ts +++ b/src/packages/core/workspace/components/workspace-name/workspace-name.element.ts @@ -24,11 +24,15 @@ export class UmbWorkspaceEditableNameHeaderElement extends UmbLitElement { #observeName() { if (!this.#workspaceContext) return; - this.observe(this.#workspaceContext.name, (name) => { - if (name !== this._name) { - this._name = name ?? ''; - } - }); + this.observe( + this.#workspaceContext.name, + (name) => { + if (name !== this._name) { + this._name = name ?? ''; + } + }, + 'observeWorkspaceName', + ); } #onNameInput(event: UUIInputEvent) { diff --git a/src/packages/templating/partial-views/tree/folder/workspace/partial-view-folder-workspace-editor.element.ts b/src/packages/templating/partial-views/tree/folder/workspace/partial-view-folder-workspace-editor.element.ts index 58cbe9a003..5a796bd923 100644 --- a/src/packages/templating/partial-views/tree/folder/workspace/partial-view-folder-workspace-editor.element.ts +++ b/src/packages/templating/partial-views/tree/folder/workspace/partial-view-folder-workspace-editor.element.ts @@ -23,11 +23,15 @@ export class UmbPartialViewFolderWorkspaceEditorElement extends UmbLitElement { #observeName() { if (!this.#workspaceContext) return; - this.observe(this.#workspaceContext.name, (name) => { - if (name !== this._name) { - this._name = name ?? ''; - } - }); + this.observe( + this.#workspaceContext.name, + (name) => { + if (name !== this._name) { + this._name = name ?? ''; + } + }, + 'observeName', + ); } override render() { diff --git a/src/packages/templating/scripts/tree/folder/workspace/script-folder-workspace-editor.element.ts b/src/packages/templating/scripts/tree/folder/workspace/script-folder-workspace-editor.element.ts index feec527561..9cd7909d5a 100644 --- a/src/packages/templating/scripts/tree/folder/workspace/script-folder-workspace-editor.element.ts +++ b/src/packages/templating/scripts/tree/folder/workspace/script-folder-workspace-editor.element.ts @@ -23,11 +23,15 @@ export class UmbScriptFolderWorkspaceEditorElement extends UmbLitElement { #observeName() { if (!this.#workspaceContext) return; - this.observe(this.#workspaceContext.name, (name) => { - if (name !== this._name) { - this._name = name ?? ''; - } - }); + this.observe( + this.#workspaceContext.name, + (name) => { + if (name !== this._name) { + this._name = name ?? ''; + } + }, + 'observeName', + ); } override render() { diff --git a/src/packages/templating/stylesheets/tree/folder/workspace/stylesheet-folder-workspace-editor.element.ts b/src/packages/templating/stylesheets/tree/folder/workspace/stylesheet-folder-workspace-editor.element.ts index d6b1397c5c..d79af43294 100644 --- a/src/packages/templating/stylesheets/tree/folder/workspace/stylesheet-folder-workspace-editor.element.ts +++ b/src/packages/templating/stylesheets/tree/folder/workspace/stylesheet-folder-workspace-editor.element.ts @@ -23,11 +23,15 @@ export class UmbStylesheetFolderWorkspaceEditorElement extends UmbLitElement { #observeName() { if (!this.#workspaceContext) return; - this.observe(this.#workspaceContext.name, (name) => { - if (name !== this._name) { - this._name = name ?? ''; - } - }); + this.observe( + this.#workspaceContext.name, + (name) => { + if (name !== this._name) { + this._name = name ?? ''; + } + }, + 'observeName', + ); } override render() { From 88a65ccca6539bb814d0a5d8adfc9ebf8296bf6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 30 Sep 2024 14:00:25 +0200 Subject: [PATCH 12/12] rename element --- src/packages/core/workspace/components/index.ts | 2 +- .../components/workspace-header-name-editable/index.ts | 1 + .../workspace-header-name-editable.element.ts} | 6 +++--- .../core/workspace/components/workspace-name/index.ts | 1 - .../folder/workspace/data-type-folder-editor.element.ts | 2 +- .../workspace/data-type-workspace-editor.element.ts | 2 +- .../workspace/dictionary-workspace-editor.element.ts | 2 +- .../workspace/document-blueprint-folder-editor.element.ts | 2 +- .../folder/workspace/document-type-folder-editor.element.ts | 2 +- .../workspace/language/language-workspace-editor.element.ts | 2 +- .../folder/workspace/media-type-folder-editor.element.ts | 2 +- .../member-group/member-group-workspace-editor.element.ts | 2 +- .../user/workspace/user/user-workspace-editor.element.ts | 2 +- 13 files changed, 14 insertions(+), 14 deletions(-) create mode 100644 src/packages/core/workspace/components/workspace-header-name-editable/index.ts rename src/packages/core/workspace/components/{workspace-name/workspace-name.element.ts => workspace-header-name-editable/workspace-header-name-editable.element.ts} (89%) delete mode 100644 src/packages/core/workspace/components/workspace-name/index.ts diff --git a/src/packages/core/workspace/components/index.ts b/src/packages/core/workspace/components/index.ts index 11809199a6..4c92b26e52 100644 --- a/src/packages/core/workspace/components/index.ts +++ b/src/packages/core/workspace/components/index.ts @@ -4,5 +4,5 @@ export * from './workspace-action/index.js'; export * from './workspace-editor/index.js'; export * from './workspace-entity-action-menu/index.js'; export * from './workspace-footer/index.js'; -export * from './workspace-name/index.js'; +export * from './workspace-header-name-editable/index.js'; export * from './workspace-split-view/index.js'; diff --git a/src/packages/core/workspace/components/workspace-header-name-editable/index.ts b/src/packages/core/workspace/components/workspace-header-name-editable/index.ts new file mode 100644 index 0000000000..2c4508868d --- /dev/null +++ b/src/packages/core/workspace/components/workspace-header-name-editable/index.ts @@ -0,0 +1 @@ +export * from './workspace-header-name-editable.element.js'; diff --git a/src/packages/core/workspace/components/workspace-name/workspace-name.element.ts b/src/packages/core/workspace/components/workspace-header-name-editable/workspace-header-name-editable.element.ts similarity index 89% rename from src/packages/core/workspace/components/workspace-name/workspace-name.element.ts rename to src/packages/core/workspace/components/workspace-header-name-editable/workspace-header-name-editable.element.ts index 328b6eea68..8ad2277539 100644 --- a/src/packages/core/workspace/components/workspace-name/workspace-name.element.ts +++ b/src/packages/core/workspace/components/workspace-header-name-editable/workspace-header-name-editable.element.ts @@ -6,8 +6,8 @@ import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui'; import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; import { umbBindToValidation } from '@umbraco-cms/backoffice/validation'; -@customElement('umb-workspace-editable-name-header') -export class UmbWorkspaceEditableNameHeaderElement extends UmbLitElement { +@customElement('umb-workspace-header-name-editable') +export class UmbWorkspaceHeaderNameEditableElement extends UmbLitElement { @state() private _name = ''; @@ -71,6 +71,6 @@ export class UmbWorkspaceEditableNameHeaderElement extends UmbLitElement { declare global { interface HTMLElementTagNameMap { - 'umb-workspace-editable-name-header': UmbWorkspaceEditableNameHeaderElement; + 'umb-workspace-header-name-editable': UmbWorkspaceHeaderNameEditableElement; } } diff --git a/src/packages/core/workspace/components/workspace-name/index.ts b/src/packages/core/workspace/components/workspace-name/index.ts deleted file mode 100644 index e1aaff695b..0000000000 --- a/src/packages/core/workspace/components/workspace-name/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './workspace-name.element.js'; diff --git a/src/packages/data-type/tree/folder/workspace/data-type-folder-editor.element.ts b/src/packages/data-type/tree/folder/workspace/data-type-folder-editor.element.ts index c088201dd6..65046d2744 100644 --- a/src/packages/data-type/tree/folder/workspace/data-type-folder-editor.element.ts +++ b/src/packages/data-type/tree/folder/workspace/data-type-folder-editor.element.ts @@ -7,7 +7,7 @@ const elementName = 'umb-data-type-folder-workspace-editor'; export class UmbDataTypeFolderWorkspaceEditorElement extends UmbLitElement { override render() { return html` - + `; } diff --git a/src/packages/data-type/workspace/data-type-workspace-editor.element.ts b/src/packages/data-type/workspace/data-type-workspace-editor.element.ts index d2a0e097ea..11473eb31d 100644 --- a/src/packages/data-type/workspace/data-type-workspace-editor.element.ts +++ b/src/packages/data-type/workspace/data-type-workspace-editor.element.ts @@ -9,7 +9,7 @@ export class UmbDataTypeWorkspaceEditorElement extends UmbLitElement { override render() { return html` - + `; } diff --git a/src/packages/dictionary/workspace/dictionary-workspace-editor.element.ts b/src/packages/dictionary/workspace/dictionary-workspace-editor.element.ts index 3b8100c01c..4a6fdadbc4 100644 --- a/src/packages/dictionary/workspace/dictionary-workspace-editor.element.ts +++ b/src/packages/dictionary/workspace/dictionary-workspace-editor.element.ts @@ -6,7 +6,7 @@ export class UmbDictionaryWorkspaceEditorElement extends UmbLitElement { override render() { return html` - + `; } diff --git a/src/packages/documents/document-blueprints/tree/folder/workspace/document-blueprint-folder-editor.element.ts b/src/packages/documents/document-blueprints/tree/folder/workspace/document-blueprint-folder-editor.element.ts index 2caff2ad23..bbbbd8dd17 100644 --- a/src/packages/documents/document-blueprints/tree/folder/workspace/document-blueprint-folder-editor.element.ts +++ b/src/packages/documents/document-blueprints/tree/folder/workspace/document-blueprint-folder-editor.element.ts @@ -7,7 +7,7 @@ const elementName = 'umb-document-blueprint-folder-workspace-editor'; export class UmbDocumentBlueprintFolderWorkspaceEditorElement extends UmbLitElement { override render() { return html` - + `; } diff --git a/src/packages/documents/document-types/tree/folder/workspace/document-type-folder-editor.element.ts b/src/packages/documents/document-types/tree/folder/workspace/document-type-folder-editor.element.ts index 7692359e4c..19803c6715 100644 --- a/src/packages/documents/document-types/tree/folder/workspace/document-type-folder-editor.element.ts +++ b/src/packages/documents/document-types/tree/folder/workspace/document-type-folder-editor.element.ts @@ -7,7 +7,7 @@ const elementName = 'umb-document-type-folder-workspace-editor'; export class UmbDocumentTypeFolderWorkspaceEditorElement extends UmbLitElement { override render() { return html` - + `; } diff --git a/src/packages/language/workspace/language/language-workspace-editor.element.ts b/src/packages/language/workspace/language/language-workspace-editor.element.ts index 420fd46ba8..786869eb54 100644 --- a/src/packages/language/workspace/language/language-workspace-editor.element.ts +++ b/src/packages/language/workspace/language/language-workspace-editor.element.ts @@ -24,7 +24,7 @@ export class UmbLanguageWorkspaceEditorElement extends UmbLitElement { back-path="section/settings/workspace/language-root"> ${this._isNew ? html`

Add language

` - : html``} + : html``} `; } diff --git a/src/packages/media/media-types/tree/folder/workspace/media-type-folder-editor.element.ts b/src/packages/media/media-types/tree/folder/workspace/media-type-folder-editor.element.ts index 8d3d04e8ce..1fd8798b49 100644 --- a/src/packages/media/media-types/tree/folder/workspace/media-type-folder-editor.element.ts +++ b/src/packages/media/media-types/tree/folder/workspace/media-type-folder-editor.element.ts @@ -7,7 +7,7 @@ const elementName = 'umb-media-type-folder-workspace-editor'; export class UmbMediaTypeFolderWorkspaceEditorElement extends UmbLitElement { override render() { return html` - + `; } diff --git a/src/packages/members/member-group/workspace/member-group/member-group-workspace-editor.element.ts b/src/packages/members/member-group/workspace/member-group/member-group-workspace-editor.element.ts index db86e00419..9de32097d1 100644 --- a/src/packages/members/member-group/workspace/member-group/member-group-workspace-editor.element.ts +++ b/src/packages/members/member-group/workspace/member-group/member-group-workspace-editor.element.ts @@ -31,7 +31,7 @@ export class UmbMemberGroupWorkspaceEditorElement extends UmbLitElement { override render() { return html` - + ${this.#renderActions()} diff --git a/src/packages/user/user/workspace/user/user-workspace-editor.element.ts b/src/packages/user/user/workspace/user/user-workspace-editor.element.ts index dd4e15ce65..10afe3c6b5 100644 --- a/src/packages/user/user/workspace/user/user-workspace-editor.element.ts +++ b/src/packages/user/user/workspace/user/user-workspace-editor.element.ts @@ -54,7 +54,7 @@ export class UmbUserWorkspaceEditorElement extends UmbLitElement { #renderHeader() { return html` - + `; }