From a312ad2ad10ebe467c65a891a5a0663cf6e7d238 Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Mon, 30 Nov 2020 23:49:33 +0100 Subject: [PATCH] web: add TablePage --- passbook/core/templates/shell.html | 2 +- web/src/api/application.ts | 2 +- web/src/elements/table/Table.ts | 8 ++- web/src/elements/table/TablePage.ts | 23 +++++++++ web/src/index.html | 2 +- web/src/main.ts | 3 +- .../pages/{applications => }/LibraryPage.ts | 8 +-- web/src/pages/RouterOutlet.ts | 2 +- .../pages/applications/ApplicationListPage.ts | 51 +++++++++++++++++++ 9 files changed, 90 insertions(+), 11 deletions(-) create mode 100644 web/src/elements/table/TablePage.ts rename web/src/pages/{applications => }/LibraryPage.ts (94%) create mode 100644 web/src/pages/applications/ApplicationListPage.ts diff --git a/passbook/core/templates/shell.html b/passbook/core/templates/shell.html index f8cdb38cb..2f4e4431a 100644 --- a/passbook/core/templates/shell.html +++ b/passbook/core/templates/shell.html @@ -4,7 +4,7 @@
- +
{% endblock %} diff --git a/web/src/api/application.ts b/web/src/api/application.ts index 42bb48033..838debc03 100644 --- a/web/src/api/application.ts +++ b/web/src/api/application.ts @@ -17,7 +17,7 @@ export class Application { return DefaultClient.fetch(["core", "applications", slug]); } - static list(filter?: { [key: string]: string }): Promise> { + static list(filter?: { [key: string]: any }): Promise> { return DefaultClient.fetch>(["core", "applications"], filter); } } diff --git a/web/src/elements/table/Table.ts b/web/src/elements/table/Table.ts index 8b496ed4f..8c7ade731 100644 --- a/web/src/elements/table/Table.ts +++ b/web/src/elements/table/Table.ts @@ -6,7 +6,7 @@ import { COMMON_STYLES } from "../../common/styles"; export abstract class Table extends LitElement { abstract apiEndpoint(page: number): Promise>; abstract columns(): Array; - abstract row(item: any): Array; + abstract row(item: T): Array; @property() data?: PBResponse; @@ -61,7 +61,7 @@ export abstract class Table extends LitElement { }); } - render() { + renderTable() { if (!this.data) { this.fetch(); } @@ -103,4 +103,8 @@ export abstract class Table extends LitElement { > `; } + + render() { + return this.renderTable(); + } } diff --git a/web/src/elements/table/TablePage.ts b/web/src/elements/table/TablePage.ts new file mode 100644 index 000000000..8e85654b8 --- /dev/null +++ b/web/src/elements/table/TablePage.ts @@ -0,0 +1,23 @@ +import { html } from "lit-html"; +import { Table } from "./Table"; + +export abstract class TablePage extends Table { + abstract pageTitle(): string; + abstract pageDescription(): string; + abstract pageIcon(): string; + + render() { + return html`
+
+

+ + ${this.pageTitle()} +

+

${this.pageDescription()}

+
+
+
+
${this.renderTable()}
+
`; + } +} diff --git a/web/src/index.html b/web/src/index.html index 709ddefa7..84b5a8bcd 100644 --- a/web/src/index.html +++ b/web/src/index.html @@ -50,7 +50,7 @@ class="pf-c-page__main" tabindex="-1" id="main-content" - defaultUrl="/-/overview/" + defaultUrl="/library/" > diff --git a/web/src/main.ts b/web/src/main.ts index 794f64a93..7c937a28c 100644 --- a/web/src/main.ts +++ b/web/src/main.ts @@ -15,7 +15,8 @@ import "./elements/sidebar/SidebarUser"; import "./elements/Tabs"; import "./elements/table/TablePagination"; import "./pages/applications/ApplicationViewPage"; -import "./pages/applications/LibraryPage"; +import "./pages/applications/ApplicationListPage"; +import "./pages/LibraryPage"; import "./pages/FlowShellCard"; import "./pages/RouterOutlet"; import "./pages/SiteShell"; diff --git a/web/src/pages/applications/LibraryPage.ts b/web/src/pages/LibraryPage.ts similarity index 94% rename from web/src/pages/applications/LibraryPage.ts rename to web/src/pages/LibraryPage.ts index 3266a5b75..f7312a9b5 100644 --- a/web/src/pages/applications/LibraryPage.ts +++ b/web/src/pages/LibraryPage.ts @@ -1,8 +1,8 @@ import { css, customElement, html, LitElement, property, TemplateResult } from "lit-element"; -import { Application } from "../../api/application"; -import { DefaultClient, PBResponse } from "../../api/client"; -import { COMMON_STYLES } from "../../common/styles"; -import { truncate } from "../../utils"; +import { Application } from "../api/application"; +import { DefaultClient, PBResponse } from "../api/client"; +import { COMMON_STYLES } from "../common/styles"; +import { truncate } from "../utils"; @customElement("pb-library") export class ApplicationViewPage extends LitElement { diff --git a/web/src/pages/RouterOutlet.ts b/web/src/pages/RouterOutlet.ts index 5300253fa..ee8edba5f 100644 --- a/web/src/pages/RouterOutlet.ts +++ b/web/src/pages/RouterOutlet.ts @@ -52,7 +52,7 @@ export const ROUTES: Route[] = [ new Route(new RegExp(`^/$`)).redirect("/library/"), new Route(new RegExp(`^#.*`)).redirect("/library/"), new Route(new RegExp(`^/library/$`), html``), - new Route(new RegExp(`^/applications/$`), html`

test

`), + new Route(new RegExp(`^/applications/$`), html``), new Route(new RegExp(`^/applications/(?${SLUG_REGEX})/$`)).then((args) => { return html``; }), diff --git a/web/src/pages/applications/ApplicationListPage.ts b/web/src/pages/applications/ApplicationListPage.ts new file mode 100644 index 000000000..8a580295c --- /dev/null +++ b/web/src/pages/applications/ApplicationListPage.ts @@ -0,0 +1,51 @@ +import { customElement } from "lit-element"; +import { Application } from "../../api/application"; +import { PBResponse } from "../../api/client"; +import { TablePage } from "../../elements/table/TablePage"; + +@customElement("pb-application-list") +export class ApplicationList extends TablePage { + pageTitle(): string { + return "Applications"; + } + pageDescription(): string { + return "External Applications which use passbook as Identity-Provider, utilizing protocols like OAuth2 and SAML."; + } + pageIcon(): string { + return "pf-icon pf-icon-applications"; + } + + apiEndpoint(page: number): Promise> { + return Application.list({ + ordering: "order", + page: page, + }); + } + + columns(): string[] { + return ["Name", "Slug", "Provider", "Provider Type", ""]; + } + + row(item: Application): string[] { + return [ + item.name!, + item.slug!, + item.provider!.toString(), + item.provider!.toString(), + ` + + + Edit + +
+ + + + Delete + +
+ + `, + ]; + } +}