From 12f788661ce198d929ea1ebc397b7159cef05534 Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Wed, 2 Dec 2020 22:14:28 +0100 Subject: [PATCH] web: add empty state for library page, add more helpers --- web/src/pages/LibraryPage.ts | 108 +++++++++++++++-------------------- web/src/utils.ts | 16 ++++++ 2 files changed, 63 insertions(+), 61 deletions(-) diff --git a/web/src/pages/LibraryPage.ts b/web/src/pages/LibraryPage.ts index fafbbb386..3d0bdff42 100644 --- a/web/src/pages/LibraryPage.ts +++ b/web/src/pages/LibraryPage.ts @@ -1,13 +1,14 @@ +import { gettext } from "django"; import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; +import { ifDefined } from "lit-html/directives/if-defined"; import { Application } from "../api/application"; import { PBResponse } from "../api/client"; import { COMMON_STYLES } from "../common/styles"; -import { truncate } from "../utils"; +import { loading, truncate } from "../utils"; -@customElement("pb-library") -export class ApplicationViewPage extends LitElement { +export class LibraryApplication extends LitElement { @property({attribute: false}) - apps?: PBResponse; + application?: Application; static get styles(): CSSResult[] { return COMMON_STYLES.concat( @@ -22,6 +23,37 @@ export class ApplicationViewPage extends LitElement { ); } + render(): TemplateResult { + if (!this.application) { + return html``; + } + return html` +
+ ${this.application.meta_icon + ? html`Application Icon` + : html``} +
+
+

${this.application.name}

+
+ ${this.application.meta_publisher} +
+
+
${truncate(this.application.meta_description, 35)}
+ `; + } + +} + +@customElement("pb-library") +export class LibraryPage extends LitElement { + @property({attribute: false}) + apps?: PBResponse; + + static get styles(): CSSResult[] { + return COMMON_STYLES; + } + firstUpdated(): void { Application.list().then((r) => (this.apps = r)); } @@ -30,61 +62,17 @@ export class ApplicationViewPage extends LitElement { return html`
-

No Applications available.

+

${gettext("No Applications available.")}

- Either no applications are defined, or you don't have access to any. + ${gettext("Either no applications are defined, or you don't have access to any.")}
- {% if perms.passbook_core.add_application %} - - {% trans 'Create Application' %} - - {% endif %}
`; } - renderApp(app: Application): TemplateResult { - return html` -
- ${app.meta_icon - ? html`Application Icon` - : html``} -
-
-

${app.name}

-
- ${app.meta_publisher} -
-
-
${truncate(app.meta_description, 35)}
- `; - } - - renderLoading(): TemplateResult { - return html`
-
-
-
- -
-
-
+ renderApps(): TemplateResult { + return html`
+ ${this.apps?.results.map((app) => html``)}
`; } @@ -94,17 +82,15 @@ export class ApplicationViewPage extends LitElement {

- Applications + ${gettext("Applications")}

- ${this.apps - ? html`
-
- ${this.apps.results.map((app) => this.renderApp(app))} -
-
` - : this.renderLoading()} +
+ ${loading(this.apps, html`${(this.apps?.results.length || 0) > 0 ? + this.renderApps() : + this.renderEmptyState()}`)} +
`; } } diff --git a/web/src/utils.ts b/web/src/utils.ts index b767a79fc..b26cc2ddd 100644 --- a/web/src/utils.ts +++ b/web/src/utils.ts @@ -1,4 +1,5 @@ import { html, TemplateResult } from "lit-html"; +import { SpinnerSize } from "./elements/Spinner"; export function getCookie(name: string): string | undefined { let cookieValue = undefined; @@ -34,3 +35,18 @@ export function truncate(input?: string, max = 10): string { export function htmlFromString(...strings: string[]): TemplateResult { return html({ raw: strings, ...strings } as TemplateStringsArray); } + +export function loading(v: T, actual: TemplateResult): TemplateResult { + if (!v) { + return html`
+
+
+
+ +
+
+
+
`; + } + return actual; +}