web: fix pagination not working correctly sometimes, fix pagination not showing when changing pages
This commit is contained in:
parent
178417fe67
commit
9ca9e67ffa
|
@ -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>> {
|
||||
|
|
|
@ -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>`;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
Reference in a new issue