diff --git a/src/packages/core/workspace/components/index.ts b/src/packages/core/workspace/components/index.ts index f851e0b3cb..4c92b26e52 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-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-header-name-editable/workspace-header-name-editable.element.ts b/src/packages/core/workspace/components/workspace-header-name-editable/workspace-header-name-editable.element.ts new file mode 100644 index 0000000000..8ad2277539 --- /dev/null +++ b/src/packages/core/workspace/components/workspace-header-name-editable/workspace-header-name-editable.element.ts @@ -0,0 +1,76 @@ +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-header-name-editable') +export class UmbWorkspaceHeaderNameEditableElement 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 ?? ''; + } + }, + 'observeWorkspaceName', + ); + } + + #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-header-name-editable': UmbWorkspaceHeaderNameEditableElement; + } +} 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, +); 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..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 @@ -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/data-type/workspace/data-type-workspace-editor.element.ts b/src/packages/data-type/workspace/data-type-workspace-editor.element.ts index 0f47767628..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 @@ -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; - } `, ]; } diff --git a/src/packages/dictionary/workspace/dictionary-workspace-editor.element.ts b/src/packages/dictionary/workspace/dictionary-workspace-editor.element.ts index 3a6b473f77..4a6fdadbc4 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; 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..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 @@ -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..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 @@ -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/language/workspace/language/language-workspace-editor.element.ts b/src/packages/language/workspace/language/language-workspace-editor.element.ts index 3e83ea0c08..786869eb54 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 }); } 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..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 @@ -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 }; 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..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 @@ -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%; - } `, ]; } 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() { 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..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 @@ -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; 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();