web/elements: add error handler when table fails to fetch objects

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

web/src/elements/table/Table.ts

@@ -1,7 +1,7 @@
 import { t } from "@lingui/macro";
 
 import { CSSResult, LitElement, TemplateResult, html } from "lit";
-import { property } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
 import AKGlobal from "../../authentik.css";
@@ -137,6 +137,9 @@ export abstract class Table<T> extends LitElement {
     @property({ attribute: false })
     expandedElements: T[] = [];
 
+    @state()
+    hasError?: Error;
+
     static get styles(): CSSResult[] {
         return [
             PFBase,
@@ -170,6 +173,7 @@ export abstract class Table<T> extends LitElement {
         this.isLoading = true;
         try {
             this.data = await this.apiEndpoint(this.page);
+            this.hasError = undefined;
             this.page = this.data.pagination.current;
             const newSelected: T[] = [];
             const newExpanded: T[] = [];
@@ -204,8 +208,9 @@ export abstract class Table<T> extends LitElement {
             this.isLoading = false;
             this.selectedElements = newSelected;
             this.expandedElements = newExpanded;
-        } catch {
+        } catch (ex) {
             this.isLoading = false;
+            this.hasError = ex as Error;
         }
     }
 
@@ -235,7 +240,16 @@ export abstract class Table<T> extends LitElement {
         </tbody>`;
     }
 
+    renderError(): TemplateResult {
+        return html`<ak-empty-state header="${t`Failed to fetch objects.`}" icon="fa-times">
+            <div slot="body">${this.hasError?.toString()}</div>
+        </ak-empty-state>`;
+    }
+
     private renderRows(): TemplateResult[] | undefined {
+        if (this.hasError) {
+            return [this.renderEmpty(this.renderError())];
+        }
         if (!this.data) {
             return;
         }

web/src/locales/de.po

@@ -2100,6 +2100,10 @@ msgstr "Löschen von {0} fehlgeschlagen: {1}"
 msgid "Failed to disconnected source: {exc}"
 msgstr ""
 
+#: src/elements/table/Table.ts
+msgid "Failed to fetch objects."
+msgstr ""
+
 #: src/pages/users/UserActiveForm.ts
 msgid "Failed to update {0}: {1}"
 msgstr "Aktualisieren von {0} fehlgeschlagen: {1}"

web/src/locales/en.po

@@ -2135,6 +2135,10 @@ msgstr "Failed to delete {0}: {1}"
 msgid "Failed to disconnected source: {exc}"
 msgstr "Failed to disconnected source: {exc}"
 
+#: src/elements/table/Table.ts
+msgid "Failed to fetch objects."
+msgstr "Failed to fetch objects."
+
 #: src/pages/users/UserActiveForm.ts
 msgid "Failed to update {0}: {1}"
 msgstr "Failed to update {0}: {1}"

web/src/locales/es.po

@@ -2091,6 +2091,10 @@ msgstr "No se pudo eliminar {0}: {1}"
 msgid "Failed to disconnected source: {exc}"
 msgstr ""
 
+#: src/elements/table/Table.ts
+msgid "Failed to fetch objects."
+msgstr ""
+
 #: src/pages/users/UserActiveForm.ts
 msgid "Failed to update {0}: {1}"
 msgstr "No se pudo actualizar {0}: {1}"

web/src/locales/fr_FR.po

@@ -2116,6 +2116,10 @@ msgstr "Impossible de supprimer {0} : {1}"
 msgid "Failed to disconnected source: {exc}"
 msgstr ""
 
+#: src/elements/table/Table.ts
+msgid "Failed to fetch objects."
+msgstr ""
+
 #: src/pages/users/UserActiveForm.ts
 msgid "Failed to update {0}: {1}"
 msgstr "Impossible de mettre à jour {0} : {1}"

web/src/locales/pl.po

@@ -2088,6 +2088,10 @@ msgstr "Nie udało się usunąć {0}: {1}"
 msgid "Failed to disconnected source: {exc}"
 msgstr ""
 
+#: src/elements/table/Table.ts
+msgid "Failed to fetch objects."
+msgstr ""
+
 #: src/pages/users/UserActiveForm.ts
 msgid "Failed to update {0}: {1}"
 msgstr "Nie udało się zaktualizować {0}: {1}"

web/src/locales/pseudo-LOCALE.po

@@ -2121,6 +2121,10 @@ msgstr ""
 msgid "Failed to disconnected source: {exc}"
 msgstr ""
 
+#: src/elements/table/Table.ts
+msgid "Failed to fetch objects."
+msgstr ""
+
 #: src/pages/users/UserActiveForm.ts
 msgid "Failed to update {0}: {1}"
 msgstr ""

web/src/locales/tr.po

@@ -2091,6 +2091,10 @@ msgstr "{0} silinemedi: {1}"
 msgid "Failed to disconnected source: {exc}"
 msgstr ""
 
+#: src/elements/table/Table.ts
+msgid "Failed to fetch objects."
+msgstr ""
+
 #: src/pages/users/UserActiveForm.ts
 msgid "Failed to update {0}: {1}"
 msgstr "{0} güncellenemedi: {1}"

web/src/locales/zh-Hant.po

@@ -2082,6 +2082,10 @@ msgstr "无法删除 {0}: {1}"
 msgid "Failed to disconnected source: {exc}"
 msgstr ""
 
+#: src/elements/table/Table.ts
+msgid "Failed to fetch objects."
+msgstr ""
+
 #: src/pages/users/UserActiveForm.ts
 msgid "Failed to update {0}: {1}"
 msgstr "更新失败 {0}：{1}"

web/src/locales/zh_TW.po

@@ -2082,6 +2082,10 @@ msgstr "无法删除 {0}: {1}"
 msgid "Failed to disconnected source: {exc}"
 msgstr ""
 
+#: src/elements/table/Table.ts
+msgid "Failed to fetch objects."
+msgstr ""
+
 #: src/pages/users/UserActiveForm.ts
 msgid "Failed to update {0}: {1}"
 msgstr "更新失败 {0}：{1}"