diff --git a/examples/range-with-query-and-prefetch/App.vue b/examples/range-with-query-and-prefetch/App.vue new file mode 100644 index 0000000..5480bfa --- /dev/null +++ b/examples/range-with-query-and-prefetch/App.vue @@ -0,0 +1,30 @@ + + diff --git a/examples/range-with-query-and-prefetch/main.js b/examples/range-with-query-and-prefetch/main.js new file mode 100644 index 0000000..4fb7af4 --- /dev/null +++ b/examples/range-with-query-and-prefetch/main.js @@ -0,0 +1,22 @@ +import Vue from 'vue' +import App from './App.vue' +import Vuex from 'vuex' +import { PaginationPlugin, createResource } from '../../' +import { fetchPage } from '../_api/api-client' + +Vue.config.productionTip = false + +Vue.use(Vuex) +Vue.use(PaginationPlugin) + +const store = new Vuex.Store({ + strict: true +}) + +// Initialize resource +createResource('licenses', fetchPage, { prefetch: true }) + +new Vue({ + render: h => h(App), + store +}).$mount('#app') diff --git a/examples/range-with-query-and-prefetch/package.json b/examples/range-with-query-and-prefetch/package.json new file mode 100644 index 0000000..93698a3 --- /dev/null +++ b/examples/range-with-query-and-prefetch/package.json @@ -0,0 +1,5 @@ +{ + "scripts": { + "serve": "../../node_modules/.bin/vue-cli-service serve main.js" + } +} diff --git a/src/createResource.js b/src/createResource.js index 02e7c6b..c5dc11b 100644 --- a/src/createResource.js +++ b/src/createResource.js @@ -182,10 +182,11 @@ module.exports = function (name, fetchPage, opts) { prefetchNextPage: async function ({ commit, state }, instanceConfig) { if (state.currentRequest) await state.currentRequest let registryName = instanceConfig.registryName - if (instanceConfig.page && (instanceConfig.page * instanceConfig.pageSize) >= state.registry[registryName].items.length) return - if (instanceConfig.pageTo && (instanceConfig.pageTo * instanceConfig.pageSize) >= state.registry[registryName].items.length) return + let rangeMode = !!instanceConfig.pageFrom + let currentPage = rangeMode ? instanceConfig.pageTo : instanceConfig.page + if ((currentPage * instanceConfig.pageSize) >= state.registry[registryName].items.length) return - let nextPage = (instanceConfig.page ? instanceConfig.page : instanceConfig.pageTo) + 1 + let nextPage = currentPage + 1 let nextPageIndexStart = nextPage * instanceConfig.pageSize - instanceConfig.pageSize let nextPageFragment = state.registry[registryName].items.slice(nextPageIndexStart, nextPageIndexStart + instanceConfig.pageSize) @@ -193,7 +194,12 @@ module.exports = function (name, fetchPage, opts) { if (!nextPageFragment.includes(undefined)) return let opts = Object.assign({}, instanceConfig) - opts.page += 1 + if (rangeMode) { + opts.pageTo++ + opts.page = opts.pageTo + } else { + opts.page++ + } let nextPageReq = fetchPage.call(this, opts).then((result) => { let slice = [] result.data.map((item) => { diff --git a/test/createInstance.test.js b/test/createInstance.test.js index 40ddbfb..2c13b1c 100644 --- a/test/createInstance.test.js +++ b/test/createInstance.test.js @@ -441,6 +441,93 @@ test('Range mode with args fn', async function () { expect(adapter.lastArgs.args).toEqual({ counter: 2 }) }) +test('Range mode with args fn and prefetch', async function () { + let adapter = new TestAdapter() + adapter.nextResult = { + total: 33, + data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] + } + + const opts = { + pageFrom: 1, + pageTo: 1, + pageSize: 10, + args () { + return { counter: this.counter } + } + } + + let component = { + data () { + return { + counter: 1 + } + }, + computed: { + test: createInstance('test13', opts) + }, + render (h) { + return h('div') + } + } + + let wrapper = createWrapper('test13', opts, component) + createResource('test13', adapter.fetchPage.bind(adapter), { prefetch: true }) + + expect(wrapper.vm.test.loading).toBe(true) + await nextTick() + + expect(wrapper.vm.test.loading).toBe(false) + expect(wrapper.vm.test.pageFrom).toBe(1) + expect(wrapper.vm.test.pageTo).toBe(1) + expect(wrapper.vm.test.total).toBe(33) + expect(wrapper.vm.test.items.length).toBe(10) + expect(wrapper.vm.test.items).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) + expect(adapter.lastArgs.args).toEqual({ counter: 1 }) + + wrapper.vm.test.pageTo = 2 + await nextTick() + + expect(wrapper.vm.test.loading).toBe(false) + expect(wrapper.vm.test.pageFrom).toBe(1) + expect(wrapper.vm.test.pageTo).toBe(2) + expect(wrapper.vm.test.total).toBe(33) + expect(wrapper.vm.test.items.length).toBe(20) + expect(wrapper.vm.test.items).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) + expect(adapter.lastArgs.args).toEqual({ counter: 1 }) + + adapter.nextResult = { + total: 22, + data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] + } + + wrapper.vm.counter = 2 + + expect(wrapper.vm.test.loading).toBe(true) + expect(wrapper.vm.test.pageFrom).toBe(1) + expect(wrapper.vm.test.pageTo).toBe(1) + await nextTick() + + expect(wrapper.vm.test.loading).toBe(false) + expect(wrapper.vm.test.pageFrom).toBe(1) + expect(wrapper.vm.test.pageTo).toBe(1) + expect(wrapper.vm.test.total).toBe(22) + expect(wrapper.vm.test.items.length).toBe(10) + expect(wrapper.vm.test.items).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) + expect(adapter.lastArgs.args).toEqual({ counter: 2 }) + + wrapper.vm.test.pageTo = 2 + await nextTick() + + expect(wrapper.vm.test.loading).toBe(false) + expect(wrapper.vm.test.pageFrom).toBe(1) + expect(wrapper.vm.test.pageTo).toBe(2) + expect(wrapper.vm.test.total).toBe(22) + expect(wrapper.vm.test.items.length).toBe(20) + expect(wrapper.vm.test.items).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) + expect(adapter.lastArgs.args).toEqual({ counter: 2 }) +}) + test('Don\'t touch computed getters', async function () { let adapter = new TestAdapter() adapter.nextResult = {