yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'v15/feature/emm-ufm' into v15/feature/emm-file-upload-preview

Browse Source
This commit is contained in:
Niels Lyngsø
2024-09-30 15:01:30 +02:00
committed by GitHub
parent 2940901613 df6e5c27cc
commit 790d80f243
25 changed files with 223 additions and 484 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/index.ts
View File

@@ -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';

1
src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-header-name-editable/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './workspace-header-name-editable.element.js';

76
src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-header-name-editable/workspace-header-name-editable.element.ts Normal file
View File

@@ -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`<uui-input
id="nameInput"
.value=${this._name}
@input="${this.#onNameInput}"
required
${umbBindToValidation(this, `$.name`, this._name)}
${umbFocus()}></uui-input>`;
}
static override styles = [
UmbTextStyles,
css`
:host {
display: contents;
}
#nameInput {
flex: 1 1 auto;
}
`,
];
}
declare global {
interface HTMLElementTagNameMap {
'umb-workspace-header-name-editable': UmbWorkspaceHeaderNameEditableElement;
}
}

2
src/Umbraco.Web.UI.Client/src/packages/core/workspace/namable/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export * from './namable-workspace-context.interface.js';
export * from './namable-workspace.context-token.js';

8
src/Umbraco.Web.UI.Client/src/packages/core/workspace/namable/namable-workspace-context.interface.ts Normal file
View File

@@ -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<string | undefined>;
getName(): string | undefined;
setName(name: string): void;
}

9
src/Umbraco.Web.UI.Client/src/packages/core/workspace/namable/namable-workspace.context-token.ts Normal file
View File

@@ -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, UmbNamableWorkspaceContext>(
'UmbWorkspaceContext',
undefined,
(context): context is UmbNamableWorkspaceContext => (context as any).getName !== undefined,
);

62
src/Umbraco.Web.UI.Client/src/packages/data-type/tree/folder/workspace/data-type-folder-editor.element.ts
View File

@@ -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`<umb-workspace-editor alias=${UMB_DATA_TYPE_FOLDER_WORKSPACE_ALIAS}>
<uui-input
slot="header"
id="nameInput"
.value=${this._name ?? ''}
@input="${this.#handleInput}"
required
${umbBindToValidation(this, `$.name`, this._name)}
${umbFocus()}></uui-input>
return html`<umb-workspace-editor>
<umb-workspace-header-name-editable slot="header"></umb-workspace-header-name-editable>
</umb-workspace-editor>`;
}
static override styles = [
UmbTextStyles,
css`
#nameInput {
flex: 1 1 auto;
}
`,
];
static override styles = [UmbTextStyles];
}
export { UmbDataTypeFolderWorkspaceEditorElement as element };

13
src/Umbraco.Web.UI.Client/src/packages/data-type/tree/folder/workspace/data-type-folder-workspace.context.ts
View File

@@ -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 };

60
src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace-editor.element.ts
View File

@@ -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`
<umb-workspace-editor alias="Umb.Workspace.DataType">
<uui-input
slot="header"
id="nameInput"
.value=${this._dataTypeName ?? ''}
@input="${this.#handleInput}"
required
${umbBindToValidation(this, `$.name`, this._dataTypeName)}
${umbFocus()}></uui-input>
<umb-workspace-header-name-editable slot="header"></umb-workspace-header-name-editable>
</umb-workspace-editor>
`;
}
@@ -71,10 +21,6 @@ export class UmbDataTypeWorkspaceEditorElement extends UmbLitElement {
width: 100%;
height: 100%;
}
#nameInput {
flex: 1 1 auto;
}
`,
];
}

61
src/Umbraco.Web.UI.Client/src/packages/dictionary/workspace/dictionary-workspace-editor.element.ts
View File

@@ -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`
<umb-workspace-editor alias="Umb.Workspace.Dictionary" back-path="section/dictionary/dashboard">
<div id="header" slot="header">
<uui-input
placeholder=${this.localize.term('placeholders_entername')}
.value=${this._name ?? ''}
@input="${this.#handleInput}"
label="${this.localize.term('general_dictionary')} ${this.localize.term('general_name')}"
${umbFocus()}></uui-input>
</div>
<umb-workspace-editor back-path="section/dictionary/dashboard">
<umb-workspace-header-name-editable slot="header"></umb-workspace-header-name-editable>
</umb-workspace-editor>
`;
}
static override styles = [
css`
#header {
display: flex;
gap: var(--uui-size-space-4);
width: 100%;
}
uui-input {
width: 100%;
}
`,
];
}
export default UmbDictionaryWorkspaceEditorElement;

4
src/Umbraco.Web.UI.Client/src/packages/dictionary/workspace/dictionary-workspace.context.ts
View File

@@ -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;

59
src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/tree/folder/workspace/document-blueprint-folder-editor.element.ts
View File

@@ -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`<umb-workspace-editor>
<uui-input
slot="header"
id="nameInput"
.value=${this._name ?? ''}
@input="${this.#handleInput}"
required
${umbBindToValidation(this, `$.name`, this._name)}
${umbFocus()}></uui-input>
<umb-workspace-header-name-editable slot="header"></umb-workspace-header-name-editable>
</umb-workspace-editor>`;
}
static override styles = [
UmbTextStyles,
css`
#nameInput {
flex: 1 1 auto;
}
`,
];
static override styles = [UmbTextStyles];
}
export { UmbDocumentBlueprintFolderWorkspaceEditorElement as element };

13
src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/tree/folder/workspace/document-blueprint-folder-workspace.context.ts
View File

@@ -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 };

62
src/Umbraco.Web.UI.Client/src/packages/documents/document-types/tree/folder/workspace/document-type-folder-editor.element.ts
View File

@@ -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`<umb-workspace-editor alias=${UMB_DOCUMENT_TYPE_FOLDER_WORKSPACE_ALIAS}>
<uui-input
slot="header"
id="nameInput"
.value=${this._name ?? ''}
@input="${this.#handleInput}"
required
${umbBindToValidation(this, `$.name`, this._name)}
${umbFocus()}></uui-input>
return html`<umb-workspace-editor>
<umb-workspace-header-name-editable slot="header"></umb-workspace-header-name-editable>
</umb-workspace-editor>`;
}
static override styles = [
UmbTextStyles,
css`
#nameInput {
flex: 1 1 auto;
}
`,
];
static override styles = [UmbTextStyles];
}
export { UmbDocumentTypeFolderWorkspaceEditorElement as element };

13
src/Umbraco.Web.UI.Client/src/packages/documents/document-types/tree/folder/workspace/document-type-folder-workspace.context.ts
View File

@@ -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 };

72
src/Umbraco.Web.UI.Client/src/packages/language/workspace/language/language-workspace-editor.element.ts
View File

@@ -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`<umb-workspace-editor
alias="Umb.Workspace.Language"
back-path="section/settings/workspace/language-root">
<div id="header" slot="header">
${this._isNew
? html`<strong>Add language</strong>`
: html`<uui-input
label="Language name"
value=${ifDefined(this._language?.name)}
@input="${this.#handleInput}"
${umbFocus()}></uui-input>`}
</div>
${this._isNew
? html`<h3 slot="header">Add language</h3>`
: html`<umb-workspace-header-name-editable slot="header"></umb-workspace-header-name-editable>`}
</umb-workspace-editor>`;
}
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;

4
src/Umbraco.Web.UI.Client/src/packages/language/workspace/language/language-workspace.context.ts
View File

@@ -55,6 +55,10 @@ export class UmbLanguageWorkspaceContext
this._data.updateCurrent({ name });
}
getName() {
return this._data.getCurrent()?.name;
}
setCulture(unique: string) {
this._data.updateCurrent({ unique });
}

62
src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/media-type-folder-editor.element.ts
View File

@@ -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`<umb-workspace-editor alias=${UMB_MEDIA_TYPE_FOLDER_WORKSPACE_ALIAS}>
<uui-input
slot="header"
id="nameInput"
.value=${this._name ?? ''}
@input="${this.#handleInput}"
required
${umbBindToValidation(this, `$.name`, this._name)}
${umbFocus()}></uui-input>
return html`<umb-workspace-editor>
<umb-workspace-header-name-editable slot="header"></umb-workspace-header-name-editable>
</umb-workspace-editor>`;
}
static override styles = [
UmbTextStyles,
css`
#nameInput {
flex: 1 1 auto;
}
`,
];
static override styles = [UmbTextStyles];
}
export { UmbMediaTypeFolderWorkspaceEditorElement as element };

13
src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/media-type-folder-workspace.context.ts
View File

@@ -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 };

37
src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group/member-group-workspace-editor.element.ts
View File

@@ -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`
<umb-workspace-editor alias="Umb.Workspace.MemberGroup" back-path=${UMB_MEMBER_GROUP_ROOT_WORKSPACE_PATH}>
<umb-workspace-header-name-editable slot="header"></umb-workspace-header-name-editable>
${this.#renderActions()}
<div id="header" slot="header">
<uui-input id="nameInput" .value=${this._name} @input="${this.#onInput}" ${umbFocus()}></uui-input>
</div>
<umb-workspace-entity-action-menu slot="action-menu"></umb-workspace-entity-action-menu>
</umb-workspace-editor>
`;
@@ -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%;
}
`,
];
}

14
src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/tree/folder/workspace/partial-view-folder-workspace-editor.element.ts
View File

@@ -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() {

14
src/Umbraco.Web.UI.Client/src/packages/templating/scripts/tree/folder/workspace/script-folder-workspace-editor.element.ts
View File

@@ -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() {

14
src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/tree/folder/workspace/stylesheet-folder-workspace-editor.element.ts
View File

@@ -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() {

24
src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/user/user-workspace-editor.element.ts
View File

@@ -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`
<div id="header" slot="header">
<uui-input id="name" .value=${this._user?.name ?? ''} @input="${this.#onNameChange}" ${umbFocus()}></uui-input>
</div>
<umb-workspace-header-name-editable slot="header"></umb-workspace-header-name-editable>
<umb-workspace-entity-action-menu slot="action-menu"></umb-workspace-entity-action-menu>
`;
}
@@ -106,11 +91,6 @@ export class UmbUserWorkspaceEditorElement extends UmbLitElement {
height: 100%;
}
#header {
width: 100%;
display: grid;
}
#main {
display: grid;
grid-template-columns: 1fr 350px;

9
src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/user/user-workspace.context.ts
View File

@@ -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();