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

implement sorting

Browse Source
This commit is contained in:
Niels Lyngsø
2024-01-18 13:10:52 +01:00
parent b5686f9ed3
commit d7be6f3e4d
2 changed files with 33 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts
View File

@@ -1,5 +1,6 @@
import { UmbBlockListManagerContext } from '../../manager/block-list-manager.context.js';
import '../../components/block-list-block/index.js';
import { type UmbPropertyEditorUIBlockListBlockElement } from '../../components/block-list-block/index.js';
import { UMB_BLOCK_LIST_PROPERTY_EDITOR_ALIAS } from './manifests.js';
import { html, customElement, property, state, repeat, css } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
@@ -15,16 +16,37 @@ import {
import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models';
import { UmbModalRouteBuilder, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
import { UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffice/sorter';
export interface UmbBlockListLayoutModel extends UmbBlockLayoutBaseModel {}
export interface UmbBlockListValueModel extends UmbBlockValueType<UmbBlockListLayoutModel> {}
const SORTER_CONFIG: UmbSorterConfig<UmbBlockListLayoutModel, UmbPropertyEditorUIBlockListBlockElement> = {
compareElementToModel: (element, model) => {
return element.getAttribute('data-udi') === model.contentUdi;
},
querySelectModelToElement: (container, modelEntry) => {
return container.querySelector("umb-property-editor-ui-block-list-block[data-udi='" + modelEntry.contentUdi + "']");
},
identifier: 'block-list-editor',
itemSelector: 'umb-property-editor-ui-block-list-block',
//containerSelector: 'EMPTY ON PURPOSE, SO IT BECOMES THE HOST ELEMENT',
};
/**
* @element umb-property-editor-ui-block-list
*/
@customElement('umb-property-editor-ui-block-list')
export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implements UmbPropertyEditorUiElement {
//
#sorter = new UmbSorterController<UmbBlockListLayoutModel, UmbPropertyEditorUIBlockListBlockElement>(this, {
...SORTER_CONFIG,
onChange: ({ model }) => {
this.#context.setLayouts(model);
},
});
private _value: UmbBlockListValueModel = {
layout: {},
contentData: [],
@@ -89,6 +111,7 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement
//console.log('layout changed', this._value);
// TODO: idea: consider inserting an await here, so other changes could appear first? Maybe some mechanism to only fire change event onces?
this._layouts = layouts;
this.#sorter.setModel(layouts);
this.dispatchEvent(new UmbChangeEvent());
});
this.observe(this.#context.contents, (contents) => {
@@ -123,7 +146,7 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement
(x) => x.contentUdi,
(layoutEntry) =>
html`<uui-button-inline-create></uui-button-inline-create>
<umb-property-editor-ui-block-list-block .layout=${layoutEntry}>
<umb-property-editor-ui-block-list-block data-udi=${layoutEntry.contentUdi} .layout=${layoutEntry}>
</umb-property-editor-ui-block-list-block> `,
)}
<uui-button-group>

18
src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts
View File

@@ -185,25 +185,25 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
? this.#host.shadowRoot!.querySelector(this.#config.containerSelector)
: this.#host) ?? this.#host;
this.#containerElement = containerEl as HTMLElement;
this.#useContainerShadowRoot = this.#containerElement === this.#host;
if (!this.#currentContainerElement || this.#currentContainerElement === this.#containerElement) {
this.#currentContainerElement = containerEl;
}
this.#containerElement = containerEl as HTMLElement;
this.#containerElement.addEventListener('dragover', preventDragOver);
(this.#containerElement as any)['__umbBlockGridSorterController'] = () => {
return this;
};
// TODO: Clean up??
this.#observer.disconnect();
// Only look at the shadowRoot if the containerElement is host.
const containerElement = this.#useContainerShadowRoot
? this.#containerElement.shadowRoot ?? this.#containerElement
: this.#containerElement;
containerElement.addEventListener('dragover', preventDragOver);
(this.#containerElement as any)['__umbBlockGridSorterController'] = () => {
return this;
};
this.#observer.disconnect();
containerElement.querySelectorAll(this.#config.itemSelector).forEach((child) => {
if (child.matches && child.matches(this.#config.itemSelector)) {
this.setupItem(child as ElementType);