alias generation on document workspace editor

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts

@@ -8,6 +8,7 @@ import {
 	UMB_ICON_PICKER_MODAL,
 } from '@umbraco-cms/backoffice/modal';
 import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
+import { generateAlias } from '@umbraco-cms/backoffice/utils';
 @customElement('umb-document-type-workspace-editor')
 export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
 	@state()
@@ -25,6 +26,9 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
 	@state()
 	private _alias?: string;
 
+	@state()
+	private _aliasLocked = true;
+
 	private _modalContext?: UmbModalManagerContext;
 
 	constructor() {
@@ -48,18 +52,30 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
 	}
 
 	// TODO. find a way where we don't have to do this for all workspaces.
-	private _handleNameInput(event: UUIInputEvent) {
+	#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?.setAlias(generateAlias(newName));
+					}
+				}
 				this.#workspaceContext?.setName(target.value);
 			}
 		}
 	}
 
+
 	// TODO. find a way where we don't have to do this for all workspaces.
-	private _handleAliasInput(event: UUIInputEvent) {
+	#onAliasChange(event: UUIInputEvent) {
 		if (event instanceof UUIInputEvent) {
 			const target = event.composedPath()[0] as UUIInputElement;
 
@@ -70,6 +86,10 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
 		event.stopPropagation();
 	}
 
+	#onToggleAliasLock() {
+		this._aliasLocked = !this._aliasLocked;
+	}
+
 	private async _handleIconClick() {
 		const modalContext = this._modalContext?.open(UMB_ICON_PICKER_MODAL, {
 			icon: this._icon,
@@ -90,10 +110,23 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
 						<uui-icon name="${this._icon}" style="color: ${this._iconColorAlias}"></uui-icon>
 					</uui-button>
 
-					<uui-input id="name" .value=${this._name} @input="${this._handleNameInput}">
-						<uui-input-lock id="alias" slot="append" .value=${this._alias} @input="${this._handleAliasInput}"></uui-input
-						></uui-input-lock>
+					<uui-input id="name" .value=${this._name} @input="${this.#onNameChange}">
+						<!-- TODO: should use UUI-LOCK-INPUT, but that does not fire an event when its locked/unlocked -->
+						<uui-input
+							name="alias"
+							slot="append"
+							@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 ? 'umb:lock' : 'umb:unlocked'}></uui-icon>
+							</div>
+						</uui-input>
 					</uui-input>
+
+
 				</div>
 
 				<div slot="footer-info">
@@ -134,15 +167,20 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
 				align-items: center;
 			}
 
-			#alias {
-				height: calc(100% - 2px);
-				--uui-input-border-width: 0;
-				--uui-button-height: calc(100% -2px);
+			#alias-lock {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				cursor: pointer;
+			}
+			#alias-lock uui-icon {
+				margin-bottom: 2px;
 			}
 
 			#icon {
 				font-size: calc(var(--uui-size-layout-3) / 2);
 			}
+
 		`,
 	];
 }