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

ensure both examples still exists

Browse Source
This commit is contained in:
Niels Lyngsø
2024-02-01 21:46:26 +01:00
parent 411b677e83
commit 45a5cc2386
8 changed files with 278 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/README.md Normal file
View File

@@ -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.

15
src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/index.ts Normal file
View File

@@ -0,0 +1,15 @@
import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
export const manifests: Array<ManifestTypes> = [
{
type: 'dashboard',
name: 'Example Sorter Dashboard',
alias: 'example.dashboard.dataset',
element: () => import('./sorter-dashboard.js'),
weight: 900,
meta: {
label: 'Sorter example',
pathname: 'sorter-example',
},
},
];

88
src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-dashboard.ts Normal file
View File

@@ -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`
<uui-box class="uui-text">
<div class="outer-wrapper">
<h5>Notice this example still only support single group of Sorter.</h5>
<example-sorter-group .items=${this.groupOneItems}></example-sorter-group>
<example-sorter-group .items=${this.groupTwoItems}></example-sorter-group>
</div>
</uui-box>
`;
}
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;
}
}

101
src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-group.ts Normal file
View File

@@ -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<ModelEntryType, ExampleSorterItem> = {
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<ModelEntryType, ExampleSorterItem>(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`
<div class="sorter-container">
${repeat(
this.items,
(item) => item.name,
(item) =>
html`<example-sorter-item name=${item.name}>
<button slot="action" @click=${() => this.removeItem(item)}>Delete</button>
${item.children && item.children.length > 0
? html`<example-sorter-group .items=${item.children}></example-sorter-group>`
: ''}
</example-sorter-item>`,
)}
</div>
`;
}
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;
}
}

58
src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-item.ts Normal file
View File

@@ -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`
<div>
${this.name}
<img src="https://picsum.photos/seed/${this.name}/400/400" style="width:120px;" />
<slot name="action"></slot>
</div>
<slot></slot>
`;
}
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;
}
}

4
src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/README.md
View File

@@ -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.

17
src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-dashboard.ts
View File

@@ -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`
<uui-box class="uui-text">
<div class="outer-wrapper">
<h5>Notice this example still only support single group of Sorter.</h5>
<example-sorter-group .items=${this.groupOneItems}></example-sorter-group>
<example-sorter-group .items=${this.groupTwoItems}></example-sorter-group>
</div>

30
src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts
View File

@@ -8,29 +8,18 @@ import ExampleSorterItem from './sorter-item.js';
export type ModelEntryType = {
name: string;
children?: ModelEntryType[];
};
const SORTER_CONFIG: UmbSorterConfig<ModelEntryType, ExampleSorterItem> = {
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<ModelEntryType, ExampleSorterItem>(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`<example-sorter-item name=${item.name}>
<button slot="action" @click=${() => this.removeItem(item)}>Delete</button>
${item.children && item.children.length > 0
? html`<example-sorter-group .items=${item.children}></example-sorter-group>`
: ''}
</example-sorter-item>`,
)}
</div>