use name component on member group workspace
This commit is contained in:
@@ -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%;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user