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

Allow for selection

Browse Source
This commit is contained in:
pk 2022-11-07 10:01:24 +01:00
parent 8b7facdc64
commit 1f7f38932f
3 changed files with 50 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@tp/tp-table",
"version": "1.0.0",
"version": "1.0.1",
"description": "",
"main": "tp-table.js",
"scripts": {

25
tp-table-item.js
View File

@ -41,6 +41,17 @@ class TpTableItem extends BaseElement {
align-items: center;
}
[part="chk"] {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
tp-checkbox::part(label) {
display: none;
}
[part="cell"] {
align-self: stretch;
overflow: hidden;
@ -63,15 +74,15 @@ class TpTableItem extends BaseElement {
return html`
<div id="grid" class="wrap" part="row">
${this.selectable ? html`
<div class="chk">
<div class="chk" part="chk">
<tp-checkbox id="selectionChk" @click=${this._updateSelectionState}></tp-checkbox>
</div>
` : null}
${Array.isArray(columns) ? columns.map(column => {
if (column.visible !== true && column.required !== true) return;
return this.renderColumn(column, item) || null;
}) : null
}
${Array.isArray(columns) ? columns.map((column, idx) => {
if (column.visible !== true && column.required !== true) return;
return this.renderColumn(column, item, idx) || null;
}) : null
}
</div>
`;
}
@ -79,7 +90,7 @@ class TpTableItem extends BaseElement {
static get properties() {
return {
index: { type: Array },
item: { type: Object },
item: { type: Object, hasChanged: () => true },
columns: { type: Array },
selectable: { type: Boolean },
};

48
tp-table.js
View File

@ -132,7 +132,14 @@ export class TpTable extends DomQuery(LitElement) {
}
.select-col {
padding: 0px 20px 10px;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.select-col tp-checkbox::part(label) {
display: none;
}
lit-virtualizer {
@ -177,7 +184,7 @@ 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"><tp-checkbox @checked-changed=${e => this._checkedChanged(e)}></tp-checkbox></div>
<div class="select-col" part="chkAll"><tp-checkbox @checked-changed=${e => this._checkedChanged(e)}></tp-checkbox></div>
` : null}
${columns.map(column => this.renderColumnHeader(column))}
</div>
@ -227,7 +234,7 @@ export class TpTable extends DomQuery(LitElement) {
renderItem(item, idx, columns) {
return html`
<tp-table-item
exportparts="cell,odd,row"
exportparts="cell,odd,row,chk"
item
.index=${idx}
.item=${item}
@ -294,11 +301,15 @@ export class TpTable extends DomQuery(LitElement) {
this.reloadPagedList();
}
scrollToIndex(idx) {
this.$.virtualList.scrollToIndex(idx);
}
firstUpdated() {
this.shadowRoot.querySelector('tp-scroll-threshold').target = this.shadowRoot.querySelector('lit-virtualizer');
new ColumResizer(this.$.tableHeader, '.width-handle');
}
_onScroll(e) {
this.$.tableHeader.style.paddingRight = (this.$.virtualList.offsetWidth - this.$.virtualList.clientWidth) + 'px';
this.$.tableHeader.scrollLeft = this.$.virtualList.scrollLeft;
@ -319,11 +330,11 @@ export class TpTable extends DomQuery(LitElement) {
}
_updateColumns() {
this.$.tableHeader.style.gridTemplateColumns = this._updateColumnWidths(this.selectable ? [ '40px' ] : []).join(' ');
this.$.tableHeader.style.gridTemplateColumns = this._updateColumnWidths(this.selectable ? ['40px'] : []).join(' ');
}
_updateColumnWidths(prepend) {
return [ ...(prepend || []), ...this.columns.filter(col => col.required || col.visible).map(col => col.width) ];
return [...(prepend || []), ...this.columns.filter(col => col.required || col.visible).map(col => col.width)];
}
_colResizeTracked(e) {
@ -376,26 +387,29 @@ export class TpTable extends DomQuery(LitElement) {
_checkedChanged(e) {
if (Array.isArray(this.items) === false) return;
if (e.detail.value) {
if (e.detail) {
this._selectAll();
} else {
this._selectNone();
}
this.items = [...this.times];
this.items = [...this.items];
}
_selectAll() {
this.items.forEach((entry, idx) => {
this.items[idx].__selected__ = true;
this.items = this.items.map((entry) => {
entry.__selected__ = true;
return entry;
});
this.requestUpdate('items');
this._selectionChanged();
}
_selectNone() {
this._items.forEach((entry, idx) => {
this._items[idx].__selected__ = false;
this.items = this.items.map((entry) => {
entry.__selected__ = false;
return entry;
});
this._selectionChanged();
@ -405,28 +419,28 @@ export class TpTable extends DomQuery(LitElement) {
if (this.__restoringSelection) return;
if (e !== undefined) {
const item = this._items.find(item => item._id === e.detail.item._id);
const item = this.items.find(item => item._id === e.detail.item._id);
item.__selected__ = e.detail.selected;
}
this._selItems = this._items.filter(entry => entry.__selected__ === true);
this._selItems = this.items.filter(entry => entry.__selected__ === true);
this.dispatchEvent(new CustomEvent('item-selection-changed', { detail: this._selItems, bubbles: true, composed: true }));
}
_updateSelEntries() {
this._hiddenSelection = 0;
if (!this._items) {
if (!this.items) {
this._selItems = [];
} else {
this._selItems.forEach(sel => {
const idx = this._items.findIndex(entry => entry._id === sel._id);
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.items[idx].__selected__ = true;
this.__restoringSelection = false;
} else {
this._hiddenSelection++;