Skip to content

Commit 8d60966

Browse files
NguyenThuyLanLan Nguyen Thuynielslyngsoeleekelleher
authored
Add drag and drop to blockgrid area (#19383)
* Add drag and drop to blockgrid area * Adds `UmbChangeEvent` trigger * Removes `updated` method Puts `sorter.setModel` in the `value` setter, so that the sorter is set on initial value. * Imports sort order Removed `UmbTextStyles`, as not used here * Changed the cursor type to "move" --------- Co-authored-by: Lan Nguyen Thuy <[email protected]> Co-authored-by: Niels Lyngsø <[email protected]> Co-authored-by: leekelleher <[email protected]>
1 parent 4483f47 commit 8d60966

File tree

2 files changed

+38
-5
lines changed

2 files changed

+38
-5
lines changed

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.element.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { UmbBlockGridAreaConfigEntryContext } from './block-grid-area-config-entry.context.js';
2+
import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
23
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
3-
import { html, css, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
44
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/property-editor';
55

6+
import '../block-scale-handler/block-scale-handler.element.js';
7+
68
/**
79
* @element umb-block-area-config-entry
810
*/

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
11
import { UMB_BLOCK_GRID_DEFAULT_LAYOUT_STYLESHEET, type UmbBlockGridTypeAreaType } from '../../index.js';
22
import { UMB_BLOCK_GRID_AREA_TYPE_WORKSPACE_MODAL } from '../../components/block-grid-area-config-entry/constants.js';
3+
import type { UmbBlockGridAreaConfigEntryElement } from '../../../block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.element.js';
34
import { UmbBlockGridAreaTypeEntriesContext } from './block-grid-area-type-entries.context.js';
5+
import { css, customElement, html, property, repeat, state } from '@umbraco-cms/backoffice/external/lit';
6+
import { incrementString } from '@umbraco-cms/backoffice/utils';
7+
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
48
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
5-
import { html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
9+
import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
10+
import { UmbSorterController, UmbSorterResolvePlacementAsGrid } from '@umbraco-cms/backoffice/sorter';
11+
import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
612
import type {
713
UmbPropertyEditorUiElement,
814
UmbPropertyEditorConfigCollection,
915
} from '@umbraco-cms/backoffice/property-editor';
10-
import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
11-
import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
12-
import { incrementString } from '@umbraco-cms/backoffice/utils';
1316

1417
import '../../components/block-grid-area-config-entry/block-grid-area-config-entry.element.js';
18+
1519
@customElement('umb-property-editor-ui-block-grid-areas-config')
1620
export class UmbPropertyEditorUIBlockGridAreasConfigElement
1721
extends UmbLitElement
@@ -23,9 +27,28 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement
2327
#defaultAreaGridColumns: number = 12;
2428
#valueOfAreaGridColumns?: number | null;
2529

30+
#sorter = new UmbSorterController<UmbBlockGridTypeAreaType, UmbBlockGridAreaConfigEntryElement>(this, {
31+
itemSelector: 'umb-block-area-config-entry',
32+
containerSelector: '.umb-block-grid__area-container',
33+
resolvePlacement: UmbSorterResolvePlacementAsGrid,
34+
getUniqueOfElement: (element) => {
35+
return element.key;
36+
},
37+
getUniqueOfModel: (modelEntry) => {
38+
return modelEntry.key;
39+
},
40+
onChange: ({ model }) => {
41+
const oldValue = this._value;
42+
this._value = model;
43+
this.requestUpdate('_value', oldValue);
44+
this.dispatchEvent(new UmbChangeEvent());
45+
},
46+
});
47+
2648
@property({ type: Array })
2749
public set value(value: Array<UmbBlockGridTypeAreaType>) {
2850
this._value = value ?? [];
51+
this.#sorter.setModel(this._value);
2952
}
3053
public get value(): Array<UmbBlockGridTypeAreaType> {
3154
return this._value;
@@ -133,6 +156,14 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement
133156
<uui-button look="placeholder" label=${'Add area'} href=${this._workspacePath + 'create'}></uui-button>`
134157
: '';
135158
}
159+
160+
static override styles = [
161+
css`
162+
.umb-block-grid__area {
163+
cursor: move;
164+
}
165+
`,
166+
];
136167
}
137168

138169
export default UmbPropertyEditorUIBlockGridAreasConfigElement;

0 commit comments

Comments
 (0)