web: fix pagination not working correctly sometimes, fix pagination not showing when changing pages

This commit is contained in:
Jens Langhammer 2021-02-04 10:08:57 +01:00
parent 178417fe67
commit 9ca9e67ffa
3 changed files with 9 additions and 9 deletions

View file

@ -16,7 +16,7 @@ export class Provider {
}
static get(id: number): Promise<Provider> {
return DefaultClient.fetch<Provider>(["providers", "all", id]);
return DefaultClient.fetch<Provider>(["providers", "all", id.toString()]);
}
static list(filter?: QueryArguments): Promise<PBResponse<Provider>> {

View file

@ -117,7 +117,6 @@ export abstract class Table<T> extends LitElement {
return;
}
this.isLoading = true;
this.data = undefined;
this.apiEndpoint(this.page).then((r) => {
this.data = r;
this.page = r.pagination.current;
@ -225,7 +224,7 @@ export abstract class Table<T> extends LitElement {
<ak-table-pagination
class="pf-c-toolbar__item pf-m-pagination"
.pages=${this.data?.pagination}
.pageChangeHandler=${(page: number) => {this.page = page; }}>
.pageChangeHandler=${(page: number) => { this.page = page; this.fetch(); }}>
</ak-table-pagination>
</div>
</div>
@ -236,13 +235,13 @@ export abstract class Table<T> extends LitElement {
${this.columns().map((col) => col.render(this))}
</tr>
</thead>
${this.data ? this.renderRows() : this.renderLoading()}
${(this.isLoading || !this.data) ? this.renderLoading() : this.renderRows()}
</table>
<div class="pf-c-pagination pf-m-bottom">
<ak-table-pagination
class="pf-c-toolbar__item pf-m-pagination"
.pages=${this.data?.pagination}
.pageChangeHandler=${(page: number) => { this.page = page; }}>
.pageChangeHandler=${(page: number) => { this.page = page; this.fetch(); }}>
</ak-table-pagination>
</div>`;
}

View file

@ -1,6 +1,7 @@
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { COMMON_STYLES } from "../../common/styles";
import { PBPagination } from "../../api/Client";
import { gettext } from "django";
@customElement("ak-table-pagination")
export class TablePagination extends LitElement {
@ -32,8 +33,8 @@ export class TablePagination extends LitElement {
<button
class="pf-c-button pf-m-plain"
@click=${() => { this.pageChangeHandler(this.pages?.previous || 0); }}
?disabled="${(this.pages?.previous || 0) > 0}"
aria-label="{% trans 'Go to previous page' %}"
?disabled="${(this.pages?.previous || 0) < 1}"
aria-label="${gettext("Go to previous page")}"
>
<i class="fas fa-angle-left" aria-hidden="true"></i>
</button>
@ -42,8 +43,8 @@ export class TablePagination extends LitElement {
<button
class="pf-c-button pf-m-plain"
@click=${() => { this.pageChangeHandler(this.pages?.next || 0); }}
?disabled="${(this.pages?.next || 0) > 0}"
aria-label="{% trans 'Go to next page' %}"
?disabled="${(this.pages?.next || 0) < 0}"
aria-label="${gettext("Go to next page")}"
>
<i class="fas fa-angle-right" aria-hidden="true"></i>
</button>