Commit bc84137d authored by Clement Ho's avatar Clement Ho

Add caching of droplab ajax requests

parent b55c1bc4
...@@ -9,6 +9,7 @@ require('../window')(function(w){ ...@@ -9,6 +9,7 @@ require('../window')(function(w){
w.droplabAjax = { w.droplabAjax = {
_loadUrlData: function _loadUrlData(url) { _loadUrlData: function _loadUrlData(url) {
var self = this;
return new Promise(function(resolve, reject) { return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest; var xhr = new XMLHttpRequest;
xhr.open('GET', url, true); xhr.open('GET', url, true);
...@@ -16,6 +17,7 @@ require('../window')(function(w){ ...@@ -16,6 +17,7 @@ require('../window')(function(w){
if(xhr.readyState === XMLHttpRequest.DONE) { if(xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) { if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText); var data = JSON.parse(xhr.responseText);
self.cache[url] = data;
return resolve(data); return resolve(data);
} else { } else {
return reject([xhr.responseText, xhr.status]); return reject([xhr.responseText, xhr.status]);
...@@ -26,8 +28,21 @@ require('../window')(function(w){ ...@@ -26,8 +28,21 @@ require('../window')(function(w){
}); });
}, },
_loadData: function _loadData(data, config, self) {
if (config.loadingTemplate) {
var dataLoadingTemplate = self.hook.list.list.querySelector('[data-loading-template]');
if (dataLoadingTemplate) {
dataLoadingTemplate.outerHTML = self.listTemplate;
}
}
self.hook.list[config.method].call(self.hook.list, data);
},
init: function init(hook) { init: function init(hook) {
var self = this; var self = this;
self.cache = self.cache || {};
var config = hook.config.droplabAjax; var config = hook.config.droplabAjax;
this.hook = hook; this.hook = hook;
...@@ -50,22 +65,16 @@ require('../window')(function(w){ ...@@ -50,22 +65,16 @@ require('../window')(function(w){
dynamicList.outerHTML = loadingTemplate.outerHTML; dynamicList.outerHTML = loadingTemplate.outerHTML;
} }
if (self.cache[config.endpoint]) {
self._loadData(self.cache[config.endpoint], config, self);
} else {
this._loadUrlData(config.endpoint) this._loadUrlData(config.endpoint)
.then(function(d) { .then(function(d) {
if (config.loadingTemplate) { self._loadData(d, config, self);
var dataLoadingTemplate = self.hook.list.list.querySelector('[data-loading-template]');
if (dataLoadingTemplate) {
dataLoadingTemplate.outerHTML = self.listTemplate;
}
}
if (!self.hook.list.hidden) {
self.hook.list[config.method].call(self.hook.list, d);
}
}).catch(function(e) { }).catch(function(e) {
throw new droplabAjaxException(e.message || e); throw new droplabAjaxException(e.message || e);
}); });
}
}, },
destroy: function() { destroy: function() {
......
...@@ -72,7 +72,41 @@ require('../window')(function(w){ ...@@ -72,7 +72,41 @@ require('../window')(function(w){
var params = config.params || {}; var params = config.params || {};
params[config.searchKey] = searchValue; params[config.searchKey] = searchValue;
var self = this; var self = this;
this._loadUrlData(config.endpoint + this.buildParams(params)).then(function(data) { self.cache = self.cache || {};
var url = config.endpoint + this.buildParams(params);
var urlCachedData = self.cache[url];
if (urlCachedData) {
self._loadData(urlCachedData, config, self);
} else {
this._loadUrlData(url)
.then(function(data) {
self._loadData(data, config, self);
});
}
},
_loadUrlData: function _loadUrlData(url) {
var self = this;
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest;
xhr.open('GET', url, true);
xhr.onreadystatechange = function () {
if(xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
self.cache[url] = data;
return resolve(data);
} else {
return reject([xhr.responseText, xhr.status]);
}
}
};
xhr.send();
});
},
_loadData: function _loadData(data, config, self) {
if (config.loadingTemplate && self.hook.list.data === undefined || if (config.loadingTemplate && self.hook.list.data === undefined ||
self.hook.list.data.length === 0) { self.hook.list.data.length === 0) {
const dataLoadingTemplate = self.hook.list.list.querySelector('[data-loading-template]'); const dataLoadingTemplate = self.hook.list.list.querySelector('[data-loading-template]');
...@@ -94,25 +128,6 @@ require('../window')(function(w){ ...@@ -94,25 +128,6 @@ require('../window')(function(w){
} }
self.notLoading(); self.notLoading();
self.hook.list.currentIndex = 0; self.hook.list.currentIndex = 0;
});
},
_loadUrlData: function _loadUrlData(url) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest;
xhr.open('GET', url, true);
xhr.onreadystatechange = function () {
if(xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
return resolve(data);
} else {
return reject([xhr.responseText, xhr.status]);
}
}
};
xhr.send();
});
}, },
buildParams: function(params) { buildParams: function(params) {
......
---
title: Add caching of droplab ajax requests
merge_request: 8725
author:
...@@ -185,4 +185,22 @@ describe 'Dropdown assignee', js: true, feature: true do ...@@ -185,4 +185,22 @@ describe 'Dropdown assignee', js: true, feature: true do
expect(page).to have_css(js_dropdown_assignee, visible: true) expect(page).to have_css(js_dropdown_assignee, visible: true)
end end
end end
describe 'caching requests' do
it 'caches requests after the first load' do
filtered_search.set('assignee')
send_keys_to_filtered_search(':')
initial_size = dropdown_assignee_size
expect(initial_size).to be > 0
new_user = create(:user)
project.team << [new_user, :master]
find('.filtered-search-input-container .clear-search').click
filtered_search.set('assignee')
send_keys_to_filtered_search(':')
expect(dropdown_assignee_size).to eq(initial_size)
end
end
end end
...@@ -157,4 +157,22 @@ describe 'Dropdown author', js: true, feature: true do ...@@ -157,4 +157,22 @@ describe 'Dropdown author', js: true, feature: true do
expect(page).to have_css(js_dropdown_author, visible: true) expect(page).to have_css(js_dropdown_author, visible: true)
end end
end end
describe 'caching requests' do
it 'caches requests after the first load' do
filtered_search.set('author')
send_keys_to_filtered_search(':')
initial_size = dropdown_author_size
expect(initial_size).to be > 0
new_user = create(:user)
project.team << [new_user, :master]
find('.filtered-search-input-container .clear-search').click
filtered_search.set('author')
send_keys_to_filtered_search(':')
expect(dropdown_author_size).to eq(initial_size)
end
end
end end
...@@ -249,4 +249,21 @@ describe 'Dropdown label', js: true, feature: true do ...@@ -249,4 +249,21 @@ describe 'Dropdown label', js: true, feature: true do
expect(page).to have_css(js_dropdown_label, visible: true) expect(page).to have_css(js_dropdown_label, visible: true)
end end
end end
describe 'caching requests' do
it 'caches requests after the first load' do
filtered_search.set('label')
send_keys_to_filtered_search(':')
initial_size = dropdown_label_size
expect(initial_size).to be > 0
create(:label, project: project)
find('.filtered-search-input-container .clear-search').click
filtered_search.set('label')
send_keys_to_filtered_search(':')
expect(dropdown_label_size).to eq(initial_size)
end
end
end end
...@@ -219,4 +219,21 @@ describe 'Dropdown milestone', js: true, feature: true do ...@@ -219,4 +219,21 @@ describe 'Dropdown milestone', js: true, feature: true do
expect(page).to have_css(js_dropdown_milestone, visible: true) expect(page).to have_css(js_dropdown_milestone, visible: true)
end end
end end
describe 'caching requests' do
it 'caches requests after the first load' do
filtered_search.set('milestone')
send_keys_to_filtered_search(':')
initial_size = dropdown_milestone_size
expect(initial_size).to be > 0
create(:milestone, project: project)
find('.filtered-search-input-container .clear-search').click
filtered_search.set('milestone')
send_keys_to_filtered_search(':')
expect(dropdown_milestone_size).to eq(initial_size)
end
end
end end
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