yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bugfix: Auto generate alias (#2092)

Browse Source 
* 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>
This commit is contained in:
Lone Iversen
2024-08-20 18:04:18 +02:00
committed by GitHub
parent d66e6c60b5
commit 9c661b5fa3
3 changed files with 63 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/Umbraco.Web.UI.Client/src/packages/core/components/input-with-alias/input-with-alias.element.ts
View File

@@ -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}

31
src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-property.element.ts
View File

@@ -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);
}

46
src/Umbraco.Web.UI.Client/src/packages/core/property-type/workspace/views/settings/property-workspace-view-settings.element.ts
View File

@@ -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) {