From d81f1b9070892fabd0ffa0f293e69c8168466ba3 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 23 Apr 2024 15:01:32 +0100 Subject: [PATCH] Bugfix: Added sorting to Collection configuration editors --- .../column/column-configuration.element.ts | 27 +++++++-- .../layout/layout-configuration.element.ts | 56 +++++++++++++++---- 2 files changed, 67 insertions(+), 16 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/config/column/column-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/config/column/column-configuration.element.ts index 6b20b6056b..6461bffc66 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/config/column/column-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/config/column/column-configuration.element.ts @@ -1,7 +1,8 @@ import type { UmbCollectionColumnConfiguration } from '../../../../core/collection/types.js'; -import { html, customElement, property, repeat, css, state, nothing } from '@umbraco-cms/backoffice/external/lit'; +import { css, customElement, html, nothing, property, repeat, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor'; +import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import type { UmbInputContentTypePropertyElement } from '@umbraco-cms/backoffice/components'; import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; @@ -16,10 +17,27 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement extends UmbLitElement implements UmbPropertyEditorUiElement { - // TODO: [LK] Add sorting. + #sorter = new UmbSorterController(this, { + getUniqueOfElement: (element) => element.id, + getUniqueOfModel: (modelEntry) => modelEntry.alias, + identifier: 'Umb.SorterIdentifier.CollectionViewColumnConfiguration', + itemSelector: '.layout-item', + containerSelector: '#layout-wrapper', + onChange: ({ model }) => { + this.value = model; + this.dispatchEvent(new UmbPropertyValueChangeEvent()); + }, + }); @property({ type: Array }) - value?: Array = []; + public set value(value: Array) { + this.#value = value; + this.#sorter.setModel(value); + } + public get value(): Array { + return this.#value; + } + #value: Array = []; @property({ type: Object, attribute: false }) public config?: UmbPropertyEditorConfigCollection; @@ -38,6 +56,7 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement if (duplicate) { // TODO: Show error to user, can not add duplicate field/column. [LK] + throw new Error('Duplicate field/columns are not allowed.'); return; } @@ -100,7 +119,7 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement #renderColumn(column: UmbCollectionColumnConfiguration) { return html` -
+
(this, { + getUniqueOfElement: (element) => { + return element.id; + }, + getUniqueOfModel: (modelEntry) => { + return this.#getUnique(modelEntry); + }, + identifier: 'Umb.SorterIdentifier.CollectionViewLayouConfiguration', + itemSelector: '.layout-item', + containerSelector: '#layout-wrapper', + onChange: ({ model }) => { + this.value = model; + this.dispatchEvent(new UmbPropertyValueChangeEvent()); + }, + }); @property({ type: Array }) - value?: Array; + public set value(value: Array) { + this.#value = value; + this.#sorter.setModel(value); + } + public get value(): Array { + return this.#value; + } + #value: Array = []; @property({ type: Object, attribute: false }) public config?: UmbPropertyEditorConfigCollection; @@ -51,7 +74,13 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement #onAdd(event: { target: UmbInputManifestElement }) { const manifest = event.target.value; - // TODO: [LK] Disallow duplicate `collectionView` aliases selections. [LK] + const duplicate = this.value?.find((config) => manifest?.value === config.collectionView); + + if (duplicate) { + // TODO: Show error to user, can not add duplicate `collectionView` aliases. [LK] + throw new Error('Duplicate `collectionView` aliases are not allowed.'); + return; + } this.value = [ ...(this.value ?? []), @@ -98,6 +127,10 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement return { icon, color: color?.replace('color-', '') }; } + #getUnique(layout: UmbCollectionLayoutConfiguration): string { + return 'x' + simpleHashCode('' + layout.collectionView + layout.name + layout.icon).toString(16); + } + render() { return html`${this.#renderLayouts()} ${this.#renderInput()}`; } @@ -112,19 +145,18 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement
${repeat( this.value, - (layout, index) => '' + index + layout.name + layout.icon, + (layout) => this.#getUnique(layout), (layout, index) => this.#renderLayout(layout, index), )}
`; } - #renderLayout(layout: UmbCollectionLayoutConfig, index: number) { + #renderLayout(layout: UmbCollectionLayoutConfiguration, index: number) { const icon = this.#parseIcon(layout.icon); const varName = icon.color ? extractUmbColorVariable(icon.color) : undefined; - return html` -
+
this.#onIconChange(icon, index)}>