Add caching of droplab ajax requests

2 files changed, 63 insertions, 39 deletions

diff --git a/app/assets/javascripts/droplab/droplab_ajax.js b/app/assets/javascripts/droplab/droplab_ajax.js
index f7fed0987a2..c290e1a8355 100644
--- a/app/assets/javascripts/droplab/droplab_ajax.js
+++ b/app/assets/javascripts/droplab/droplab_ajax.js
@@ -9,6 +9,7 @@ require('../window')(function(w){
 
   w.droplabAjax = {
     _loadUrlData: function _loadUrlData(url) {
+      var self = this;
       return new Promise(function(resolve, reject) {
         var xhr = new XMLHttpRequest;
         xhr.open('GET', url, true);
@@ -16,6 +17,7 @@ require('../window')(function(w){
           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]);
@@ -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) {
       var self = this;
+      self.cache = self.cache || {};
       var config = hook.config.droplabAjax;
       this.hook = hook;
 
@@ -50,22 +65,16 @@ require('../window')(function(w){
         dynamicList.outerHTML = loadingTemplate.outerHTML;
       }
 
-      this._loadUrlData(config.endpoint)
-        .then(function(d) {
-          if (config.loadingTemplate) {
-            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) {
-          throw new droplabAjaxException(e.message || e);
-        });
+      if (self.cache[config.endpoint]) {
+        self._loadData(self.cache[config.endpoint], config, self);
+      } else {
+        this._loadUrlData(config.endpoint)
+          .then(function(d) {
+            self._loadData(d, config, self);
+          }).catch(function(e) {
+            throw new droplabAjaxException(e.message || e);
+          });
+      }
     },
 
     destroy: function() {
diff --git a/app/assets/javascripts/droplab/droplab_ajax_filter.js b/app/assets/javascripts/droplab/droplab_ajax_filter.js
index 86a08d0d01d..b63d73066cb 100644
--- a/app/assets/javascripts/droplab/droplab_ajax_filter.js
+++ b/app/assets/javascripts/droplab/droplab_ajax_filter.js
@@ -72,32 +72,22 @@ require('../window')(function(w){
       var params = config.params || {};
       params[config.searchKey] = searchValue;
       var self = this;
-      this._loadUrlData(config.endpoint + this.buildParams(params)).then(function(data) {
-        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;
-      });
+      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);
@@ -105,6 +95,7 @@ require('../window')(function(w){
           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]);
@@ -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) {
       if (!params) return '';
       var paramsArray = Object.keys(params).map(function(param) {