From 45a5cc23865406818a0dad744969ac7dc1bd778b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 1 Feb 2024 21:46:26 +0100 Subject: [PATCH] ensure both examples still exists --- .../sorter-with-nested-containers/README.md | 3 + .../sorter-with-nested-containers/index.ts | 15 +++ .../sorter-dashboard.ts | 88 +++++++++++++++ .../sorter-group.ts | 101 ++++++++++++++++++ .../sorter-item.ts | 58 ++++++++++ .../sorter-with-two-containers/README.md | 4 +- .../sorter-dashboard.ts | 17 --- .../sorter-group.ts | 30 +++--- 8 files changed, 278 insertions(+), 38 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/README.md create mode 100644 src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/index.ts create mode 100644 src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-dashboard.ts create mode 100644 src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-group.ts create mode 100644 src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-item.ts diff --git a/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/README.md b/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/README.md new file mode 100644 index 0000000000..a5f65cf26b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/README.md @@ -0,0 +1,3 @@ +# Property Dataset Dashboard Example + +This example demonstrates how to set up the Sorter and how it can be used in nested setups. diff --git a/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/index.ts b/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/index.ts new file mode 100644 index 0000000000..0771859fe9 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-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-nested-containers/sorter-dashboard.ts b/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-dashboard.ts new file mode 100644 index 0000000000..afe90228d1 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-dashboard.ts @@ -0,0 +1,88 @@ +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { css, html, customElement, LitElement } from '@umbraco-cms/backoffice/external/lit'; +import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; +import type { ModelEntryType } from './sorter-group.js'; + +import './sorter-group.js'; +@customElement('example-sorter-dashboard') +export class ExampleSorterDashboard extends UmbElementMixin(LitElement) { + groupOneItems: ModelEntryType[] = [ + { + name: 'Apple', + children: [ + { + name: 'Juice', + }, + { + name: 'Milk', + }, + ], + }, + { + name: 'Banana', + }, + { + name: 'Pear', + }, + { + name: 'Pineapple', + }, + { + name: 'Lemon', + children: [ + { + name: 'Cola', + }, + { + name: 'Pepsi', + }, + ], + }, + ]; + + groupTwoItems: ModelEntryType[] = [ + { + name: 'DXP', + }, + { + name: 'H5YR', + }, + { + name: 'UUI', + }, + ]; + + render() { + return html` + +
+
Notice this example still only support single group of Sorter.
+ + +
+ + `; + } + + static styles = [ + UmbTextStyles, + css` + :host { + display: block; + padding: var(--uui-size-layout-1); + } + + .outer-wrapper { + display: flex; + } + `, + ]; +} + +export default ExampleSorterDashboard; + +declare global { + interface HTMLElementTagNameMap { + 'example-sorter-dashboard-nested': ExampleSorterDashboard; + } +} diff --git a/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-group.ts b/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-group.ts new file mode 100644 index 0000000000..4e1e37b39f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-group.ts @@ -0,0 +1,101 @@ +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { css, html, customElement, LitElement, repeat, property } from '@umbraco-cms/backoffice/external/lit'; +import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; +import { UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffice/sorter'; + +import './sorter-item.js'; +import ExampleSorterItem from './sorter-item.js'; + +export type ModelEntryType = { + name: string; + children?: ModelEntryType[]; +}; + +const SORTER_CONFIG: UmbSorterConfig = { + getUniqueOfElement: (element) => { + return element.name; + }, + getUniqueOfModel: (modelEntry) => { + return modelEntry.name; + }, + identifier: 'string-that-identifies-all-example-sorters', + itemSelector: 'example-sorter-item', + containerSelector: '.sorter-container', +}; + +@customElement('example-sorter-group') +export class ExampleSorterGroup extends UmbElementMixin(LitElement) { + @property({ type: Array, attribute: false }) + public get items(): ModelEntryType[] { + return this._items ?? []; + } + public set items(value: ModelEntryType[]) { + // Only want to set the model initially, cause any re-render should not set this again. + if (this._items !== undefined) return; + this._items = value; + this.#sorter.setModel(this._items); + } + private _items?: ModelEntryType[]; + + #sorter = new UmbSorterController(this, { + ...SORTER_CONFIG, + onChange: ({ model }) => { + const oldValue = this._items; + this._items = model; + this.requestUpdate('items', oldValue); + }, + }); + + removeItem = (item: ModelEntryType) => { + this.items = this._items!.filter((r) => r.name !== item.name); + }; + + render() { + return html` +
+ ${repeat( + this.items, + (item) => item.name, + (item) => + html` + + ${item.children && item.children.length > 0 + ? html`` + : ''} + `, + )} +
+ `; + } + + static styles = [ + UmbTextStyles, + css` + :host { + display: block; + width: 100%; + } + + .sorter-placeholder { + opacity: 0.2; + } + + example-sorter-group { + display: block; + width: 100%; + min-height: 20px; + border: 1px solid var(--uui-color-border); + border-radius: var(--uui-size-border-radius); + padding: var(--uui-size-space-1); + } + `, + ]; +} + +export default ExampleSorterGroup; + +declare global { + interface HTMLElementTagNameMap { + 'example-sorter-group-nested': ExampleSorterGroup; + } +} diff --git a/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-item.ts b/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-item.ts new file mode 100644 index 0000000000..a3f7ef5fb3 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-item.ts @@ -0,0 +1,58 @@ +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { css, html, customElement, LitElement, state, repeat, property } from '@umbraco-cms/backoffice/external/lit'; +import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'; +import { UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffice/sorter'; + +@customElement('example-sorter-item') +export class ExampleSorterItem extends UmbElementMixin(LitElement) { + @property({ type: String, reflect: true }) + name: string = ''; + + @property({ type: Boolean, reflect: true, attribute: 'drag-placeholder' }) + umbDragPlaceholder = false; + + render() { + return html` +
+ ${this.name} + + +
+ + `; + } + + static styles = [ + UmbTextStyles, + css` + :host { + display: block; + padding: var(--uui-size-layout-1); + border: 1px solid var(--uui-color-border); + border-radius: var(--uui-border-radius); + margin-bottom: 3px; + } + :host([drag-placeholder]) { + opacity: 0.2; + } + + div { + display: flex; + align-items: center; + justify-content: space-between; + } + + slot:not([name]) { + // go on new line: + } + `, + ]; +} + +export default ExampleSorterItem; + +declare global { + interface HTMLElementTagNameMap { + 'example-sorter-item-nested': ExampleSorterItem; + } +} 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 index 3dc57f3788..b92b05220d 100644 --- 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 @@ -1,5 +1,3 @@ # Property Dataset Dashboard Example -This example demonstrates the how to setup the Sorter. - -This example can still NOT sort between two groups. This will come later. +This example demonstrates how to set up the Sorter, and how it can be linked with another Sorter. 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 index 5704964d9a..7747317257 100644 --- 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 @@ -9,14 +9,6 @@ export class ExampleSorterDashboard extends UmbElementMixin(LitElement) { groupOneItems: ModelEntryType[] = [ { name: 'Apple', - children: [ - { - name: 'Juice', - }, - { - name: 'Milk', - }, - ], }, { name: 'Banana', @@ -29,14 +21,6 @@ export class ExampleSorterDashboard extends UmbElementMixin(LitElement) { }, { name: 'Lemon', - children: [ - { - name: 'Cola', - }, - { - name: 'Pepsi', - }, - ], }, ]; @@ -56,7 +40,6 @@ export class ExampleSorterDashboard extends UmbElementMixin(LitElement) { return html`
-
Notice this example still only support single group of Sorter.
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 84913f0357..9689d9ac8f 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 @@ -8,29 +8,18 @@ import ExampleSorterItem from './sorter-item.js'; export type ModelEntryType = { name: string; - children?: ModelEntryType[]; -}; - -const SORTER_CONFIG: UmbSorterConfig = { - getUniqueOfElement: (element) => { - return element.name; - }, - getUniqueOfModel: (modelEntry) => { - return modelEntry.name; - }, - identifier: 'string-that-identifies-all-example-sorters', - itemSelector: 'example-sorter-item', - containerSelector: '.sorter-container', }; @customElement('example-sorter-group') export class ExampleSorterGroup extends UmbElementMixin(LitElement) { + // + // Property that is used to set the model of the sorter. @property({ type: Array, attribute: false }) public get items(): ModelEntryType[] { return this._items ?? []; } public set items(value: ModelEntryType[]) { - // Only want to set the model initially, cause any re-render should not set this again. + // Only want to set the model initially via this one, as this is the initial model, cause any re-render should not set this data again. if (this._items !== undefined) return; this._items = value; this.#sorter.setModel(this._items); @@ -38,7 +27,15 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) { private _items?: ModelEntryType[]; #sorter = new UmbSorterController(this, { - ...SORTER_CONFIG, + getUniqueOfElement: (element) => { + return element.name; + }, + getUniqueOfModel: (modelEntry) => { + return modelEntry.name; + }, + identifier: 'string-that-identifies-all-example-sorters', + itemSelector: 'example-sorter-item', + containerSelector: '.sorter-container', onChange: ({ model }) => { const oldValue = this._items; this._items = model; @@ -59,9 +56,6 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) { (item) => html` - ${item.children && item.children.length > 0 - ? html`` - : ''} `, )}