From 9ca9e67ffa7d317d9838655405cff1b48633b1e1 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Thu, 4 Feb 2021 10:08:57 +0100
Subject: [PATCH] web: fix pagination not working correctly sometimes, fix
 pagination not showing when changing pages

---
 web/src/api/Providers.ts                  | 2 +-
 web/src/elements/table/Table.ts           | 7 +++----
 web/src/elements/table/TablePagination.ts | 9 +++++----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/web/src/api/Providers.ts b/web/src/api/Providers.ts
index 42f5e553f..5db5ed742 100644
--- a/web/src/api/Providers.ts
+++ b/web/src/api/Providers.ts
@@ -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>> {
diff --git a/web/src/elements/table/Table.ts b/web/src/elements/table/Table.ts
index 690e7eed1..b478f6b73 100644
--- a/web/src/elements/table/Table.ts
+++ b/web/src/elements/table/Table.ts
@@ -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>`;
     }
diff --git a/web/src/elements/table/TablePagination.ts b/web/src/elements/table/TablePagination.ts
index fa7f59802..5ceea8604 100644
--- a/web/src/elements/table/TablePagination.ts
+++ b/web/src/elements/table/TablePagination.ts
@@ -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>