diff --git a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts index 042db7af36..fe15d9d32c 100644 --- a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts +++ b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts @@ -11,18 +11,12 @@ export type ModelEntryType = { }; const SORTER_CONFIG: UmbSorterConfig = { - /*compareElementToModel: (element, model) => { - return element.name === model.name; - },*/ getUniqueOfElement: (element) => { return element.name; }, getUniqueOfModel: (modelEntry) => { return modelEntry.name; }, - /*querySelectModelToElement: (container, modelEntry) => { - return container.querySelector("example-sorter-item[name='" + modelEntry.name + "']"); - },*/ identifier: 'string-that-identifies-all-example-sorters', itemSelector: 'example-sorter-item', containerSelector: '.sorter-container', diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts index 2bcc827d31..2379afa77c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts @@ -21,11 +21,11 @@ export interface UmbBlockListLayoutModel extends UmbBlockLayoutBaseModel {} export interface UmbBlockListValueModel extends UmbBlockValueType {} const SORTER_CONFIG: UmbSorterConfig = { - compareElementToModel: (element, model) => { - return element.getAttribute('data-udi') === model.contentUdi; + getUniqueOfElement: (element) => { + return element.getAttribute('data-udi'); }, - querySelectModelToElement: (container, modelEntry) => { - return container.querySelector("umb-property-editor-ui-block-list-block[data-udi='" + modelEntry.contentUdi + "']"); + getUniqueOfModel: (modelEntry) => { + return modelEntry.contentUdi; }, identifier: 'block-list-editor', itemSelector: 'umb-property-editor-ui-block-list-block', diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts index 4ca54fa5fd..95f27e1e55 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts @@ -16,12 +16,12 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { type UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffice/sorter'; import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property'; -const SORTER_CONFIG: UmbSorterConfig = { - compareElementToModel: (element: HTMLElement, model: UmbSwatchDetails) => { - return element.getAttribute('data-sort-entry-id') === model.value; +const SORTER_CONFIG: UmbSorterConfig = { + getUniqueOfElement: (element) => { + return element.value.toString(); }, - querySelectModelToElement: (container: HTMLElement, modelEntry: UmbSwatchDetails) => { - return container.querySelector('[data-sort-entry-id=' + modelEntry.value + ']'); + getUniqueOfModel: (modelEntry) => { + return modelEntry.value; }, identifier: 'Umb.SorterIdentifier.ColorEditor', itemSelector: 'umb-multiple-color-picker-item-input', @@ -192,7 +192,6 @@ export class UmbMultipleColorPickerInputElement extends FormControlMixin(UmbLitE html` this.#onChange(event, index)} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.ts index 052188d85c..7945201ca9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.ts @@ -4,7 +4,7 @@ import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui'; import type { UmbInputEvent, UmbDeleteEvent } from '@umbraco-cms/backoffice/event'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import type { UmbSorterConfig} from '@umbraco-cms/backoffice/sorter'; +import type { UmbSorterConfig } from '@umbraco-cms/backoffice/sorter'; import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; export type MultipleTextStringValue = Array; @@ -14,11 +14,11 @@ export interface MultipleTextStringValueItem { } const SORTER_CONFIG: UmbSorterConfig = { - compareElementToModel: (element: HTMLElement, model: MultipleTextStringValueItem) => { - return element.getAttribute('data-sort-entry-id') === model.value; + getUniqueOfElement: (element) => { + return element.getAttribute('data-sort-entry-id'); }, - querySelectModelToElement: (container: HTMLElement, modelEntry: MultipleTextStringValueItem) => { - return container.querySelector('[data-sort-entry-id=' + modelEntry.value + ']'); + getUniqueOfModel: (modelEntry) => { + return modelEntry.value; }, identifier: 'Umb.SorterIdentifier.ColorEditor', itemSelector: 'umb-input-multiple-text-string-item', diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts index 010c8dcdd0..6912fdb4d4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts @@ -58,11 +58,8 @@ function destroyPreventEvent(element: Element) { } type INTERNAL_UmbSorterConfig = { - // TODO: Clean up: - //compareElementToModel: (el: ElementType, modelEntry: T) => boolean; - //querySelectModelToElement: (container: HTMLElement, modelEntry: T) => ElementType | null; - getUniqueOfElement: (element: ElementType) => string; - getUniqueOfModel: (modeEntry: T) => string; + getUniqueOfElement: (element: ElementType) => string | null | symbol | number; + getUniqueOfModel: (modeEntry: T) => string | null | symbol | number; identifier: string; itemSelector: string; disabledItemSelector?: string; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-sorter.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-sorter.ts index ea7ad4bc6e..f709ac9ff9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-sorter.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-sorter.ts @@ -5,11 +5,11 @@ import type { import type { UmbSorterConfig } from '@umbraco-cms/backoffice/sorter'; const SORTER_CONFIG_HORIZONTAL: UmbSorterConfig = { - compareElementToModel: (element: HTMLElement, model: DocumentTypePropertyTypeContainerResponseModel) => { - return element.getAttribute('data-umb-tabs-id') === model.id; + getUniqueOfElement: (element) => { + return element.getAttribute('data-umb-tabs-id'); }, - querySelectModelToElement: (container: HTMLElement, modelEntry: PropertyTypeContainerModelBaseModel) => { - return container.querySelector(`[data-umb-tabs-id='` + modelEntry.id + `']`); + getUniqueOfModel: (modelEntry) => { + return modelEntry.id; }, identifier: 'content-type-tabs-sorter', itemSelector: '[data-umb-tabs-id]', @@ -21,11 +21,11 @@ const SORTER_CONFIG_HORIZONTAL: UmbSorterConfig = { - compareElementToModel: (element: HTMLElement, model: DocumentTypePropertyTypeContainerResponseModel) => { - return element.getAttribute('data-umb-property-id') === model.id; + getUniqueOfElement: (element) => { + return element.getAttribute('data-umb-property-id'); }, - querySelectModelToElement: (container: HTMLElement, modelEntry: PropertyTypeContainerModelBaseModel) => { - return container.querySelector(`[data-umb-property-id='` + modelEntry.id + `']`); + getUniqueOfModel: (modelEntry) => { + return modelEntry.id; }, identifier: 'content-type-property-sorter', itemSelector: '[data-umb-property-id]', 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 5cdda1e821..b93078c07f 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 @@ -12,11 +12,11 @@ import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; import { UMB_PROPERTY_SETTINGS_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal'; const SORTER_CONFIG: UmbSorterConfig = { - compareElementToModel: (element: HTMLElement, model: UmbPropertyTypeModel) => { - return element.getAttribute('data-umb-property-id') === model.id; + getUniqueOfElement: (element) => { + return element.getAttribute('data-umb-property-id'); }, - querySelectModelToElement: (container: HTMLElement, modelEntry: UmbPropertyTypeModel) => { - return container.querySelector('[data-umb-property-id=' + modelEntry.id + ']'); + getUniqueOfModel: (modelEntry) => { + return modelEntry.id; }, identifier: 'content-type-property-sorter', itemSelector: '[data-umb-property-id]', 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 94a2aa5a03..41c56db3ff 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,11 +12,11 @@ import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; import './document-type-workspace-view-edit-properties.element.js'; const SORTER_CONFIG: UmbSorterConfig = { - compareElementToModel: (element: HTMLElement, model: PropertyTypeContainerModelBaseModel) => { - return element.getAttribute('data-umb-group-id') === model.id; + getUniqueOfElement: (element) => { + return element.getAttribute('data-umb-group-id'); }, - querySelectModelToElement: (container: HTMLElement, modelEntry: PropertyTypeContainerModelBaseModel) => { - return container.querySelector('data-umb-group-id=[' + modelEntry.id + ']'); + getUniqueOfModel: (modelEntry) => { + return modelEntry.id; }, identifier: 'content-type-group-sorter', itemSelector: '[data-umb-group-id]', diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts index f6babbd0eb..41c918d3d9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts @@ -6,10 +6,7 @@ import type { UUIInputElement, UUIInputEvent } from '@umbraco-cms/backoffice/ext import { UmbContentTypeContainerStructureHelper } from '@umbraco-cms/backoffice/content-type'; import { encodeFolderName } from '@umbraco-cms/backoffice/router'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import type { - DocumentTypePropertyTypeContainerResponseModel, - PropertyTypeContainerModelBaseModel, -} from '@umbraco-cms/backoffice/backend-api'; +import type { PropertyTypeContainerModelBaseModel } from '@umbraco-cms/backoffice/backend-api'; import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; import type { UmbRoute, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router'; import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry'; @@ -20,11 +17,11 @@ import type { UmbSorterConfig } from '@umbraco-cms/backoffice/sorter'; import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; const SORTER_CONFIG: UmbSorterConfig = { - compareElementToModel: (element: HTMLElement, model: DocumentTypePropertyTypeContainerResponseModel) => { - return element.getAttribute('data-umb-tabs-id') === model.id; + getUniqueOfElement: (element) => { + return element.getAttribute('data-umb-tabs-id'); }, - querySelectModelToElement: (container: HTMLElement, modelEntry: PropertyTypeContainerModelBaseModel) => { - return container.querySelector(`[data-umb-tabs-id='` + modelEntry.id + `']`); + getUniqueOfModel: (modelEntry) => { + return modelEntry.id; }, identifier: 'content-type-tabs-sorter', itemSelector: '[data-umb-tabs-id]', diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts index 922b76e266..7fcf621d17 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts @@ -9,10 +9,12 @@ import { type UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffi import type { UmbDocumentItemModel } from '@umbraco-cms/backoffice/document'; const SORTER_CONFIG: UmbSorterConfig = { - compareElementToModel: (element, model) => { - return element.getAttribute('detail') === model; + getUniqueOfElement: (element) => { + return element.getAttribute('detail'); + }, + getUniqueOfModel: (modelEntry) => { + return modelEntry; }, - querySelectModelToElement: () => null, identifier: 'Umb.SorterIdentifier.InputDocument', itemSelector: 'uui-ref-node', containerSelector: 'uui-ref-list', 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 81cb48d322..00d6701914 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 @@ -12,11 +12,11 @@ import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; import { UMB_PROPERTY_SETTINGS_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal'; const SORTER_CONFIG: UmbSorterConfig = { - compareElementToModel: (element: HTMLElement, model: UmbPropertyTypeModel) => { - return element.getAttribute('data-umb-property-id') === model.id; + getUniqueOfElement: (element) => { + return element.getAttribute('data-umb-tabs-id'); }, - querySelectModelToElement: (container: HTMLElement, modelEntry: UmbPropertyTypeModel) => { - return container.querySelector('[data-umb-property-id=' + modelEntry.id + ']'); + getUniqueOfModel: (modelEntry) => { + return modelEntry.id; }, identifier: 'content-type-property-sorter', itemSelector: '[data-umb-property-id]', diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-tab.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-tab.element.ts index e7aa540062..86fb523d9d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-tab.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit-tab.element.ts @@ -12,11 +12,11 @@ import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; import './media-type-workspace-view-edit-properties.element.js'; const SORTER_CONFIG: UmbSorterConfig = { - compareElementToModel: (element: HTMLElement, model: PropertyTypeContainerModelBaseModel) => { - return element.getAttribute('data-umb-group-id') === model.id; + getUniqueOfElement: (element) => { + return element.getAttribute('data-umb-group-id'); }, - querySelectModelToElement: (container: HTMLElement, modelEntry: PropertyTypeContainerModelBaseModel) => { - return container.querySelector('data-umb-group-id=[' + modelEntry.id + ']'); + getUniqueOfModel: (modelEntry) => { + return modelEntry.id; }, identifier: 'content-type-group-sorter', itemSelector: '[data-umb-group-id]', diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit.element.ts index cd24e5cf44..05a72b0866 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/design/media-type-workspace-view-edit.element.ts @@ -6,10 +6,7 @@ import type { UUIInputElement, UUIInputEvent } from '@umbraco-cms/backoffice/ext import { UmbContentTypeContainerStructureHelper } from '@umbraco-cms/backoffice/content-type'; import { encodeFolderName } from '@umbraco-cms/backoffice/router'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import type { - MediaTypePropertyTypeContainerResponseModel, - PropertyTypeContainerModelBaseModel, -} from '@umbraco-cms/backoffice/backend-api'; +import type { PropertyTypeContainerModelBaseModel } from '@umbraco-cms/backoffice/backend-api'; import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; import type { UmbRoute, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router'; import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry'; @@ -20,11 +17,11 @@ import type { UmbSorterConfig } from '@umbraco-cms/backoffice/sorter'; import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; const SORTER_CONFIG: UmbSorterConfig = { - compareElementToModel: (element: HTMLElement, model: MediaTypePropertyTypeContainerResponseModel) => { - return element.getAttribute('data-umb-tabs-id') === model.id; + getUniqueOfElement: (element) => { + return element.getAttribute('data-umb-tabs-id'); }, - querySelectModelToElement: (container: HTMLElement, modelEntry: PropertyTypeContainerModelBaseModel) => { - return container.querySelector(`[data-umb-tabs-id='` + modelEntry.id + `']`); + getUniqueOfModel: (modelEntry) => { + return modelEntry.id; }, identifier: 'content-type-tabs-sorter', itemSelector: '[data-umb-tabs-id]', diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts index 068a5c42fc..121480345d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts @@ -8,10 +8,12 @@ import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbra import { type UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffice/sorter'; const SORTER_CONFIG: UmbSorterConfig = { - compareElementToModel: (element, model) => { - return element.getAttribute('detail') === model; + getUniqueOfElement: (element) => { + return element.getAttribute('detail'); + }, + getUniqueOfModel: (modelEntry) => { + return modelEntry; }, - querySelectModelToElement: () => null, identifier: 'Umb.SorterIdentifier.InputMedia', itemSelector: 'uui-card-media', containerSelector: '.container', diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/members/components/input-member/input-member.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/members/components/input-member/input-member.element.ts index cfedcddf0f..f6ec06efb9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/members/components/input-member/input-member.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/members/components/input-member/input-member.element.ts @@ -7,10 +7,12 @@ import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbra import { type UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffice/sorter'; const SORTER_CONFIG: UmbSorterConfig = { - compareElementToModel: (element, model) => { - return element.getAttribute('detail') === model; + getUniqueOfElement: (element) => { + return element.getAttribute('detail'); + }, + getUniqueOfModel: (modelEntry) => { + return modelEntry; }, - querySelectModelToElement: () => null, identifier: 'Umb.SorterIdentifier.InputMember', itemSelector: 'uui-ref-node', containerSelector: 'uui-ref-list',