web: add TablePage

passbook/core/templates/shell.html

@@ -4,7 +4,7 @@
 <pb-sidebar class="pf-c-page__sidebar">
 </pb-sidebar>
 <main class="pf-c-page__main">
-    <pb-router-outlet role="main" class="pf-c-page__main" tabindex="-1" id="main-content" defaultUrl="/-/overview/">
+    <pb-router-outlet role="main" class="pf-c-page__main" tabindex="-1" id="main-content" defaultUrl="/library/">
     </pb-router-outlet>
 </main>
 {% endblock %}

web/src/api/application.ts

@@ -17,7 +17,7 @@ export class Application {
         return DefaultClient.fetch<Application>(["core", "applications", slug]);
     }
 
-    static list(filter?: { [key: string]: string }): Promise<PBResponse<Application>> {
+    static list(filter?: { [key: string]: any }): Promise<PBResponse<Application>> {
         return DefaultClient.fetch<PBResponse<Application>>(["core", "applications"], filter);
     }
 }

web/src/elements/table/Table.ts

@@ -6,7 +6,7 @@ import { COMMON_STYLES } from "../../common/styles";
 export abstract class Table<T> extends LitElement {
     abstract apiEndpoint(page: number): Promise<PBResponse<T>>;
     abstract columns(): Array<string>;
-    abstract row(item: any): Array<string>;
+    abstract row(item: T): Array<string>;
 
     @property()
     data?: PBResponse<T>;
@@ -61,7 +61,7 @@ export abstract class Table<T> extends LitElement {
         });
     }
 
-    render() {
+    renderTable() {
         if (!this.data) {
             this.fetch();
         }
@@ -103,4 +103,8 @@ export abstract class Table<T> extends LitElement {
                 ></pb-table-pagination>
             </div>`;
     }
+
+    render() {
+        return this.renderTable();
+    }
 }

web/src/elements/table/TablePage.ts

@@ -0,0 +1,23 @@
+import { html } from "lit-html";
+import { Table } from "./Table";
+
+export abstract class TablePage<T> extends Table<T> {
+    abstract pageTitle(): string;
+    abstract pageDescription(): string;
+    abstract pageIcon(): string;
+
+    render() {
+        return html`<section class="pf-c-page__main-section pf-m-light">
+                <div class="pf-c-content">
+                    <h1>
+                        <i class="${this.pageIcon()}"></i>
+                        ${this.pageTitle()}
+                    </h1>
+                    <p>${this.pageDescription()}</p>
+                </div>
+            </section>
+            <section class="pf-c-page__main-section pf-m-no-padding-mobile">
+                <div class="pf-c-card">${this.renderTable()}</div>
+            </section>`;
+    }
+}

web/src/index.html

@@ -50,7 +50,7 @@
                 class="pf-c-page__main"
                 tabindex="-1"
                 id="main-content"
-                defaultUrl="/-/overview/"
+                defaultUrl="/library/"
             >
             </pb-router-outlet>
         </div>

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";

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 {

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`<pb-library></pb-library>`),
-    new Route(new RegExp(`^/applications/$`), html`<h1>test</h1>`),
+    new Route(new RegExp(`^/applications/$`), html`<pb-application-list></pb-application-list>`),
     new Route(new RegExp(`^/applications/(?<slug>${SLUG_REGEX})/$`)).then((args) => {
         return html`<pb-application-view .args=${args}></pb-application-view>`;
     }),

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<Application> {
+    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<PBResponse<Application>> {
+        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(),
+            `
+            <pb-modal-button href="administration/policies/bindings/${item.pk}/update/">
+                <pb-spinner-button slot="trigger" class="pf-m-secondary">
+                    Edit
+                </pb-spinner-button>
+                <div slot="modal"></div>
+            </pb-modal-button>
+            <pb-modal-button href="administration/policies/bindings/${item.pk}/delete/">
+                <pb-spinner-button slot="trigger" class="pf-m-danger">
+                    Delete
+                </pb-spinner-button>
+                <div slot="modal"></div>
+            </pb-modal-button>
+            `,
+        ];
+    }
+}