fix: data table paging

we were using did-update on a getter before, which broke with a recent update.
projectcaluma · Nov 1, 2021 · 41896b7 · 41896b7
1 parent 6428909
commit 41896b7
Show file tree

Hide file tree

Showing 3 changed files with 1,639 additions and 1,389 deletions.
diff --git a/addon/components/data-table.hbs b/addon/components/data-table.hbs
@@ -23,7 +23,6 @@
 <table
   class="uk-animation-fade uk-table uk-table-divider"
   {{did-insert (perform this.fetchData)}}
-  {{did-update (perform this.fetchData) this.page this.search}}
   ...attributes
 >
   {{#if this.isLoading}}
@@ -59,7 +58,7 @@
               <button
                 type="button"
                 class="no-style-button"
-                {{on "click" (set this.page this.previousPage)}}
+                {{on "click" (fn this.updatePage this.previousPage)}}
               >
                 <span
                   class="uk-margin-small-right"
@@ -80,7 +79,7 @@
               <button
                 type="button"
                 class="no-style-button"
-                {{on "click" (set this.page this.nextPage)}}
+                {{on "click" (fn this.updatePage this.nextPage)}}
               >
                 {{t "emeis.pagination.next"}}
                 <span class="uk-margin-small-left" uk-pagination-next></span>

diff --git a/addon/components/data-table.js b/addon/components/data-table.js
@@ -18,17 +18,11 @@ export default class DataTableComponent extends Component {
   get page() {
     return this.args.page || this.internalPage;
   }
-  set page(page) {
-    if (this.args.updatePage) {
-      this.args.updatePage(page);
-    } else {
-      this.internalPage = page;
-    }
-  }
 
   get search() {
     return this.args.search || this.internalSearch;
   }
+
   set search(search) {
     if (this.args.updateSearch) {
       this.args.updateSearch(search);
@@ -84,5 +78,16 @@ export default class DataTableComponent extends Component {
     // Prevent reaload because of form submit
     submitEvent.preventDefault();
     this.search = submitEvent.target.elements.search.value;
+    this.fetchData.perform();
+  }
+
+  @action
+  updatePage(page) {
+    if (this.args.updatePage) {
+      this.args.updatePage(page);
+    } else {
+      this.internalPage = page;
+    }
+    this.fetchData.perform();
   }
 }