@oat-sa/tao-core-ui 1.60.2 → 1.62.0

package/dist/searchModal.js

@@ -1,4 +1,4 @@
-define(['jquery', 'lodash', 'i18n', 'context', 'handlebars', 'lib/dompurify/purify', 'css!ui/searchModal/css/searchModal.css', 'ui/component', 'ui/modal', 'ui/datatable', 'core/store', 'ui/resource/selector', 'ui/searchModal/advancedSearch', 'core/dataProvider/request', 'util/url', 'select2', 'util/shortcut/registry'], function ($$1, _, __, context, Handlebars, DOMPurify, searchModal_css, component, modal, datatable, store, resourceSelectorFactory, advancedSearchFactory, request, urlUtil, select2, shortcutRegistry) { 'use strict';
+define(['jquery', 'lodash', 'i18n', 'context', 'handlebars', 'lib/dompurify/purify', 'css!ui/searchModal/css/searchModal.css', 'ui/component', 'ui/modal', 'ui/datatable', 'core/store', 'ui/resource/selector', 'ui/propertySelector/propertySelector', 'ui/searchModal/advancedSearch', 'core/dataProvider/request', 'util/url', 'select2', 'util/shortcut/registry'], function ($$1, _, __, context, Handlebars, DOMPurify, searchModal_css, component, modal, datatable, store, resourceSelectorFactory, propertySelectorFactory, advancedSearchFactory, request, urlUtil, select2, shortcutRegistry) { 'use strict';
 
   $$1 = $$1 && Object.prototype.hasOwnProperty.call($$1, 'default') ? $$1['default'] : $$1;
   _ = _ && Object.prototype.hasOwnProperty.call(_, 'default') ? _['default'] : _;
@@ -9,6 +9,7 @@ define(['jquery', 'lodash', 'i18n', 'context', 'handlebars', 'lib/dompurify/puri
   component = component && Object.prototype.hasOwnProperty.call(component, 'default') ? component['default'] : component;
   store = store && Object.prototype.hasOwnProperty.call(store, 'default') ? store['default'] : store;
   resourceSelectorFactory = resourceSelectorFactory && Object.prototype.hasOwnProperty.call(resourceSelectorFactory, 'default') ? resourceSelectorFactory['default'] : resourceSelectorFactory;
+  propertySelectorFactory = propertySelectorFactory && Object.prototype.hasOwnProperty.call(propertySelectorFactory, 'default') ? propertySelectorFactory['default'] : propertySelectorFactory;
   advancedSearchFactory = advancedSearchFactory && Object.prototype.hasOwnProperty.call(advancedSearchFactory, 'default') ? advancedSearchFactory['default'] : advancedSearchFactory;
   request = request && Object.prototype.hasOwnProperty.call(request, 'default') ? request['default'] : request;
   urlUtil = urlUtil && Object.prototype.hasOwnProperty.call(urlUtil, 'default') ? urlUtil['default'] : urlUtil;
@@ -16,17 +17,14 @@ define(['jquery', 'lodash', 'i18n', 'context', 'handlebars', 'lib/dompurify/puri
 
   function ownKeys(object, enumerableOnly) {
     var keys = Object.keys(object);
-
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
       enumerableOnly && (symbols = symbols.filter(function (sym) {
         return Object.getOwnPropertyDescriptor(object, sym).enumerable;
       })), keys.push.apply(keys, symbols);
     }
-
     return keys;
   }
-
   function _objectSpread2(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = null != arguments[i] ? arguments[i] : {};
@@ -36,20 +34,8 @@ define(['jquery', 'lodash', 'i18n', 'context', 'handlebars', 'lib/dompurify/puri
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
-
     return target;
   }
-
-  function _typeof(obj) {
-    "@babel/helpers - typeof";
-
-    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-      return typeof obj;
-    } : function (obj) {
-      return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    }, _typeof(obj);
-  }
-
   function _defineProperty(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
@@ -61,78 +47,90 @@ define(['jquery', 'lodash', 'i18n', 'context', 'handlebars', 'lib/dompurify/puri
     } else {
       obj[key] = value;
     }
-
     return obj;
   }
 
+  /**
+   * This program is free software; you can redistribute it and/or
+   * modify it under the terms of the GNU General Public License
+   * as published by the Free Software Foundation; under version 2
+   * of the License (non-upgradable).
+   *
+   * This program is distributed in the hope that it will be useful,
+   * but WITHOUT ANY WARRANTY; without even the implied warranty of
+   * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+   * GNU General Public License for more details.
+   *
+   * You should have received a copy of the GNU General Public License
+   * along with this program; if not, write to the Free Software
+   * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+   *
+   * Copyright (c) 2013-2019 (original work) Open Assessment Technologies SA (under the project TAO-PRODUCT);
+   *
+   *
+   */
   function Helpers0 (hb) {
     //register a i18n helper
     hb.registerHelper('__', function (key) {
       return __(key);
     });
-    /**
-     * Register dompurify helper
-     *
-     * https://github.com/cure53/DOMPurify
-     * with config SAFE_FOR_TEMPLATES: true
-     * to make output safe for template systems
-     */
 
+    /**
+     * Register dompurify helper
+     *
+     * https://github.com/cure53/DOMPurify
+     * with config SAFE_FOR_TEMPLATES: true
+     * to make output safe for template systems
+     */
     hb.registerHelper('dompurify', function (context) {
       return DOMPurify.sanitize(context);
     });
-    /**
-     * Register join helper
-     *
-     * Example :
-     * var values = {a:v1, b:v2, c:v3};
-     * Using {{{join attributes '=' ' ' '"'}}} will return : a="v1" b="v2" c="v3"
-     * Using {{{join values null ' or ' '*'}}} will return : *v1* or *v2* or *v3*
-     */
 
+    /**
+     * Register join helper
+     *
+     * Example :
+     * var values = {a:v1, b:v2, c:v3};
+     * Using {{{join attributes '=' ' ' '"'}}} will return : a="v1" b="v2" c="v3"
+     * Using {{{join values null ' or ' '*'}}} will return : *v1* or *v2* or *v3*
+     */
     hb.registerHelper('join', function (arr, keyValueGlue, fragmentGlue, wrapper) {
       var fragments = [];
       keyValueGlue = typeof keyValueGlue === 'string' ? keyValueGlue : undefined;
       fragmentGlue = typeof fragmentGlue === 'string' ? fragmentGlue : ' ';
       wrapper = typeof wrapper === 'string' ? wrapper : '"';
-
       _.forIn(arr, function (value, key) {
         var fragment = '';
-
         if (value !== null || value !== undefined) {
           if (typeof value === 'boolean') {
             value = value ? 'true' : 'false';
-          } else if (_typeof(value) === 'object') {
+          } else if (typeof value === 'object') {
             value = _.values(value).join(' ');
           }
         } else {
           value = '';
         }
-
         if (keyValueGlue !== undefined) {
           fragment += key + keyValueGlue;
         }
-
         fragment += wrapper + value + wrapper;
         fragments.push(fragment);
       });
-
       return fragments.join(fragmentGlue);
-    }); //register a classic "for loop" helper
-    //it also adds a local variable "i" as the index in each iteration loop
+    });
 
+    //register a classic "for loop" helper
+    //it also adds a local variable "i" as the index in each iteration loop
     hb.registerHelper('for', function (startIndex, stopIndex, increment, options) {
       var ret = '';
       startIndex = parseInt(startIndex);
       stopIndex = parseInt(stopIndex);
       increment = parseInt(increment);
-
       for (var i = startIndex; i < stopIndex; i += increment) {
         ret += options.fn(_.extend({}, this, {
           i: i
         }));
       }
-
       return ret;
     });
     hb.registerHelper('equal', function (var1, var2, options) {
@@ -141,14 +139,16 @@ define(['jquery', 'lodash', 'i18n', 'context', 'handlebars', 'lib/dompurify/puri
       } else {
         return options.inverse(this);
       }
-    }); // register a "get property" helper
-    // it gets the named property from the provided context
+    });
 
+    // register a "get property" helper
+    // it gets the named property from the provided context
     hb.registerHelper('property', function (name, context) {
       return context[name] || '';
-    }); // register an 'includes' helper
-    // it checks if value is in array
+    });
 
+    // register an 'includes' helper
+    // it checks if value is in array
     hb.registerHelper('includes', function (haystack, needle, options) {
       if (_.contains(haystack, needle)) {
         return options.fn(this);
@@ -166,15 +166,15 @@ define(['jquery', 'lodash', 'i18n', 'context', 'handlebars', 'lib/dompurify/puri
     var buffer = "", stack1, helper, options, functionType="function", escapeExpression=this.escapeExpression, helperMissing=helpers.helperMissing;
 
 
-    buffer += "<div class=\"search-modal section-container\">\r\n    <div class=\"clear content-wrapper content-panel\">\r\n        <div class=\"ui-container\">\r\n            <div class=\"filters-container\">\r\n                <div class=\"basic-search-container\">\r\n                    <div class=\"filter-container\">\r\n                        <span class=\"icon-find\"></span>\r\n                        <input class=\"generic-search-input\" type=\"text\" placeholder=\"";
+    buffer += "<div class=\"search-modal section-container\">\n    <div class=\"clear content-wrapper content-panel\">\n        <div class=\"ui-container\">\n            <div class=\"filters-container\">\n                <div class=\"basic-search-container\">\n                    <div class=\"filter-container\">\n                        <span class=\"icon-find\"></span>\n                        <input class=\"generic-search-input\" type=\"text\" placeholder=\"";
     if (helper = helpers.placeholder) { stack1 = helper.call(depth0, {hash:{},data:data}); }
     else { helper = (depth0 && depth0.placeholder); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
     buffer += escapeExpression(stack1)
-      + "\">\r\n                    </div>\r\n                    <div class=\"filter-container class-filter-container\">\r\n                        <span class=\"icon-folder\"></span>\r\n                        <span class=\"icon-down\"></span>\r\n                        <textarea class=\"class-filter\" cols=\"40\" rows=\"1\" readonly></textarea>\r\n                        <div class=\"class-tree\"></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"buttons-container\">\r\n                <button class=\"btn-clear btn-transparent small\">"
+      + "\">\n                    </div>\n                    <div class=\"filter-container class-filter-container\">\n                        <span class=\"icon-folder\"></span>\n                        <span class=\"icon-down\"></span>\n                        <textarea class=\"class-filter\" cols=\"40\" rows=\"1\" readonly></textarea>\n                        <div class=\"class-tree\"></div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"buttons-container\">\n                <button class=\"btn-clear btn-transparent small\">"
       + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Clear", options) : helperMissing.call(depth0, "__", "Clear", options)))
-      + "</button>\r\n                <button class=\"btn-search btn-info small\">"
+      + "</button>\n                <button class=\"btn-search btn-info small\">"
       + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Search", options) : helperMissing.call(depth0, "__", "Search", options)))
-      + "</button>\r\n            </div>\r\n        </div>\r\n        <div class=\"content-container\" style=\"padding:40px 20px\">\r\n        </div>\r\n    </div>\r\n</div>";
+      + "</button>\n            </div>\n        </div>\n        <div class=\"content-container\">\n            <div class=\"content-toolbar\"></div>\n            <div class=\"content-area\"></div>\n        </div>\n    </div>\n</div>";
     return buffer;
     });
   function layoutTpl(data, options, asString) {
@@ -188,205 +188,248 @@ define(['jquery', 'lodash', 'i18n', 'context', 'handlebars', 'lib/dompurify/puri
   }
   var Template$1 = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
     this.compilerInfo = [4,'>= 1.0.0'];
+  helpers = this.merge(helpers, Handlebars.helpers);  
+
+
+    return "<div class=\"results-container flex-container-full\"></div>";
+    });
+  function resultsContainerTpl(data, options, asString) {
+    var html = Template$1(data, options);
+    return (asString || true) ? html : $(html);
+  }
+
+  if (!Helpers0.__initialized) {
+    Helpers0(Handlebars);
+    Helpers0.__initialized = true;
+  }
+  var Template$2 = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
+    this.compilerInfo = [4,'>= 1.0.0'];
   helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
     var buffer = "", stack1, helper, functionType="function", escapeExpression=this.escapeExpression;
 
 
-    buffer += "<div class='no-datatable-container'>\r\n    <span class=\"no-datatable-icon ";
+    buffer += "<div class='no-datatable-container'>\n    <span class=\"no-datatable-icon ";
     if (helper = helpers.icon) { stack1 = helper.call(depth0, {hash:{},data:data}); }
     else { helper = (depth0 && depth0.icon); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
     buffer += escapeExpression(stack1)
-      + "\"></span>\r\n    <p class=\"no-datatable-message\">";
+      + "\"></span>\n    <p class=\"no-datatable-message\">";
     if (helper = helpers.message) { stack1 = helper.call(depth0, {hash:{},data:data}); }
     else { helper = (depth0 && depth0.message); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
     buffer += escapeExpression(stack1)
-      + "</p>\r\n</div>";
+      + "</p>\n</div>";
     return buffer;
     });
   function infoMessageTpl(data, options, asString) {
-    var html = Template$1(data, options);
+    var html = Template$2(data, options);
     return (asString || true) ? html : $(html);
   }
 
-  /**
-   * Creates a searchModal instance
-   *
-   * @param {object} config
-   * @param {object} config.renderTo - DOM element where component will be rendered to
-   * @param {string} config.criterias - Search criteria to be set on component creation
-   * @param {boolean} config.searchOnInit - if init search must be triggered or not (stored results are used instead)
-   * @param {string} config.url - search endpoint to be set on datatable
-   * @param {string} config.rootClassUri - Uri for the root class of current context, required to init the class filter
-   * @param {bool} config.hideResourceSelector - if resourceSelector must be hidden
-   * @param {string} config.placeholder - placeholder for input in template
-   * @returns {searchModal}
-   */
+  if (!Helpers0.__initialized) {
+    Helpers0(Handlebars);
+    Helpers0.__initialized = true;
+  }
+  var Template$3 = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
+    this.compilerInfo = [4,'>= 1.0.0'];
+  helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
+    var buffer = "", helper, options, helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
+
+
+    buffer += "<a class=\"toggle-modal-button\"><span class=\"icon-add\"></span>"
+      + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "manage columns", options) : helperMissing.call(depth0, "__", "manage columns", options)))
+      + "</a>";
+    return buffer;
+    });
+  function propertySelectButtonTpl(data, options, asString) {
+    var html = Template$3(data, options);
+    return (asString || true) ? html : $(html);
+  }
 
+  /**
+   * Creates a searchModal instance
+   *
+   * @param {object} config
+   * @param {object} config.renderTo - DOM element where component will be rendered to
+   * @param {string} config.criterias - Search criteria to be set on component creation
+   * @param {boolean} config.searchOnInit - if init search must be triggered or not (stored results are used instead)
+   * @param {string} config.url - search endpoint to be set on datatable
+   * @param {string} config.rootClassUri - Uri for the root class of current context, required to init the class filter
+   * @param {bool} config.hideResourceSelector - if resourceSelector must be hidden
+   * @param {bool} config.hideCriteria - if the criteria must be hidden
+   * @param {string} config.placeholder - placeholder for input in template
+   * @param {string} config.classesUrl - the URL to the classes API (usually '/tao/RestResource/getAll')
+   * @param {string} config.classMappingUrl - the URL to the class mapping API (usually '/tao/ClassMetadata/getWithMapping')
+   * @param {string} config.statusUrl - the URL to the status API (usually '/tao/AdvancedSearch/status')
+   * @param {string} config.sortby - the default sorted column (usually 'label')
+   * @param {string} config.sortorder - the default sort order (usually 'asc')
+   * @returns {searchModal}
+   */
   function searchModalFactory(config) {
-    var defaults = {
+    // @TODO: The consumer must be responsible for supplying the routes. The component must not hardcode endpoints.
+    const defaults = {
+      classesUrl: urlUtil.route('getAll', 'RestResource', 'tao'),
+      classMappingUrl: urlUtil.route('getWithMapping', 'ClassMetadata', 'tao'),
+      statusUrl: urlUtil.route('status', 'AdvancedSearch', 'tao'),
       renderTo: 'body',
       criterias: {},
       searchOnInit: true,
-      maxListSize: 5
-    }; // Private properties to be easily accessible by instance methods
-
-    var $container = null;
-    var $searchInput = null;
-    var $searchButton = null;
-    var $clearButton = null;
-    var running = false;
-    var searchStore = null;
-    var resourceSelector = null;
-    var $classFilterContainer = null;
-    var $classFilterInput = null;
-    var $classTreeContainer = null;
-    var advancedSearch = null; // resorce selector
-
-    var isResourceSelector = !config.hideResourceSelector;
-    var rootClassUri = config.rootClassUri;
-    /**
-     * Creates search modal, inits template selectors, inits search store, and once is created triggers initial search
-     * rootClassUri is sent to advancedSearch factory for disabling in whitelisted sections
+      maxListSize: 5,
+      sortby: 'label',
+      sortorder: 'asc'
+    };
+    // Private properties to be easily accessible by instance methods
+    let $container = null;
+    let controls = {};
+    let running = false;
+    let searchStore = null;
+    let selectedColumnsStore = null;
+    let resourceSelector = null;
+    let advancedSearch = null;
+    let propertySelectorInstance;
+    let availableColumns = [];
+    let availableIdentifiers = {};
+    let selectedColumns = [];
+    let dataCache;
+
+    // resorce selector
+    const isResourceSelector = !config.hideResourceSelector;
+    const rootClassUri = config.rootClassUri;
+
+    /**
+     * Creates search modal, inits template selectors, inits search store, and once is created triggers initial search
+     * rootClassUri is sent to advancedSearch factory for disabling in whitelisted sections
      */
-
     function renderModal() {
-      var promises = [];
+      const promises = [];
       initModal();
       initUiSelectors();
       advancedSearch = advancedSearchFactory({
-        renderTo: $$1('.filters-container', $container),
+        renderTo: controls.$filtersContainer,
         advancedCriteria: instance.config.criterias.advancedCriteria,
+        hideCriteria: instance.config.hideCriteria,
+        statusUrl: instance.config.statusUrl,
         rootClassUri: rootClassUri
       });
       promises.push(initClassFilter());
-      promises.push(initSearchStore());
-      Promise.all(promises).then(function () {
+      promises.push(initStores());
+      Promise.all(promises).then(() => {
         instance.trigger('ready');
-        $searchButton.trigger('click');
-      }).catch(function (e) {
-        return instance.trigger('error', e);
-      });
+        controls.$searchButton.trigger('click');
+      }).catch(e => instance.trigger('error', e));
     }
-    /**
-     * Removes search modal
-     */
-
 
+    /**
+     * Removes search modal
+     */
     function destroyModal() {
       $container.removeClass('modal').modal('destroy');
+      if (propertySelectorInstance) {
+        propertySelectorInstance.destroy();
+      }
       $$1('.modal-bg').remove();
-    } // Creates new component
+      controls = {};
+    }
 
+    // Creates new component
+    const instance = component({
+      /**
+       * Tells if the advanced search is enabled.
+       * @returns {boolean}
+       */
+      isAdvancedSearchEnabled() {
+        return advancedSearch && advancedSearch.isEnabled();
+      }
+    }, defaults).setTemplate(layoutTpl).on('selected-store-updated', recreateDatatable).on('render', renderModal).on('destroy', destroyModal);
 
-    var instance = component({}, defaults).setTemplate(layoutTpl).on('render', renderModal).on('destroy', destroyModal);
-    /**
-     * Creates search modal
+    /**
+     * Creates search modal
      */
-
     function initModal() {
       $container = instance.getElement();
-      $container.addClass('modal').on('closed.modal', function () {
-        return instance.destroy();
-      }).modal({
+      $container.addClass('modal').on('closed.modal', () => instance.destroy()).modal({
         disableEscape: false,
         width: $$1(window).width(),
         modalCloseClass: 'modal-close-left'
       }).focus();
     }
-    /**
-     * Inits class filter selector
-     */
-
 
+    /**
+     * Inits class filter selector
+     */
     function initClassFilter() {
-      return new Promise(function (resolve) {
+      return new Promise(resolve => {
         if (!isResourceSelector) {
-          $classFilterContainer.hide();
+          controls.$classFilterContainer.hide();
           return resolve();
         }
-
-        var initialClassUri = instance.config.criterias && instance.config.criterias.class ? instance.config.criterias.class : rootClassUri;
-        resourceSelector = resourceSelectorFactory($$1('.class-tree', $container), {
+        const initialClassUri = instance.config.criterias && instance.config.criterias.class ? instance.config.criterias.class : rootClassUri;
+        resourceSelector = resourceSelectorFactory(controls.$classTreeContainer, {
           //set up the inner resource selector
           selectionMode: 'single',
           selectClass: true,
           classUri: rootClassUri,
           showContext: false,
           showSelection: false
-        }); // when a class query is triggered, update selector options with received resources
+        });
 
-        resourceSelector.on('query', function (params) {
-          var classOnlyParams = _objectSpread2(_objectSpread2({}, params), {}, {
+        // when a class query is triggered, update selector options with received resources
+        resourceSelector.on('query', params => {
+          const classOnlyParams = _objectSpread2(_objectSpread2({}, params), {}, {
             classOnly: true
           });
-
-          var route = urlUtil.route('getAll', 'RestResource', 'tao');
-          request(route, classOnlyParams).then(function (response) {
+          const route = instance.config.classesUrl;
+          request(route, classOnlyParams).then(response => {
             if (response.permissions && response.permissions.data && response.permissions.supportedRights && response.permissions.supportedRights.length > 0) {
               manageClassTreePermissions(response);
             }
-
             resourceSelector.update(response.resources, classOnlyParams);
-          }).catch(function (e) {
-            return instance.trigger('error', e);
-          });
+          }).catch(e => instance.trigger('error', e));
         });
-        /*
-         * the first time selector opions are updated the root class is selected. Promise is
-         * resolved so init process continues only when class input value has been set
-         */
 
-        resourceSelector.on('update', function () {
+        /*
+         * the first time selector opions are updated the root class is selected. Promise is
+         * resolved so init process continues only when class input value has been set
+         */
+        resourceSelector.on('update', () => {
           resourceSelector.off('update');
           resourceSelector.select(initialClassUri);
           resolve();
-        }); // then new class is selected, set its label into class filter input and hide filter container, then request class properties
+        });
 
-        resourceSelector.on('change', function (selectedValue) {
-          /*
-           * on searchModal init we set manually the selector to the provided config.rootClassUri. When a selector
-           * is set manually Selector component execs @clearSelection which triggers a change event
-           * with an empty object as param. We catch this undesired behaviour here
+        // then new class is selected, set its label into class filter input and hide filter container, then request class properties
+        resourceSelector.on('change', selectedValue => {
+          /*
+           * on searchModal init we set manually the selector to the provided config.rootClassUri. When a selector
+           * is set manually Selector component execs @clearSelection which triggers a change event
+           * with an empty object as param. We catch this undesired behaviour here
            */
           if (_.isEmpty(selectedValue)) {
             return;
           }
-
-          var classUri = _.map(selectedValue, 'classUri')[0];
-
-          var label = _.map(selectedValue, 'label')[0];
-
-          var uri = _.map(selectedValue, 'uri')[0];
-
-          var route = urlUtil.route('getWithMapping', 'ClassMetadata', 'tao', {
-            classUri: classUri,
+          const classUri = _.map(selectedValue, 'classUri')[0];
+          const label = _.map(selectedValue, 'label')[0];
+          const uri = _.map(selectedValue, 'uri')[0];
+          const route = urlUtil.build(instance.config.classMappingUrl, {
+            classUri,
             maxListSize: instance.config.maxListSize
           });
-          $classFilterInput.html(label);
-          $classFilterInput.data('uri', uri);
-          $classTreeContainer.hide();
-          advancedSearch.updateCriteria(route).then(function () {
-            return instance.trigger('criteriaListUpdated');
-          }).catch(function (e) {
-            return instance.trigger('error', e);
-          });
+          controls.$classFilterInput.html(label);
+          controls.$classFilterInput.data('uri', uri);
+          controls.$classTreeContainer.hide();
+          advancedSearch.updateCriteria(route).then(() => instance.trigger('criteriaListUpdated')).catch(e => instance.trigger('error', e));
         });
         setResourceSelectorUIBehaviour();
       });
     }
-    /**
-     * Loops through each class in received class tree and sets access mode to 'denied' on private classes
-     * so are disabled on class tree
-     * @param {object} classTree - class tree received by server, containing resources (classes) and permissions
-     */
-
 
+    /**
+     * Loops through each class in received class tree and sets access mode to 'denied' on private classes
+     * so are disabled on class tree
+     * @param {object} classTree - class tree received by server, containing resources (classes) and permissions
+     */
     function manageClassTreePermissions(classTree) {
-      var disableBlockedClasses = function disableBlockedClasses(resources) {
-        _.forEach(resources, function (resource, index, array) {
-          if (classTree.permissions.data[resource.uri] && classTree.permissions.data[resource.uri].find(function (permission) {
-            return permission === 'READ';
-          })) {
+      const disableBlockedClasses = function (resources) {
+        _.forEach(resources, (resource, index, array) => {
+          if (classTree.permissions.data[resource.uri] && classTree.permissions.data[resource.uri].find(permission => permission === 'READ')) {
             if (resource.children) {
               disableBlockedClasses(resource.children);
             }
@@ -395,178 +438,321 @@ define(['jquery', 'lodash', 'i18n', 'context', 'handlebars', 'lib/dompurify/puri
           }
         });
       };
-
       disableBlockedClasses(classTree.resources);
     }
-    /**
-     * Inits template selectors, buttons behaviour, scroll animation,
-     * and sets initial search query on search input
-     */
-
 
+    /**
+     * Inits template selectors, buttons behaviour, scroll animation,
+     * and sets initial search query on search input
+     */
     function initUiSelectors() {
-      $searchButton = $$1('.btn-search', $container);
-      $clearButton = $$1('.btn-clear', $container);
-      $searchInput = $$1('.generic-search-input', $container);
-      $classFilterInput = $$1('.class-filter', $container);
-      $classTreeContainer = $$1('.class-tree', $container);
-      $classFilterContainer = $$1('.class-filter-container', $container);
-      $searchButton.on('click', search);
-      $clearButton.on('click', clear);
-      var shortcuts = shortcutRegistry($searchInput);
+      controls = {
+        $searchButton: $$1('.btn-search', $container),
+        $clearButton: $$1('.btn-clear', $container),
+        $searchInput: $$1('.generic-search-input', $container),
+        $classFilterInput: $$1('.class-filter', $container),
+        $classTreeContainer: $$1('.class-tree', $container),
+        $classFilterContainer: $$1('.class-filter-container', $container),
+        $filtersContainer: $$1('.filters-container', $container),
+        $contentArea: $$1('.content-area', $container),
+        $contentToolbar: $$1('.content-toolbar', $container)
+      };
+      controls.$searchButton.on('click', search);
+      controls.$clearButton.on('click', clear);
+      const shortcuts = shortcutRegistry(controls.$searchInput);
       shortcuts.clear().add('enter', search);
-      $searchInput.val(instance.config.criterias && instance.config.criterias.search ? instance.config.criterias.search : '');
+      controls.$searchInput.val(instance.config.criterias && instance.config.criterias.search ? instance.config.criterias.search : '');
     }
-    /**
-     * Sets required listeners to properly manage resourceSelector visualization
-     */
-
 
+    /**
+     * Sets required listeners to properly manage resourceSelector visualization
+     */
     function setResourceSelectorUIBehaviour() {
-      $container.on('mousedown', function () {
-        $classTreeContainer.hide();
+      $container.on('mousedown', () => {
+        controls.$classTreeContainer.hide();
       });
-      /**
-       * Pressing space, enter, esc, backspace
-       * on class filter input will toggle resource selector
-       */
 
-      var shortcuts = shortcutRegistry($classFilterInput);
-      shortcuts.add('enter', function () {
-        return $classTreeContainer.show();
-      });
-      shortcuts.add('space', function () {
-        return $classTreeContainer.show();
-      });
-      shortcuts.add('backspace', function () {
-        return $classTreeContainer.hide();
-      });
-      shortcuts.add('escape', function () {
-        return $classTreeContainer.hide();
-      }, {
+      /**
+       * Pressing space, enter, esc, backspace
+       * on class filter input will toggle resource selector
+       */
+      const shortcuts = shortcutRegistry(controls.$classFilterInput);
+      shortcuts.add('enter', () => controls.$classTreeContainer.show());
+      shortcuts.add('space', () => controls.$classTreeContainer.show());
+      shortcuts.add('backspace', () => controls.$classTreeContainer.hide());
+      shortcuts.add('escape', () => controls.$classTreeContainer.hide(), {
         propagate: false
       });
-      /**
-       * clicking on class filter container will toggle resource selector
-       */
 
-      $classFilterContainer.on('click', function (e) {
-        $classTreeContainer.toggle();
-      });
-      /**
-       * clicking on class filter container will
-       * stopPropagation to prevent be closed
-       * by searchModal.mouseDown listener
+      /**
+       * clicking on class filter container will toggle resource selector
        */
+      controls.$classFilterContainer.on('click', e => {
+        controls.$classTreeContainer.toggle();
+      });
 
-      $classFilterContainer.on('mousedown', function (e) {
+      /**
+       * clicking on class filter container will
+       * stopPropagation to prevent be closed
+       * by searchModal.mouseDown listener
+       */
+      controls.$classFilterContainer.on('mousedown', e => {
         e.stopPropagation();
-      }); // clicking on resource selector will stopPropagation to prevent be closed by searchModal.mouseDown listener
+      });
 
-      $classTreeContainer.on('mousedown', function (e) {
+      // clicking on resource selector will stopPropagation to prevent be closed by searchModal.mouseDown listener
+      controls.$classTreeContainer.on('mousedown', e => {
         e.stopPropagation();
       });
     }
-    /**
-     * Loads search store so it is accessible in the component
-     * @returns {Promise}
-     */
-
 
-    function initSearchStore() {
-      return store('search').then(function (store) {
-        searchStore = store;
-      }).catch(function (e) {
-        return instance.trigger('error', e);
-      });
+    /**
+     * Loads search store so it is accessible in the component
+     * @returns {Promise}
+     */
+    function initStores() {
+      return Promise.all([store('search').then(store => searchStore = store), store('selectedColumns').then(store => selectedColumnsStore = store)]).catch(e => instance.trigger('error', e));
     }
-    /**
-     * Request search results and manages its results
+
+    /**
+     * Performs a search query
+     * @param query - The searched terms
+     * @param classFilterUri - The URI of the node class
+     * @param [params] - Additional parameters
+     * @returns {Promise}
      */
+    const searchQuery = function (query, classFilterUri) {
+      let params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      return new Promise((resolve, reject) => {
+        $$1.ajax({
+          url: instance.config.url,
+          type: 'POST',
+          data: _objectSpread2(_objectSpread2({}, params), {}, {
+            query: query,
+            parentNode: classFilterUri,
+            structure: context.shownStructure
+          }),
+          dataType: 'json'
+        }).done(resolve).fail(reject);
+      });
+    };
 
+    /**
+     * Performs the search query, preventing to send too many requests
+     * @param query - The searched terms
+     * @param classFilterUri - The URI of the node class
+     * @param [params] - Additional parameters
+     */
+    const searchHandler = function (query, classFilterUri) {
+      let params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      if (running === false) {
+        running = true;
+        searchQuery(query, classFilterUri, params).then(data => data.data).then(buildDataModel).then(filterSelectedColumns).then(appendDefaultDatasetToDatatable).then(buildSearchResultsDatatable).catch(e => instance.trigger('error', e)).then(() => running = false);
+      }
+    };
 
+    /**
+     * Request search results and manages its results
+     */
     function search() {
-      var query = buildComplexQuery();
-      var classFilterUri = isResourceSelector ? $classFilterInput.data('uri').trim() : rootClassUri; //throttle and control to prevent sending too many requests
-
-      var searchHandler = _.throttle(function (query) {
-        if (running === false) {
-          running = true;
-          $$1.ajax({
-            url: instance.config.url,
-            type: 'POST',
-            data: {
-              query: query,
-              parentNode: classFilterUri,
-              structure: context.shownStructure
-            },
-            dataType: 'json'
-          }).done(function (data) {
-            appendDefaultDatasetToDatatable(data.data).then(function () {
-              return buildSearchResultsDatatable(data.data);
-            }).catch(function (e) {
-              return instance.trigger('error', e);
-            });
-          }).always(function () {
-            return running = false;
-          });
-        }
-      }, 100);
-
-      searchHandler(query);
+      searchHandler(buildComplexQuery(), getClassFilterUri());
     }
-    /**
-     * build final complex query appending every filter
-     */
 
+    /**
+     * Returns selected class filter of rootClassUri
+     */
+    function getClassFilterUri() {
+      return isResourceSelector ? controls.$classFilterInput.data('uri').trim() : rootClassUri;
+    }
 
+    /**
+     * build final complex query appending every filter
+     */
     function buildComplexQuery() {
-      var $searchInputValue = $searchInput.val().trim();
-      var query = $searchInputValue;
+      let query = controls.$searchInput.val().trim();
       query += advancedSearch.getAdvancedCriteriaQuery(query !== '');
       return query;
     }
-    /*
-     * If search on init is not required, extends data with stored dataset
-     * @param {object} data - search configuration including model and endpoint for datatable
-     * @returns {Promise}
-     */
-
 
+    /*
+     * If search on init is not required, extends data with stored dataset
+     * @param {object} data - search configuration including model and endpoint for datatable
+     * @returns {Promise}
+     */
     function appendDefaultDatasetToDatatable(data) {
       return new Promise(function (resolve, reject) {
         // If no search on init, get dataset from searchStore
         if (instance.config.searchOnInit === false) {
-          searchStore.getItem('results').then(function (storedSearchResults) {
+          Promise.all([searchStore.getItem('results'), searchStore.getItem('options')]).then(fromStore => {
             instance.config.searchOnInit = true;
-            data.storedSearchResults = storedSearchResults;
-            resolve();
-          }).catch(function (e) {
-            instance.trigger('error', e);
-            reject(new Error('Error appending default dataset from searchStore to datatable'));
+            data.storedSearchResults = fromStore[0];
+            data.storedSearchOptions = fromStore[1];
+            resolve(data);
+          }).catch(e => {
+            reject(new Error('Error appending default dataset from searchStore to datatable', {
+              cause: e
+            }));
           });
         } else {
-          resolve();
+          resolve(data);
         }
       });
     }
-    /**
-     * Creates a datatable with search results
-     * @param {object} data - search configuration including model and endpoint for datatable
+
+    /**
+     * Replaces empty value by a placeholder.
+     * @param value
+     * @returns {string|*}
      */
+    const emptyValueTransform = value => {
+      let testedValue = value;
+      if (Array.isArray(testedValue)) {
+        testedValue = testedValue[0];
+      }
+      if ('string' === typeof testedValue) {
+        testedValue = testedValue.trim();
+      }
+      return testedValue === '' || testedValue === null || typeof testedValue === 'undefined' ? '-' : value;
+    };
 
+    /**
+     * Refines the columns to be compatible with the datatable model
+     * @param {object[]} columns
+     * @returns {object[]}
+     */
+    function columnsToModel(columns) {
+      if (!Array.isArray(columns)) {
+        return [];
+      }
+      return columns.map(column => {
+        const {
+          id,
+          sortId,
+          label,
+          sortable,
+          isDuplicated
+        } = column;
+        let alias, comment, classLabel;
+        if (isDuplicated) {
+          alias = column.alias;
+          classLabel = column.classLabel; // needed by the property selector
+          comment = column.classLabel; // needed by the datatable
+        }
 
-    function buildSearchResultsDatatable(data) {
-      //update the section container
-      var $tableContainer = $$1('<div class="flex-container-full"></div>');
-      var section = $$1('.content-container', $container);
-      section.empty();
-      section.append($tableContainer);
-      $tableContainer.on('load.datatable', searchResultsLoaded); //create datatable
+        return {
+          id,
+          sortId,
+          label,
+          alias,
+          classLabel,
+          comment,
+          sortable,
+          transform: emptyValueTransform
+        };
+      });
+    }
+
+    /**
+     * Refines the data model for the datatable
+     * @param {object} data - search configuration including model and endpoint for datatable
+     * @returns {object} The data configuration refined with the data model for the datatrable
+     */
+    function buildDataModel(data) {
+      //save availableColumns to memory
+      availableIdentifiers = {};
+      availableColumns = data.settings.availableColumns;
+
+      // The support for the old data.model coming from the server has been removed from the commit
+      // https://github.com/oat-sa/tao-core-ui-fe/commit/ae6c16a9199f9fc808bc8a37d2ddfce437a62e9c
+      // The data model is now coming from the settings carried on by the searchParams request.
+      data.model = columnsToModel(availableColumns);
+      data.model.forEach(column => availableIdentifiers[column.id] = true);
+
+      // adjust the default sorting and pagination
+      let {
+        sortby,
+        sortorder,
+        page
+      } = instance.config;
+      if (!sortorder || !['asc', 'desc'].includes(sortorder)) {
+        sortorder = 'asc';
+      }
+      const sortIdentifiers = [];
+      data.model.forEach(column => {
+        sortIdentifiers.push(column.sortId || column.id);
+        if (column.sortId && column.id === sortby) {
+          sortby = column.sortId;
+        }
+      });
+      if (!sortIdentifiers.includes(sortby)) {
+        // unknown sort identifier is rejected for safety
+        sortby = void 0;
+        sortorder = void 0;
+      }
+      data.pageConfig = {
+        sortby,
+        sortorder,
+        page
+      };
+      dataCache = _.cloneDeep(data);
+      return data;
+    }
+
+    /**
+     * Filters datatble model based on stored selected columns
+     * @param {Object} data data containing available columns and model for datatable
+     * @returns {Promise} promise which resolves with filtered data.model
+     */
+    function filterSelectedColumns(data) {
+      return selectedColumnsStore.getItem(rootClassUri).then(storedSelectedColumnIds => {
+        selectedColumns = [];
+        if (storedSelectedColumnIds && storedSelectedColumnIds.length) {
+          storedSelectedColumnIds.forEach(id => {
+            if (availableIdentifiers[id]) {
+              selectedColumns.push(id);
+            }
+          });
+        }
+        if (!selectedColumns.length) {
+          selectedColumns = data.settings.availableColumns.reduce((acc, column) => {
+            if (column.default) {
+              acc.push(column.id);
+            }
+            return acc;
+          }, []);
+        }
+        data.model = data.model.filter(column => selectedColumns.includes(column.id));
+        return data;
+      }).catch(e => {
+        instance.trigger('error', e);
+      });
+    }
 
+    /**
+     * Creates a datatable with search results
+     * @param {object} data - search configuration including model and endpoint for datatable
+     */
+    function buildSearchResultsDatatable(data) {
+      // Note: the table container needs to be recreated because datatable is storing data in it.
+      // Keeping the table container introduces a DOM pollution.
+      // It is faster and cleaner to recreate the container than cleaning it explicitly.
+      const $tableContainer = $$1(resultsContainerTpl());
+      const $contentContainer = controls.$contentArea.empty();
+      $contentContainer.append($tableContainer);
+      $tableContainer.on('load.datatable', searchResultsLoaded);
+      const {
+        sortby,
+        sortorder,
+        page
+      } = data.storedSearchOptions || data.pageConfig;
+
+      //create datatable
       $tableContainer.datatable({
         url: data.url,
-        model: _.values(data.model),
+        model: data.model,
+        sortby,
+        sortorder,
+        page,
         labels: {
           actions: ''
         },
@@ -585,64 +771,163 @@ define(['jquery', 'lodash', 'i18n', 'context', 'handlebars', 'lib/dompurify/puri
         }
       }, data.storedSearchResults);
     }
-    /**
-     * Triggered on load.datatable event, it updates searchStore and manages possible exceptions
-     * @param {object} e - load.datatable event
-     * @param {object} dataset - datatable dataset
-     */
+    function getTableOptions() {
+      const $tableContainer = $$1('.results-container', $container);
+      return _.cloneDeep($tableContainer.data('ui.datatable') || {});
+    }
 
+    /**
+     * Filters data from cache by selected and recreates datatable
+     * @params {object} options - Additional options to be given to the datatable
+     */
+    function recreateDatatable() {
+      let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      const data = Object.assign(_.cloneDeep(dataCache), options);
+      filterSelectedColumns(data).then(buildSearchResultsDatatable);
+    }
 
+    /**
+     * Triggered on load.datatable event, it updates searchStore and manages possible exceptions
+     * @param {object} e - load.datatable event
+     * @param {object} dataset - datatable dataset
+     */
     function searchResultsLoaded(e, dataset) {
+      const $contentToolbar = controls.$contentToolbar.empty();
+      if (instance.isAdvancedSearchEnabled()) {
+        const $manageColumnsBtn = $$1(propertySelectButtonTpl());
+        $contentToolbar.append($manageColumnsBtn);
+        $manageColumnsBtn.on('click', handleManageColumnsBtnClick);
+      }
+      const {
+        sortby,
+        sortorder
+      } = getTableOptions();
       if (dataset.records === 0) {
         replaceSearchResultsDatatableWithMessage('no-matches');
       }
-
-      instance.trigger("datatable-loaded");
+      instance.trigger('datatable-loaded');
       updateSearchStore({
         action: 'update',
-        dataset: dataset,
+        dataset,
+        options: {
+          sortby,
+          sortorder
+        },
         context: context.shownStructure,
         criterias: {
-          search: $searchInput.val(),
+          search: controls.$searchInput && controls.$searchInput.val(),
           class: isResourceSelector ? _.map(resourceSelector.getSelection(), 'uri')[0] : rootClassUri,
           advancedCriteria: advancedSearch.getState()
         }
       });
     }
-    /**
-     * Updates searchStore. If action is 'clear', searchStore is claread. If not, received
-     * data is assigned to searchStore. Once all actions have been done,
-     * store-updated event is triggered
-     * @param {object} data - data to store
-     */
 
+    /**
+     * Handler for manage columns button click
+     * @param {Event} e
+     */
+    function handleManageColumnsBtnClick(e) {
+      const selected = selectedColumns;
+      const available = columnsToModel(availableColumns);
+      if (!propertySelectorInstance) {
+        const {
+          bottom: btnBottom,
+          right: btnRight
+        } = this.getBoundingClientRect();
+        const {
+          top: containerTop,
+          right: containerRight
+        } = $container.get(0).getBoundingClientRect();
+        const position = {
+          top: btnBottom - containerTop,
+          right: containerRight - btnRight
+        };
+        propertySelectorInstance = propertySelectorFactory({
+          renderTo: $container,
+          data: {
+            position,
+            available,
+            selected
+          }
+        });
+        propertySelectorInstance.on('select', selection => {
+          if (selection.length !== selectedColumns.length || selection.some(columnId => !selectedColumns.includes(columnId))) {
+            //update table
+            selectedColumns = selection;
+            const {
+              sortby,
+              sortorder,
+              page
+            } = getTableOptions();
+            updateSelectedStore({
+              selection,
+              sortby,
+              sortorder,
+              page
+            });
+          }
+        });
+      } else {
+        propertySelectorInstance.setData({
+          available,
+          selected
+        });
+        propertySelectorInstance.toggle();
+      }
+    }
 
+    /**
+     * Updates searchStore. If action is 'clear', searchStore is claread. If not, received
+     * data is assigned to searchStore. Once all actions have been done,
+     * store-updated event is triggered
+     * @param {object} data - data to store
+     */
     function updateSearchStore(data) {
-      var promises = [];
-
+      const promises = [];
       if (data.action === 'clear') {
         promises.push(searchStore.clear());
       } else if (data.action === 'update') {
         promises.push(searchStore.setItem('criterias', data.criterias));
         promises.push(searchStore.setItem('context', data.context));
+        promises.push(searchStore.setItem('options', data.options));
         promises.push(data.dataset.records === 0 ? searchStore.removeItem('results') : searchStore.setItem('results', data.dataset));
       }
-
-      Promise.all(promises).then(function () {
-        return instance.trigger("store-updated");
-      }).catch(function (e) {
-        return instance.trigger('error', e);
-      });
+      Promise.all(promises).then(() => instance.trigger('store-updated')).catch(e => instance.trigger('error', e));
     }
-    /**
-     * Clear search input, criteria and results from both, view and store.
-     * Also sets every criterion on criteriaState to unredered and
-     * undefined value
-     */
 
+    /**
+     *
+     * @param {object} update - The changed configuration
+     * @param {Array<string>} update.selection - array of column ids to display
+     * @param {string} update.sortby - The sorted column
+     * @param {string} update.sortorder - The sort order
+     * @param {number} update.page - The current page
+     * @returns
+     */
+    function updateSelectedStore() {
+      let {
+        selection = [],
+        sortby = 'id',
+        sortorder = 'asc',
+        page = 1
+      } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      const storedSearchOptions = {
+        sortby,
+        sortorder,
+        page
+      };
+      return selectedColumnsStore.setItem(rootClassUri, selection).then(() => instance.trigger('selected-store-updated', {
+        storedSearchOptions
+      })).catch(e => instance.trigger('error', e));
+    }
 
+    /**
+     * Clear search input, criteria and results from both, view and store.
+     * Also sets every criterion on criteriaState to unredered and
+     * undefined value
+     */
     function clear() {
-      $searchInput.val('');
+      controls.$searchInput.val('');
       advancedSearch.clear();
       isResourceSelector && resourceSelector.select(rootClassUri);
       replaceSearchResultsDatatableWithMessage('no-query');
@@ -650,18 +935,14 @@ define(['jquery', 'lodash', 'i18n', 'context', 'handlebars', 'lib/dompurify/puri
         action: 'clear'
       });
     }
-    /**
-     * Removes datatable container and displays a message instead
-     * @param {string} reason - reason why datatable is not rendered, to display appropiate message
-     */
-
 
+    /**
+     * Removes datatable container and displays a message instead
+     * @param {string} reason - reason why datatable is not rendered, to display appropiate message
+     */
     function replaceSearchResultsDatatableWithMessage(reason) {
-      var section = $$1('.content-container', $container);
-      section.empty();
-      var message = '';
-      var icon = '';
-
+      let message = '';
+      let icon = '';
       if (reason === 'no-query') {
         message = __('Please define your search in the search panel.');
         icon = 'icon-find';
@@ -669,15 +950,15 @@ define(['jquery', 'lodash', 'i18n', 'context', 'handlebars', 'lib/dompurify/puri
         message = __('No item found. Please try other search criteria.');
         icon = 'icon-info';
       }
-
-      var infoMessage = infoMessageTpl({
-        message: message,
-        icon: icon
+      const infoMessage = infoMessageTpl({
+        message,
+        icon
       });
-      section.append(infoMessage);
-    } // return initialized instance of searchModal
-
+      controls.$contentToolbar.empty();
+      controls.$contentArea.empty().append(infoMessage);
+    }
 
+    // return initialized instance of searchModal
     return instance.init(config);
   }