Commit 50663661 authored by Clement Ho's avatar Clement Ho

Add loading template to droplab_ajax_filter

parent efb66820
...@@ -50,6 +50,18 @@ require('../window')(function(w){ ...@@ -50,6 +50,18 @@ require('../window')(function(w){
searchValue = config.searchValueFunction(); searchValue = config.searchValueFunction();
} }
if (config.loadingTemplate && this.hook.list.data === undefined ||
this.hook.list.data.length === 0) {
var dynamicList = this.hook.list.list.querySelector('[data-dynamic]');
var loadingTemplate = document.createElement('div');
loadingTemplate.innerHTML = config.loadingTemplate;
loadingTemplate.setAttribute('data-loading-template', true);
this.listTemplate = dynamicList.outerHTML;
dynamicList.outerHTML = loadingTemplate.outerHTML;
}
if (getEntireList) { if (getEntireList) {
searchValue = ''; searchValue = '';
} }
...@@ -64,8 +76,18 @@ require('../window')(function(w){ ...@@ -64,8 +76,18 @@ require('../window')(function(w){
params[config.searchKey] = searchValue; params[config.searchKey] = searchValue;
var self = this; var self = this;
this._loadUrlData(config.endpoint + this.buildParams(params)).then(function(data) { this._loadUrlData(config.endpoint + this.buildParams(params)).then(function(data) {
if (config.loadingTemplate && self.hook.list.data === undefined ||
self.hook.list.data.length === 0) {
self.hook.list.list.querySelector('[data-loading-template]').outerHTML = self.listTemplate;
}
if (!self.destroyed) { if (!self.destroyed) {
self.hook.list.setData.call(self.hook.list, data[0]); if (data[0].length === 0) {
self.hook.list.hide();
} else {
self.hook.list.show();
self.hook.list.setData.call(self.hook.list, data[0]);
}
} }
self.notLoading(); self.notLoading();
}); });
......
...@@ -17,6 +17,10 @@ ...@@ -17,6 +17,10 @@
current_user: true, current_user: true,
}, },
searchValueFunction: this.getSearchInput, searchValueFunction: this.getSearchInput,
loadingTemplate: `
<div class="filter-dropdown-loading">
<i class="fa fa-spinner fa-spin"></i>
</div>`,
} }
}; };
} }
......
...@@ -17,6 +17,10 @@ ...@@ -17,6 +17,10 @@
current_user: true, current_user: true,
}, },
searchValueFunction: this.getSearchInput, searchValueFunction: this.getSearchInput,
loadingTemplate: `
<div class="filter-dropdown-loading">
<i class="fa fa-spinner fa-spin"></i>
</div>`,
} }
}; };
} }
......
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