web: add TablePage

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>`;
+    }
+}