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

refactors

Browse Source
This commit is contained in:
Niels Lyngsø
2024-03-07 11:03:32 +01:00
parent ec57137f7d
commit 60fe407679
6 changed files with 89 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts
View File

@@ -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=${() => {

144
src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts
View File

@@ -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`
<div class="sortable">
<uui-icon name="${this.inherited ? 'icon-merge' : 'icon-navigation'}"></uui-icon>
${this.property.name} <span style="color: var(--uui-color-disabled-contrast)">(${this.property.alias})</span>
</div>
<uui-input
type="number"
?readonly=${this.inherited}
label="sort order"
@change=${(e: UUIInputEvent) =>
this._partialUpdate({ sortOrder: parseInt(e.target.value as string) ?? 0 } as UmbPropertyTypeModel)}
.value=${this.property.sortOrder ?? 0}></uui-input>
`;
if (this.sortModeActive) {
return this.renderSortableProperty();
} else {
return html`
<div id="header">
<b>${this.property.name}</b>
<i>${this.property.alias}</i>
<p>${this.property.description}</p>
</div>
<div id="editor">
${this.renderPropertyTags()}
<uui-tag look="default" class="inherited">
<uui-icon name="icon-merge"></uui-icon>
<span
>${this.localize.term('contentTypeEditor_inheritedFrom')}
<a href=${this._editDocumentTypePath + 'edit/' + this.ownerDocumentTypeId}>
${this.ownerDocumentTypeName ?? '??'}
</a>
</span>
</uui-tag>
</div>
`;
}
}
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`
<div id="header">
<b>${this.property.name}</b>
<i>${this.property.alias}</i>
<p>${this.property.description}</p>
</div>
<div id="editor">
${this.renderPropertyTags()}
<uui-tag look="default" class="inherited">
<uui-icon name="icon-merge"></uui-icon>
<span
>${this.localize.term('contentTypeEditor_inheritedFrom')}
<a href=${this._editDocumentTypePath + 'edit/' + this.ownerDocumentTypeId}>
${this.ownerDocumentTypeName ?? '??'}
</a>
</span>
</uui-tag>
</div>
`;
}
return html`
<div class="sortable">
<uui-icon name="${this.inherited ? 'icon-merge' : 'icon-navigation'}"></uui-icon>
${this.property.name} <span style="color: var(--uui-color-disabled-contrast)">(${this.property.alias})</span>
</div>
<uui-input
type="number"
?readonly=${this.inherited}
label="sort order"
@change=${(e: UUIInputEvent) =>
this._partialUpdate({ sortOrder: parseInt(e.target.value as string) ?? 0 } as UmbPropertyTypeModel)}
.value=${this.property.sortOrder ?? 0}></uui-input>
`;
}
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`

2
src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-properties.element.ts
View File

@@ -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=${() => {

14
src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-property.element.ts
View File

@@ -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 {
<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>`
: '';
}
@@ -285,19 +285,19 @@ export class UmbMediaTypeWorkspacePropertyElement extends UmbLitElement {
${this.property.variesByCulture
? html`<uui-tag look="default">
<uui-icon name="icon-shuffle"></uui-icon> ${this.localize.term('contentTypeEditor_cultureVariantLabel')}
</uui-tag>`
</uui-tag>`
: nothing}
${this.property.appearance?.labelOnTop == true
? html`<uui-tag look="default">
<span>${this.localize.term('contentTypeEditor_displaySettingsLabelOnTop')}</span>
</uui-tag>`
</uui-tag>`
: nothing}
${this.property.validation.mandatory === true
? html`<uui-tag look="default">
<span>* ${this.localize.term('general_mandatory')}</span>
</uui-tag>`
</uui-tag>`
: nothing}
</div>`
</div>`
: nothing;
}

2
src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/views/design/member-type-workspace-view-edit-properties.element.ts
View File

@@ -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=${() => {

14
src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/views/design/member-type-workspace-view-edit-property.element.ts
View File

@@ -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 {
<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>`
: '';
}
@@ -294,19 +294,19 @@ export class UmbMemberTypeWorkspacePropertyElement extends UmbLitElement {
${this.property.variesByCulture
? html`<uui-tag look="default">
<uui-icon name="icon-shuffle"></uui-icon> ${this.localize.term('contentTypeEditor_cultureVariantLabel')}
</uui-tag>`
</uui-tag>`
: nothing}
${this.property.appearance?.labelOnTop == true
? html`<uui-tag look="default">
<span>${this.localize.term('contentTypeEditor_displaySettingsLabelOnTop')}</span>
</uui-tag>`
</uui-tag>`
: nothing}
${this.property.validation.mandatory === true
? html`<uui-tag look="default">
<span>* ${this.localize.term('general_mandatory')}</span>
</uui-tag>`
</uui-tag>`
: nothing}
</div>`
</div>`
: nothing;
}