From ada44d84f88df5555d44f752fadc3e3115c757cf Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens@goauthentik.io>
Date: Thu, 2 Feb 2023 22:37:59 +0100
Subject: [PATCH] web/elements: make table rows clickable to select items

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---
 web/src/elements/table/Table.ts | 69 +++++++++++++++++++++------------
 1 file changed, 44 insertions(+), 25 deletions(-)

diff --git a/web/src/elements/table/Table.ts b/web/src/elements/table/Table.ts
index 7d41ad1c4..f20563f47 100644
--- a/web/src/elements/table/Table.ts
+++ b/web/src/elements/table/Table.ts
@@ -130,6 +130,9 @@ export abstract class Table<T> extends AKElement {
     @property({ type: Boolean })
     checkbox = false;
 
+    @property({ type: Boolean })
+    radioSelect = false;
+
     @property({ type: Boolean })
     checkboxChip = false;
 
@@ -289,41 +292,57 @@ export abstract class Table<T> extends AKElement {
 
     private renderRowGroup(items: T[]): TemplateResult[] {
         return items.map((item) => {
+            const itemSelectHandler = (ev?: InputEvent) => {
+                let checked = false;
+                if (ev) {
+                    checked = (ev.target as HTMLInputElement).checked;
+                } else {
+                    // If we have no event, toggle the state
+                    checked = this.selectedElements.indexOf(item) === -1;
+                }
+                if (checked) {
+                    // Prevent double-adding the element to selected items
+                    if (this.selectedElements.indexOf(item) !== -1) {
+                        return;
+                    }
+                    // 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);
+                }
+                this.requestUpdate();
+                // Unset select-all if selectedElements is empty
+                const selectAllCheckbox =
+                    this.shadowRoot?.querySelector<HTMLInputElement>("[name=select-all]");
+                if (!selectAllCheckbox) {
+                    return;
+                }
+                if (this.selectedElements.length < 1) {
+                    selectAllCheckbox.checked = false;
+                    this.requestUpdate();
+                }
+            };
             return html`<tbody
                 role="rowgroup"
                 class="${this.expandedElements.indexOf(item) > -1 ? "pf-m-expanded" : ""}"
             >
-                <tr role="row">
+                <tr
+                    role="row"
+                    class="${this.checkbox ? "pf-m-hoverable" : ""}"
+                    @click=${() => {
+                        itemSelectHandler();
+                    }}
+                >
                     ${this.checkbox
                         ? html`<td class="pf-c-table__check" role="cell">
                               <label
                                   ><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);
-                                          }
-                                          this.requestUpdate();
-                                          // Unset select-all if selectedElements is empty
-                                          if (this.selectedElements.length < 1) {
-                                              const selectAllCheckbox =
-                                                  this.shadowRoot?.querySelector<HTMLInputElement>(
-                                                      "[name=select-all]",
-                                                  );
-                                              if (!selectAllCheckbox) {
-                                                  return;
-                                              }
-                                              selectAllCheckbox.checked = false;
-                                              this.requestUpdate();
-                                          }
-                                      }}
+                                      @input=${itemSelectHandler}
                               /></label>
                           </td>`
                         : html``}