Add support for hiding the pagination in the AuDataTable component

appuniversum · Nov 12, 2024 · f125db4 · f125db4
1 parent ce33d50
commit f125db4
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 1 deletion.
diff --git a/addon/components/au-data-table.hbs b/addon/components/au-data-table.hbs
@@ -42,7 +42,7 @@
     }}
   {{/if}}
 
-  {{#if this.content}}
+  {{#if this.showPagination}}
     <div class="au-c-data-table__actions au-c-data-table__actions--bottom">
       {{au-data-table-number-pagination
         page=this.page

diff --git a/addon/components/au-data-table.js b/addon/components/au-data-table.js
@@ -63,4 +63,7 @@ const DataTable = Component.extend({
 
 export default DataTable.extend({
   tagName: '',
+  showPagination: computed('content', 'hidePagination', function () {
+    return Boolean(this.content) && !this.hidePagination;
+  }),
 });
diff --git a/stories/5-components/Tables/AuDataTable.stories.js b/stories/5-components/Tables/AuDataTable.stories.js
@@ -16,6 +16,7 @@ const Template = (args) => ({
       @fields="title description"
       @noDataMessage="Geen documenten"
       @sort={{this.sort}}
+      @hidePagination={{this.hidePagination}}
       as |t|
     >
       <t.menu as |menu|>
@@ -107,4 +108,5 @@ Component.args = {
   page: 0,
   itemsPerPage: 5,
   totalItems: 100,
+  hidePagination: false,
 };
diff --git a/tests/integration/components/au-data-table-test.gjs b/tests/integration/components/au-data-table-test.gjs
@@ -26,4 +26,40 @@ module('Integration | Component | au-data-table', function (hooks) {
 
     assert.dom('.au-c-data-table').exists({ count: 1 });
   });
+
+  test('it conditionally shows a pagination bar', async function (assert) {
+    const content = [{ name: 'foo' }, { name: 'bar' }];
+    content.meta = {
+      pagination: {
+        first: { number: 1 },
+        last: { number: 10 },
+      },
+    };
+
+    await render(
+      <template>
+        <AuDataTable @fields="name" @content={{content}} @enableSizes="false" />
+      </template>,
+    );
+
+    assert
+      .dom('.au-c-pagination')
+      .exists({ count: 1 }, 'the pagination bar is shown by default');
+
+    await render(
+      <template>
+        <AuDataTable
+          @fields="name"
+          @content={{content}}
+          @hidePagination={{true}}
+        />
+      </template>,
+    );
+
+    assert
+      .dom('.au-c-pagination')
+      .doesNotExist(
+        'the pagination bar is hidden when `@hidePagination` is true',
+      );
+  });
 });