web/elements: add PageHeader element to replace page

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-04-10 17:06:54 +02:00
parent 1fbf6be6c2
commit 6f7fb4c919
23 changed files with 456 additions and 561 deletions

View File

@ -1,5 +1,5 @@
import { t } from "@lingui/macro";
import { CSSResult, customElement, html, TemplateResult } from "lit-element";
import { CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
import "../../elements/charts/AdminLoginsChart";
import "../../elements/cards/AggregatePromiseCard";
@ -20,25 +20,21 @@ import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
import AKGlobal from "../../authentik.css";
import { Page } from "../../elements/Page";
import "../../elements/PageHeader";
@customElement("ak-admin-overview")
export class AdminOverviewPage extends Page {
pageTitle(): string {
return t`System Overview`;
}
pageDescription(): string | undefined {
return;
}
pageIcon(): string {
return "";
}
export class AdminOverviewPage extends LitElement {
static get styles(): CSSResult[] {
return [PFGallery, PFPage, PFContent, AKGlobal];
}
renderContent(): TemplateResult {
render(): TemplateResult {
return html`
<ak-page-header
icon=""
header=${t`System Overview`}>
</ak-page-header>
<section class="pf-c-page__main-section">
<div class="pf-l-gallery pf-m-gutter">
<ak-aggregate-card class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-server" header=${t`Logins over the last 24 hours`} style="grid-column-end: span 3;grid-row-end: span 2;">

View File

@ -22,7 +22,7 @@ export class LDAPSyncStatusCard extends AdminStatusCard<Task> {
}
renderValue(): TemplateResult {
return html`${t`Last sync: ${this.value?.taskFinishTimestamp.toLocaleTimeString()}`}`;
return html`${t`Last sync: ${this.value?.taskFinishTimestamp?.toLocaleTimeString()}`}`;
}
getStatus(value: Task): Promise<AdminStatus> {