trustchain-oc1-orchestral
/
authentik
Archived
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web: add optional checkboxes to table

This commit is contained in:
Jens Langhammer 2021-03-08 21:51:42 +01:00
parent e0ec5826ca
commit 43a4217497
1 changed files with 31 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
web/src/elements/table/Table.ts
View File

@ -95,6 +95,12 @@ export abstract class Table<T> extends LitElement {
@property({type: String}) @property({type: String})
search?: string; search?: string;
@property({type: Boolean})
checkbox = false;
@property({attribute: false})
selectedElements: T[] = [];
@property({type: Boolean}) @property({type: Boolean})
expandable = false; expandable = false;
@ -169,6 +175,21 @@ export abstract class Table<T> extends LitElement {
} }
return html`<tbody role="rowgroup" class="${this.expandedRows[idx] ? "pf-m-expanded" : ""}"> return html`<tbody role="rowgroup" class="${this.expandedRows[idx] ? "pf-m-expanded" : ""}">
<tr role="row"> <tr role="row">
${this.checkbox ? html`<td class="pf-c-table__check" role="cell">
<input type="checkbox"
?checked=${this.selectedElements.indexOf(item) >= 0}
@input=${(ev: InputEvent) => {
if ((ev.target as HTMLInputElement).checked) {
// Add item to selected
this.selectedElements.push(item);
} else {
// Get index of item and remove if selected
const index = this.selectedElements.indexOf(item);
if (index <= -1) return;
this.selectedElements.splice(index, 1);
}
}} />
</td>` : html``}
${this.expandable ? html`<td class="pf-c-table__toggle" role="cell"> ${this.expandable ? html`<td class="pf-c-table__toggle" role="cell">
<button class="pf-c-button pf-m-plain ${this.expandedRows[idx] ? "pf-m-expanded" : ""}" @click=${() => { <button class="pf-c-button pf-m-plain ${this.expandedRows[idx] ? "pf-m-expanded" : ""}" @click=${() => {
this.expandedRows[idx] = !this.expandedRows[idx]; this.expandedRows[idx] = !this.expandedRows[idx];
@ -227,7 +248,16 @@ export abstract class Table<T> extends LitElement {
<table class="pf-c-table pf-m-compact pf-m-grid-md pf-m-expandable"> <table class="pf-c-table pf-m-compact pf-m-grid-md pf-m-expandable">
<thead> <thead>
<tr role="row"> <tr role="row">
${this.expandable ? html`<td role="cell">` : html``} ${this.checkbox ? html`<td class="pf-c-table__check" role="cell">
<input type="checkbox" aria-label=${gettext("Select all rows")} @input=${(ev: InputEvent) => {
if ((ev.target as HTMLInputElement).checked) {
this.selectedElements = this.data?.results || [];
} else {
this.selectedElements = [];
}
}} />
</td>` : html``}
${this.expandable ? html`<td role="cell"></td>` : html``}
${this.columns().map((col) => col.render(this))} ${this.columns().map((col) => col.render(this))}
</tr> </tr>
</thead> </thead>