Don't show pagination bar if pagination-data is not emitted

package.json

@@ -1,6 +1,6 @@
 {
   "name": "croud-style-guide",
-  "version": "1.8.0",
+  "version": "1.8.1-0",
   "description": "A Vue.js project",
   "author": "antony.king@croud.co.uk",
   "private": false,
@@ -38,7 +38,7 @@
       "vue"
     ],
     "transformIgnorePatterns": [
-      "node_modules/(?!croud-vue-semantic|vue-quill)"
+      "node_modules/(?!croud-vue-semantic|vue-quill|vuetable-2)"
     ],
     "transform": {
       "^.+\\.js$": "<rootDir>/node_modules/babel-jest",

src/components/shared/Datatable.vue

@@ -41,7 +41,7 @@
                         'vuetable:loaded': () => { this.loading = false },
                     },
                 }),
-                createElement('div', { class: ['ui', 'segment', 'grid', 'basic'] }, [
+                this.paginated ? createElement('div', { class: ['ui', 'segment', 'grid', 'basic'] }, [
                     createElement('vuetable-pagination-info', {
                         ref: 'paginationInfo',
                         props: {
@@ -54,7 +54,7 @@
                             'vuetable-pagination:change-page': this.onChangePage,
                         },
                     }),
-                ]),
+                ]) : null,
                 createElement('div', {
                     class: {
                         ui: true,
@@ -129,9 +129,12 @@
 
         methods: {
             onPaginationData(paginationData) {
+                this.paginated = true
                 this.$emit('vuetable:pagination-data', paginationData)
-                this.$refs.pagination.setPaginationData(paginationData)
-                this.$refs.paginationInfo.setPaginationData(paginationData)
+                this.$nextTick(() => {
+                    this.$refs.pagination.setPaginationData(paginationData)
+                    this.$refs.paginationInfo.setPaginationData(paginationData)
+                })
             },
 
             onChangePage(page) {
@@ -146,6 +149,7 @@
         data() {
             return {
                 loading: false,
+                paginated: false,
             }
         },
 

src/components/shared/croud-datatable.md

@@ -30,6 +30,19 @@ vuetableConfig: {
         :getSortParam="(sortOrder) => sortOrder.map(sort => (`${sort.sortField}|${sort.direction}`)).join(',')"
     />
 
+### Local Data
+You can use a local dataset if you already have the data in your component, you will need to set the **api-mode** flag to **false** and use the **data** key to point at this local data.
+
+Also, if there is no pagination data emitted from the datatable component, this wrapper will automatically hide the pagination bar.
+
+    <croud-datatable
+        :vuetable-config="{
+            fields: ['name', 'email', { name:'birthdate', title: 'DOB' }],
+            'api-mode': false,
+            data: [{ name: 'Foo', email: 'foo@test.com', birthdate: '1971-12-07 00:00:00' }, { name: 'Bar', email: 'bar@test.com', birthdate: '1970-01-01 00:00:00' }],
+        }"
+    />
+
 ### Change paginator
 By default, this component will show the [croud-paginator](#croud-paginator) at the bottom of the datatable, you can use the **paginator-component** prop to change this. See the [vuetable docs](https://ratiw.github.io/vuetable-2/#/Pagination?id=vuetablepagination) for more info on their built in paginators.
 

test/unit/layout/__snapshots__/datatable.spec.js.snap

@@ -0,0 +1,175 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Datatable local data no data should match the snapshot 1`] = `
+<div
+  class="ui basic segment"
+>
+  <table
+    class="vuetable ui table"
+  >
+    <thead>
+      <tr>
+        <th
+          id="_id"
+          class="vuetable-th-id"
+        >
+          Id
+        </th>
+      </tr>
+    </thead>
+    <tbody
+      class="vuetable-body"
+    >
+      <tr>
+        <td
+          colspan="1"
+          class="vuetable-empty-result"
+        >
+          <div
+            class="ui center aligned basic segment"
+          >
+            <i
+              class="big circular yellow list icon"
+            />
+            <br />
+            No Results
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <div
+    class="ui inverted dimmer"
+  >
+    <div
+      class="ui text large loader"
+    />
+  </div>
+</div>
+`;
+
+exports[`Datatable local data should match the snapshot 1`] = `
+<div
+  class="ui basic segment"
+>
+  <table
+    class="vuetable ui table"
+  >
+    <thead>
+      <tr>
+        <th
+          id="_id"
+          class="vuetable-th-id"
+        >
+          Id
+        </th>
+      </tr>
+    </thead>
+    <tbody
+      class="vuetable-body"
+    >
+      <tr
+        item-index="0"
+        render="true"
+        class=""
+      >
+        <td
+          class=""
+        >
+          1
+        </td>
+      </tr>
+      <!--  -->
+      <tr
+        item-index="1"
+        render="true"
+        class=""
+      >
+        <td
+          class=""
+        >
+          2
+        </td>
+      </tr>
+      <!--  -->
+      <!--  -->
+      <!--  -->
+    </tbody>
+  </table>
+  <div
+    class="ui inverted dimmer"
+  >
+    <div
+      class="ui text large loader"
+    />
+  </div>
+</div>
+`;
+
+exports[`Datatable remote data should match the snapshot 1`] = `
+<div
+  class="ui basic segment"
+>
+  <table
+    class="vuetable ui table"
+  >
+    <thead>
+      <tr>
+        <th
+          id="_id"
+          class="vuetable-th-id"
+        >
+          Id
+        </th>
+      </tr>
+    </thead>
+    <tbody
+      class="vuetable-body"
+    >
+      <tr
+        item-index="0"
+        render="true"
+        class=""
+      >
+        <td
+          class=""
+        >
+          3
+        </td>
+      </tr>
+      <!--  -->
+      <tr
+        item-index="1"
+        render="true"
+        class=""
+      >
+        <td
+          class=""
+        >
+          4
+        </td>
+      </tr>
+      <!--  -->
+      <!--  -->
+      <!--  -->
+    </tbody>
+  </table>
+  <div
+    class="ui segment grid basic"
+  >
+    <div
+      class="vuetable-pagination-info left floated left aligned six wide column"
+    >
+      Displaying 1 to 2 of 2 items
+    </div>
+    <!--  -->
+  </div>
+  <div
+    class="ui inverted dimmer"
+  >
+    <div
+      class="ui text large loader"
+    />
+  </div>
+</div>
+`;

test/unit/layout/datatable.spec.js

@@ -0,0 +1,85 @@
+import Vue from 'vue'
+import axios from 'axios'
+import Datatable from '../../../src/components/shared/Datatable'
+
+const mock = jest.fn(() => Promise.resolve({
+    data: {
+        data: [
+            { id: 3 },
+            { id: 4 },
+        ],
+        meta: {
+            pagination: {
+                count: 2,
+                current_page: 1,
+                links: {},
+                per_page: 15,
+                total: 2,
+                total_pages: 1,
+            },
+        },
+    },
+}))
+
+axios.get = mock
+const Constructor = Vue.extend(Datatable)
+
+const vm = new Constructor({
+    propsData: {
+        vuetableConfig: {
+            fields: ['id'],
+            'api-url': 'test-url',
+        },
+    },
+}).$mount()
+
+const local = new Constructor({
+    propsData: {
+        vuetableConfig: {
+            fields: ['id'],
+            'api-mode': false,
+            data: [{ id: 1 }, { id: 2 }],
+        },
+    },
+}).$mount()
+
+describe('Datatable', () => {
+    describe('local data', () => {
+        it('should not show pagination', () => {
+            expect(Object.keys(local.$refs)).not.toContain('paginationInfo')
+            expect(Object.keys(local.$refs)).not.toContain('pagination')
+        })
+
+        it('should match the snapshot', () => {
+            expect(local.$el).toMatchSnapshot()
+        })
+
+        describe('no data', () => {
+            it('should match the snapshot', (done) => {
+                local.vuetableConfig.data = []
+                setTimeout(() => {
+                    expect(local.$el).toMatchSnapshot()
+                    done()
+                }, 1000)
+            })
+        })
+    })
+
+    describe('remote data', () => {
+        it('should request remote data', () => {
+            expect(mock.mock.calls).not.toBe(0)
+        })
+
+        it('should show pagination', () => {
+            expect(Object.keys(vm.$refs)).toContain('paginationInfo')
+            expect(Object.keys(vm.$refs)).toContain('pagination')
+        })
+
+        it('should match the snapshot', (done) => {
+            vm.$nextTick(() => {
+                expect(vm.$el).toMatchSnapshot()
+                done()
+            })
+        })
+    })
+})