tp-elements/tp-table
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update and fixes

Browse Source
This commit is contained in:
trading_peter
2023-01-13 11:52:10 +01:00
parent 1f7f38932f
commit 98fbf98a7f
3 changed files with 38 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
tp-table.js
View File

@ -184,13 +184,13 @@ export class TpTable extends DomQuery(LitElement) {
<div class="wrap">
<div id="tableHeader" part="header" class="list-headline" @track=${this._colResizeTracked}>
${this.selectable ? html`
<div class="select-col" part="chkAll"><tp-checkbox @checked-changed=${e => this._checkedChanged(e)}></tp-checkbox></div>
<div class="select-col" part="chkAll"><tp-checkbox @toggled=${e => this._checkedChanged(e)}></tp-checkbox></div>
` : null}
${columns.map(column => this.renderColumnHeader(column))}
</div>
<div class="list">
<div class="list" @row-selection-changed=${(e) => this._selectionChanged(e)}>
${this._emptyMessage}
<lit-virtualizer id="virtualList" part="list" @scroll=${this._onScroll} scroller .items=${items} .renderItem=${(item, idx) => this.renderItem(item, idx, columns)}></lit-virtualizer>
<lit-virtualizer id="virtualList" part="list" @scroll=${this._onScroll} scroller .items=${items} .renderItem=${(item, idx) => this.renderItem(item, idx, columns, this._selItems.has(this.getItemId(item)))}></lit-virtualizer>
</div>
<tp-scroll-threshold id="threshold" lowerThreshold="40"></tp-scroll-threshold>
@ -231,16 +231,16 @@ export class TpTable extends DomQuery(LitElement) {
return svg`<path fill="var(--tp-table-icon-color)" d="M7,15L12,10L17,15H7Z">`;
}
renderItem(item, idx, columns) {
renderItem(item, idx, columns, selected) {
return html`
<tp-table-item
exportparts="cell,odd,row,chk"
item
.index=${idx}
.item=${item}
.selected=${selected}
.selectable=${this.selectable}
.columns=${columns}
@selection-changed=${(e) => this._selectionChanged(e)}>
.columns=${columns}>
</tp-table-item>
`;
}
@ -250,7 +250,7 @@ export class TpTable extends DomQuery(LitElement) {
sorting: { type: Object },
selectable: { type: Boolean },
columns: { type: Array },
_selItems: { type: Array },
_selItems: { type: Map },
_visibleColumns: { type: Array },
items: { type: Array },
_advFilters: { type: Array },
@ -263,7 +263,7 @@ export class TpTable extends DomQuery(LitElement) {
constructor() {
super();
this._selItems = [];
this._selItems = new Map();
}
updated(changes) {
@ -301,8 +301,13 @@ export class TpTable extends DomQuery(LitElement) {
this.reloadPagedList();
}
scrollToIndex(idx) {
this.$.virtualList.scrollToIndex(idx);
// Override this to change how the table derives item ids.
getItemId(item) {
return item._id || item.id;
}
scrollToIndex(idx, position) {
this.$.virtualList.scrollToIndex(idx, position);
}
firstUpdated() {
@ -392,60 +397,43 @@ export class TpTable extends DomQuery(LitElement) {
} else {
this._selectNone();
}
this.items = [...this.items];
}
_selectAll() {
this.items = this.items.map((entry) => {
entry.__selected__ = true;
return entry;
this._selItems = new Map();
this.items.forEach(item => {
this._selItems.set(this.getItemId(item), item);
});
this.requestUpdate('items');
this._selectionChanged();
}
_selectNone() {
this.items = this.items.map((entry) => {
entry.__selected__ = false;
return entry;
});
this._selItems = new Map();
this._selectionChanged();
}
_selectionChanged(e) {
if (this.__restoringSelection) return;
if (e !== undefined) {
const item = this.items.find(item => item._id === e.detail.item._id);
item.__selected__ = e.detail.selected;
if (e.detail.selected) {
this._selItems.set(this.getItemId(e.detail.item), e.detail.item);
} else {
this._selItems.delete(this.getItemId(e.detail.item));
}
}
this._selItems = this.items.filter(entry => entry.__selected__ === true);
this.dispatchEvent(new CustomEvent('item-selection-changed', { detail: this._selItems, bubbles: true, composed: true }));
this.dispatchEvent(new CustomEvent('item-selection-changed', { detail: Array.from(this._selItems.values()), bubbles: true, composed: true }));
}
_updateSelEntries() {
this._hiddenSelection = 0;
if (!this.items) {
this._selItems = [];
} else {
this._selItems.forEach(sel => {
const idx = this.items.findIndex(entry => entry._id === sel._id);
if (idx > -1) {
// Suppress rebuild of the selected invoices list.
// When we restore the selection on a filtered list of invoices we would loose the selection of hidden onces
// when _selectionChanged is triggered. So we set a flag that the observer is skipped.
this.__restoringSelection = true;
this.items[idx].__selected__ = true;
this.__restoringSelection = false;
} else {
this._hiddenSelection++;
}
});
this._selItems = new Map();
}
for (const selItem of this._selItems.values()) {
if (this.items.findIndex(item => this.getItemId(item) === this.getItemId(selItem)) > -1) {
}
}
}
}