Add caching of droplab ajax requests
This commit is contained in:
parent
b55c1bc4b5
commit
bc84137dc6
|
@ -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){
|
||||||
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){
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
_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){
|
||||||
dynamicList.outerHTML = loadingTemplate.outerHTML;
|
dynamicList.outerHTML = loadingTemplate.outerHTML;
|
||||||
}
|
}
|
||||||
|
|
||||||
this._loadUrlData(config.endpoint)
|
if (self.cache[config.endpoint]) {
|
||||||
.then(function(d) {
|
self._loadData(self.cache[config.endpoint], config, self);
|
||||||
if (config.loadingTemplate) {
|
} else {
|
||||||
var dataLoadingTemplate = self.hook.list.list.querySelector('[data-loading-template]');
|
this._loadUrlData(config.endpoint)
|
||||||
|
.then(function(d) {
|
||||||
if (dataLoadingTemplate) {
|
self._loadData(d, config, self);
|
||||||
dataLoadingTemplate.outerHTML = self.listTemplate;
|
}).catch(function(e) {
|
||||||
}
|
throw new droplabAjaxException(e.message || e);
|
||||||
}
|
});
|
||||||
|
}
|
||||||
if (!self.hook.list.hidden) {
|
|
||||||
self.hook.list[config.method].call(self.hook.list, d);
|
|
||||||
}
|
|
||||||
}).catch(function(e) {
|
|
||||||
throw new droplabAjaxException(e.message || e);
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
|
|
||||||
destroy: function() {
|
destroy: function() {
|
||||||
|
|
|
@ -72,32 +72,22 @@ 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 || {};
|
||||||
if (config.loadingTemplate && self.hook.list.data === undefined ||
|
var url = config.endpoint + this.buildParams(params);
|
||||||
self.hook.list.data.length === 0) {
|
var urlCachedData = self.cache[url];
|
||||||
const dataLoadingTemplate = self.hook.list.list.querySelector('[data-loading-template]');
|
|
||||||
|
|
||||||
if (dataLoadingTemplate) {
|
if (urlCachedData) {
|
||||||
dataLoadingTemplate.outerHTML = self.listTemplate;
|
self._loadData(urlCachedData, config, self);
|
||||||
}
|
} else {
|
||||||
}
|
this._loadUrlData(url)
|
||||||
|
.then(function(data) {
|
||||||
if (!self.destroyed) {
|
self._loadData(data, config, self);
|
||||||
var hookListChildren = self.hook.list.list.children;
|
});
|
||||||
var onlyDynamicList = hookListChildren.length === 1 && hookListChildren[0].hasAttribute('data-dynamic');
|
}
|
||||||
|
|
||||||
if (onlyDynamicList && data.length === 0) {
|
|
||||||
self.hook.list.hide();
|
|
||||||
}
|
|
||||||
|
|
||||||
self.hook.list.setData.call(self.hook.list, data);
|
|
||||||
}
|
|
||||||
self.notLoading();
|
|
||||||
self.hook.list.currentIndex = 0;
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
|
|
||||||
_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);
|
||||||
|
@ -105,6 +95,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]);
|
||||||
|
@ -115,6 +106,30 @@ require('../window')(function(w){
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
_loadData: function _loadData(data, config, self) {
|
||||||
|
if (config.loadingTemplate && self.hook.list.data === undefined ||
|
||||||
|
self.hook.list.data.length === 0) {
|
||||||
|
const dataLoadingTemplate = self.hook.list.list.querySelector('[data-loading-template]');
|
||||||
|
|
||||||
|
if (dataLoadingTemplate) {
|
||||||
|
dataLoadingTemplate.outerHTML = self.listTemplate;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!self.destroyed) {
|
||||||
|
var hookListChildren = self.hook.list.list.children;
|
||||||
|
var onlyDynamicList = hookListChildren.length === 1 && hookListChildren[0].hasAttribute('data-dynamic');
|
||||||
|
|
||||||
|
if (onlyDynamicList && data.length === 0) {
|
||||||
|
self.hook.list.hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
self.hook.list.setData.call(self.hook.list, data);
|
||||||
|
}
|
||||||
|
self.notLoading();
|
||||||
|
self.hook.list.currentIndex = 0;
|
||||||
|
},
|
||||||
|
|
||||||
buildParams: function(params) {
|
buildParams: function(params) {
|
||||||
if (!params) return '';
|
if (!params) return '';
|
||||||
var paramsArray = Object.keys(params).map(function(param) {
|
var paramsArray = Object.keys(params).map(function(param) {
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: Add caching of droplab ajax requests
|
||||||
|
merge_request: 8725
|
||||||
|
author:
|
|
@ -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
|
||||||
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
|
||||||
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
|
||||||
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
|
||||||
|
|
Loading…
Reference in New Issue