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

package/src/resourcemgr.js

@@ -1,10 +1,14 @@
 import $ from 'jquery';
 import _ from 'lodash';
 import Pluginifier from 'core/pluginifier';
+import assetSearch from 'ui/resourcemgr/assetSearch';
 import fileBrowser from 'ui/resourcemgr/fileBrowser';
 import filePreview from 'ui/resourcemgr/filePreview';
 import fileSelector from 'ui/resourcemgr/fileSelector';
+import feedback from 'ui/feedback';
 import layout from 'ui/resourcemgr/tpl/layout';
+import urlUtil from 'util/url';
+import __ from 'i18n';
 import 'ui/modal';
 import 'ui/resourcemgr/css/resourcemgr.css';
 
@@ -15,7 +19,13 @@ var defaults = {
     mediaSources: [{ root: 'local', path: '/' }],
     open: true,
     appendContainer: '.tao-scope:first',
-    title: ''
+    title: '',
+    pathParam: 'path',
+    // Advanced Search metadata filters (same endpoints as ui/searchModal)
+    rootClassUri: 'http://www.tao.lu/Ontologies/TAOMedia.rdf#Media',
+    classMappingUrl: urlUtil.route('getWithMapping', 'ClassMetadata', 'tao'),
+    statusUrl: urlUtil.route('status', 'AdvancedSearch', 'tao'),
+    maxListSize: 5
 };
 
 /**
@@ -34,7 +44,18 @@ var resourceMgr = {
      * @constructor
      * @param {Object} options - the plugin options
      * @param {Sring|Boolean} [options.bindEvent = 'click'] - the event that trigger the toggling
-     * @param {String} options.url - the URL of the service used to retrieve the resources.
+     * @param {String} [options.browseUrl] - folder browse endpoint (legacy alias: options.url)
+     * @param {String} [options.url] - legacy alias for browseUrl
+     * @param {String} [options.searchUrl] - scoped asset-search endpoint; omit for browse-only
+     * @param {Boolean} [options.browseSearchFallback=false] - client filter when searchUrl returns browse-shaped `{ children }`
+     * @param {String} [options.initialPath] - folder to open on start (within the media source tree)
+     * @param {String} [options.initialSelection] - asset URI to preselect when present in results
+     * @param {String} [options.currentAsset] - asset URI/path to resolve to parent folder + selection
+     * @param {String} [options.pathParam='path'] - query parameter name for folder/asset path
+     * @param {String} [options.rootClassUri=TAOMedia#Media] - Assets class URI for Advanced Search criteria (metadata filters)
+     * @param {String} [options.classMappingUrl] - ClassMetadata mapping endpoint for criteria list
+     * @param {String} [options.statusUrl] - Advanced Search status endpoint
+     * @param {Number} [options.maxListSize=5] - max list values per criterion in filters UI
      * @fires ResourceMgr#create.resourcemgr
      * @returns {jQueryElement} for chaining
      */
@@ -43,6 +64,9 @@ var resourceMgr = {
 
         //get options using default
         options = _.defaults(options, defaults);
+        if (!options.browseUrl && options.url) {
+            options.browseUrl = options.url;
+        }
 
         return this.each(function() {
             var $elt = $(this);
@@ -55,7 +79,10 @@ var resourceMgr = {
                 //auto bind events configured in options
                 _.functions(options).forEach(function(eventName) {
                     $elt.on(eventName + '.' + ns, function() {
-                        options[eventName].apply($elt, arguments);
+                        const live = $elt.data(dataNs);
+                        if (live && typeof live[eventName] === 'function') {
+                            live[eventName].apply($elt, arguments);
+                        }
                     });
                 });
 
@@ -74,56 +101,269 @@ var resourceMgr = {
                 $target.on('closed.modal', function() {
                     $elt.trigger('close.' + ns);
                 });
-                //initialize the components
-                const $fileBrowser = $('.file-browser .file-browser-wrapper', $target);
-                if (options.mediaSourcesUrl) {
-                    $.getJSON(options.mediaSourcesUrl)
-                        .done(function(data) {
-                            const mediaSources = data || defaults.mediaSources;
-                            for (let i = 0; i < mediaSources.length; i++) {
-                                options.root = mediaSources[i].root;
-                                options.path = mediaSources[i].path;
-                                $fileBrowser.append(
-                                    '<div class="' + options.root + '"><ul class="folders"></ul></div>'
-                                );
-                                fileBrowser(options);
-                            }
-                        })
-                        .fail(function() {
-                            for (let i = 0; i < defaults.mediaSources.length; i++) {
-                                options.root = defaults.mediaSources[i].root;
-                                options.path = defaults.mediaSources[i].path;
-                                $fileBrowser.append(
-                                    '<div class="' + options.root + '"><ul class="folders"></ul></div>'
-                                );
-                                fileBrowser(options);
-                            }
-                        });
-                } else if (options.path && options.root) {
-                    $fileBrowser.append('<div class="' + options.root + '"><ul class="folders"></ul></div>');
-                    fileBrowser(options);
+
+                options.contextToken = 1;
+                const initToken = options.contextToken;
+                $elt.data(dataNs, options);
+
+                that._resolveCurrentAssetContext(options, initToken).always(function(resolvedOptions) {
+                    const current = $elt.data(dataNs);
+                    if (!current) {
+                        return;
+                    }
+                    const ownsOpen = current.contextToken === initToken;
+                    if (!ownsOpen) {
+                        return;
+                    }
+                    $elt.data(dataNs, resolvedOptions);
+
+                    that._ensureBrowsersStarted($elt, resolvedOptions).always(function() {
+                        const latest = $elt.data(dataNs) || resolvedOptions;
+                        if (!latest._createEventEmitted) {
+                            latest._createEventEmitted = true;
+                            $elt.data(dataNs, latest);
+                            /**
+                             * The plugin have been created.
+                             * @event ResourceMgr#create.resourcemgr
+                             */
+                            $elt.trigger('create.' + ns, [latest.$target[0]]);
+                        }
+
+                        if (ownsOpen && latest.open) {
+                            that._open($elt);
+                        }
+                    });
+                });
+            } else {
+                // Reopen: consumer may pass a new currentAsset (edit/change after create).
+                that._reopenWithContext($elt, options);
+            }
+        });
+    },
+
+    /**
+     * Merge reopen options, re-resolve currentAsset, re-apply folder/selection, then open.
+     * @param {jQuery} $elt
+     * @param {Object} incoming - options from the latest .resourcemgr(…) call
+     */
+    _reopenWithContext: function($elt, incoming) {
+        const that = resourceMgr;
+        const stored = $elt.data(dataNs);
+        if (!stored) {
+            return;
+        }
+
+        if (Object.prototype.hasOwnProperty.call(incoming, 'currentAsset')) {
+            stored.currentAsset = incoming.currentAsset;
+            stored.initialPath = null;
+            stored.initialSelection = null;
+            stored.currentAssetItem = null;
+        }
+        if (incoming.params && typeof incoming.params === 'object') {
+            stored.params = Object.assign({}, stored.params || {}, incoming.params);
+        }
+        ['select', 'open', 'close'].forEach(function(key) {
+            if (typeof incoming[key] === 'function') {
+                stored[key] = incoming[key];
+            }
+        });
+
+        stored.contextToken = (stored.contextToken || 0) + 1;
+        const token = stored.contextToken;
+        $elt.data(dataNs, stored);
+
+        that._resolveCurrentAssetContext(stored, token).always(function(resolved) {
+            const current = $elt.data(dataNs);
+            if (!current || current.contextToken !== token) {
+                return;
+            }
+            $elt.data(dataNs, resolved);
+            that._ensureBrowsersStarted($elt, resolved).always(function() {
+                that._applyResolvedContext($elt, resolved);
+                that._open($elt);
+            });
+        });
+    },
+
+    /**
+     * Notify mounted browser/selector to open parent folder and (re)preselect.
+     * @param {jQuery} $elt
+     * @param {Object} options
+     */
+    _applyResolvedContext: function($elt, options) {
+        if (!options || !options.$target) {
+            return;
+        }
+        options.$target.trigger('applycontext.' + ns, [
+            {
+                path: options.initialPath || options.path || '/',
+                selection: options.initialSelection || null,
+                currentAssetItem: options.currentAssetItem || null
+            }
+        ]);
+    },
+
+    /**
+     * Resolve currentAsset via browse/search endpoint into initialPath/initialSelection.
+     * @param {Object} options
+     * @param {number} [expectedToken] - contextToken that must still match before mutating options
+     * @returns {Promise}
+     */
+    _resolveCurrentAssetContext: function(options, expectedToken) {
+        const deferred = $.Deferred();
+        const isStale = function() {
+            return typeof expectedToken !== 'undefined' && expectedToken !== null && options.contextToken !== expectedToken;
+        };
+        if (!options.currentAsset || (!options.browseUrl && !options.searchUrl)) {
+            deferred.resolve(options);
+            return deferred.promise();
+        }
+
+        const endpoint = options.browseUrl || options.searchUrl;
+        const pathParam = options.pathParam || 'path';
+        const params = Object.assign({}, options.params || {}, {
+            currentAsset: options.currentAsset
+        });
+        params[pathParam] = options.path || '/';
+
+        $.ajax({
+            url: endpoint,
+            method: 'GET',
+            dataType: 'json',
+            timeout: Number(options.ajaxTimeoutMs) > 0 ? Number(options.ajaxTimeoutMs) : 10000,
+            data: params
+        })
+            .done(function(response) {
+                if (isStale()) {
+                    deferred.resolve(options);
+                    return;
+                }
+                const payload = response && response.data ? response.data : response;
+                if (payload && payload.parentPath) {
+                    options.initialPath = payload.parentPath;
                 }
+                if (payload && payload.currentAsset && payload.currentAsset.uri) {
+                    options.initialSelection = payload.currentAsset.uri;
+                    options.currentAssetItem = payload.currentAsset;
+                } else {
+                    options.initialSelection = null;
+                    options.currentAssetItem = null;
+                }
+                deferred.resolve(options);
+            })
+            .fail(function() {
+                if (isStale()) {
+                    deferred.resolve(options);
+                    return;
+                }
+                // AC6: keep RM usable without selection; surface recoverable feedback.
+                options.initialSelection = null;
+                options.currentAssetItem = null;
+                if (options.$target && options.$target.length) {
+                    feedback(options.$target).warning(
+                        __('Unable to resolve the current asset. You can still browse and select another file.')
+                    );
+                }
+                deferred.resolve(options);
+            });
 
-                $fileBrowser.find('li.root:last').addClass('active');
-                fileSelector(options);
-                filePreview(options);
+        return deferred.promise();
+    },
 
-                /**
-                 * The plugin have been created.
-                 * @event ResourceMgr#create.resourcemgr
-                 */
-                $elt.trigger('create.' + ns, [$target[0]]);
+    /**
+     * Start browsers once and resolve when the tree wrapper is mounted.
+     * @param {jQuery} $elt
+     * @param {Object} options
+     * @returns {Promise}
+     */
+    _ensureBrowsersStarted: function($elt, options) {
+        const stored = $elt.data(dataNs) || options;
+        if (stored._browsersStartPromise) {
+            return stored._browsersStartPromise;
+        }
+
+        stored._browsersStartPromise = this._startBrowsers($elt, stored);
+        $elt.data(dataNs, stored);
+        return stored._browsersStartPromise;
+    },
+
+    /**
+     * Mount file browser / selector / search after options are ready.
+     * @param {jQuery} $elt
+     * @param {Object} options
+     */
+    _startBrowsers: function($elt, options) {
+        const $fileBrowser = $('.file-browser .file-browser-wrapper', options.$target);
+
+        const waitForTreeWrapper = function() {
+            const deferred = $.Deferred();
+            const isMounted = function() {
+                return $fileBrowser.children().length > 0;
+            };
+
+            if (isMounted()) {
+                deferred.resolve();
+                return deferred.promise();
+            }
 
-                if (options.open) {
-                    that._open($elt);
+            let attempts = 200;
+            const poll = function() {
+                if (isMounted()) {
+                    deferred.resolve();
+                    return;
                 }
-            } else {
-                options = $elt.data(dataNs);
-                if (options.open) {
-                    that._open($elt);
+                attempts -= 1;
+                if (attempts <= 0) {
+                    deferred.reject();
+                    return;
                 }
+                window.setTimeout(poll, 50);
+            };
+            poll();
+            return deferred.promise();
+        };
+
+        const finishMount = function() {
+            $fileBrowser.find('li.root:last').addClass('active');
+            fileSelector(options);
+            filePreview(options);
+            assetSearch(options);
+        };
+
+        const mountFromSources = function(mediaSources) {
+            const sources = mediaSources || defaults.mediaSources;
+            for (let i = 0; i < sources.length; i++) {
+                options.root = sources[i].root;
+                options.path = sources[i].path;
+                $fileBrowser.append('<div class="' + options.root + '"><ul class="folders"></ul></div>');
+                fileBrowser(options);
             }
-        });
+        };
+
+        const afterComponentsMounted = function() {
+            finishMount();
+            return waitForTreeWrapper();
+        };
+
+        if (options.mediaSourcesUrl) {
+            return $.getJSON(options.mediaSourcesUrl).then(
+                function(data) {
+                    mountFromSources(data || defaults.mediaSources);
+                    return afterComponentsMounted();
+                },
+                function() {
+                    mountFromSources(defaults.mediaSources);
+                    return afterComponentsMounted();
+                }
+            );
+        }
+
+        if (options.path && options.root) {
+            $fileBrowser.append('<div class="' + options.root + '"><ul class="folders"></ul></div>');
+            fileBrowser(options);
+        }
+
+        return afterComponentsMounted();
     },
 
     _createTarget: function($elt) {
@@ -136,7 +376,9 @@ var resourceMgr = {
             options.$target = $(
                 layout({
                     title: options.title || '',
-                    className: options.className || ''
+                    className: options.className || '',
+                    assetSearchInputId: options.targetId + '-asset-search',
+                    assetSearchBodyId: options.targetId + '-asset-search-body'
                 })
             );