From 60fe407679ac4fa7860568bca254fade30bb3635 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 7 Mar 2024 11:03:32 +0100 Subject: [PATCH] refactors --- ...-workspace-view-edit-properties.element.ts | 2 +- ...pe-workspace-view-edit-property.element.ts | 144 +++++++++--------- ...-workspace-view-edit-properties.element.ts | 2 +- ...pe-workspace-view-edit-property.element.ts | 14 +- ...-workspace-view-edit-properties.element.ts | 2 +- ...pe-workspace-view-edit-property.element.ts | 14 +- 6 files changed, 89 insertions(+), 89 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts index 9789ad8a84..fef8a6550f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts @@ -204,7 +204,7 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle ?inherited=${property.container?.id !== this.containerId} ?sort-mode-active=${this._sortModeActive} .property=${property} - @partial-property-update=${(event: CustomEvent) => { + @umb:partial-property-update=${(event: CustomEvent) => { this._propertyStructureHelper.partialUpdateProperty(property.id, event.detail); }} @property-delete=${() => { diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts index 59357d630a..2d09aa82bb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts @@ -20,7 +20,12 @@ import type { UmbPropertyTypeModel, UmbPropertyTypeScaffoldModel } from '@umbrac */ @customElement('umb-document-type-workspace-view-edit-property') export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { - private _property?: UmbPropertyTypeModel | UmbPropertyTypeScaffoldModel | undefined; + // + #dataTypeDetailRepository = new UmbDataTypeDetailRepository(this); + + #settingsModal; + #workspaceModal; + /** * Property, the data object for the property. * @type {UmbPropertyTypeModel | UmbPropertyTypeScaffoldModel | undefined} @@ -34,10 +39,12 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { public set property(value: UmbPropertyTypeModel | UmbPropertyTypeScaffoldModel | undefined) { const oldValue = this._property; this._property = value; - this.#modalRegistration.setUniquePathValue('propertyId', value?.id?.toString()); + this.#settingsModal.setUniquePathValue('propertyId', value?.id?.toString()); + this.#workspaceModal.setUniquePathValue('propertyId', value?.id?.toString()); this.setDataType(this._property?.dataType?.unique); this.requestUpdate('property', oldValue); } + private _property?: UmbPropertyTypeModel | UmbPropertyTypeScaffoldModel | undefined; /** * Inherited, Determines if the property is part of the main document type thats being edited. @@ -52,38 +59,27 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { @property({ type: Boolean, reflect: true, attribute: 'sort-mode-active' }) public sortModeActive = false; - #dataTypeDetailRepository = new UmbDataTypeDetailRepository(this); - - #modalRegistration; - - @state() - protected _modalRoute?: string; - - @state() - protected _editDocumentTypePath?: string; - - @property() - public get modalRoute() { - return this._modalRoute; - } - @property({ type: String, attribute: 'owner-document-type-id' }) public ownerDocumentTypeId?: string; @property({ type: String, attribute: 'owner-document-type-name' }) public ownerDocumentTypeName?: string; + @state() + protected _modalRoute?: string; + + @state() + protected _editDocumentTypePath?: string; + @state() private _dataTypeName?: string; - async setDataType(dataTypeId: string | undefined) { - if (!dataTypeId) return; - this.#dataTypeDetailRepository.requestByUnique(dataTypeId).then((x) => (this._dataTypeName = x?.data?.name)); - } + @state() + private _aliasLocked = true; constructor() { super(); - this.#modalRegistration = new UmbModalRouteRegistrationController(this, UMB_PROPERTY_SETTINGS_MODAL) + this.#settingsModal = new UmbModalRouteRegistrationController(this, UMB_PROPERTY_SETTINGS_MODAL) .addUniquePaths(['propertyId']) .onSetup(() => { const documentTypeId = this.ownerDocumentTypeId; @@ -99,7 +95,8 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { this._modalRoute = routeBuilder(null); }); - new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL) + this.#workspaceModal = new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL) + .addUniquePaths(['propertyId']) .addAdditionalPath('document-type') .onSetup(() => { return { data: { entityType: 'document-type', preset: {} } }; @@ -110,23 +107,25 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { } _partialUpdate(partialObject: UmbPropertyTypeModel) { - this.dispatchEvent(new CustomEvent('partial-property-update', { detail: partialObject })); + this.dispatchEvent(new CustomEvent('umb:partial-property-update', { detail: partialObject })); } _singleValueUpdate(propertyName: string, value: string | number | boolean | null | undefined) { const partialObject = {} as any; partialObject[propertyName] = value; - this.dispatchEvent(new CustomEvent('partial-property-update', { detail: partialObject })); + this.dispatchEvent(new CustomEvent('umb:partial-property-update', { detail: partialObject })); } - @state() - private _aliasLocked = true; - #onToggleAliasLock() { this._aliasLocked = !this._aliasLocked; } + async setDataType(dataTypeId: string | undefined) { + if (!dataTypeId) return; + this.#dataTypeDetailRepository.requestByUnique(dataTypeId).then((x) => (this._dataTypeName = x?.data?.name)); + } + async #requestRemove(e: Event) { e.preventDefault(); e.stopImmediatePropagation(); @@ -166,21 +165,38 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { } } } - renderSortableProperty() { + + render() { + // TODO: Only show alias on label if user has access to DocumentType within settings: [NL] + return this.inherited ? this.renderInheritedProperty() : this.renderEditableProperty(); + } + + renderInheritedProperty() { if (!this.property) return; - return html` -
- - ${this.property.name} (${this.property.alias}) -
- - this._partialUpdate({ sortOrder: parseInt(e.target.value as string) ?? 0 } as UmbPropertyTypeModel)} - .value=${this.property.sortOrder ?? 0}> - `; + + if (this.sortModeActive) { + return this.renderSortableProperty(); + } else { + return html` + +
+ ${this.renderPropertyTags()} + + + ${this.localize.term('contentTypeEditor_inheritedFrom')} + + ${this.ownerDocumentTypeName ?? '??'} + + + +
+ `; + } } renderEditableProperty() { @@ -227,32 +243,21 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { } } - renderInheritedProperty() { + renderSortableProperty() { if (!this.property) return; - - if (this.sortModeActive) { - return this.renderSortableProperty(); - } else { - return html` - -
- ${this.renderPropertyTags()} - - - ${this.localize.term('contentTypeEditor_inheritedFrom')} - - ${this.ownerDocumentTypeName ?? '??'} - - - -
- `; - } + return html` +
+ + ${this.property.name} (${this.property.alias}) +
+ + this._partialUpdate({ sortOrder: parseInt(e.target.value as string) ?? 0 } as UmbPropertyTypeModel)} + .value=${this.property.sortOrder ?? 0}> + `; } renderPropertyAlias() { @@ -299,11 +304,6 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { : nothing; } - render() { - // TODO: Only show alias on label if user has access to DocumentType within settings: - return this.inherited ? this.renderInheritedProperty() : this.renderEditableProperty(); - } - static styles = [ UmbTextStyles, css` diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-properties.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-properties.element.ts index 6e8f42ed2e..5089fb33fa 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-properties.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-properties.element.ts @@ -185,7 +185,7 @@ export class UmbMediaTypeWorkspaceViewEditPropertiesElement extends UmbLitElemen ?inherited=${property.container?.id !== this.containerId} ?sort-mode-active=${this._sortModeActive} .property=${property} - @partial-property-update=${(event: CustomEvent) => { + @umb:partial-property-update=${(event: CustomEvent) => { this._propertyStructureHelper.partialUpdateProperty(property.id, event.detail); }} @property-delete=${() => { diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-property.element.ts index 4c42684238..ea69a2991a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-property.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-property.element.ts @@ -111,14 +111,14 @@ export class UmbMediaTypeWorkspacePropertyElement extends UmbLitElement { } _partialUpdate(partialObject: UmbPropertyTypeModel) { - this.dispatchEvent(new CustomEvent('partial-property-update', { detail: partialObject })); + this.dispatchEvent(new CustomEvent('umb:partial-property-update', { detail: partialObject })); } _singleValueUpdate(propertyName: string, value: string | number | boolean | null | undefined) { const partialObject = {} as any; partialObject[propertyName] = value; - this.dispatchEvent(new CustomEvent('partial-property-update', { detail: partialObject })); + this.dispatchEvent(new CustomEvent('umb:partial-property-update', { detail: partialObject })); } @state() @@ -274,7 +274,7 @@ export class UmbMediaTypeWorkspacePropertyElement extends UmbLitElement {
''} id="alias-lock" slot="prepend">
- ` + ` : ''; } @@ -285,19 +285,19 @@ export class UmbMediaTypeWorkspacePropertyElement extends UmbLitElement { ${this.property.variesByCulture ? html` ${this.localize.term('contentTypeEditor_cultureVariantLabel')} - ` + ` : nothing} ${this.property.appearance?.labelOnTop == true ? html` ${this.localize.term('contentTypeEditor_displaySettingsLabelOnTop')} - ` + ` : nothing} ${this.property.validation.mandatory === true ? html` * ${this.localize.term('general_mandatory')} - ` + ` : nothing} - ` + ` : nothing; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/views/design/member-type-workspace-view-edit-properties.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/views/design/member-type-workspace-view-edit-properties.element.ts index 9a78190e27..f2d0125c15 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/views/design/member-type-workspace-view-edit-properties.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/views/design/member-type-workspace-view-edit-properties.element.ts @@ -206,7 +206,7 @@ export class UmbMemberTypeWorkspaceViewEditPropertiesElement extends UmbLitEleme ?inherited=${property.container?.id !== this.containerId} ?sort-mode-active=${this._sortModeActive} .property=${property} - @partial-property-update=${(event: CustomEvent) => { + @umb:partial-property-update=${(event: CustomEvent) => { this._propertyStructureHelper.partialUpdateProperty(property.id, event.detail); }} @property-delete=${() => { diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/views/design/member-type-workspace-view-edit-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/views/design/member-type-workspace-view-edit-property.element.ts index 478ec3c53f..1e84cc6723 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/views/design/member-type-workspace-view-edit-property.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/views/design/member-type-workspace-view-edit-property.element.ts @@ -121,14 +121,14 @@ export class UmbMemberTypeWorkspacePropertyElement extends UmbLitElement { } _partialUpdate(partialObject: UmbPropertyTypeModel) { - this.dispatchEvent(new CustomEvent('partial-property-update', { detail: partialObject })); + this.dispatchEvent(new CustomEvent('umb:partial-property-update', { detail: partialObject })); } _singleValueUpdate(propertyName: string, value: string | number | boolean | null | undefined) { const partialObject = {} as any; partialObject[propertyName] = value; - this.dispatchEvent(new CustomEvent('partial-property-update', { detail: partialObject })); + this.dispatchEvent(new CustomEvent('umb:partial-property-update', { detail: partialObject })); } @state() @@ -283,7 +283,7 @@ export class UmbMemberTypeWorkspacePropertyElement extends UmbLitElement {
''} id="alias-lock" slot="prepend">
- ` + ` : ''; } @@ -294,19 +294,19 @@ export class UmbMemberTypeWorkspacePropertyElement extends UmbLitElement { ${this.property.variesByCulture ? html` ${this.localize.term('contentTypeEditor_cultureVariantLabel')} - ` + ` : nothing} ${this.property.appearance?.labelOnTop == true ? html` ${this.localize.term('contentTypeEditor_displaySettingsLabelOnTop')} - ` + ` : nothing} ${this.property.validation.mandatory === true ? html` * ${this.localize.term('general_mandatory')} - ` + ` : nothing} - ` + ` : nothing; }