fix: data table paging

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

Hide file tree

Showing 4 changed files with 1,642 additions and 1,390 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();
   }
 }
diff --git a/tests/integration/components/data-table-test.js b/tests/integration/components/data-table-test.js
@@ -84,11 +84,13 @@ module("Integration | Component | data-table", function (hooks) {
     assert.dom("tfoot li:last-child").doesNotHaveClass("uk-disabled");
 
     this.set("page", 2);
+    await click("[data-test-next-page] button");
 
     assert.dom("tfoot li:first-child").doesNotHaveClass("uk-disabled");
     assert.dom("tfoot li:last-child").doesNotHaveClass("uk-disabled");
 
     this.set("page", 3);
+    await click("[data-test-next-page] button");
 
     assert.dom("tfoot li:first-child").doesNotHaveClass("uk-disabled");
     assert.dom("tfoot li:last-child").hasClass("uk-disabled");
@@ -121,7 +123,7 @@ module("Integration | Component | data-table", function (hooks) {
   });
 
   test("external search", async function (assert) {
-    assert.expect(8);
+    assert.expect(7);
     this.setProperties({
       search: undefined,
     });