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

style and setup for nested Sorters

Browse Source
This commit is contained in:
Niels Lyngsø
2024-02-01 21:16:27 +01:00
parent 9f9241d1d0
commit 716c36432c
3 changed files with 52 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,6 +9,14 @@ export class ExampleSorterDashboard extends UmbElementMixin(LitElement) {
groupOneItems: ModelEntryType[] = [
{
name: 'Apple',
children: [
{
name: 'Juice',
},
{
name: 'Milk',
},
],
},
{
name: 'Banana',
@@ -21,6 +29,14 @@ export class ExampleSorterDashboard extends UmbElementMixin(LitElement) {
},
{
name: 'Lemon',
children: [
{
name: 'Cola',
},
{
name: 'Pepsi',
},
],
},
];

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

@@ -8,6 +8,7 @@ import ExampleSorterItem from './sorter-item.js';
export type ModelEntryType = {
name: string;
children?: ModelEntryType[];
};
const SORTER_CONFIG: UmbSorterConfig<ModelEntryType, ExampleSorterItem> = {
@@ -26,57 +27,27 @@ const SORTER_CONFIG: UmbSorterConfig<ModelEntryType, ExampleSorterItem> = {
export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
@property({ type: Array, attribute: false })
public get items(): ModelEntryType[] {
return this._items;
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[] = [];
private _items?: ModelEntryType[];
#sorter = new UmbSorterController<ModelEntryType, ExampleSorterItem>(this, {
...SORTER_CONFIG,
/*performItemInsert: ({ item, newIndex }) => {
const oldValue = this._items;
//console.log('inserted', item.name, 'at', newIndex, ' ', this._items.map((x) => x.name).join(', '));
const newItems = [...this._items];
newItems.splice(newIndex, 0, item);
this.items = newItems;
this.requestUpdate('_items', oldValue);
return true;
},
performItemRemove: ({ item }) => {
const oldValue = this._items;
//console.log('removed', item.name, 'at', indexToMove, ' ', this._items.map((x) => x.name).join(', '));
const indexToMove = this._items.findIndex((x) => x.name === item.name);
const newItems = [...this._items];
newItems.splice(indexToMove, 1);
this.items = newItems;
this.requestUpdate('_items', oldValue);
return true;
},
performItemMove: ({ item, newIndex, oldIndex }) => {
const oldValue = this._items;
//console.log('move', item.name, 'from', oldIndex, 'to', newIndex, ' ', this._items.map((x) => x.name).join(', '));
const newItems = [...this._items];
newItems.splice(oldIndex, 1);
if (oldIndex <= newIndex) {
newIndex--;
}
newItems.splice(newIndex, 0, item);
this.items = newItems;
this.requestUpdate('_items', oldValue);
return true;
},*/
onChange: ({ model }) => {
const oldValue = this._items;
this._items = model;
this.requestUpdate('_items', oldValue);
this.requestUpdate('items', oldValue);
},
});
removeItem = (item: ModelEntryType) => {
this.items = this._items.filter((r) => r.name !== item.name);
this.items = this._items!.filter((r) => r.name !== item.name);
};
render() {
@@ -87,7 +58,10 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
(item) => item.name,
(item) =>
html`<example-sorter-item name=${item.name}>
<button @click=${() => this.removeItem(item)}>Delete</button>
<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>
@@ -105,6 +79,15 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
.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);
}
`,
];
}

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

@@ -13,8 +13,11 @@ export class ExampleSorterItem extends UmbElementMixin(LitElement) {
render() {
return html`
${this.name}
<img src="https://picsum.photos/seed/${this.name}/400/400" style="width:120px;" />
<div>
${this.name}
<img src="https://picsum.photos/seed/${this.name}/400/400" style="width:120px;" />
<slot name="action"></slot>
</div>
<slot></slot>
`;
}
@@ -23,9 +26,7 @@ export class ExampleSorterItem extends UmbElementMixin(LitElement) {
UmbTextStyles,
css`
:host {
display: flex;
align-items: center;
justify-content: space-between;
display: block;
padding: var(--uui-size-layout-1);
border: 1px solid var(--uui-color-border);
border-radius: var(--uui-border-radius);
@@ -34,6 +35,16 @@ export class ExampleSorterItem extends UmbElementMixin(LitElement) {
:host([drag-placeholder]) {
opacity: 0.2;
}
div {
display: flex;
align-items: center;
justify-content: space-between;
}
slot:not([name]) {
// go on new line:
}
`,
];
}