web/elements: improve table error handling, prevent infinite loading … (#6636)
web/elements: improve table error handling, prevent infinite loading spinner Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
parent
15e872762a
commit
31904f28ad
|
@ -23,7 +23,7 @@ import PFToolbar from "@patternfly/patternfly/components/Toolbar/toolbar.css";
|
||||||
import PFBullseye from "@patternfly/patternfly/layouts/Bullseye/bullseye.css";
|
import PFBullseye from "@patternfly/patternfly/layouts/Bullseye/bullseye.css";
|
||||||
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
||||||
|
|
||||||
import { Pagination } from "@goauthentik/api";
|
import { Pagination, ResponseError } from "@goauthentik/api";
|
||||||
|
|
||||||
export class TableColumn {
|
export class TableColumn {
|
||||||
title: string;
|
title: string;
|
||||||
|
@ -260,7 +260,9 @@ export abstract class Table<T> extends AKElement {
|
||||||
|
|
||||||
renderError(): TemplateResult {
|
renderError(): TemplateResult {
|
||||||
return html`<ak-empty-state header="${msg("Failed to fetch objects.")}" icon="fa-times">
|
return html`<ak-empty-state header="${msg("Failed to fetch objects.")}" icon="fa-times">
|
||||||
<div slot="body">${this.hasError?.toString()}</div>
|
${this.hasError instanceof ResponseError
|
||||||
|
? html` <div slot="body">${this.hasError.message}</div> `
|
||||||
|
: html`<div slot="body">${this.hasError?.toString()}</div>`}
|
||||||
</ak-empty-state>`;
|
</ak-empty-state>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -268,8 +270,8 @@ export abstract class Table<T> extends AKElement {
|
||||||
if (this.hasError) {
|
if (this.hasError) {
|
||||||
return [this.renderEmpty(this.renderError())];
|
return [this.renderEmpty(this.renderError())];
|
||||||
}
|
}
|
||||||
if (!this.data) {
|
if (!this.data || this.isLoading) {
|
||||||
return;
|
return [this.renderLoading()];
|
||||||
}
|
}
|
||||||
if (this.data.pagination.count === 0) {
|
if (this.data.pagination.count === 0) {
|
||||||
return [this.renderEmpty()];
|
return [this.renderEmpty()];
|
||||||
|
@ -499,7 +501,7 @@ export abstract class Table<T> extends AKElement {
|
||||||
${this.columns().map((col) => col.render(this))}
|
${this.columns().map((col) => col.render(this))}
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
${this.isLoading || !this.data ? this.renderLoading() : this.renderRows()}
|
${this.renderRows()}
|
||||||
</table>
|
</table>
|
||||||
${this.paginated
|
${this.paginated
|
||||||
? html` <div class="pf-c-pagination pf-m-bottom">
|
? html` <div class="pf-c-pagination pf-m-bottom">
|
||||||
|
|
Reference in New Issue