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

web: sort components into folders, implement pagination for table

Browse Source
This commit is contained in:
Jens Langhammer
2020-11-29 22:14:48 +01:00
parent 606e32603e
commit f7022dd11f
17 changed files with 213 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
web/src/elements/table/TablePagination.ts Normal file
View File

@ -0,0 +1,71 @@
import { customElement, html, LitElement, property } 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;
static get styles() {
return [COMMON_STYLES];
}
previousHandler() {
if (!this.table?.data?.pagination.previous) {
console.debug(`passbook/tables: no previous`);
return;
}
this.table.page = this.table?.data?.pagination.previous;
}
nextHandler() {
if (!this.table?.data?.pagination.next) {
console.debug(`passbook/tables: no next`);
return;
}
this.table.page = this.table?.data?.pagination.next;
}
render() {
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">
<div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
<span class="pf-c-options-menu__toggle-text">
${this.table?.data?.pagination.start_index} -
${this.table?.data?.pagination.end_index} of
${this.table?.data?.pagination.count}
</span>
</div>
</div>
<nav class="pf-c-pagination__nav" aria-label="Pagination">
<div class="pf-c-pagination__nav-control pf-m-prev">
<button
class="pf-c-button pf-m-plain"
@click=${() => {
this.previousHandler();
}}
disabled="${this.table?.data?.pagination.previous ? "true" : "false"}"
aria-label="{% trans 'Go to previous page' %}"
>
<i class="fas fa-angle-left" aria-hidden="true"></i>
</button>
</div>
<div class="pf-c-pagination__nav-control pf-m-next">
<button
class="pf-c-button pf-m-plain"
@click=${() => {
this.nextHandler();
}}
disabled="${this.table?.data?.pagination.next ? "true" : "false"}"
aria-label="{% trans 'Go to next page' %}"
>
<i class="fas fa-angle-right" aria-hidden="true"></i>
</button>
</div>
</nav>
</div>
</div>`;
}
}