web/elements: move table search to table
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
parent
ca2a4ffb59
commit
c133f16371
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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> `;
|
||||
}
|
||||
|
||||
renderSelectedChip(item: T): TemplateResult {
|
||||
return html``;
|
||||
}
|
||||
|
||||
|
|
|
@ -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> `;
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`<ak-page-header
|
||||
icon=${this.pageIcon()}
|
||||
|
|
Reference in a new issue