web/elements: add PageHeader element to replace page

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

web/src/elements/Page.ts

@@ -1,25 +0,0 @@
-import { t } from "@lingui/macro";
-import { LitElement } from "lit-element";
-import { html, TemplateResult } from "lit-html";
-
-export abstract class Page extends LitElement {
-    abstract pageTitle(): string;
-    abstract pageDescription(): string | undefined;
-    abstract pageIcon(): string;
-
-    abstract renderContent(): TemplateResult;
-
-    render(): TemplateResult {
-        const description = this.pageDescription();
-        return html`<section class="pf-c-page__main-section pf-m-light">
-                <div class="pf-c-content">
-                    <h1>
-                        <i class="${this.pageIcon()}"></i>&nbsp;
-                        ${t`${this.pageTitle()}`}
-                    </h1>
-                    ${description ? html`<p>${t`${description}`}</p>` : html``}
-                </div>
-            </section>
-            ${this.renderContent()}`;
-    }
-}

web/src/elements/PageHeader.ts

@@ -0,0 +1,63 @@
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import AKGlobal from "../authentik.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import { TITLE_SUFFIX } from "../constants";
+
+@customElement("ak-page-header")
+export class PageHeader extends LitElement {
+
+    @property()
+    icon?: string;
+
+    @property({type: Boolean})
+    iconImage = false
+
+    @property()
+    set header(value: string) {
+        if (value !== "") {
+            document.title = `${value} - ${TITLE_SUFFIX}`;
+        } else {
+            document.title = TITLE_SUFFIX;
+        }
+        this._header = value;
+    }
+
+    get header(): string {
+        return this._header;
+    }
+
+    @property()
+    description?: string;
+
+    _header = "";
+
+    static get styles(): CSSResult[] {
+        return [PFBase, PFPage, PFContent, AKGlobal];
+    }
+
+    renderIcon(): TemplateResult {
+        if (this.icon) {
+            if (this.iconImage) {
+                return html`<img class="pf-icon" src="${this.icon}" />&nbsp;`;
+            }
+            return html`<i class=${this.icon}></i>&nbsp;`;
+        }
+        return html``;
+    }
+
+    render(): TemplateResult {
+        return html`<section class="pf-c-page__main-section pf-m-light">
+            <div class="pf-c-content">
+                <h1>
+                    ${this.renderIcon()}
+                    ${this.header}
+                </h1>
+                ${this.description ?
+                    html`<p>${this.description}</p>`: html``}
+            </div>
+        </section>`;
+    }
+
+}

web/src/elements/router/RouterOutlet.ts

@@ -5,8 +5,7 @@ import { RouteMatch } from "./RouteMatch";
 import AKGlobal from "../../authentik.css";
 
 import "./Router404";
-import { Page } from "../Page";
-import { ROUTE_SEPARATOR, TITLE_SUFFIX } from "../../constants";
+import { ROUTE_SEPARATOR } from "../../constants";
 
 // Poliyfill for hashchange.newURL,
 // https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange
@@ -38,8 +37,6 @@ export class RouterOutlet extends LitElement {
                 }
                 *:first-child {
                     height: 100%;
-                    display: flex;
-                    flex-direction: column;
                 }
             `,
         ];
@@ -54,18 +51,6 @@ export class RouterOutlet extends LitElement {
         this.navigate();
     }
 
-    updated(): void {
-        if (!this.shadowRoot) return;
-        Array.from(this.shadowRoot?.children).forEach((el) => {
-            if ("pageTitle" in el) {
-                const title = (el as Page).pageTitle();
-                document.title = `${title} - ${TITLE_SUFFIX}`;
-            } else {
-                document.title = TITLE_SUFFIX;
-            }
-        });
-    }
-
     navigate(ev?: HashChangeEvent): void {
         let activeUrl = window.location.hash.slice(1, Infinity).split(ROUTE_SEPARATOR)[0];
         if (ev) {

web/src/elements/table/TablePage.ts

@@ -1,9 +1,9 @@
-import { t } from "@lingui/macro";
 import { CSSResult } from "lit-element";
 import { html, TemplateResult } from "lit-html";
 import { ifDefined } from "lit-html/directives/if-defined";
 import { Table } from "./Table";
 import "./TableSearch";
+import "../../elements/PageHeader";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 
@@ -29,16 +29,11 @@ export abstract class TablePage<T> extends Table<T> {
     }
 
     render(): TemplateResult {
-        const description = this.pageDescription();
-        return html`<section class="pf-c-page__main-section pf-m-light">
-                <div class="pf-c-content">
-                    <h1>
-                        <i class="${this.pageIcon()}"></i>
-                        ${t`${this.pageTitle()}`}
-                    </h1>
-                    ${description ? html`<p>${t`${description}`}</p>` : html``}
-                </div>
-            </section>
+        return html`<ak-page-header
+                icon=${this.pageIcon()}
+                header=${this.pageTitle()}
+                description=${ifDefined(this.pageDescription())}>
+            </ak-page-header>
             <section class="pf-c-page__main-section pf-m-no-padding-mobile">
                 <div class="pf-c-card">${this.renderTable()}</div>
             </section>`;