73733b20b6
* build(deps): bump @trivago/prettier-plugin-sort-imports in /web Bumps [@trivago/prettier-plugin-sort-imports](https://github.com/trivago/prettier-plugin-sort-imports) from 2.0.4 to 3.0.0. - [Release notes](https://github.com/trivago/prettier-plugin-sort-imports/releases) - [Changelog](https://github.com/trivago/prettier-plugin-sort-imports/blob/master/CHANGELOG.md) - [Commits](https://github.com/trivago/prettier-plugin-sort-imports/commits) --- updated-dependencies: - dependency-name: "@trivago/prettier-plugin-sort-imports" dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> * web: update prettier config Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Jens Langhammer <jens.langhammer@beryju.org>
66 lines
2.8 KiB
TypeScript
66 lines
2.8 KiB
TypeScript
import { t } from "@lingui/macro";
|
|
|
|
import { CSSResult, LitElement, TemplateResult, html } from "lit";
|
|
import { customElement, property } from "lit/decorators";
|
|
|
|
import AKGlobal from "../../authentik.css";
|
|
import PFButton from "@patternfly/patternfly/components/Button/button.css";
|
|
import PFPagination from "@patternfly/patternfly/components/Pagination/pagination.css";
|
|
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
|
|
|
import { AKPagination } from "../../api/Client";
|
|
|
|
@customElement("ak-table-pagination")
|
|
export class TablePagination extends LitElement {
|
|
@property({ attribute: false })
|
|
pages?: AKPagination;
|
|
|
|
@property({ attribute: false })
|
|
// eslint-disable-next-line
|
|
pageChangeHandler: (page: number) => void = (page: number) => {};
|
|
|
|
static get styles(): CSSResult[] {
|
|
return [PFBase, PFButton, PFPagination, AKGlobal];
|
|
}
|
|
|
|
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">
|
|
<div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
|
|
<span class="pf-c-options-menu__toggle-text">
|
|
${t`${this.pages?.startIndex} - ${this.pages?.endIndex} of ${this.pages?.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.pageChangeHandler(this.pages?.previous || 0);
|
|
}}
|
|
?disabled="${(this.pages?.previous || 0) < 1}"
|
|
aria-label="${t`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.pageChangeHandler(this.pages?.next || 0);
|
|
}}
|
|
?disabled="${(this.pages?.next || 0) <= 0}"
|
|
aria-label="${t`Go to next page`}"
|
|
>
|
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
}
|