member type + focus

Author: nielslyngsoe

src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts

@@ -3,6 +3,7 @@ import type { UmbInputWithAliasElement } from '@umbraco-cms/backoffice/component
 import { umbFocus, UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { css, html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { UMB_MODAL_MANAGER_CONTEXT, UMB_ICON_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
+
 @customElement('umb-document-type-workspace-editor')
 export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
 	@state()
@@ -69,7 +70,8 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
 						label="name"
 						value=${this._name}
 						alias=${this._alias}
-						@change="${this.#onNameAndAliasChange}"></umb-input-with-alias>
+						@change="${this.#onNameAndAliasChange}"
+						${umbFocus()}></umb-input-with-alias>
 				</div>
 			</umb-workspace-editor>
 		`;

src/packages/media/media-types/workspace/media-type-workspace-editor.element.ts

@@ -1,11 +1,8 @@
 import type { UmbMediaTypeWorkspaceContext } from './media-type-workspace.context.js';
 import { UMB_MEDIA_TYPE_WORKSPACE_CONTEXT } from './media-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, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element';
 import { UMB_ICON_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
-import { generateAlias } from '@umbraco-cms/backoffice/utils';
 
 @customElement('umb-media-type-workspace-editor')
 export class UmbMediaTypeWorkspaceEditorElement extends UmbLitElement {
@@ -76,7 +73,8 @@ export class UmbMediaTypeWorkspaceEditorElement extends UmbLitElement {
 					label="name"
 					value=${this._name}
 					alias=${this._alias}
-					@change="${this.#onNameAndAliasChange}"></umb-input-with-alias>
+					@change="${this.#onNameAndAliasChange}"
+					${umbFocus()}></umb-input-with-alias>
 			</div>
 		</umb-workspace-editor>`;
 	}

src/packages/members/member-type/workspace/member-type-workspace-editor.element.ts

@@ -1,10 +1,7 @@
 import { UMB_MEMBER_TYPE_WORKSPACE_CONTEXT } from './member-type-workspace.context-token.js';
 import { css, html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element';
-import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
-import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
 import { UMB_ICON_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
-import { generateAlias } from '@umbraco-cms/backoffice/utils';
 
 @customElement('umb-member-type-workspace-editor')
 export class UmbMemberTypeWorkspaceEditorElement extends UmbLitElement {
@@ -14,9 +11,6 @@ export class UmbMemberTypeWorkspaceEditorElement extends UmbLitElement {
 	@state()
 	private _alias?: string;
 
-	@state()
-	private _aliasLocked = true;
-
 	@state()
 	private _icon?: string;
 
@@ -54,43 +48,6 @@ export class UmbMemberTypeWorkspaceEditorElement extends UmbLitElement {
 		);
 	}
 
-	// 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') {
-				const oldName = this._name;
-				const oldAlias = this._alias;
-				const newName = event.target.value.toString();
-				if (this._aliasLocked) {
-					const expectedOldAlias = generateAlias(oldName ?? '');
-					// Only update the alias if the alias matches a generated alias of the old name (otherwise the alias is considered one written by the user.)
-					if (expectedOldAlias === oldAlias) {
-						this.#workspaceContext?.set('alias', generateAlias(newName));
-					}
-				}
-				this.#workspaceContext?.setName(target.value);
-			}
-		}
-	}
-
-	// TODO. find a way where we don't have to do this for all workspaces.
-	#onAliasChange(event: UUIInputEvent) {
-		if (event instanceof UUIInputEvent) {
-			const target = event.composedPath()[0] as UUIInputElement;
-
-			if (typeof target?.value === 'string') {
-				this.#workspaceContext?.set('alias', target.value);
-			}
-		}
-		event.stopPropagation();
-	}
-
-	#onToggleAliasLock() {
-		this._aliasLocked = !this._aliasLocked;
-	}
-
 	private async _handleIconClick() {
 		const [alias, color] = this._icon?.replace('color-', '')?.split(' ') ?? [];
 		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
@@ -110,6 +67,11 @@ export class UmbMemberTypeWorkspaceEditorElement extends UmbLitElement {
 		});
 	}
 
+	#onNameAndAliasChange(event: InputEvent & { target: UmbInputWithAliasElement }) {
+		this.#workspaceContext?.setName(event.target.value ?? '');
+		this.#workspaceContext?.setAlias(event.target.alias ?? '');
+	}
+
 	render() {
 		return html`
 			<umb-workspace-editor alias="Umb.Workspace.MemberType">
@@ -118,22 +80,13 @@ export class UmbMemberTypeWorkspaceEditorElement extends UmbLitElement {
 						<uui-icon name="${ifDefined(this._icon)}" style="color: ${this._iconColorAlias}"></uui-icon>
 					</uui-button>
 
-					<uui-input id="name" .value=${this._name} @input="${this.#onNameChange}" label="name" ${umbFocus()}>
-						<!-- TODO: should use UUI-LOCK-INPUT, but that does not fire an event when its locked/unlocked -->
-						<uui-input
-							name="alias"
-							slot="append"
-							label="alias"
-							@input=${this.#onAliasChange}
-							.value=${this._alias}
-							placeholder="Enter alias..."
-							?disabled=${this._aliasLocked}>
-							<!-- TODO: validation for bad characters -->
-							<div @click=${this.#onToggleAliasLock} @keydown=${() => ''} id="alias-lock" slot="prepend">
-								<uui-icon name=${this._aliasLocked ? 'icon-lock' : 'icon-unlocked'}></uui-icon>
-							</div>
-						</uui-input>
-					</uui-input>
+					<umb-input-with-alias
+						id="name"
+						label="name"
+						value=${this._name}
+						alias=${this._alias}
+						@change="${this.#onNameAndAliasChange}"
+						${umbFocus()}></umb-input-with-alias>
 				</div>
 			</umb-workspace-editor>
 		`;