@oat-sa/tao-core-ui 1.60.2 → 1.61.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;
@@ -70,24 +71,24 @@ define(['jquery', 'lodash', 'i18n', 'context', 'handlebars', 'lib/dompurify/puri
     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) {
@@ -166,15 +167,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,65 +189,114 @@ 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) {
+    // @TODO: The consumer must be responsible for supplying the routes. The component must not hardcode endpoints.
     var 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
+      maxListSize: 5,
+      sortby: 'label',
+      sortorder: 'asc'
     }; // Private properties to be easily accessible by instance methods
 
     var $container = null;
-    var $searchInput = null;
-    var $searchButton = null;
-    var $clearButton = null;
+    var controls = {};
     var running = false;
     var searchStore = null;
+    var selectedColumnsStore = null;
     var resourceSelector = null;
-    var $classFilterContainer = null;
-    var $classFilterInput = null;
-    var $classTreeContainer = null;
-    var advancedSearch = null; // resorce selector
+    var advancedSearch = null;
+    var propertySelectorInstance;
+    var availableColumns = [];
+    var availableIdentifiers = {};
+    var selectedColumns = [];
+    var dataCache; // 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
+    /**
+     * 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() {
@@ -254,33 +304,49 @@ define(['jquery', 'lodash', 'i18n', 'context', 'handlebars', 'lib/dompurify/puri
       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());
+      promises.push(initStores());
       Promise.all(promises).then(function () {
         instance.trigger('ready');
-        $searchButton.trigger('click');
+        controls.$searchButton.trigger('click');
       }).catch(function (e) {
         return 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();
+      controls = {};
     } // Creates new component
 
 
-    var instance = component({}, defaults).setTemplate(layoutTpl).on('render', renderModal).on('destroy', destroyModal);
-    /**
-     * Creates search modal
+    var instance = component({
+      /**
+       * Tells if the advanced search is enabled.
+       * @returns {boolean}
+       */
+      isAdvancedSearchEnabled: function isAdvancedSearchEnabled() {
+        return advancedSearch && advancedSearch.isEnabled();
+      }
+    }, defaults).setTemplate(layoutTpl).on('selected-store-updated', recreateDatatable).on('render', renderModal).on('destroy', destroyModal);
+    /**
+     * Creates search modal
      */
 
     function initModal() {
@@ -293,20 +359,20 @@ define(['jquery', 'lodash', 'i18n', 'context', 'handlebars', 'lib/dompurify/puri
         modalCloseClass: 'modal-close-left'
       }).focus();
     }
-    /**
-     * Inits class filter selector
+    /**
+     * Inits class filter selector
      */
 
 
     function initClassFilter() {
       return new Promise(function (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), {
+        resourceSelector = resourceSelectorFactory(controls.$classTreeContainer, {
           //set up the inner resource selector
           selectionMode: 'single',
           selectClass: true,
@@ -320,7 +386,7 @@ define(['jquery', 'lodash', 'i18n', 'context', 'handlebars', 'lib/dompurify/puri
             classOnly: true
           });
 
-          var route = urlUtil.route('getAll', 'RestResource', 'tao');
+          var route = instance.config.classesUrl;
           request(route, classOnlyParams).then(function (response) {
             if (response.permissions && response.permissions.data && response.permissions.supportedRights && response.permissions.supportedRights.length > 0) {
               manageClassTreePermissions(response);
@@ -331,9 +397,9 @@ define(['jquery', 'lodash', 'i18n', 'context', 'handlebars', 'lib/dompurify/puri
             return 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
+        /*
+         * 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 () {
@@ -343,10 +409,10 @@ define(['jquery', 'lodash', 'i18n', 'context', 'handlebars', 'lib/dompurify/puri
         }); // 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
+          /*
+           * 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;
@@ -358,13 +424,13 @@ define(['jquery', 'lodash', 'i18n', 'context', 'handlebars', 'lib/dompurify/puri
 
           var uri = _.map(selectedValue, 'uri')[0];
 
-          var route = urlUtil.route('getWithMapping', 'ClassMetadata', 'tao', {
+          var route = urlUtil.build(instance.config.classMappingUrl, {
             classUri: classUri,
             maxListSize: instance.config.maxListSize
           });
-          $classFilterInput.html(label);
-          $classFilterInput.data('uri', uri);
-          $classTreeContainer.hide();
+          controls.$classFilterInput.html(label);
+          controls.$classFilterInput.data('uri', uri);
+          controls.$classTreeContainer.hide();
           advancedSearch.updateCriteria(route).then(function () {
             return instance.trigger('criteriaListUpdated');
           }).catch(function (e) {
@@ -374,10 +440,10 @@ define(['jquery', 'lodash', 'i18n', 'context', 'handlebars', 'lib/dompurify/puri
         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
      */
 
 
@@ -398,138 +464,171 @@ 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);
+      var 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();
+        controls.$classTreeContainer.hide();
       });
-      /**
-       * Pressing space, enter, esc, backspace
-       * on class filter input will toggle resource selector
+      /**
+       * Pressing space, enter, esc, backspace
+       * on class filter input will toggle resource selector
        */
 
-      var shortcuts = shortcutRegistry($classFilterInput);
+      var shortcuts = shortcutRegistry(controls.$classFilterInput);
       shortcuts.add('enter', function () {
-        return $classTreeContainer.show();
+        return controls.$classTreeContainer.show();
       });
       shortcuts.add('space', function () {
-        return $classTreeContainer.show();
+        return controls.$classTreeContainer.show();
       });
       shortcuts.add('backspace', function () {
-        return $classTreeContainer.hide();
+        return controls.$classTreeContainer.hide();
       });
       shortcuts.add('escape', function () {
-        return $classTreeContainer.hide();
+        return controls.$classTreeContainer.hide();
       }, {
         propagate: false
       });
-      /**
-       * clicking on class filter container will toggle resource selector
+      /**
+       * clicking on class filter container will toggle resource selector
        */
 
-      $classFilterContainer.on('click', function (e) {
-        $classTreeContainer.toggle();
+      controls.$classFilterContainer.on('click', function (e) {
+        controls.$classTreeContainer.toggle();
       });
-      /**
-       * clicking on class filter container will
-       * stopPropagation to prevent be closed
-       * by searchModal.mouseDown listener
+      /**
+       * clicking on class filter container will
+       * stopPropagation to prevent be closed
+       * by searchModal.mouseDown listener
        */
 
-      $classFilterContainer.on('mousedown', function (e) {
+      controls.$classFilterContainer.on('mousedown', function (e) {
         e.stopPropagation();
       }); // clicking on resource selector will stopPropagation to prevent be closed by searchModal.mouseDown listener
 
-      $classTreeContainer.on('mousedown', function (e) {
+      controls.$classTreeContainer.on('mousedown', function (e) {
         e.stopPropagation();
       });
     }
-    /**
-     * Loads search store so it is accessible in the component
-     * @returns {Promise}
+    /**
+     * 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) {
+    function initStores() {
+      return Promise.all([store('search').then(function (store) {
+        return searchStore = store;
+      }), store('selectedColumns').then(function (store) {
+        return selectedColumnsStore = store;
+      })]).catch(function (e) {
         return 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}
+     */
+
+
+    var searchQuery = function searchQuery(query, classFilterUri) {
+      var params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      return new Promise(function (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
+     */
+
+
+    var searchHandler = function searchHandler(query, classFilterUri) {
+      var params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+      if (running === false) {
+        running = true;
+        searchQuery(query, classFilterUri, params).then(function (data) {
+          return data.data;
+        }).then(buildDataModel).then(filterSelectedColumns).then(appendDefaultDatasetToDatatable).then(buildSearchResultsDatatable).catch(function (e) {
+          return instance.trigger('error', e);
+        }).then(function () {
+          return 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(buildComplexQuery(), getClassFilterUri());
+    }
+    /**
+     * Returns selected class filter of rootClassUri
+     */
+
 
-      searchHandler(query);
+    function getClassFilterUri() {
+      return isResourceSelector ? controls.$classFilterInput.data('uri').trim() : rootClassUri;
     }
-    /**
-     * build final complex query appending every filter
+    /**
+     * build final complex query appending every filter
      */
 
 
     function buildComplexQuery() {
-      var $searchInputValue = $searchInput.val().trim();
-      var query = $searchInputValue;
+      var 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}
      */
 
 
@@ -537,36 +636,195 @@ define(['jquery', 'lodash', 'i18n', 'context', 'handlebars', 'lib/dompurify/puri
       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(function (fromStore) {
             instance.config.searchOnInit = true;
-            data.storedSearchResults = storedSearchResults;
-            resolve();
+            data.storedSearchResults = fromStore[0];
+            data.storedSearchOptions = fromStore[1];
+            resolve(data);
           }).catch(function (e) {
-            instance.trigger('error', e);
-            reject(new Error('Error appending default dataset from searchStore to datatable'));
+            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|*}
+     */
+
+
+    var emptyValueTransform = function emptyValueTransform(value) {
+      var 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(function (column) {
+        var id = column.id,
+            sortId = column.sortId,
+            label = column.label,
+            sortable = column.sortable,
+            isDuplicated = column.isDuplicated;
+        var alias, comment, classLabel;
+
+        if (isDuplicated) {
+          alias = column.alias;
+          classLabel = column.classLabel; // needed by the property selector
+
+          comment = column.classLabel; // needed by the datatable
+        }
+
+        return {
+          id: id,
+          sortId: sortId,
+          label: label,
+          alias: alias,
+          classLabel: classLabel,
+          comment: comment,
+          sortable: 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(function (column) {
+        return availableIdentifiers[column.id] = true;
+      }); // adjust the default sorting and pagination
+
+      var _instance$config = instance.config,
+          sortby = _instance$config.sortby,
+          sortorder = _instance$config.sortorder,
+          page = _instance$config.page;
+
+      if (!sortorder || !['asc', 'desc'].includes(sortorder)) {
+        sortorder = 'asc';
+      }
+
+      var sortIdentifiers = [];
+      data.model.forEach(function (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: sortby,
+        sortorder: sortorder,
+        page: 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(function (storedSelectedColumnIds) {
+        selectedColumns = [];
+
+        if (storedSelectedColumnIds && storedSelectedColumnIds.length) {
+          storedSelectedColumnIds.forEach(function (id) {
+            if (availableIdentifiers[id]) {
+              selectedColumns.push(id);
+            }
+          });
+        }
+
+        if (!selectedColumns.length) {
+          selectedColumns = data.settings.availableColumns.reduce(function (acc, column) {
+            if (column.default) {
+              acc.push(column.id);
+            }
+
+            return acc;
+          }, []);
+        }
+
+        data.model = data.model.filter(function (column) {
+          return selectedColumns.includes(column.id);
+        });
+        return data;
+      }).catch(function (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) {
-      //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
+      // 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.
+      var $tableContainer = $$1(resultsContainerTpl());
+      var $contentContainer = controls.$contentArea.empty();
+      $contentContainer.append($tableContainer);
+      $tableContainer.on('load.datatable', searchResultsLoaded);
+
+      var _ref = data.storedSearchOptions || data.pageConfig,
+          sortby = _ref.sortby,
+          sortorder = _ref.sortorder,
+          page = _ref.page; //create datatable
+
 
       $tableContainer.datatable({
         url: data.url,
-        model: _.values(data.model),
+        model: data.model,
+        sortby: sortby,
+        sortorder: sortorder,
+        page: page,
         labels: {
           actions: ''
         },
@@ -585,35 +843,126 @@ 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() {
+      var $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() {
+      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var 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) {
+      var $contentToolbar = controls.$contentToolbar.empty();
+
+      if (instance.isAdvancedSearchEnabled()) {
+        var $manageColumnsBtn = $$1(propertySelectButtonTpl());
+        $contentToolbar.append($manageColumnsBtn);
+        $manageColumnsBtn.on('click', handleManageColumnsBtnClick);
+      }
+
+      var _getTableOptions = getTableOptions(),
+          sortby = _getTableOptions.sortby,
+          sortorder = _getTableOptions.sortorder;
+
       if (dataset.records === 0) {
         replaceSearchResultsDatatableWithMessage('no-matches');
       }
 
-      instance.trigger("datatable-loaded");
+      instance.trigger('datatable-loaded');
       updateSearchStore({
         action: 'update',
         dataset: dataset,
+        options: {
+          sortby: sortby,
+          sortorder: 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) {
+      var selected = selectedColumns;
+      var available = columnsToModel(availableColumns);
+
+      if (!propertySelectorInstance) {
+        var _this$getBoundingClie = this.getBoundingClientRect(),
+            btnBottom = _this$getBoundingClie.bottom,
+            btnRight = _this$getBoundingClie.right;
+
+        var _$container$get$getBo = $container.get(0).getBoundingClientRect(),
+            containerTop = _$container$get$getBo.top,
+            containerRight = _$container$get$getBo.right;
+
+        var position = {
+          top: btnBottom - containerTop,
+          right: containerRight - btnRight
+        };
+        propertySelectorInstance = propertySelectorFactory({
+          renderTo: $container,
+          data: {
+            position: position,
+            available: available,
+            selected: selected
+          }
+        });
+        propertySelectorInstance.on('select', function (selection) {
+          if (selection.length !== selectedColumns.length || selection.some(function (columnId) {
+            return !selectedColumns.includes(columnId);
+          })) {
+            //update table
+            selectedColumns = selection;
+
+            var _getTableOptions2 = getTableOptions(),
+                sortby = _getTableOptions2.sortby,
+                sortorder = _getTableOptions2.sortorder,
+                page = _getTableOptions2.page;
+
+            updateSelectedStore({
+              selection: selection,
+              sortby: sortby,
+              sortorder: sortorder,
+              page: page
+            });
+          }
+        });
+      } else {
+        propertySelectorInstance.setData({
+          available: available,
+          selected: 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
      */
 
 
@@ -625,24 +974,60 @@ define(['jquery', 'lodash', 'i18n', 'context', 'handlebars', 'lib/dompurify/puri
       } 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");
+        return instance.trigger('store-updated');
+      }).catch(function (e) {
+        return instance.trigger('error', e);
+      });
+    }
+    /**
+     *
+     * @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() {
+      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref2$selection = _ref2.selection,
+          selection = _ref2$selection === void 0 ? [] : _ref2$selection,
+          _ref2$sortby = _ref2.sortby,
+          sortby = _ref2$sortby === void 0 ? 'id' : _ref2$sortby,
+          _ref2$sortorder = _ref2.sortorder,
+          sortorder = _ref2$sortorder === void 0 ? 'asc' : _ref2$sortorder,
+          _ref2$page = _ref2.page,
+          page = _ref2$page === void 0 ? 1 : _ref2$page;
+
+      var storedSearchOptions = {
+        sortby: sortby,
+        sortorder: sortorder,
+        page: page
+      };
+      return selectedColumnsStore.setItem(rootClassUri, selection).then(function () {
+        return instance.trigger('selected-store-updated', {
+          storedSearchOptions: storedSearchOptions
+        });
       }).catch(function (e) {
         return 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
+    /**
+     * 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,15 +1035,13 @@ 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 = '';
 
@@ -674,7 +1057,8 @@ define(['jquery', 'lodash', 'i18n', 'context', 'handlebars', 'lib/dompurify/puri
         message: message,
         icon: icon
       });
-      section.append(infoMessage);
+      controls.$contentToolbar.empty();
+      controls.$contentArea.empty().append(infoMessage);
     } // return initialized instance of searchModal