From 43a421749758ea1a2e07fa7e5cc1bb972185d55d Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Mon, 8 Mar 2021 21:51:42 +0100
Subject: [PATCH] web: add optional checkboxes to table

---
 web/src/elements/table/Table.ts | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/web/src/elements/table/Table.ts b/web/src/elements/table/Table.ts
index c40412425..9345966d9 100644
--- a/web/src/elements/table/Table.ts
+++ b/web/src/elements/table/Table.ts
@@ -95,6 +95,12 @@ export abstract class Table<T> extends LitElement {
     @property({type: String})
     search?: string;
 
+    @property({type: Boolean})
+    checkbox = false;
+
+    @property({attribute: false})
+    selectedElements: T[] = [];
+
     @property({type: Boolean})
     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" : ""}">
                 <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">
                     <button class="pf-c-button pf-m-plain ${this.expandedRows[idx] ? "pf-m-expanded" : ""}" @click=${() => {
                         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">
                 <thead>
                     <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))}
                     </tr>
                 </thead>