Bugfix: Auto generate alias (#2092)

* auto generate alias * remove import * type * re-enable auto generate alias on empty and locked * unused * property alias generate * property modal - auto gen alias * auto generate property off for existing properties * unused * unused import * Removed TODO note as v13 didn't perform that logic. --------- Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Co-authored-by: leekelleher <leekelleher@gmail.com>
umbraco · Aug 20, 2024 · 70343dc · 70343dc
1 parent e2456f4
commit 70343dc
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 35 deletions.
diff --git a/src/packages/core/components/input-with-alias/input-with-alias.element.ts b/src/packages/core/components/input-with-alias/input-with-alias.element.ts
@@ -14,7 +14,7 @@ export class UmbInputWithAliasElement extends UmbFormControlMixin<string, typeof
 	label: string = '';
 
 	@property({ type: String, reflect: false })
-	alias?: string;
+	alias = '';
 
 	@property({ type: Boolean, reflect: true })
 	required: boolean = false;
@@ -50,16 +50,10 @@ export class UmbInputWithAliasElement extends UmbFormControlMixin<string, typeof
 		const target = e.composedPath()[0] as UUIInputElement;
 
 		if (typeof target?.value === 'string') {
-			const oldName = this.value;
-			const oldAlias = this.alias ?? '';
 			this.value = e.target.value.toString();
 			if (this.autoGenerateAlias && this._aliasLocked) {
-				// If locked we will update the alias, but only if it matches the generated alias of the old name [NL]
-				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.) [NL]
-				if (expectedOldAlias === oldAlias) {
-					this.alias = generateAlias(this.value);
-				}
+				// Generate alias if it's locked and auto-generate is enabled
+				this.alias = generateAlias(this.value);
 			}
 
 			this.dispatchEvent(new UmbChangeEvent());
@@ -87,6 +81,13 @@ export class UmbInputWithAliasElement extends UmbFormControlMixin<string, typeof
 
 	#onToggleAliasLock(event: CustomEvent) {
 		this._aliasLocked = !this._aliasLocked;
+		if (!this.alias && this._aliasLocked) {
+			// Reenable auto-generate if alias is empty and locked.
+			this.autoGenerateAlias = true;
+		} else {
+			this.autoGenerateAlias = false;
+		}
+
 		if (!this._aliasLocked) {
 			(event.target as UUIInputElement)?.focus();
 		}
@@ -105,12 +106,12 @@ export class UmbInputWithAliasElement extends UmbFormControlMixin<string, typeof
 				@input=${this.#onNameChange}
 				?required=${this.required}>
 				<uui-input-lock
-					auto-width
 					name="alias"
 					slot="append"
 					label=${aliasLabel}
 					placeholder=${aliasLabel}
 					.value=${this.alias}
+					?auto-width=${!!this.value}
 					?locked=${this._aliasLocked && !this.aliasReadonly}
 					?readonly=${this.aliasReadonly}
 					?required=${this.required}

diff --git a/...s/core/content-type/workspace/views/design/content-type-design-editor-property.element.ts b/...s/core/content-type/workspace/views/design/content-type-design-editor-property.element.ts
@@ -12,7 +12,7 @@ import type {
 	UmbPropertyTypeModel,
 	UmbPropertyTypeScaffoldModel,
 } from '@umbraco-cms/backoffice/content-type';
-import type { UUIInputElement, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
+import type { UUIInputElement, UUIInputLockElement, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
 
 /**
  *  @element umb-content-type-design-editor-property
@@ -24,6 +24,7 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement {
 	#context = new UmbPropertyTypeContext(this);
 	#dataTypeDetailRepository = new UmbDataTypeDetailRepository(this);
 	#dataTypeUnique?: string;
+	#propertyUnique?: string;
 
 	@property({ attribute: false })
 	public set propertyStructureHelper(value: UmbContentTypePropertyStructureHelper<UmbContentTypeModel> | undefined) {
@@ -52,6 +53,7 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement {
 		this._property = value;
 		this.#context.setAlias(value?.alias);
 		this.#context.setLabel(value?.name);
+		this.#checkAliasAutoGenerate(this._property?.id);
 		this.#checkInherited();
 		this.#setDataType(this._property?.dataType?.unique);
 		this.requestUpdate('property', oldValue);
@@ -82,6 +84,17 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement {
 	@state()
 	private _aliasLocked = true;
 
+	#autoGenerateAlias = true;
+
+	#checkAliasAutoGenerate(unique: string | undefined) {
+		if (unique === this.#propertyUnique) return;
+		this.#propertyUnique = unique;
+
+		if (this.#context.getAlias()) {
+			this.#autoGenerateAlias = false;
+		}
+	}
+
 	async #checkInherited() {
 		if (this._propertyStructureHelper && this._property) {
 			// We can first match with something if we have a name [NL]
@@ -114,6 +127,12 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement {
 	}
 
 	#onToggleAliasLock(event: CustomEvent) {
+		if (!this.property?.alias && (event.target as UUIInputLockElement).locked) {
+			this.#autoGenerateAlias = true;
+		} else {
+			this.#autoGenerateAlias = false;
+		}
+
 		this._aliasLocked = !this._aliasLocked;
 		if (!this._aliasLocked) {
 			(event.target as UUIInputElement)?.focus();
@@ -152,15 +171,9 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement {
 	}
 
 	#onNameChanged(event: UUIInputEvent) {
-		const oldName = this.property?.name ?? '';
-		const oldAlias = this.property?.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.#singleValueUpdate('alias', generateAlias(newName ?? ''));
-			}
+		if (this.#autoGenerateAlias) {
+			this.#singleValueUpdate('alias', generateAlias(newName ?? ''));
 		}
 		this.#singleValueUpdate('name', newName);
 	}

diff --git a/...s/core/property-type/workspace/views/settings/property-workspace-view-settings.element.ts b/...s/core/property-type/workspace/views/settings/property-workspace-view-settings.element.ts
@@ -1,13 +1,18 @@
 import { UMB_PROPERTY_TYPE_WORKSPACE_CONTEXT } from '../../../index.js';
-import { css, html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, state, nothing, query } from '@umbraco-cms/backoffice/external/lit';
 import { generateAlias } from '@umbraco-cms/backoffice/utils';
+import { umbBindToValidation } from '@umbraco-cms/backoffice/validation';
 import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UMB_CONTENT_TYPE_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/content-type';
 import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
 import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
-import type { UUIBooleanInputEvent, UUIInputEvent, UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
-import { umbBindToValidation } from '@umbraco-cms/backoffice/validation';
+import type {
+	UUIBooleanInputEvent,
+	UUIInputEvent,
+	UUIInputLockElement,
+	UUISelectEvent,
+} from '@umbraco-cms/backoffice/external/uui';
 
 @customElement('umb-property-type-workspace-view-settings')
 export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement implements UmbWorkspaceViewElement {
@@ -44,12 +49,18 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
 	@state()
 	private _aliasLocked = true;
 
+	@state()
+	private _autoGenerateAlias = true;
+
 	@state()
 	private _contentTypeVariesByCulture?: boolean;
 
 	@state()
 	private _contentTypeVariesBySegment?: boolean;
 
+	@query('#alias-input')
+	private _aliasInput!: UUIInputLockElement;
+
 	constructor() {
 		super();
 
@@ -58,6 +69,10 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
 			this.observe(
 				instance.data,
 				(data) => {
+					if (!this._data && data?.alias) {
+						// Initial. Loading existing property
+						this._autoGenerateAlias = false;
+					}
 					this._data = data;
 				},
 				'observeData',
@@ -75,23 +90,16 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
 	}
 
 	#onNameChange(event: UUIInputEvent) {
-		const oldName = this._data?.name;
-		const oldAlias = this._data?.alias;
 		this.updateValue({ name: 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.) [NL]
-			if (expectedOldAlias === oldAlias) {
-				this.updateValue({ alias: generateAlias(this._data?.name ?? '') });
-			}
+		if (this._aliasLocked && this._autoGenerateAlias) {
+			this.updateValue({ alias: generateAlias(this._data?.name ?? '') });
 		}
 	}
 
-	#onAliasChange(event: UUIInputEvent) {
-		const alias = generateAlias(event.target.value.toString());
-		if (this._aliasLocked) {
-			this.updateValue({ alias });
-		}
+	#onAliasChange() {
+		// TODO: Why can I not get the correct value via event? Is it an issue in uui library too?
+		const alias = generateAlias(this._aliasInput.value.toString());
+		this.updateValue({ alias });
 	}
 
 	#onDescriptionChange(event: UUIInputEvent) {
@@ -136,6 +144,12 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
 
 	#onToggleAliasLock() {
 		this._aliasLocked = !this._aliasLocked;
+		if (this._aliasLocked && !this._data?.alias) {
+			// Reenable auto-generate if alias is empty and locked.
+			this._autoGenerateAlias = true;
+		} else {
+			this._autoGenerateAlias = false;
+		}
 	}
 
 	#onCustomValidationChange(event: UUISelectEvent) {