From 4e7dda3dde653276cf331b72beeee1fdd9ab7151 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 6 Mar 2024 20:08:38 +0100 Subject: [PATCH] move sorter config outside of class --- ...-workspace-view-edit-properties.element.ts | 44 ++++++++++--------- ...nt-type-workspace-view-edit-tab.element.ts | 21 +++++---- ...ocument-workspace-view-edit-tab.element.ts | 2 +- 3 files changed, 38 insertions(+), 29 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 8498263bd9..a3207792c4 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 @@ -7,27 +7,31 @@ import { css, html, customElement, property, state, repeat, ifDefined } from '@u import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import type { UmbPropertyContainerTypes, UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type'; import { UmbContentTypePropertyStructureHelper } from '@umbraco-cms/backoffice/content-type'; -import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; +import { type UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffice/sorter'; import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; import { UMB_PROPERTY_SETTINGS_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal'; +const SORTER_CONFIG: UmbSorterConfig = { + getUniqueOfElement: (element) => { + return element.getAttribute('data-umb-property-id'); + }, + getUniqueOfModel: (modelEntry) => { + return modelEntry.id; + }, + identifier: 'document-type-property-sorter', + itemSelector: 'umb-document-type-workspace-view-edit-property', + //disabledItemSelector: '[inherited]', + //TODO: Set the property list (sorter wrapper) to inherited, if its inherited + // This is because we don't want to move local properties into an inherited group container. + // Or maybe we do, but we still need to check if the group exists locally, if not, then it needs to be created before we move a property into it. + // TODO: Fix bug where a local property turn into an inherited when moved to a new group container. + containerSelector: '#property-list', +}; + @customElement('umb-document-type-workspace-view-edit-properties') export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitElement { #sorter = new UmbSorterController(this, { - getUniqueOfElement: (element) => { - return element.getAttribute('data-umb-property-id'); - }, - getUniqueOfModel: (modelEntry) => { - return modelEntry.id; - }, - identifier: 'document-type-property-sorter', - itemSelector: 'umb-document-type-workspace-view-edit-property', - //disabledItemSelector: '[inherited]', - //TODO: Set the property list (sorter wrapper) to inherited, if its inherited - // This is because we don't want to move local properties into an inherited group container. - // Or maybe we do, but we still need to check if the group exists locally, if not, then it needs to be created before we move a property into it. - // TODO: Fix bug where a local property turn into an inherited when moved to a new group container. - containerSelector: '#property-list', + ...SORTER_CONFIG, onChange: ({ model }) => { this._propertyStructure = model; }, @@ -158,8 +162,8 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle new UmbModalRouteRegistrationController(this, UMB_PROPERTY_SETTINGS_MODAL) .addAdditionalPath('new-property') .onSetup(async () => { - const documentTypeId = this._ownerDocumentTypes?.find( - (types) => types.containers?.find((containers) => containers.id === this.containerId), + const documentTypeId = this._ownerDocumentTypes?.find((types) => + types.containers?.find((containers) => containers.id === this.containerId), )?.unique; if (documentTypeId === undefined) return false; const propertyData = await this._propertyStructureHelper.createPropertyScaffold(this._containerId); @@ -189,8 +193,8 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle (property) => '' + property.container?.id + property.id + '' + property.sortOrder, (property) => { // Note: This piece might be moved into the property component - const inheritedFromDocument = this._ownerDocumentTypes?.find( - (types) => types.containers?.find((containers) => containers.id === property.container?.id), + const inheritedFromDocument = this._ownerDocumentTypes?.find((types) => + types.containers?.find((containers) => containers.id === property.container?.id), ); return html` @@ -220,7 +224,7 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle look="placeholder" href=${ifDefined(this._modalRouteNewProperty)}> Add property - ` + ` : ''} `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts index c6c6516ea9..b6eff02a8c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts @@ -12,19 +12,24 @@ import { import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; import './document-type-workspace-view-edit-properties.element.js'; -import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; +import { type UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffice/sorter'; + +const SORTER_CONFIG: UmbSorterConfig = + { + getUniqueOfElement: (element) => + element.querySelector('umb-document-type-workspace-view-edit-properties')!.getAttribute('container-id'), + getUniqueOfModel: (modelEntry) => modelEntry.id, + identifier: 'document-type-container-sorter', + itemSelector: '.container-handle', + containerSelector: '.container-list', + }; @customElement('umb-document-type-workspace-view-edit-tab') export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement { #sorter = new UmbSorterController( this, { - getUniqueOfElement: (element) => - element.querySelector('umb-document-type-workspace-view-edit-properties')!.getAttribute('container-id'), - getUniqueOfModel: (modelEntry) => modelEntry.id, - identifier: 'document-type-container-sorter', - itemSelector: '.container-handle', - containerSelector: '.container-list', + ...SORTER_CONFIG, onChange: ({ model }) => { this._groups = model; }, @@ -173,7 +178,7 @@ export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement { container-type="Tab" container-name=${this.tabName || ''}> - ` + ` : '' }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/edit/document-workspace-view-edit-tab.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/edit/document-workspace-view-edit-tab.element.ts index ecce9f47f1..9ca72f1cec 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/edit/document-workspace-view-edit-tab.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/edit/document-workspace-view-edit-tab.element.ts @@ -85,7 +85,7 @@ export class UmbDocumentWorkspaceViewEditTabElement extends UmbLitElement { : ''} ${repeat( this._groups, - (group) => group.name, + (group) => group.id, (group) => html`