Skip to content

Commit 1f53552

Browse files
nielslyngsoenielslyngsoe
authored
Merge pull request #2351 from umbraco/v15/feature/workspace-name-element
Feature: Workspace name element
2 parents d1ba2ec + 45d05b9 commit 1f53552

25 files changed

+223
-484
lines changed

‎src/packages/core/workspace/components/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@ export * from './workspace-action/index.js';
44
export * from './workspace-editor/index.js';
55
export * from './workspace-entity-action-menu/index.js';
66
export * from './workspace-footer/index.js';
7+
export * from './workspace-header-name-editable/index.js';
78
export * from './workspace-split-view/index.js';

‎src/packages/core/workspace/components/workspace-header-name-editable/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './workspace-header-name-editable.element.js';

‎src/packages/core/workspace/components/workspace-header-name-editable/workspace-header-name-editable.element.ts

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { UMB_NAMABLE_WORKSPACE_CONTEXT } from '../../namable/index.js';
2+
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
3+
import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
4+
import { umbFocus, UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
5+
import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
6+
import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
7+
import { umbBindToValidation } from '@umbraco-cms/backoffice/validation';
8+
9+
@customElement('umb-workspace-header-name-editable')
10+
export class UmbWorkspaceHeaderNameEditableElement extends UmbLitElement {
11+
@state()
12+
private _name = '';
13+
14+
#workspaceContext?: typeof UMB_NAMABLE_WORKSPACE_CONTEXT.TYPE;
15+
16+
constructor() {
17+
super();
18+
19+
this.consumeContext(UMB_NAMABLE_WORKSPACE_CONTEXT, (workspaceContext) => {
20+
this.#workspaceContext = workspaceContext;
21+
this.#observeName();
22+
});
23+
}
24+
25+
#observeName() {
26+
if (!this.#workspaceContext) return;
27+
this.observe(
28+
this.#workspaceContext.name,
29+
(name) => {
30+
if (name !== this._name) {
31+
this._name = name ?? '';
32+
}
33+
},
34+
'observeWorkspaceName',
35+
);
36+
}
37+
38+
#onNameInput(event: UUIInputEvent) {
39+
if (event instanceof UUIInputEvent) {
40+
const target = event.composedPath()[0] as UUIInputElement;
41+
42+
if (typeof target?.value === 'string') {
43+
this.#workspaceContext?.setName(target.value);
44+
}
45+
}
46+
}
47+
48+
override render() {
49+
return html`<uui-input
50+
id="nameInput"
51+
.value=${this._name}
52+
@input="${this.#onNameInput}"
53+
required
54+
${umbBindToValidation(this, `$.name`, this._name)}
55+
${umbFocus()}></uui-input>`;
56+
}
57+
58+
static override styles = [
59+
UmbTextStyles,
60+
css`
61+
:host {
62+
display: contents;
63+
}
64+
65+
#nameInput {
66+
flex: 1 1 auto;
67+
}
68+
`,
69+
];
70+
}
71+
72+
declare global {
73+
interface HTMLElementTagNameMap {
74+
'umb-workspace-header-name-editable': UmbWorkspaceHeaderNameEditableElement;
75+
}
76+
}

‎src/packages/core/workspace/namable/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './namable-workspace-context.interface.js';
2+
export * from './namable-workspace.context-token.js';

‎src/packages/core/workspace/namable/namable-workspace-context.interface.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import type { UmbWorkspaceContext } from '../workspace-context.interface.js';
2+
import type { Observable } from '@umbraco-cms/backoffice/external/rxjs';
3+
4+
export interface UmbNamableWorkspaceContext extends UmbWorkspaceContext {
5+
name: Observable<string | undefined>;
6+
getName(): string | undefined;
7+
setName(name: string): void;
8+
}

‎src/packages/core/workspace/namable/namable-workspace.context-token.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import type { UmbWorkspaceContext } from '../workspace-context.interface.js';
2+
import type { UmbNamableWorkspaceContext } from './namable-workspace-context.interface.js';
3+
import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
4+
5+
export const UMB_NAMABLE_WORKSPACE_CONTEXT = new UmbContextToken<UmbWorkspaceContext, UmbNamableWorkspaceContext>(
6+
'UmbWorkspaceContext',
7+
undefined,
8+
(context): context is UmbNamableWorkspaceContext => (context as any).getName !== undefined,
9+
);

‎src/packages/data-type/tree/folder/workspace/data-type-folder-editor.element.ts

Lines changed: 5 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,17 @@
1-
import { UMB_DATA_TYPE_FOLDER_WORKSPACE_ALIAS } from './constants.js';
2-
import { UMB_DATA_TYPE_FOLDER_WORKSPACE_CONTEXT } from './data-type-folder.workspace.context-token.js';
3-
import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
4-
import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
5-
import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
6-
import { umbFocus, UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
1+
import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
2+
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
73
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
8-
import { umbBindToValidation } from '@umbraco-cms/backoffice/validation';
94

105
const elementName = 'umb-data-type-folder-workspace-editor';
116
@customElement(elementName)
127
export class UmbDataTypeFolderWorkspaceEditorElement extends UmbLitElement {
13-
@state()
14-
private _name = '';
15-
16-
#workspaceContext?: typeof UMB_DATA_TYPE_FOLDER_WORKSPACE_CONTEXT.TYPE;
17-
18-
constructor() {
19-
super();
20-
21-
this.consumeContext(UMB_DATA_TYPE_FOLDER_WORKSPACE_CONTEXT, (workspaceContext) => {
22-
this.#workspaceContext = workspaceContext;
23-
this.#observeName();
24-
});
25-
}
26-
27-
#observeName() {
28-
if (!this.#workspaceContext) return;
29-
this.observe(this.#workspaceContext.name, (name) => {
30-
if (name !== this._name) {
31-
this._name = name ?? '';
32-
}
33-
});
34-
}
35-
36-
#handleInput(event: UUIInputEvent) {
37-
if (event instanceof UUIInputEvent) {
38-
const target = event.composedPath()[0] as UUIInputElement;
39-
40-
if (typeof target?.value === 'string') {
41-
this.#workspaceContext?.setName(target.value);
42-
}
43-
}
44-
}
45-
468
override render() {
47-
return html`<umb-workspace-editor alias=${UMB_DATA_TYPE_FOLDER_WORKSPACE_ALIAS}>
48-
<uui-input
49-
slot="header"
50-
id="nameInput"
51-
.value=${this._name ?? ''}
52-
@input="${this.#handleInput}"
53-
required
54-
${umbBindToValidation(this, `$.name`, this._name)}
55-
${umbFocus()}></uui-input>
9+
return html`<umb-workspace-editor>
10+
<umb-workspace-header-name-editable slot="header"></umb-workspace-header-name-editable>
5611
</umb-workspace-editor>`;
5712
}
5813

59-
static override styles = [
60-
UmbTextStyles,
61-
css`
62-
#nameInput {
63-
flex: 1 1 auto;
64-
}
65-
`,
66-
];
14+
static override styles = [UmbTextStyles];
6715
}
6816

6917
export { UmbDataTypeFolderWorkspaceEditorElement as element };

‎src/packages/data-type/tree/folder/workspace/data-type-folder-workspace.context.ts

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,22 @@ export class UmbDataTypeFolderWorkspaceContext
3737
}
3838

3939
/**
40-
* @description Set the name of the script
40+
* @description Set the name of the data type folder
4141
* @param {string} value
42-
* @memberof UmbScriptWorkspaceContext
42+
* @memberof UmbDataTypeFolderWorkspaceContext
4343
*/
4444
public setName(value: string) {
4545
this._data.updateCurrent({ name: value });
4646
}
47+
48+
/**
49+
* @description Get the name of the data type folder
50+
* @returns {string}
51+
* @memberof UmbDataTypeFolderWorkspaceContext
52+
*/
53+
public getName() {
54+
return this._data.getCurrent()?.name;
55+
}
4756
}
4857

4958
export { UmbDataTypeFolderWorkspaceContext as api };

‎src/packages/data-type/workspace/data-type-workspace-editor.element.ts

Lines changed: 3 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,15 @@
1-
import { UMB_DATA_TYPE_WORKSPACE_CONTEXT } from './data-type-workspace.context-token.js';
2-
import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
3-
import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
4-
import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
5-
import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element';
6-
import type { ManifestWorkspace } from '@umbraco-cms/backoffice/workspace';
7-
import { umbBindToValidation } from '@umbraco-cms/backoffice/validation';
1+
import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
2+
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
83
/**
94
* @element umb-data-type-workspace-editor
105
* @description - Element for displaying the Data Type Workspace edit route.
116
*/
127
@customElement('umb-data-type-workspace-editor')
138
export class UmbDataTypeWorkspaceEditorElement extends UmbLitElement {
14-
@property({ attribute: false })
15-
manifest?: ManifestWorkspace;
16-
17-
@state()
18-
private _dataTypeName = '';
19-
20-
#workspaceContext?: typeof UMB_DATA_TYPE_WORKSPACE_CONTEXT.TYPE;
21-
22-
constructor() {
23-
super();
24-
25-
this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, (workspaceContext) => {
26-
this.#workspaceContext = workspaceContext;
27-
this.#workspaceContext.createPropertyDatasetContext(this);
28-
this.#observeName();
29-
});
30-
}
31-
32-
#observeName() {
33-
if (!this.#workspaceContext) return;
34-
this.observe(this.#workspaceContext.name, (dataTypeName) => {
35-
if (dataTypeName !== this._dataTypeName) {
36-
this._dataTypeName = dataTypeName ?? '';
37-
}
38-
});
39-
}
40-
41-
// TODO. find a way where we don't have to do this for all Workspaces.
42-
#handleInput(event: UUIInputEvent) {
43-
if (event instanceof UUIInputEvent) {
44-
const target = event.composedPath()[0] as UUIInputElement;
45-
46-
if (typeof target?.value === 'string') {
47-
this.#workspaceContext?.setName(target.value);
48-
}
49-
}
50-
}
51-
529
override render() {
5310
return html`
5411
<umb-workspace-editor alias="Umb.Workspace.DataType">
55-
<uui-input
56-
slot="header"
57-
id="nameInput"
58-
.value=${this._dataTypeName ?? ''}
59-
@input="${this.#handleInput}"
60-
required
61-
${umbBindToValidation(this, `$.name`, this._dataTypeName)}
62-
${umbFocus()}></uui-input>
12+
<umb-workspace-header-name-editable slot="header"></umb-workspace-header-name-editable>
6313
</umb-workspace-editor>
6414
`;
6515
}
@@ -71,10 +21,6 @@ export class UmbDataTypeWorkspaceEditorElement extends UmbLitElement {
7121
width: 100%;
7222
height: 100%;
7323
}
74-
75-
#nameInput {
76-
flex: 1 1 auto;
77-
}
7824
`,
7925
];
8026
}

‎src/packages/dictionary/workspace/dictionary-workspace-editor.element.ts

Lines changed: 4 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,15 @@
1-
import { UMB_DICTIONARY_WORKSPACE_CONTEXT } from './dictionary-workspace.context-token.js';
2-
import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
3-
import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
4-
import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
5-
import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element';
1+
import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
2+
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
63

74
@customElement('umb-dictionary-workspace-editor')
85
export class UmbDictionaryWorkspaceEditorElement extends UmbLitElement {
9-
@state()
10-
private _name?: string | null = '';
11-
12-
#workspaceContext?: typeof UMB_DICTIONARY_WORKSPACE_CONTEXT.TYPE;
13-
14-
constructor() {
15-
super();
16-
17-
this.consumeContext(UMB_DICTIONARY_WORKSPACE_CONTEXT, (instance) => {
18-
this.#workspaceContext = instance;
19-
this.#observeName();
20-
});
21-
}
22-
23-
#observeName() {
24-
if (!this.#workspaceContext) return;
25-
this.observe(this.#workspaceContext.name, (name) => (this._name = name));
26-
}
27-
28-
// TODO. find a way where we don't have to do this for all workspaces.
29-
#handleInput(event: UUIInputEvent) {
30-
if (event instanceof UUIInputEvent) {
31-
const target = event.composedPath()[0] as UUIInputElement;
32-
33-
if (typeof target?.value === 'string') {
34-
this.#workspaceContext?.setName(target.value);
35-
}
36-
}
37-
}
38-
396
override render() {
407
return html`
41-
<umb-workspace-editor alias="Umb.Workspace.Dictionary" back-path="section/dictionary/dashboard">
42-
<div id="header" slot="header">
43-
<uui-input
44-
placeholder=${this.localize.term('placeholders_entername')}
45-
.value=${this._name ?? ''}
46-
@input="${this.#handleInput}"
47-
label="${this.localize.term('general_dictionary')} ${this.localize.term('general_name')}"
48-
${umbFocus()}></uui-input>
49-
</div>
8+
<umb-workspace-editor back-path="section/dictionary/dashboard">
9+
<umb-workspace-header-name-editable slot="header"></umb-workspace-header-name-editable>
5010
</umb-workspace-editor>
5111
`;
5212
}
53-
54-
static override styles = [
55-
css`
56-
#header {
57-
display: flex;
58-
gap: var(--uui-size-space-4);
59-
width: 100%;
60-
}
61-
uui-input {
62-
width: 100%;
63-
}
64-
`,
65-
];
6613
}
6714

6815
export default UmbDictionaryWorkspaceEditorElement;

0 commit comments

Comments
 (0)