web: add more cards to overview

web/src/api/user.ts

@@ -1,5 +1,4 @@
-import { Primitive } from "lit-html/lib/parts";
+import { DefaultClient, PBResponse } from "./client";
-import { DefaultClient } 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;
+        });
+    }
 }

web/src/pages/AdminOverviewPage.ts

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