web: add more cards to overview
This commit is contained in:
parent
93bfe60369
commit
7bb26b5903
|
@ -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;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>`;
|
||||
}
|
||||
|
|
Reference in New Issue