diff --git a/package.json b/package.json index ba962eb..05dab47 100644 --- a/package.json +++ b/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$": "/node_modules/babel-jest", diff --git a/src/components/shared/Datatable.vue b/src/components/shared/Datatable.vue index 5e1548f..a655655 100644 --- a/src/components/shared/Datatable.vue +++ b/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, } }, diff --git a/src/components/shared/croud-datatable.md b/src/components/shared/croud-datatable.md index 59ca695..439e5e6 100644 --- a/src/components/shared/croud-datatable.md +++ b/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. + + + ### 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. diff --git a/test/unit/layout/__snapshots__/datatable.spec.js.snap b/test/unit/layout/__snapshots__/datatable.spec.js.snap new file mode 100644 index 0000000..c8ed2a9 --- /dev/null +++ b/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`] = ` +
+ + + + + + + + + + + +
+ Id +
+
+ +
+ No Results +
+
+
+
+
+
+`; + +exports[`Datatable local data should match the snapshot 1`] = ` +
+ + + + + + + + + + + + + + + + + + +
+ Id +
+ 1 +
+ 2 +
+
+
+
+
+`; + +exports[`Datatable remote data should match the snapshot 1`] = ` +
+ + + + + + + + + + + + + + + + + + +
+ Id +
+ 3 +
+ 4 +
+
+
+ Displaying 1 to 2 of 2 items +
+ +
+
+
+
+
+`; diff --git a/test/unit/layout/datatable.spec.js b/test/unit/layout/datatable.spec.js new file mode 100644 index 0000000..b45168b --- /dev/null +++ b/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() + }) + }) + }) +})