Commit 92bb0d8f authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch '28030-infinite-offset' into 'master'

respect offset and limit query params for infinite lists

Closes #28030

See merge request !9540
parents af9cb102 08c141b9
...@@ -66,6 +66,13 @@ ...@@ -66,6 +66,13 @@
return results; return results;
})()).join('&'); })()).join('&');
}; };
w.gl.utils.removeParams = (params) => {
const url = new URL(window.location.href);
params.forEach((param) => {
url.search = w.gl.utils.removeParamQueryString(url.search, param);
});
return url.href;
};
w.gl.utils.getLocationHash = function(url) { w.gl.utils.getLocationHash = function(url) {
var hashIndex; var hashIndex;
if (typeof url === 'undefined') { if (typeof url === 'undefined') {
......
require('~/lib/utils/common_utils');
require('~/lib/utils/url_utility');
(() => { (() => {
const ENDLESS_SCROLL_BOTTOM_PX = 400; const ENDLESS_SCROLL_BOTTOM_PX = 400;
const ENDLESS_SCROLL_FIRE_DELAY_MS = 1000; const ENDLESS_SCROLL_FIRE_DELAY_MS = 1000;
const Pager = { const Pager = {
init(limit = 0, preload = false, disable = false, callback = $.noop) { init(limit = 0, preload = false, disable = false, callback = $.noop) {
this.url = $('.content_list').data('href') || gl.utils.removeParams(['limit', 'offset']);
this.limit = limit; this.limit = limit;
this.offset = this.limit; this.offset = parseInt(gl.utils.getParameterByName('offset'), 10) || this.limit;
this.disable = disable; this.disable = disable;
this.callback = callback; this.callback = callback;
this.loading = $('.loading').first(); this.loading = $('.loading').first();
...@@ -20,7 +24,7 @@ ...@@ -20,7 +24,7 @@
this.loading.show(); this.loading.show();
$.ajax({ $.ajax({
type: 'GET', type: 'GET',
url: $('.content_list').data('href') || window.location.href, url: this.url,
data: `limit=${this.limit}&offset=${this.offset}`, data: `limit=${this.limit}&offset=${this.offset}`,
dataType: 'json', dataType: 'json',
error: () => this.loading.hide(), error: () => this.loading.hide(),
......
---
title: allow offset query parameter for infinite list pages
merge_request:
author:
/* global fixture */
require('~/pager');
describe('pager', () => {
const Pager = window.Pager;
it('is defined on window', () => {
expect(window.Pager).toBeDefined();
});
describe('init', () => {
const originalHref = window.location.href;
beforeEach(() => {
setFixtures('<div class="content_list"></div><div class="loading"></div>');
spyOn($, 'ajax');
});
afterEach(() => {
window.history.replaceState({}, null, originalHref);
});
it('should use data-href attribute from list element', () => {
const href = `${gl.TEST_HOST}/some_list.json`;
setFixtures(`<div class="content_list" data-href="${href}"></div>`);
Pager.init();
expect(Pager.url).toBe(href);
});
it('should use current url if data-href attribute not provided', () => {
const href = `${gl.TEST_HOST}/some_list`;
spyOn(gl.utils, 'removeParams').and.returnValue(href);
Pager.init();
expect(Pager.url).toBe(href);
});
it('should get initial offset from query parameter', () => {
window.history.replaceState({}, null, '?offset=100');
Pager.init();
expect(Pager.offset).toBe(100);
});
it('keeps extra query parameters from url', () => {
window.history.replaceState({}, null, '?filter=test&offset=100');
const href = `${gl.TEST_HOST}/some_list?filter=test`;
spyOn(gl.utils, 'removeParams').and.returnValue(href);
Pager.init();
expect(gl.utils.removeParams).toHaveBeenCalledWith(['limit', 'offset']);
expect(Pager.url).toEqual(href);
});
});
describe('getOld', () => {
beforeEach(() => {
setFixtures('<div class="content_list" data-href="/some_list"></div><div class="loading"></div>');
Pager.init();
});
it('shows loader while loading next page', () => {
spyOn(Pager.loading, 'show');
Pager.getOld();
expect(Pager.loading.show).toHaveBeenCalled();
});
it('hides loader on success', () => {
spyOn($, 'ajax').and.callFake(options => options.success({}));
spyOn(Pager.loading, 'hide');
Pager.getOld();
expect(Pager.loading.hide).toHaveBeenCalled();
});
it('hides loader on error', () => {
spyOn($, 'ajax').and.callFake(options => options.error());
spyOn(Pager.loading, 'hide');
Pager.getOld();
expect(Pager.loading.hide).toHaveBeenCalled();
});
it('sends request to url with offset and limit params', () => {
spyOn($, 'ajax');
Pager.offset = 100;
Pager.limit = 20;
Pager.getOld();
const [{ data, url }] = $.ajax.calls.argsFor(0);
expect(data).toBe('limit=20&offset=100');
expect(url).toBe('/some_list');
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment