@oat-sa/tao-core-ui 3.23.0 → 3.24.0

package/dist/resourcemgr/fileSelector.js

@@ -1,4 +1,4 @@
-define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib/handlebars/helpers', 'ui/feedback', 'context', 'ui/uploader', 'core/logger'], function ($$1, _, async, __, mimeType, Handlebars, Helpers0, feedback, context, uploader, loggerFactory) { 'use strict';
+define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib/handlebars/helpers', 'ui/feedback', 'context', 'ui/uploader', 'core/logger', 'ui/resourcemgr/assetSearchContract'], function ($$1, _, async, __, mimeType, Handlebars, Helpers0, feedback, context, uploader, loggerFactory, assetSearchContract) { 'use strict';
 
     $$1 = $$1 && Object.prototype.hasOwnProperty.call($$1, 'default') ? $$1['default'] : $$1;
     _ = _ && Object.prototype.hasOwnProperty.call(_, 'default') ? _['default'] : _;
@@ -18,12 +18,12 @@ define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib
     var Template = 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, helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression, functionType="function", self=this;
+      var buffer = "", stack1, functionType="function", escapeExpression=this.escapeExpression, helperMissing=helpers.helperMissing, self=this;
 
     function program1(depth0,data) {
       
       var buffer = "", stack1, helper;
-      buffer += "\n    <li data-type=\"";
+      buffer += "\n    <tr data-type=\"";
       if (helper = helpers.type) { stack1 = helper.call(depth0, {hash:{},data:data}); }
       else { helper = (depth0 && depth0.type); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
       buffer += escapeExpression(stack1)
@@ -48,93 +48,98 @@ define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib
       else { helper = (depth0 && depth0.viewUrl); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
       buffer += escapeExpression(stack1)
         + "\"\n        ";
-      stack1 = helpers['if'].call(depth0, ((stack1 = (depth0 && depth0.permissions)),stack1 == null || stack1 === false ? stack1 : stack1.download), {hash:{},inverse:self.noop,fn:self.program(2, program2, data),data:data});
+      stack1 = helpers['if'].call(depth0, (depth0 && depth0.location), {hash:{},inverse:self.noop,fn:self.program(2, program2, data),data:data});
       if(stack1 || stack1 === 0) { buffer += stack1; }
       buffer += "\n        ";
-      stack1 = helpers['if'].call(depth0, ((stack1 = (depth0 && depth0.permissions)),stack1 == null || stack1 === false ? stack1 : stack1.preview), {hash:{},inverse:self.noop,fn:self.program(4, program4, data),data:data});
+      stack1 = helpers['if'].call(depth0, (depth0 && depth0.updatedAt), {hash:{},inverse:self.noop,fn:self.program(4, program4, data),data:data});
       if(stack1 || stack1 === 0) { buffer += stack1; }
       buffer += "\n        ";
-      stack1 = helpers['if'].call(depth0, ((stack1 = (depth0 && depth0.permissions)),stack1 == null || stack1 === false ? stack1 : stack1.read), {hash:{},inverse:self.noop,fn:self.program(6, program6, data),data:data});
+      stack1 = helpers['if'].call(depth0, ((stack1 = (depth0 && depth0.permissions)),stack1 == null || stack1 === false ? stack1 : stack1.download), {hash:{},inverse:self.noop,fn:self.program(6, program6, data),data:data});
+      if(stack1 || stack1 === 0) { buffer += stack1; }
+      buffer += "\n        ";
+      stack1 = helpers['if'].call(depth0, ((stack1 = (depth0 && depth0.permissions)),stack1 == null || stack1 === false ? stack1 : stack1.preview), {hash:{},inverse:self.noop,fn:self.program(8, program8, data),data:data});
+      if(stack1 || stack1 === 0) { buffer += stack1; }
+      buffer += "\n        ";
+      stack1 = helpers['if'].call(depth0, ((stack1 = (depth0 && depth0.permissions)),stack1 == null || stack1 === false ? stack1 : stack1.read), {hash:{},inverse:self.noop,fn:self.program(10, program10, data),data:data});
       if(stack1 || stack1 === 0) { buffer += stack1; }
       buffer += "\n        data-alt=\"";
       if (helper = helpers.alt) { stack1 = helper.call(depth0, {hash:{},data:data}); }
       else { helper = (depth0 && depth0.alt); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
       buffer += escapeExpression(stack1)
-        + "\">\n        <span class=\"desc truncate\">";
+        + "\">\n        <td class=\"files-label\">\n            <span class=\"files-label-inner\">\n                <span class=\"file-icon\" aria-hidden=\"true\"></span>\n                <span class=\"desc truncate\">";
       if (helper = helpers.name) { stack1 = helper.call(depth0, {hash:{},data:data}); }
       else { helper = (depth0 && depth0.name); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
       buffer += escapeExpression(stack1)
-        + "</span>\n        <div class=\"actions\">\n            <div class=\"tlb\">\n                <div class=\"tlb-top\">\n                    <span class=\"tlb-box\">\n                        <span class=\"tlb-bar\">\n                            <span class=\"tlb-start\"></span>\n                            ";
-      stack1 = helpers['if'].call(depth0, ((stack1 = (depth0 && depth0.permissions)),stack1 == null || stack1 === false ? stack1 : stack1.read), {hash:{},inverse:self.noop,fn:self.program(8, program8, data),data:data});
+        + "</span>\n            </span>\n        </td>\n        <td class=\"files-location\">\n            <span class=\"meta location truncate\" title=\"";
+      if (helper = helpers.locationDisplay) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+      else { helper = (depth0 && depth0.locationDisplay); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+      buffer += escapeExpression(stack1)
+        + "\">";
+      if (helper = helpers.locationDisplay) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+      else { helper = (depth0 && depth0.locationDisplay); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+      buffer += escapeExpression(stack1)
+        + "</span>\n        </td>\n        <td class=\"files-updated\">\n            <span class=\"files-updated-inner\">\n                <span class=\"meta updated truncate\" title=\"";
+      if (helper = helpers.updatedAtDisplay) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+      else { helper = (depth0 && depth0.updatedAtDisplay); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+      buffer += escapeExpression(stack1)
+        + "\">";
+      if (helper = helpers.updatedAtDisplay) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+      else { helper = (depth0 && depth0.updatedAtDisplay); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+      buffer += escapeExpression(stack1)
+        + "</span>\n                <span class=\"row-actions\">\n                    ";
+      stack1 = helpers['if'].call(depth0, ((stack1 = (depth0 && depth0.permissions)),stack1 == null || stack1 === false ? stack1 : stack1['delete']), {hash:{},inverse:self.noop,fn:self.program(12, program12, data),data:data});
       if(stack1 || stack1 === 0) { buffer += stack1; }
-      buffer += "\n                            <span class=\"tlb-end\"></span>\n                        </span>\n                    </span>\n                </div>\n            </div>\n        </div>\n    </li>\n";
+      buffer += "\n                </span>\n            </span>\n        </td>\n    </tr>\n";
       return buffer;
       }
     function program2(depth0,data) {
       
-      
-      return " data-download=\"true\" ";
+      var buffer = "", stack1, helper;
+      buffer += " data-location=\"";
+      if (helper = helpers.location) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+      else { helper = (depth0 && depth0.location); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+      buffer += escapeExpression(stack1)
+        + "\" ";
+      return buffer;
       }
 
     function program4(depth0,data) {
       
-      
-      return " data-preview=\"true\" ";
+      var buffer = "", stack1, helper;
+      buffer += " data-updated=\"";
+      if (helper = helpers.updatedAt) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+      else { helper = (depth0 && depth0.updatedAt); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+      buffer += escapeExpression(stack1)
+        + "\" ";
+      return buffer;
       }
 
     function program6(depth0,data) {
       
       
-      return " data-select=\"true\" ";
+      return " data-download=\"true\" ";
       }
 
     function program8(depth0,data) {
       
-      var buffer = "", stack1;
-      buffer += "\n                                <span class=\"tlb-group\">\n                                    ";
-      stack1 = helpers['if'].call(depth0, ((stack1 = (depth0 && depth0.permissions)),stack1 == null || stack1 === false ? stack1 : stack1.read), {hash:{},inverse:self.noop,fn:self.program(9, program9, data),data:data});
-      if(stack1 || stack1 === 0) { buffer += stack1; }
-      buffer += "\n                                    ";
-      stack1 = helpers['if'].call(depth0, ((stack1 = (depth0 && depth0.permissions)),stack1 == null || stack1 === false ? stack1 : stack1.download), {hash:{},inverse:self.noop,fn:self.program(11, program11, data),data:data});
-      if(stack1 || stack1 === 0) { buffer += stack1; }
-      buffer += "\n                                    ";
-      stack1 = helpers['if'].call(depth0, ((stack1 = (depth0 && depth0.permissions)),stack1 == null || stack1 === false ? stack1 : stack1['delete']), {hash:{},inverse:self.noop,fn:self.program(13, program13, data),data:data});
-      if(stack1 || stack1 === 0) { buffer += stack1; }
-      buffer += "\n                                </span>\n                            ";
-      return buffer;
-      }
-    function program9(depth0,data) {
       
-      var buffer = "", helper, options;
-      buffer += "\n                                        <a href=\"#\" class=\"tlb-button-off select\" title=\""
-        + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Select this file", options) : helperMissing.call(depth0, "__", "Select this file", options)))
-        + "\"><span class=\"icon-move-item\"></span></a>\n                                    ";
-      return buffer;
+      return " data-preview=\"true\" ";
       }
 
-    function program11(depth0,data) {
+    function program10(depth0,data) {
       
-      var buffer = "", stack1, helper, options;
-      buffer += "\n                                        <a href=\"";
-      if (helper = helpers.downloadUrl) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-      else { helper = (depth0 && depth0.downloadUrl); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-      buffer += escapeExpression(stack1)
-        + "\" download=\"";
-      if (helper = helpers.name) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-      else { helper = (depth0 && depth0.name); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-      buffer += escapeExpression(stack1)
-        + "\" target=\"_blank\" class=\"tlb-button-off download\" title=\""
-        + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Download this file", options) : helperMissing.call(depth0, "__", "Download this file", options)))
-        + "\"><span class=\"icon-download\"></span></a>\n                                    ";
-      return buffer;
+      
+      return " data-select=\"true\" ";
       }
 
-    function program13(depth0,data) {
+    function program12(depth0,data) {
       
       var buffer = "", helper, options;
-      buffer += "\n                                        <a href=\"#\" class=\"tlb-button-off delete\" title=\""
+      buffer += "\n                        <a href=\"#\" class=\"delete\" title=\""
         + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Remove this file", options) : helperMissing.call(depth0, "__", "Remove this file", options)))
-        + "\"><span class=\"icon-bin\"></span></a>\n                                    ";
+        + "\" aria-label=\""
+        + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Remove this file", options) : helperMissing.call(depth0, "__", "Remove this file", options)))
+        + "\">\n                            <span class=\"icon-bin\" aria-hidden=\"true\"></span>\n                        </a>\n                    ";
       return buffer;
       }
 
@@ -213,13 +218,14 @@ define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib
      *
      * 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.
+     * Foundation, Inc., 31 Milk St # 960789 Boston, MA 02196 USA.
      *
-     * Copyright (c) 2015-2024 (original work) Open Assessment Technologies SA;
+     * Copyright (c) 2015-2026 (original work) Open Assessment Technologies SA;
      *
      */
     const ns = 'resourcemgr';
     const logger = loggerFactory(`ui/${ns}`);
+    const ROW_SELECTOR = '.files-list tr';
     function shortenPath(path) {
       let tokens = path.replace(/\/$/, '').split('/');
       let start = tokens.length - 3;
@@ -230,6 +236,65 @@ define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib
       title = title.filter(Boolean);
       return title.join('/');
     }
+
+    /**
+     * Normalize a catalog folder path for the Location column.
+     * Strips URI schemes and media-root labels (Assets/Media); keeps directory path only.
+     * @param {String} location
+     * @returns {String}
+     */
+    function formatLocationDisplay(location) {
+      if (location === null || typeof location === 'undefined' || location === '') {
+        return '';
+      }
+      let path = String(location).trim().replace(/\\/g, '/');
+      if (!path) {
+        return '';
+      }
+
+      // Drop URI schemes (taomedia://…, https://…, asset://…)
+      path = path.replace(/^[a-z][a-z0-9+.-]*:\/\//i, '');
+      // Residual host/path from http(s) after scheme strip
+      if (path.indexOf('/') > 0 && /^[^/]+\.[^/]+\//.test(path)) {
+        path = path.slice(path.indexOf('/'));
+      }
+      const segments = path.replace(/^\/+|\/+$/g, '').split('/').filter(Boolean);
+      if (!segments.length) {
+        return '/';
+      }
+
+      // Directory path only: drop trailing filename-like segment
+      const last = segments[segments.length - 1];
+      if (segments.length > 1 && /\.[a-z0-9]{1,8}$/i.test(last)) {
+        segments.pop();
+      }
+
+      // Strip media-tree root label prefix (Assets, Media, …)
+      const rootLabels = ['assets', 'media', 'mediamanager'];
+      if (segments.length && rootLabels.indexOf(segments[0].toLowerCase()) !== -1) {
+        segments.shift();
+      }
+      return segments.length ? `/${segments.join('/')}` : '/';
+    }
+
+    /**
+     * Format updatedAt as a fixed UTC date-time (YYYY-MM-DD HH:mm).
+     * @param {String} value
+     * @returns {String}
+     */
+    function formatUpdatedAtUtc(value) {
+      if (!value) {
+        return '';
+      }
+      const date = new Date(value);
+      if (Number.isNaN(date.getTime()) || date.getTime() <= 0) {
+        return '—';
+      }
+      const pad = function (n) {
+        return String(n).padStart(2, '0');
+      };
+      return `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(date.getUTCDate())} ` + `${pad(date.getUTCHours())}:${pad(date.getUTCMinutes())}`;
+    }
     function isTextLarger($element, text) {
       let $dummy = $element.clone().detach().css({
         position: 'absolute',
@@ -246,12 +311,21 @@ define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib
       let disableUpload = options.disableUpload || false;
       let $container = options.$target;
       let $fileSelector = $$1('.file-selector', $container);
-      let $fileContainer = $$1('.files', $fileSelector);
+      let $filesWrapper = $$1('.files-wrapper', $fileSelector);
+      let $fileContainer = $$1('.files-list', $fileSelector);
       let $placeholder = $$1('.empty', $fileSelector);
       let $uploader = $$1('.file-upload-container', $fileSelector);
       let parentSelector = `#${$container.attr('id')} .file-selector`;
       let $pathTitle = $fileSelector.find('h1 > .title');
-      let $browserTitle = $$1('.file-browser > h1', $container);
+      let $browserTitle = $$1('.file-browser > h1.resources-title', $container);
+      if (!$browserTitle.length) {
+        $browserTitle = $$1('.file-browser > h1', $container);
+      }
+      let searchMode = false;
+      let initialSelectionApplied = false;
+      let pendingContextSelection = null;
+      let sort = Object.assign({}, assetSearchContract.DEFAULT_SORT);
+      let lastFiles = [];
 
       //set up the uploader
       if (disableUpload) {
@@ -260,15 +334,17 @@ define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib
       } else {
         setUpUploader(root);
       }
+      $container.on(`searchmode.${ns}`, function (e, enabled) {
+        searchMode = !!enabled;
+        $fileSelector.toggleClass('search-mode', searchMode);
+      });
+
       //update current folder
       $container.on(`folderselect.${ns}`, function (e, fullPath, data, activePath, content) {
         let files;
-        data = data.map(function (dataItem) {
-          if (Array.isArray(dataItem.permissions)) {
-            updatePermissions(dataItem);
-          }
-          return dataItem;
-        });
+        if (searchMode) {
+          return;
+        }
 
         //update title
         if ($container[0].querySelector('.upload')) {
@@ -282,37 +358,217 @@ define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib
 
         //update content here
         if (_.isArray(data)) {
-          files = _.filter(data, function (item) {
+          files = _.filter(data.map(ensurePermissions), function (item) {
             return !!item.uri;
           }).map(function (file) {
-            file.type = mimeType.getFileType(file);
-            if (typeof file.identifier === 'undefined') {
-              file.display = `${fullPath}/${file.name}`.replace('//', '/');
-            } else {
-              file.display = file.identifier + file.name;
-            }
-            file.viewUrl = `${options.downloadUrl}?${$$1.param(options.params)}&${options.pathParam}=${encodeURIComponent(file.uri)}`;
-            file.downloadUrl = `${file.viewUrl}&svgzsupport=true`;
-            return file;
+            return prepareFileForDisplay(file, fullPath, activePath);
           });
-          updateFiles(fullPath, files);
-          if (activePath) {
-            $$1(`li[data-file="${activePath}"]`).trigger('click');
+          updateFiles(files);
+          if (pendingContextSelection) {
+            const pending = pendingContextSelection;
+            initialSelectionApplied = false;
+            applyInitialSelection(pending, false);
+            if (initialSelectionApplied) {
+              pendingContextSelection = null;
+            }
+            return;
           }
+          applyInitialSelection();
         }
       });
+
+      // Render scoped search results from the service as-is (no client MIME/auth filtering).
+      $container.on(`searchresults.${ns}`, function (e, result) {
+        const items = result && result.items || [];
+        const files = items.filter(function (item) {
+          return item && !!item.uri;
+        }).map(function (file) {
+          return prepareFileForDisplay(ensureSearchPermissions(file), result.path || '', result.path);
+        });
+        $pathTitle.text(__('Search results'));
+        updateFiles(files, {
+          emptyMessage: result && result.emptyMessage
+        });
+        if (!(result && result.error)) {
+          applyInitialSelection(result && result.initialSelection);
+        }
+      });
+
+      // Reopen resolve (AC3): defer preselect until folderselect loads the resolved parent folder.
+      $container.on(`applycontext.${ns}`, function (e, ctx) {
+        initialSelectionApplied = false;
+        options.initialSelection = ctx && ctx.selection ? ctx.selection : null;
+        options.currentAssetItem = ctx && ctx.currentAssetItem ? ctx.currentAssetItem : null;
+        pendingContextSelection = options.initialSelection || null;
+        $fileContainer.find('tr.active').removeClass('active');
+      });
       function injectTranscriptionMetadata(transcriptionUrl, metadataUri, resourceUri) {
         return `${transcriptionUrl}?metadataUri=${encodeURIComponent(metadataUri)}&resourceUri=${resourceUri.replace('taomedia://mediamanager/', '')}`;
       }
 
+      /**
+       * Normalize ACL flags unless they are already a boolean permission map.
+       * @param {Object} item
+       * @returns {Object}
+       */
+      function ensurePermissions(item) {
+        if (item.permissions && !Array.isArray(item.permissions) && typeof item.permissions === 'object') {
+          return item;
+        }
+        return updatePermissions(item);
+      }
+
+      /**
+       * Search results often omit ACL (indexed gateway). Missing/empty ACL must stay pickable
+       * (read/preview/download) without inventing write/delete/upload. Explicit ACL arrays and
+       * boolean maps are preserved / mapped via updatePermissions.
+       * @param {Object} item
+       * @returns {Object}
+       */
+      function ensureSearchPermissions(item) {
+        if (!item) {
+          return item;
+        }
+        if (item.permissions && !Array.isArray(item.permissions) && typeof item.permissions === 'object') {
+          return item;
+        }
+        if (!item.permissions || Array.isArray(item.permissions) && item.permissions.length === 0) {
+          item.permissions = {
+            read: true,
+            write: false,
+            preview: true,
+            download: true,
+            upload: false,
+            delete: false
+          };
+          return item;
+        }
+        return updatePermissions(item);
+      }
+
+      /**
+       * Map a service file record to the selector display model.
+       * @param {Object} file
+       * @param {String} fullPath
+       * @param {String} [folderPath]
+       * @returns {Object}
+       */
+      function prepareFileForDisplay(file, fullPath, folderPath) {
+        file.type = mimeType.getFileType(file);
+        if (typeof file.identifier === 'undefined') {
+          file.display = `${fullPath}/${file.name}`.replace('//', '/');
+        } else {
+          file.display = file.identifier + file.name;
+        }
+        file.viewUrl = `${options.downloadUrl}?${$$1.param(options.params)}&${options.pathParam || 'path'}=${encodeURIComponent(file.uri)}`;
+        file.downloadUrl = `${file.viewUrl}&svgzsupport=true`;
+        if (!file.location) {
+          file.location = folderPath || fullPath || '';
+        }
+        if (!file.updatedAt && file.updated_at) {
+          file.updatedAt = file.updated_at;
+        }
+        file.locationDisplay = formatLocationDisplay(file.location);
+        file.updatedAtDisplay = formatUpdatedAtUtc(file.updatedAt);
+        return file;
+      }
+
+      /**
+       * Sync sort classes and aria-sort on table headers.
+       */
+      function applySortHeader() {
+        $fileSelector.find('.files thead th[data-sort-by]').each(function () {
+          const $th = $$1(this);
+          const field = $th.attr('data-sort-by');
+          $th.removeClass('sorted sorted_asc sorted_desc');
+          if (field === sort.field) {
+            $th.addClass('sorted').addClass(sort.direction === 'desc' ? 'sorted_desc' : 'sorted_asc');
+            $th.attr('aria-sort', sort.direction === 'desc' ? 'descending' : 'ascending');
+          } else {
+            $th.attr('aria-sort', 'none');
+          }
+        });
+      }
+
+      /**
+       * Apply a column click to sort state and notify listeners.
+       * Skip optimistic re-sort of lastFiles (current page only) — that flashed the
+       * wrong order before browse/search refetch; updateFiles still sorts the response.
+       * @param {String} field
+       */
+      function changeSort(field) {
+        if (!field) {
+          return;
+        }
+        if (field === sort.field) {
+          sort = {
+            field,
+            direction: sort.direction === 'asc' ? 'desc' : 'asc'
+          };
+        } else {
+          sort = {
+            field,
+            direction: 'asc'
+          };
+        }
+        applySortHeader();
+        $container.trigger(`sortchange.${ns}`, [Object.assign({}, sort)]);
+      }
+
+      /**
+       * Preselect initialSelection once when the matching row is present.
+       * When resolve returned a currentAssetItem missing from the page, inject it.
+       * @param {String} [selection]
+       * @param {Boolean} [allowInject=true] - inject currentAssetItem when missing (skip during pending reopen)
+       */
+      function applyInitialSelection(selection, allowInject) {
+        const target = selection || options.initialSelection;
+        if (!target || initialSelectionApplied) {
+          return;
+        }
+        const mayInject = allowInject !== false;
+        let $item = $fileContainer.find('tr').filter(function () {
+          return $$1(this).attr('data-file') === String(target);
+        });
+        if (!$item.length && mayInject && options.currentAssetItem && String(options.currentAssetItem.uri) === String(target)) {
+          const injected = prepareFileForDisplay(ensurePermissions(Object.assign({}, options.currentAssetItem)), options.currentAssetItem.location || '', options.currentAssetItem.location || '');
+          updateFiles([injected].concat(lastFiles || []));
+          $item = $fileContainer.find('tr').filter(function () {
+            return $$1(this).attr('data-file') === String(target);
+          });
+        }
+        if ($item.length) {
+          initialSelectionApplied = true;
+          $item.first().trigger('click');
+        }
+      }
+      applySortHeader();
+      $$1(parentSelector).off('click.resourcemgr', '.files thead th[data-sort-by]').on('click.resourcemgr', '.files thead th[data-sort-by]', function (e) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        changeSort($$1(this).attr('data-sort-by'));
+      }).off('keydown.resourcemgr', '.files thead th[data-sort-by]').on('keydown.resourcemgr', '.files thead th[data-sort-by]', function (e) {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+          changeSort($$1(this).attr('data-sort-by'));
+        }
+      });
+
       //listen for file activation
-      $$1(parentSelector).off('click', '.files li').on('click', '.files li', function (e) {
+      $$1(parentSelector).off('click', ROW_SELECTOR).on('click', ROW_SELECTOR, function (e) {
+        if ($$1(e.target).closest('.row-actions').length) {
+          return;
+        }
+        if ($$1(e.target).closest('a.select, a.download, a.delete').length) {
+          return;
+        }
         const clickedItem = e.target;
         if (clickedItem.hasAttribute('data-delete') || $$1(clickedItem).hasClass('icon-bin')) {
           return;
         }
         let $selected = $$1(this);
-        let $files = $$1('.files > li', $fileSelector);
+        let $files = $$1(ROW_SELECTOR, $fileSelector);
         let data = _.clone($selected.data());
         if (options.resourceMetadataUrl && options.transcriptionMetadata && data.file.includes('taomedia://mediamanager/')) {
           data.transcriptionUrl = injectTranscriptionMetadata(options.resourceMetadataUrl, options.transcriptionMetadata, data.file);
@@ -323,9 +579,9 @@ define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib
       });
 
       //select a file
-      $$1(parentSelector).off('click', '.files li a.select').on('click', '.files li a.select', function (e) {
+      $$1(parentSelector).off('click', `${ROW_SELECTOR} a.select`).on('click', `${ROW_SELECTOR} a.select`, function (e) {
         e.preventDefault();
-        let data = _.pick($$1(this).parents('li').data(), ['file', 'type', 'mime', 'size', 'alt']);
+        let data = _.pick($$1(this).closest('tr').data(), ['file', 'type', 'mime', 'size', 'alt']);
         if (context.mediaSources && context.mediaSources.length === 0 && data.file.indexOf('local/') > -1) {
           data.file = data.file.substring(6);
         }
@@ -333,7 +589,7 @@ define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib
       });
 
       //delete a file
-      $$1(parentSelector).off('click', '.files li a.delete').on('click', '.files li a.delete', function (e) {
+      $$1(parentSelector).off('click', `${ROW_SELECTOR} a.delete`).on('click', `${ROW_SELECTOR} a.delete`, function (e) {
         // This function replaces ui/deleter and must follow the same logic.
         // The main difference is that it insert a confirmation dialog before deleting the file.
         e.preventDefault();
@@ -341,7 +597,7 @@ define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib
         if ($elt.hasClass(options.disableClass)) {
           return;
         }
-        const $target = $elt.closest('li');
+        const $target = $elt.closest('tr');
         const path = $target.data('file');
         const hooks = [];
         if (options.hooks && 'function' === typeof options.hooks.deleteFile) {
@@ -364,7 +620,7 @@ define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib
           params = {};
         if (e.namespace === 'deleter' && $target.length) {
           path = $target.data('file');
-          params[options.pathParam] = path;
+          params[options.pathParam || 'path'] = path;
           $$1.getJSON(options.deleteUrl, _.merge(params, options.params), function (response) {
             if (response.deleted) {
               $container.trigger(`filedelete.${ns}`, [path]);
@@ -380,7 +636,7 @@ define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib
           $container.trigger(`filenew.${ns}`, [result, currentPath]);
         });
         $uploader.on('fail.uploader', function (e, file, err) {
-          errors.push(__('Unable to upload file %s : %s', file.name, err.message));
+          errors.push(__('Unable to upload file %s : %s', _.escape(file && file.name), _.escape(err && err.message)));
         });
         $uploader.on('end.uploader', function () {
           if (errors.length === 0) {
@@ -396,11 +652,11 @@ define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib
         $uploader.uploader({
           upload: true,
           multiple: true,
-          uploadUrl: `${options.uploadUrl}?${$$1.param(options.params)}&${options.pathParam}=${currentPath}`,
+          uploadUrl: `${options.uploadUrl}?${$$1.param(options.params)}&${options.pathParam || 'path'}=${currentPath}`,
           fileSelect: function (files, done) {
             let givenLength = files.length;
             let fileNames = [];
-            $fileContainer.find('li > .desc').each(function () {
+            $fileContainer.find('.desc').each(function () {
               fileNames.push($$1(this).text().toLowerCase());
             });
 
@@ -434,7 +690,7 @@ define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib
               if (options.fileExistsUrl) {
                 let pathParam = `${currentPath}/${file.name}`;
                 pathParam.replace('//', '/');
-                $$1.getJSON(`${options.fileExistsUrl}?${$$1.param(options.params)}&${options.pathParam}=${pathParam}`, function (response) {
+                $$1.getJSON(`${options.fileExistsUrl}?${$$1.param(options.params)}&${options.pathParam || 'path'}=${pathParam}`, function (response) {
                   if (response && response.exists === true) {
                     //eslint-disable-next-line no-alert
                     result = window.confirm(__('Do you want to override "%s"?', file.name));
@@ -455,22 +711,26 @@ define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib
         $container.on(`folderselect.${ns}`, function (e, fullPath, data, uri) {
           currentPath = uri;
           $uploader.uploader('options', {
-            uploadUrl: `${options.uploadUrl}?${$$1.param(options.params)}&${options.pathParam}=${currentPath}&relPath=${currentPath}`
+            uploadUrl: `${options.uploadUrl}?${$$1.param(options.params)}&${options.pathParam || 'path'}=${currentPath}&relPath=${currentPath}`
           });
         });
         function setUploadMode(enableUploadMode) {
           if (!enableUploadMode) {
             isUploadMode = false;
+            $fileSelector.removeClass('upload-mode');
             $uploader.hide();
+            $filesWrapper.show();
             $fileContainer.show();
             // Note: show() would display as inline, not inline-block!
             $switcher.filter('.upload').css({
               display: 'inline-block'
             });
             $switcher.filter('.listing').hide();
-            $browserTitle.text(__('Browse folders:'));
+            $browserTitle.text(__('Resources'));
           } else {
             isUploadMode = true;
+            $fileSelector.addClass('upload-mode');
+            $filesWrapper.hide();
             $fileContainer.hide();
             $placeholder.hide();
             $uploader.show();
@@ -494,15 +754,25 @@ define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib
         });
         setUploadMode(isUploadMode);
       }
-      function updateFiles(path, files) {
+      function updateFiles(files, updateOptions) {
+        const displayOptions = updateOptions || {};
+        const emptyLabel = displayOptions.emptyMessage || __('No files');
+        lastFiles = Array.isArray(files) ? files.slice() : [];
+        const sorted = assetSearchContract.sortAssetItems(lastFiles, sort);
         $fileContainer.empty();
-        if (files.length) {
+        if (sorted.length) {
           $placeholder.hide();
+          $filesWrapper.show();
           $fileContainer.append(fileSelectTpl({
-            files: files
+            files: sorted
           }));
-        } else if ($fileContainer.css('display') !== 'none') {
-          $placeholder.show();
+        } else if ($fileSelector.find('.asset-search-error:not([hidden])').length === 0) {
+          $filesWrapper.hide();
+          // Stylesheet defaults `.empty` to display:none; force visible for empty states.
+          $placeholder.text(emptyLabel).css('display', 'block');
+        } else {
+          $filesWrapper.hide();
+          $placeholder.hide();
         }
       }
     }