habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: update to new formatting rules, make eslint warnings fail ci

Browse Source
This commit is contained in:
Jens Langhammer
2020-12-01 17:27:19 +01:00
parent 7195b77606
commit e6391b64f0
33 changed files with 192 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
web/src/elements/AdminLoginsChart.ts
View File

@ -1,4 +1,4 @@
import { css, customElement, html, LitElement, property } from "lit-element";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import Chart from "chart.js";
interface TickValue {
@ -11,10 +11,10 @@ export class AdminLoginsChart extends LitElement {
@property()
url = "";
chart: any;
chart?: Chart;
static get styles() {
return css`
static get styles(): CSSResult[] {
return [css`
:host {
position: relative;
height: 100%;
@ -26,7 +26,7 @@ export class AdminLoginsChart extends LitElement {
width: 100px;
height: 100px;
}
`;
`];
}
constructor() {
@ -38,14 +38,21 @@ export class AdminLoginsChart extends LitElement {
});
}
firstUpdated() {
firstUpdated(): void {
fetch(this.url)
.then((r) => r.json())
.catch((e) => console.error(e))
.then((r) => {
const ctx = (<HTMLCanvasElement>this.shadowRoot?.querySelector("canvas")).getContext(
"2d"
)!;
const canvas = <HTMLCanvasElement>this.shadowRoot?.querySelector("canvas");
if (!canvas) {
console.warn("Failed to get canvas element");
return false;
}
const ctx = canvas.getContext("2d");
if (!ctx) {
console.warn("failed to get 2d context");
return false;
}
this.chart = new Chart(ctx, {
type: "bar",
data: {
@ -102,7 +109,7 @@ export class AdminLoginsChart extends LitElement {
});
}
render() {
render(): TemplateResult {
return html`<canvas></canvas>`;
}
}

8
web/src/elements/CodeMirror.ts
View File

@ -1,4 +1,4 @@
import { customElement, html, LitElement, property } from "lit-element";
import { customElement, LitElement, property } from "lit-element";
// @ts-ignore
import CodeMirror from "codemirror";
@ -17,11 +17,11 @@ export class CodeMirrorTextarea extends LitElement {
editor?: CodeMirror.EditorFromTextArea;
createRenderRoot() {
createRenderRoot() : ShadowRoot | Element {
return this;
}
firstUpdated() {
firstUpdated(): void {
const textarea = this.querySelector("textarea");
if (!textarea) {
return;
@ -33,7 +33,7 @@ export class CodeMirrorTextarea extends LitElement {
readOnly: this.readOnly,
autoRefresh: true,
});
this.editor.on("blur", (e) => {
this.editor.on("blur", () => {
this.editor?.save();
});
}

91
web/src/elements/FetchFillSlot.ts
View File

@ -1,91 +0,0 @@
import { LitElement, html, customElement, property } from "lit-element";
interface ComparisonHash {
[key: string]: (a: any, b: any) => boolean;
}
@customElement("fetch-fill-slot")
export class FetchFillSlot extends LitElement {
@property()
url = "";
@property()
key = "";
@property()
value = "";
comparison(slotName: string) {
const comparisonOperatorsHash = <ComparisonHash>{
"<": function (a: any, b: any) {
return a < b;
},
">": function (a: any, b: any) {
return a > b;
},
">=": function (a: any, b: any) {
return a >= b;
},
"<=": function (a: any, b: any) {
return a <= b;
},
"==": function (a: any, b: any) {
return a == b;
},
"!=": function (a: any, b: any) {
return a != b;
},
"===": function (a: any, b: any) {
return a === b;
},
"!==": function (a: any, b: any) {
return a !== b;
},
};
const tokens = slotName.split(" ");
if (tokens.length < 3) {
throw new Error("nah");
}
let a: any = tokens[0];
if (a === "value") {
a = this.value;
} else {
a = parseInt(a, 10);
}
let b: any = tokens[2];
if (b === "value") {
b = this.value;
} else {
b = parseInt(b, 10);
}
const comp = tokens[1];
if (!(comp in comparisonOperatorsHash)) {
throw new Error("Invalid comparison");
}
return comparisonOperatorsHash[comp](a, b);
}
firstUpdated() {
fetch(this.url)
.then((r) => r.json())
.then((r) => r[this.key])
.then((r) => (this.value = r));
}
render() {
if (this.value === undefined) {
return html`<slot></slot>`;
}
let selectedSlot = "";
this.querySelectorAll("[slot]").forEach((slot) => {
const comp = slot.getAttribute("slot")!;
if (this.comparison(comp)) {
selectedSlot = comp;
}
});
this.querySelectorAll("[data-value]").forEach((dv) => {
dv.textContent = this.value;
});
return html`<slot name=${selectedSlot}></slot>`;
}
}

43
web/src/elements/Messages.ts
View File

@ -1,4 +1,4 @@
import { LitElement, html, customElement, property } from "lit-element";
import { LitElement, html, customElement, property, TemplateResult } from "lit-element";
const LEVEL_ICON_MAP: { [key: string]: string } = {
error: "fas fa-exclamation-circle",
@ -12,7 +12,7 @@ const ID = function (prefix: string) {
};
interface Message {
levelTag: string;
level_tag: string;
tags: string;
message: string;
}
@ -25,7 +25,7 @@ export class Messages extends LitElement {
messageSocket?: WebSocket;
retryDelay = 200;
createRenderRoot() {
createRenderRoot(): ShadowRoot | Element {
return this;
}
@ -38,16 +38,16 @@ export class Messages extends LitElement {
}
}
firstUpdated() {
firstUpdated(): void {
this.fetchMessages();
}
connect() {
connect(): void {
const wsUrl = `${window.location.protocol.replace("http", "ws")}//${
window.location.host
}/ws/client/`;
this.messageSocket = new WebSocket(wsUrl);
this.messageSocket.addEventListener("open", (e) => {
this.messageSocket.addEventListener("open", () => {
console.debug(`passbook/messages: connected to ${wsUrl}`);
});
this.messageSocket.addEventListener("close", (e) => {
@ -71,32 +71,29 @@ export class Messages extends LitElement {
/* Fetch messages which were stored in the session.
* This mostly gets messages which were created when the user arrives/leaves the site
* and especially the login flow */
fetchMessages() {
fetchMessages(): Promise<void> {
console.debug("passbook/messages: fetching messages over direct api");
return fetch(this.url)
.then((r) => r.json())
.then((r) => {
r.forEach((m: any) => {
const message = <Message>{
levelTag: m.level_tag,
tags: m.tags,
message: m.message,
};
this.renderMessage(message);
.then((r: Message[]) => {
r.forEach((m: Message) => {
this.renderMessage(m);
});
});
}
renderMessage(message: Message) {
const container = <HTMLElement>this.querySelector(".pf-c-alert-group")!;
renderMessage(message: Message): void {
const container = <HTMLElement>this.querySelector(".pf-c-alert-group");
if (!container) {
console.warn("passbook/messages: failed to find container");
return;
}
const id = ID("pb-message");
const el = document.createElement("template");
el.innerHTML = `<li id=${id} class="pf-c-alert-group__item">
<div class="pf-c-alert pf-m-${message.levelTag} ${
message.levelTag === "error" ? "pf-m-danger" : ""
}">
<div class="pf-c-alert pf-m-${message.level_tag} ${message.level_tag === "error" ? "pf-m-danger" : ""}">
<div class="pf-c-alert__icon">
<i class="${LEVEL_ICON_MAP[message.levelTag]}"></i>
<i class="${LEVEL_ICON_MAP[message.level_tag]}"></i>
</div>
<p class="pf-c-alert__title">
${message.message}
@ -106,10 +103,10 @@ export class Messages extends LitElement {
setTimeout(() => {
this.querySelector(`#${id}`)?.remove();
}, 1500);
container.appendChild(el.content.firstChild!);
container.appendChild(el.content.firstChild!); // eslint-disable-line
}
render() {
render(): TemplateResult {
return html`<ul class="pf-c-alert-group pf-m-toast"></ul>`;
}
}

4
web/src/elements/Spinner.ts
View File

@ -1,5 +1,5 @@
import { gettext } from "django";
import { customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore
import SpinnerStyle from "@patternfly/patternfly/components/Spinner/spinner.css";
@ -15,7 +15,7 @@ export class Spinner extends LitElement {
@property()
size: SpinnerSize = SpinnerSize.Medium;
static get styles() {
static get styles(): CSSResult[] {
return [SpinnerStyle];
}

39
web/src/elements/Tabs.ts
View File

@ -1,4 +1,4 @@
import { LitElement, html, customElement, property } from "lit-element";
import { LitElement, html, customElement, property, CSSResult, TemplateResult } from "lit-element";
// @ts-ignore
import TabsStyle from "@patternfly/patternfly/components/Tabs/tabs.css";
// @ts-ignore
@ -10,12 +10,23 @@ export class Tabs extends LitElement {
@property()
currentPage?: string;
static get styles() {
static get styles(): CSSResult[] {
return [GlobalsStyle, TabsStyle];
}
render() {
const pages = Array.from(this.querySelectorAll("[slot]")!);
renderTab(page: Element): TemplateResult {
const slot = page.attributes.getNamedItem("slot")?.value;
return html` <li class="pf-c-tabs__item ${slot === this.currentPage ? CURRENT_CLASS : ""}">
<button class="pf-c-tabs__link" @click=${() => { this.currentPage = slot; }}>
<span class="pf-c-tabs__item-text">
${page.attributes.getNamedItem("tab-title")?.value}
</span>
</button>
</li>`;
}
render(): TemplateResult {
const pages = Array.from(this.querySelectorAll("[slot]"));
if (!this.currentPage) {
if (pages.length < 1) {
return html`<h1>no tabs defined</h1>`;
@ -24,25 +35,7 @@ export class Tabs extends LitElement {
}
return html`<div class="pf-c-tabs">
<ul class="pf-c-tabs__list">
${pages.map((page) => {
const slot = page.attributes.getNamedItem("slot")?.value;
return html` <li
class="pf-c-tabs__item ${slot === this.currentPage
? CURRENT_CLASS
: ""}"
>
<button
class="pf-c-tabs__link"
@click=${() => {
this.currentPage = slot;
}}
>
<span class="pf-c-tabs__item-text">
${page.attributes.getNamedItem("tab-title")?.value}
</span>
</button>
</li>`;
})}
${pages.map((page) => this.renderTab(page))}
</ul>
</div>
<slot name="${this.currentPage}"></slot>`;

13
web/src/elements/buttons/ActionButton.ts
View File

@ -1,5 +1,5 @@
import { getCookie } from "../../utils";
import { customElement, html, property } from "lit-element";
import { customElement, property } from "lit-element";
import { ERROR_CLASS, SUCCESS_CLASS } from "../../constants";
import { SpinnerButton } from "./SpinnerButton";
@ -8,21 +8,26 @@ export class ActionButton extends SpinnerButton {
@property()
url = "";
callAction() {
callAction(): void {
if (this.isRunning === true) {
return;
}
this.setLoading();
const csrftoken = getCookie("passbook_csrf");
if (!csrftoken) {
console.debug("No csrf token in cookie");
this.setDone(ERROR_CLASS);
return;
}
const request = new Request(this.url, {
headers: { "X-CSRFToken": csrftoken! },
headers: { "X-CSRFToken": csrftoken },
});
fetch(request, {
method: "POST",
mode: "same-origin",
})
.then((r) => r.json())
.then((r) => {
.then(() => {
this.setDone(SUCCESS_CLASS);
})
.catch(() => {

8
web/src/elements/buttons/Dropdown.ts
View File

@ -1,18 +1,18 @@
import { customElement, html, LitElement } from "lit-element";
import { customElement, html, LitElement, TemplateResult } from "lit-element";
@customElement("pb-dropdown")
export class DropdownButton extends LitElement {
constructor() {
super();
const menu = <HTMLElement>this.querySelector(".pf-c-dropdown__menu")!;
const menu = <HTMLElement>this.querySelector(".pf-c-dropdown__menu");
this.querySelectorAll("button.pf-c-dropdown__toggle").forEach((btn) => {
btn.addEventListener("click", (e) => {
btn.addEventListener("click", () => {
menu.hidden = !menu.hidden;
});
});
}
render() {
render(): TemplateResult {
return html`<slot></slot>`;
}
}

29
web/src/elements/buttons/ModalButton.ts
View File

@ -1,4 +1,4 @@
import { css, customElement, html, LitElement, property } from "lit-element";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore
import ModalBoxStyle from "@patternfly/patternfly/components/ModalBox/modal-box.css";
// @ts-ignore
@ -22,7 +22,7 @@ export class ModalButton extends LitElement {
@property()
open = false;
static get styles() {
static get styles(): CSSResult[] {
return [
css`
:host {
@ -49,7 +49,7 @@ export class ModalButton extends LitElement {
});
}
updateHandlers() {
updateHandlers(): void {
// Ensure links close the modal
this.querySelectorAll<HTMLAnchorElement>("[slot=modal] a").forEach((a) => {
if (a.target == "_blank") {
@ -63,7 +63,7 @@ export class ModalButton extends LitElement {
});
// Make name field update slug field
this.querySelectorAll<HTMLInputElement>("input[name=name]").forEach((input) => {
input.addEventListener("input", (e) => {
input.addEventListener("input", () => {
const form = input.closest("form");
if (form === null) {
return;
@ -90,7 +90,12 @@ export class ModalButton extends LitElement {
})
.then((data) => {
if (data.indexOf("csrfmiddlewaretoken") !== -1) {
this.querySelector("[slot=modal]")!.innerHTML = data;
const modalSlot = this.querySelector("[slot=modal]");
if (!modalSlot) {
console.debug("passbook/modalbutton: modal slot not found?");
return;
}
modalSlot.innerHTML = data;
console.debug("passbook/modalbutton: re-showing form");
this.updateHandlers();
} else {
@ -110,7 +115,7 @@ export class ModalButton extends LitElement {
});
}
onClick(e: MouseEvent) {
onClick(): void {
if (!this.href) {
this.updateHandlers();
this.open = true;
@ -121,7 +126,11 @@ export class ModalButton extends LitElement {
})
.then((r) => r.text())
.then((t) => {
this.querySelector("[slot=modal]")!.innerHTML = t;
const modalSlot = this.querySelector("[slot=modal]");
if (!modalSlot) {
return;
}
modalSlot.innerHTML = t;
this.updateHandlers();
this.open = true;
this.querySelectorAll<SpinnerButton>("pb-spinner-button").forEach((sb) => {
@ -134,7 +143,7 @@ export class ModalButton extends LitElement {
}
}
renderModal() {
renderModal(): TemplateResult {
return html`<div class="pf-c-backdrop">
<div class="pf-l-bullseye">
<div
@ -158,8 +167,8 @@ export class ModalButton extends LitElement {
</div>`;
}
render() {
return html` <slot name="trigger" @click=${(e: any) => this.onClick(e)}></slot>
render(): TemplateResult {
return html` <slot name="trigger" @click=${() => this.onClick()}></slot>
${this.open ? this.renderModal() : ""}`;
}
}

12
web/src/elements/buttons/SpinnerButton.ts
View File

@ -1,4 +1,4 @@
import { css, customElement, html, LitElement, property } from "lit-element";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore
import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
// @ts-ignore
@ -15,7 +15,7 @@ export class SpinnerButton extends LitElement {
@property()
form?: string;
static get styles() {
static get styles(): CSSResult[] {
return [
GlobalsStyle,
ButtonStyle,
@ -35,13 +35,13 @@ export class SpinnerButton extends LitElement {
this.classList.add(PRIMARY_CLASS);
}
setLoading() {
setLoading(): void {
this.isRunning = true;
this.classList.add(PROGRESS_CLASS);
this.requestUpdate();
}
setDone(statusClass: string) {
setDone(statusClass: string): void {
this.isRunning = false;
this.classList.remove(PROGRESS_CLASS);
this.classList.replace(PRIMARY_CLASS, statusClass);
@ -52,7 +52,7 @@ export class SpinnerButton extends LitElement {
}, 1000);
}
callAction() {
callAction(): void {
if (this.isRunning === true) {
return;
}
@ -64,7 +64,7 @@ export class SpinnerButton extends LitElement {
this.setLoading();
}
render() {
render(): TemplateResult {
return html`<button
class="pf-c-button pf-m-progress ${this.classList.toString()}"
@click=${() => this.callAction()}

8
web/src/elements/buttons/TokenCopyButton.ts
View File

@ -1,4 +1,4 @@
import { css, customElement, html, LitElement, property } from "lit-element";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore
import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
// @ts-ignore
@ -14,7 +14,7 @@ export class TokenCopyButton extends LitElement {
@property()
buttonClass: string = PRIMARY_CLASS;
static get styles() {
static get styles(): CSSResult[] {
return [
GlobalsStyle,
ButtonStyle,
@ -27,7 +27,7 @@ export class TokenCopyButton extends LitElement {
];
}
onClick() {
onClick(): void {
if (!this.identifier) {
this.buttonClass = ERROR_CLASS;
setTimeout(() => {
@ -45,7 +45,7 @@ export class TokenCopyButton extends LitElement {
});
}
render() {
render(): TemplateResult {
return html`<button @click=${() => this.onClick()} class="pf-c-button ${this.buttonClass}">
<slot></slot>
</button>`;

12
web/src/elements/sidebar/Sidebar.ts
View File

@ -1,4 +1,4 @@
import { css, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore
import PageStyle from "@patternfly/patternfly/components/Page/page.css";
// @ts-ignore
@ -23,7 +23,7 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
{
name: "Monitor",
path: ["/audit/audit/"],
condition: (sb: Sidebar) => {
condition: (sb: Sidebar): boolean => {
return sb.user?.is_superuser || false;
},
},
@ -123,7 +123,7 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
path: ["/administration/tokens/"],
},
],
condition: (sb: Sidebar) => {
condition: (sb: Sidebar): boolean => {
return sb.user?.is_superuser || false;
},
},
@ -137,7 +137,7 @@ export class Sidebar extends LitElement {
@property()
user?: User;
static get styles() {
static get styles(): CSSResult[] {
return [
GlobalsStyle,
PageStyle,
@ -169,7 +169,7 @@ export class Sidebar extends LitElement {
super();
User.me().then((u) => (this.user = u));
this.activePath = window.location.hash.slice(1, Infinity);
window.addEventListener("hashchange", (e) => {
window.addEventListener("hashchange", () => {
this.activePath = window.location.hash.slice(1, Infinity);
});
}
@ -200,7 +200,7 @@ export class Sidebar extends LitElement {
</li>`;
}
render() {
render(): TemplateResult {
return html`<div class="pf-c-page__sidebar-body">
<nav class="pf-c-nav" aria-label="Global">
<ul class="pf-c-nav__list">

10
web/src/elements/sidebar/SidebarBrand.ts
View File

@ -1,4 +1,4 @@
import { css, customElement, html, LitElement, property } from "lit-element";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore
import PageStyle from "@patternfly/patternfly/components/Page/page.css";
// @ts-ignore
@ -8,6 +8,10 @@ import { Config } from "../../api/config";
export const DefaultConfig: Config = {
branding_logo: " /static/dist/assets/images/logo.svg",
branding_title: "passbook",
error_reporting_enabled: false,
error_reporting_environment: "",
error_reporting_send_pii: false,
};
@customElement("pb-sidebar-brand")
@ -15,7 +19,7 @@ export class SidebarBrand extends LitElement {
@property()
config: Config = DefaultConfig;
static get styles() {
static get styles(): CSSResult[] {
return [
GlobalsStyle,
PageStyle,
@ -45,7 +49,7 @@ export class SidebarBrand extends LitElement {
Config.get().then((c) => (this.config = c));
}
render() {
render(): TemplateResult {
if (!this.config) {
return html``;
}

6
web/src/elements/sidebar/SidebarUser.ts
View File

@ -1,4 +1,4 @@
import { css, customElement, html, LitElement, property } from "lit-element";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore
import NavStyle from "@patternfly/patternfly/components/Nav/nav.css";
// @ts-ignore
@ -12,7 +12,7 @@ export class SidebarUser extends LitElement {
@property()
user?: User;
static get styles() {
static get styles(): CSSResult[] {
return [
fa,
NavStyle,
@ -44,7 +44,7 @@ export class SidebarUser extends LitElement {
];
}
render() {
render(): TemplateResult {
if (!this.user) {
return html``;
}

19
web/src/elements/table/Table.ts
View File

@ -1,7 +1,8 @@
import { gettext } from "django";
import { html, LitElement, property, TemplateResult } from "lit-element";
import { CSSResult, html, LitElement, property, TemplateResult } from "lit-element";
import { PBResponse } from "../../api/client";
import { COMMON_STYLES } from "../../common/styles";
import { htmlFromString } from "../../utils";
export abstract class Table<T> extends LitElement {
abstract apiEndpoint(page: number): Promise<PBResponse<T>>;
@ -14,11 +15,11 @@ export abstract class Table<T> extends LitElement {
@property()
page = 1;
static get styles() {
return [COMMON_STYLES];
static get styles(): CSSResult[] {
return COMMON_STYLES;
}
public fetch() {
public fetch(): void {
this.apiEndpoint(this.page).then((r) => {
this.data = r;
this.page = r.pagination.current;
@ -57,11 +58,11 @@ export abstract class Table<T> extends LitElement {
})
);
fullRow.push("</tr>");
return html(<any>fullRow);
return htmlFromString(...fullRow);
});
}
renderTable() {
renderTable(): TemplateResult {
if (!this.data) {
this.fetch();
}
@ -85,9 +86,7 @@ export abstract class Table<T> extends LitElement {
<table class="pf-c-table pf-m-compact pf-m-grid-md">
<thead>
<tr role="row">
${this.columns().map(
(col) => html`<th role="columnheader" scope="col">${gettext(col)}</th>`
)}
${this.columns().map((col) => html`<th role="columnheader" scope="col">${gettext(col)}</th>`)}
</tr>
</thead>
<tbody role="rowgroup">
@ -102,7 +101,7 @@ export abstract class Table<T> extends LitElement {
</div>`;
}
render() {
render(): TemplateResult {
return this.renderTable();
}
}

4
web/src/elements/table/TablePage.ts
View File

@ -1,4 +1,4 @@
import { html } from "lit-html";
import { html, TemplateResult } from "lit-html";
import { Table } from "./Table";
export abstract class TablePage<T> extends Table<T> {
@ -6,7 +6,7 @@ export abstract class TablePage<T> extends Table<T> {
abstract pageDescription(): string;
abstract pageIcon(): string;
render() {
render(): TemplateResult {
return html`<section class="pf-c-page__main-section pf-m-light">
<div class="pf-c-content">
<h1>

22
web/src/elements/table/TablePagination.ts
View File

@ -1,17 +1,17 @@
import { customElement, html, LitElement, property } from "lit-element";
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { Table } from "./Table";
import { COMMON_STYLES } from "../../common/styles";
@customElement("pb-table-pagination")
export class TablePagination extends LitElement {
@property()
table?: Table<any>;
table?: Table<unknown>;
static get styles() {
return [COMMON_STYLES];
static get styles(): CSSResult[] {
return COMMON_STYLES;
}
previousHandler() {
previousHandler(): void {
if (!this.table?.data?.pagination.previous) {
console.debug("passbook/tables: no previous");
return;
@ -19,7 +19,7 @@ export class TablePagination extends LitElement {
this.table.page = this.table?.data?.pagination.previous;
}
nextHandler() {
nextHandler(): void {
if (!this.table?.data?.pagination.next) {
console.debug("passbook/tables: no next");
return;
@ -27,7 +27,7 @@ export class TablePagination extends LitElement {
this.table.page = this.table?.data?.pagination.next;
}
render() {
render(): TemplateResult {
return html` <div class="pf-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md">
<div class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md">
<div class="pf-c-options-menu">
@ -43,9 +43,7 @@ export class TablePagination extends LitElement {
<div class="pf-c-pagination__nav-control pf-m-prev">
<button
class="pf-c-button pf-m-plain"
@click=${() => {
this.previousHandler();
}}
@click=${() => {this.previousHandler();}}
disabled="${this.table?.data?.pagination.previous ? "true" : "false"}"
aria-label="{% trans 'Go to previous page' %}"
>
@ -55,9 +53,7 @@ export class TablePagination extends LitElement {
<div class="pf-c-pagination__nav-control pf-m-next">
<button
class="pf-c-button pf-m-plain"
@click=${() => {
this.nextHandler();
}}
@click=${() => {this.nextHandler();}}
disabled="${this.table?.data?.pagination.next ? "true" : "false"}"
aria-label="{% trans 'Go to next page' %}"
>