From b052ac92cd2bfc621c5de935193a6c05a1e7d660 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 11 Jan 2024 21:15:30 +0100 Subject: [PATCH] example setup --- .../dashboard-with-property-dataset/index.ts | 2 +- .../sorter-with-two-containers/README.md | 5 + .../sorter-with-two-containers/index.ts | 15 +++ .../sorter-dashboard.ts | 112 ++++++++++++++++++ .../core/sorter/stories/sorter-controller.mdx | 8 +- 5 files changed, 138 insertions(+), 4 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/README.md create mode 100644 src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/index.ts create mode 100644 src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-dashboard.ts diff --git a/src/Umbraco.Web.UI.Client/examples/dashboard-with-property-dataset/index.ts b/src/Umbraco.Web.UI.Client/examples/dashboard-with-property-dataset/index.ts index bf689650a7..4c50c3a641 100644 --- a/src/Umbraco.Web.UI.Client/examples/dashboard-with-property-dataset/index.ts +++ b/src/Umbraco.Web.UI.Client/examples/dashboard-with-property-dataset/index.ts @@ -3,7 +3,7 @@ import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; export const manifests: Array = [ { type: 'dashboard', - name: 'Example Dataset Workspace View', + name: 'Example Dataset Dashboard', alias: 'example.dashboard.dataset', element: () => import('./dataset-dashboard.js'), weight: 900, diff --git a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/README.md b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/README.md new file mode 100644 index 0000000000..4a1b15255a --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/README.md @@ -0,0 +1,5 @@ +# Property Dataset Dashboard Example + +This example demonstrates the essence of the Property Dataset. + +This dashboard implements such, to display a few selected Property Editors and bind the data back to the Dashboard. diff --git a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/index.ts b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/index.ts new file mode 100644 index 0000000000..0771859fe9 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/index.ts @@ -0,0 +1,15 @@ +import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [ + { + type: 'dashboard', + name: 'Example Sorter Dashboard', + alias: 'example.dashboard.dataset', + element: () => import('./sorter-dashboard.js'), + weight: 900, + meta: { + label: 'Sorter example', + pathname: 'sorter-example', + }, + }, +]; diff --git a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-dashboard.ts b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-dashboard.ts new file mode 100644 index 0000000000..b419a3fd8f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-dashboard.ts @@ -0,0 +1,112 @@ +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { css, html, customElement, LitElement, state, repeat } from '@umbraco-cms/backoffice/external/lit'; +import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; +import { UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffice/sorter'; + +type ModelEntryType = { + name: string; +}; + +const SORTER_CONFIG: UmbSorterConfig = { + compareElementToModel: (element: HTMLElement, model: ModelEntryType) => { + return element.getAttribute('data-name') === model.name; + }, + querySelectModelToElement: (container: HTMLElement, modelEntry: ModelEntryType) => { + return container.querySelector('data-name[' + modelEntry.name + ']'); + }, + identifier: 'string-that-identifies-all-example-sorters', + itemSelector: '.sorter-item', + containerSelector: '.sorter-container', +}; + +@customElement('example-sorter-dashboard') +export class ExampleSorterDashboard extends UmbElementMixin(LitElement) { + @state() + _items: ModelEntryType[] = [ + { + name: 'Apple', + }, + { + name: 'Banana', + }, + { + name: 'Pear', + }, + { + name: 'Pineapple', + }, + { + name: 'Lemon', + }, + ]; + + #sorter = new UmbSorterController(this, { + ...SORTER_CONFIG, + performItemInsert: ({ item, newIndex }) => { + this._items.splice(newIndex, 0, item); + this.requestUpdate('_items'); + return true; + }, + performItemRemove: ({ item }) => { + const indexToMove = this._items.findIndex((x) => x.name === item.name); + this._items.splice(indexToMove, 1); + this.requestUpdate('_items'); + return true; + }, + }); + + constructor() { + super(); + this.#sorter.setModel(this._items); + } + + removeItem = (item: ModelEntryType) => { + this._items = this._items.filter((r) => r.name !== item.name); + this.#sorter.setModel(this._items); + }; + + render() { + return html` + +
+ ${repeat( + this._items, + (item) => item.name, + (item) => + html`
+ ${item.name} +
`, + )} +
+ + `; + } + + static styles = [ + UmbTextStyles, + css` + :host { + display: block; + padding: var(--uui-size-layout-1); + } + + .sorter-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--uui-size-layout-0); + border: 1px solid var(--uui-color-border); + border-radius: var(--uui-border-radius); + margin-bottom: 3px; + } + `, + ]; +} + +export default ExampleSorterDashboard; + +declare global { + interface HTMLElementTagNameMap { + 'example-sorter-dashboard': ExampleSorterDashboard; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/sorter/stories/sorter-controller.mdx b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/stories/sorter-controller.mdx index fdf53c52be..a9b5072380 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/sorter/stories/sorter-controller.mdx +++ b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/stories/sorter-controller.mdx @@ -176,11 +176,13 @@ export class MyElement extends UmbElementMixin(LitElement) { #sorter = new UmbSorterController(this, { ...SORTER_CONFIG, performItemInsert: ({ item, newIndex }) => { - console.log(item, newIndex); - // Perform some logic here to calculate the new sortOrder & save it. + // Insert logic that updates the model, so the item gets the new index in the model. + return true; + }, + performItemRemove: () => { + // Insert logic that updates the model, so the item gets removed from the model. return true; }, - performItemRemove: () => true, }); } ```