use name component on member group workspace

This commit is contained in:
Mads Rasmussen
2024-09-27 13:42:42 +02:00
parent 8c394331f5
commit ba55581d57

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-name slot="header"></umb-workspace-name>
${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%;
}
`,
];
}