trustchain-oc1-orchestral
/
authentik
Archived
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web: add more cards to overview

This commit is contained in:
Jens Langhammer 2020-12-01 12:41:37 +01:00
parent 93bfe60369
commit 7bb26b5903
2 changed files with 66 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/api/user.ts
View File

@ -1,5 +1,4 @@
import { Primitive } from "lit-html/lib/parts";
import { DefaultClient } from "./client";
import { DefaultClient, PBResponse } from "./client";
export class User {
pk?: number;
@ -12,4 +11,12 @@ export class User {
static me(): Promise<User> {
return DefaultClient.fetch<User>(["core", "users", "me"]);
}
static count(): Promise<number> {
return DefaultClient.fetch<PBResponse<User>>(["core", "users"], {
"page_size": 1
}).then(r => {
return r.pagination.count;
});
}
}

59
web/src/pages/AdminOverviewPage.ts
View File

@ -1,7 +1,9 @@
import { gettext } from "django";
import { customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { until } from "lit-html/directives/until";
import { AdminOverview } from "../api/admin_overview";
import { DefaultClient } from "../api/client";
import { User } from "../api/user";
import { COMMON_STYLES } from "../common/styles";
@customElement("pb-aggregate-card")
@ -12,25 +14,48 @@ export class AggregateCard extends LitElement {
@property()
header?: string;
@property()
headerLink?: string;
static get styles() {
return COMMON_STYLES;
}
renderInner(): TemplateResult {
return html`<slot></slot>`;
}
render(): TemplateResult {
return html`<div class="pf-c-card pf-c-card-aggregate pf-l-gallery__item pf-m-4-col" >
<div class="pf-c-card__header">
<div class="pf-c-card__header pf-l-flex pf-m-justify-content-space-between">
<div class="pf-c-card__header-main">
<i class="${this.icon}"></i> ${this.header ? gettext(this.header) : ""}
</div>
${this.headerLink ? html`<a href="${this.headerLink}">
<i class="fa fa-external-link-alt"> </i>
</a>` : ""}
</div>
<div class="pf-c-card__body">
<slot></slot>
${this.renderInner()}
</div>
</div>`;
}
}
@customElement("pb-aggregate-card-promise")
export class AggregatePromiseCard extends AggregateCard {
@property()
promise?: Promise<string>;
renderInner(): TemplateResult {
return html`<p class="pb-aggregate-card">
${until(this.promise, html`<pb-spinner></pb-spinner>`)}
</p>`;
}
}
@customElement("pb-admin-overview")
export class AdminOverviewPage extends LitElement {
@property()
@ -67,6 +92,36 @@ export class AdminOverviewPage extends LitElement {
</p>`
: html`<pb-spinner></pb-spinner>`}
</pb-aggregate-card>
<pb-aggregate-card icon="pf-icon pf-icon-plugged" header="Providers" headerLink="#/administration/providers/">
${this.data ?
this.data?.providers_without_application! < 1 ?
html`<p class="pb-aggregate-card">
<i class="fa fa-exclamation-triangle"></i> 0
</p>
<p>${gettext("At least one Provider has no application assigned.")}</p>` :
html`<p class="pb-aggregate-card">
<i class="fa fa-check-circle"></i> 0
</p>`
: html`<pb-spinner></pb-spinner>`}
</pb-aggregate-card>
<pb-aggregate-card icon="pf-icon pf-icon-plugged" header="Policies" headerLink="#/administration/policies/">
${this.data ?
this.data?.policies_without_binding! < 1 ?
html`<p class="pb-aggregate-card">
<i class="fa fa-exclamation-triangle"></i> 0
</p>
<p>${gettext("Policies without binding exist.")}</p>` :
html`<p class="pb-aggregate-card">
<i class="fa fa-check-circle"></i> 0
</p>`
: html`<pb-spinner></pb-spinner>`}
</pb-aggregate-card>
<pb-aggregate-card-promise
icon="pf-icon pf-icon-user"
header="Users"
headerLink="#/administration/users/"
.promise=${User.count()}>
</pb-aggregate-card-promise>
</div>
</section>`;
}