web/elements: move table search to table

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/elements/forms/Form.ts

@@ -10,6 +10,7 @@ import AKGlobal from "../../authentik.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
 import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";
+import PFInputGroup from "@patternfly/patternfly/components/InputGroup/input-group.css";
 import { MessageLevel } from "../messages/Message";
 import { IronFormElement } from "@polymer/iron-form/iron-form";
 import { camelToSnake, convertToSlug } from "../../utils";
@@ -36,7 +37,7 @@ export class Form<T> extends LitElement {
     nonFieldErrors?: string[];
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFCard, PFButton, PFForm, PFAlert, PFFormControl, AKGlobal, css`
+        return [PFBase, PFCard, PFButton, PFForm, PFAlert, PFInputGroup, PFFormControl, AKGlobal, css`
             select[multiple] {
                 height: 15em;
             }

web/src/elements/forms/HorizontalFormElement.ts

@@ -52,6 +52,7 @@ export class HorizontalFormElement extends LitElement {
                 case "textarea":
                 case "select":
                 case "ak-codemirror":
+                case "ak-chip-group":
                     (input as HTMLInputElement).name = this.name;
                     break;
                 default:

web/src/elements/table/Table.ts

@@ -12,10 +12,12 @@ import PFPagination from "@patternfly/patternfly/components/Pagination/paginatio
 import AKGlobal from "../../authentik.css";
 
 import "./TablePagination";
+import "./TableSearch";
 import "../EmptyState";
 import "../chips/Chip";
 import "../chips/ChipGroup";
 import { EVENT_REFRESH } from "../../constants";
+import { ifDefined } from "lit-html/directives/if-defined";
 
 export class TableColumn {
 
@@ -85,6 +87,10 @@ export abstract class Table<T> extends LitElement {
 
     private isLoading = false;
 
+    searchEnabled(): boolean {
+        return false;
+    }
+
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     renderExpanded(item: T): TemplateResult {
         if (this.expandable) {
@@ -194,6 +200,7 @@ export abstract class Table<T> extends LitElement {
                                     if (index <= -1) return;
                                     this.selectedElements.splice(index, 1);
                                 }
+                                this.requestUpdate();
                             }} />
                     </td>` : html``}
                     ${this.expandable ? html`<td class="pf-c-table__toggle" role="cell">
@@ -229,6 +236,17 @@ export abstract class Table<T> extends LitElement {
     }
 
     renderSearch(): TemplateResult {
+        if (!this.searchEnabled()) {
+            return html``;
+        }
+        return html`<ak-table-search value=${ifDefined(this.search)} .onSearch=${(value: string) => {
+            this.search = value;
+            this.fetch();
+        }}>
+        </ak-table-search>&nbsp;`;
+    }
+
+    renderSelectedChip(item: T): TemplateResult {
         return html``;
     }
 

web/src/elements/table/TablePage.ts

@@ -2,7 +2,6 @@ import { CSSResult } from "lit-element";
 import { html, TemplateResult } from "lit-html";
 import { ifDefined } from "lit-html/directives/if-defined";
 import { Table } from "./Table";
-import "./TableSearch";
 import "../../elements/PageHeader";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
@@ -11,23 +10,11 @@ export abstract class TablePage<T> extends Table<T> {
     abstract pageTitle(): string;
     abstract pageDescription(): string | undefined;
     abstract pageIcon(): string;
-    abstract searchEnabled(): boolean;
 
     static get styles(): CSSResult[] {
         return super.styles.concat(PFPage, PFContent);
     }
 
-    renderSearch(): TemplateResult {
-        if (!this.searchEnabled()) {
-            return super.renderSearch();
-        }
-        return html`<ak-table-search value=${ifDefined(this.search)} .onSearch=${(value: string) => {
-            this.search = value;
-            this.fetch();
-        }}>
-        </ak-table-search>&nbsp;`;
-    }
-
     render(): TemplateResult {
         return html`<ak-page-header
                 icon=${this.pageIcon()}