From 8b7a25b3a838d038a64ff6923d34d68d797927ff Mon Sep 17 00:00:00 2001 From: John Leider Date: Fri, 26 Jul 2019 08:43:44 -0500 Subject: [PATCH] fix(VDataFooter): better handle custom item options (#8029) * fix(VDataFooter): select first available option when default does not match default itemsPerPage is 10 and was being pushed into the items array fixes #8026 * refactor(VDataFooter): clean-up genItemsPerPageSelect method --- .../components/VDataIterator/VDataFooter.ts | 28 +++--- .../__tests__/VDataFooter.spec.ts | 20 +---- .../__snapshots__/VDataFooter.spec.ts.snap | 88 ++----------------- 3 files changed, 20 insertions(+), 116 deletions(-) diff --git a/packages/vuetify/src/components/VDataIterator/VDataFooter.ts b/packages/vuetify/src/components/VDataIterator/VDataFooter.ts index 85b7c585777..e440871ffb7 100644 --- a/packages/vuetify/src/components/VDataIterator/VDataFooter.ts +++ b/packages/vuetify/src/components/VDataIterator/VDataFooter.ts @@ -63,24 +63,10 @@ export default Vue.extend({ this.pagination.pageStop < 0 }, computedItemsPerPageOptions (): any[] { - const itemsPerPageOptions = this.itemsPerPageOptions.map(option => { + return this.itemsPerPageOptions.map(option => { if (typeof option === 'object') return option else return this.genItemsPerPageOption(option) }) - - const customItemsPerPage = !itemsPerPageOptions.find(option => option.value === this.options.itemsPerPage) - - if (customItemsPerPage) { - itemsPerPageOptions.push(this.genItemsPerPageOption(this.options.itemsPerPage)) - - itemsPerPageOptions.sort((a, b) => { - if (a.value === -1) return 1 - else if (b.value === -1) return -1 - else return a.value - b.value - }) - } - - return itemsPerPageOptions }, }, @@ -110,6 +96,14 @@ export default Vue.extend({ } }, genItemsPerPageSelect () { + let value = this.options.itemsPerPage + const computedIPPO = this.computedItemsPerPageOptions + + if ( + computedIPPO.length > 0 && + !computedIPPO.find(ippo => ippo.value === value) + ) value = computedIPPO[0] + return this.$createElement('div', { staticClass: 'v-data-footer__select', }, [ @@ -120,8 +114,8 @@ export default Vue.extend({ }, props: { disabled: this.disableItemsPerPage, - items: this.computedItemsPerPageOptions, - value: this.options.itemsPerPage, + items: computedIPPO, + value, hideDetails: true, auto: true, minWidth: '75px', diff --git a/packages/vuetify/src/components/VDataIterator/__tests__/VDataFooter.spec.ts b/packages/vuetify/src/components/VDataIterator/__tests__/VDataFooter.spec.ts index 033d0fb79de..346a0314308 100644 --- a/packages/vuetify/src/components/VDataIterator/__tests__/VDataFooter.spec.ts +++ b/packages/vuetify/src/components/VDataIterator/__tests__/VDataFooter.spec.ts @@ -40,28 +40,10 @@ describe('VDataFooter.ts', () => { } }) - it('should render and match snapshot', () => { - const wrapper = mountFunction({ - propsData: { - options: { - page: 4, - }, - pagination: { - page: 4, - pageStart: 1, - pageStop: 10, - pageCount: 10, - itemsLength: 100, - }, - }, - }) - - expect(wrapper.html()).toMatchSnapshot() - }) - it('should render with custom itemsPerPage', () => { const wrapper = mountFunction({ propsData: { + itemsPerPageOptions: [100], options: { page: 4, itemsPerPage: 100, diff --git a/packages/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataFooter.spec.ts.snap b/packages/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataFooter.spec.ts.snap index da82898561f..fd7b9b1f5be 100644 --- a/packages/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataFooter.spec.ts.snap +++ b/packages/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataFooter.spec.ts.snap @@ -1,77 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`VDataFooter.ts should render and match snapshot 1`] = ` -
-
- Items per page: -
-
- -
-
-
-
- 2-10 of 100 -
-
- -
-
- -
-
-`; - exports[`VDataFooter.ts should render first & last icons with showFirstLastPage 1`] = `
@@ -81,7 +9,7 @@ exports[`VDataFooter.ts should render first & last icons with showFirstLastPage