@girder/core 5.0.0-beta.1 → 5.0.0

package/dist-lib/src/views/widgets/BrowserWidget.js

@@ -0,0 +1,317 @@
+import $ from 'jquery';
+import _ from 'underscore';
+
+import HierarchyWidget from '@girder/core/views/widgets/HierarchyWidget';
+import RootSelectorWidget from '@girder/core/views/widgets/RootSelectorWidget';
+import View from '@girder/core/views/View';
+import CollectionModel from '@girder/core/models/CollectionModel';
+import FolderModel from '@girder/core/models/FolderModel';
+import UserModel from '@girder/core/models/UserModel';
+
+import BrowserWidgetTemplate from '@girder/core/templates/widgets/browserWidget.pug';
+
+import '@girder/core/stylesheets/widgets/browserWidget.styl';
+import '@girder/core/utilities/jquery/girderModal';
+
+/**
+ * This widget provides the user with an interface similar to a filesystem
+ * browser to pick a single user, collection, folder, or item from a
+ * hierarchical view.
+ */
+var BrowserWidget = View.extend({
+    events: {
+        'click .g-submit-button': function () {
+            this._validate();
+        }
+    },
+
+    /**
+     * Initialize the widget.
+     * @param {object} settings
+     * @param {string} [titleText="Select an item"] Text to display in the modal header
+     * @param {string} [helpText] Info text to display below the hierarchy widget
+     * @param {string} [submitText="Save"] Text to display on the submit button
+     * @param {boolean} [showItems=false] Show items in the hierarchy widget
+     * @param {boolean} [showPreview=true] Show a preview of the current object id
+     * @param {function} [validate] A validation function, which is passed the selected model as a
+        parameter, and which should return a promise. The returned promise should resolve if the
+        selection is acceptable and reject with a string value (as an error message) if the
+        selection is unacceptable.
+     * @param {object} [rootSelectorSettings] Settings passed to the root selector widget
+     * @param {boolean} [showMetadata=false] Show the metadata editor inside the hierarchy widget
+     * @param {Model} [root] The default root model to pass to the hierarchy widget
+     * @param {Model} [defaultSelectedResource] default resource item to be selected.  It will start
+     *  the browser with this item selected.  Will override the root to the parent of
+     *  the defaultSelectedResource
+     * @param {boolean} [selectItem=false] Adjust behavior to enable selecting items rather
+     *   than folders. This will add a handler to the hierarchy widget responding to
+     *   clicks on items to select a target rather than inferring it from the browsed
+     *   location.
+     * @param {object} [input=false] Settings passed to an optional text input box
+     *   The input box is primarily meant to be for a user to enter a file name
+     *   as in a "Save As" dialog.  The default (false) hides this element.
+     * @param {string} [input.label="Name"] A label for the input element.
+     * @param {string} [input.default] The default value
+     * @param {function} [input.validate] A validation function, which is passed the value of the
+        user-specified input element as a parameter, and which should return a promise. The returned
+        promise should resolve if the selection is acceptable and reject with a string value (as an
+        error message) if the selection is unacceptable.
+     * @param {string} [input.placeholder] A placeholder string for the input element.
+     * @param {boolean} [highlightItem=false] highlights the selected item in the hierarchy and scrolls to it.
+     * @param {boolean} [paginated=false] the browser widget is paginated
+     */
+    initialize: function (settings) {
+        // store options
+        settings = settings || {};
+        this.titleText = settings.titleText || 'Select an item';
+        this.validate = settings.validate || _.constant($.Deferred().resolve().promise());
+        this.helpText = settings.helpText;
+        this.showItems = settings.showItems;
+        this.showPreview = _.isUndefined(settings.showPreview) ? true : !!settings.showPreview;
+        this.submitText = settings.submitText || 'Save';
+        this.root = settings.root;
+        this.defaultSelectedResource = settings.defaultSelectedResource;
+        this.input = settings.input;
+        this.selectItem = !!settings.selectItem;
+        this.showMetadata = !!settings.showMetadata;
+        this.highlightItem = !!settings.highlightItem;
+        this.paginated = !!settings.paginated;
+        this._selected = null;
+
+        // Sets RootSelectorWidget to open properly to the root if not already set in the settings
+        if (this.defaultSelectedResource) {
+            if (!settings.rootSelectorSettings) {
+                settings.rootSelectorSettings = {};
+            }
+            if (!settings.rootSelectorSettings.selectByResource) {
+                settings.rootSelectorSettings.selectByResource = this.defaultSelectedResource;
+            }
+        }
+        // generate the root selection view and listen to it's events
+        this._rootSelectionView = new RootSelectorWidget(_.extend({
+            parentView: this
+        }, settings.rootSelectorSettings));
+        this.listenTo(this._rootSelectionView, 'g:selected', function (evt) {
+            this.root = evt.root;
+            this._renderHierarchyView();
+        });
+        if (this.defaultSelectedResource && !this.root) {
+            this._calculateDefaultSelectedRoot();
+        }
+    },
+
+    render: function () {
+        const defaultResourcename = (this.defaultSelectedResource && this.defaultSelectedResource.get('name'));
+        this.$el.html(
+            BrowserWidgetTemplate({
+                title: this.titleText,
+                help: this.helpText,
+                preview: this.showPreview,
+                submit: this.submitText,
+                input: this.input,
+                selectItem: this.selectItem,
+                defaultSelectedResource: defaultResourcename
+            })
+        ).girderModal(this);
+        this._renderRootSelection();
+        return this;
+    },
+
+    /**
+     * Return the selected model.
+     */
+    selectedModel: function () {
+        return this._selected;
+    },
+
+    _renderRootSelection: function () {
+        this._rootSelectionView.setElement(this.$('.g-hierarchy-root-container')).render();
+        this._renderHierarchyView();
+    },
+
+    _renderHierarchyView: function () {
+        if (this._hierarchyView) {
+            this.stopListening(this._hierarchyView);
+            this._hierarchyView.off();
+            this.$('.g-hierarchy-widget-container').empty();
+        }
+        if (!this.root) {
+            return;
+        }
+        this.$('.g-wait-for-root').removeClass('hidden');
+        this._hierarchyView = new HierarchyWidget({
+            el: this.$('.g-hierarchy-widget-container'),
+            parentView: this,
+            parentModel: this.root,
+            checkboxes: false,
+            routing: false,
+            showActions: false,
+            showItems: this.showItems,
+            onItemClick: _.bind(this._selectItem, this),
+            defaultSelectedResource: this.defaultSelectedResource,
+            highlightItem: this.highlightItem,
+            paginated: this.paginated,
+            showMetadata: this.showMetadata
+        });
+        this.listenTo(this._hierarchyView, 'g:setCurrentModel', this._selectModel);
+        this._selectModel();
+    },
+
+    _resetSelection: function (model) {
+        this._selected = model;
+        this.$('.g-validation-failed-message').addClass('hidden');
+        this.$('.g-selected-model').removeClass('has-error');
+        this.$('.g-input-element').removeClass('has-error');
+        this.$('#g-selected-model').val('');
+        if (this._selected) {
+            this.$('#g-selected-model').val(this._selected.get('name'));
+            if (this.highlightItem && this.selectItem) {
+                this._hierarchyView.selectItem(this._selected);
+            } else {
+                this._hierarchyView.selectFolder(this._selected);
+            }
+        }
+    },
+
+    _selectItem: function (item) {
+        if (!this.selectItem) {
+            return;
+        }
+        this._resetSelection(item);
+    },
+
+    _selectModel: function () {
+        if (this.selectItem) {
+            return;
+        }
+        this._resetSelection(this._hierarchyView.parentModel);
+    },
+
+    /**
+     * Independently validate the input-element and the selected-model.
+     */
+    _validate: function () {
+        // Validate input element
+        let inputValidation;
+        if (this.input && this.input.validate) {
+            inputValidation = this.input.validate(this.$('#g-input-element').val());
+            if (inputValidation === undefined) {
+                console.warn('Static validation is deprecated, return a promise instead');
+                inputValidation = $.Deferred().resolve().promise();
+            } else if (!_.isFunction(inputValidation.then)) {
+                console.warn('Static validation is deprecated, return a promise instead');
+                inputValidation = $.Deferred().reject(inputValidation).promise();
+            }
+        } else {
+            // No validator is implicit acceptance
+            inputValidation = $.Deferred().resolve().promise();
+        }
+
+        // Validate selected element
+        const selectedModel = this.selectedModel();
+        let selectedValidation = this.validate(selectedModel);
+        if (selectedValidation === undefined) {
+            console.warn('Static validation is deprecated, return a promise instead');
+            selectedValidation = $.Deferred().resolve().promise();
+        } else if (!_.isFunction(selectedValidation.then)) {
+            console.warn('Static validation is deprecated, return a promise instead');
+            selectedValidation = $.Deferred().reject(selectedValidation).promise();
+        }
+
+        let invalidInputElement = null;
+        let invalidSelectedModel = null;
+        // We want to wait until both promises to run to completion, which only happens if they're
+        // accepted. So, chain an extra handler on to them, which transforms a rejection into an
+        // acceptance.
+        $.when(
+            inputValidation
+                .catch((failMessage) => {
+                    // input-element is invalid
+                    invalidInputElement = failMessage;
+                    return undefined;
+                }),
+            selectedValidation
+                .catch((failMessage) => {
+                    // selected-model is invalid
+                    invalidSelectedModel = failMessage;
+                    return undefined;
+                })
+        )
+            .done(() => {
+                // Reset any previous error states
+                this.$('.g-selected-model').removeClass('has-error');
+                this.$('.g-input-element').removeClass('has-error');
+                this.$('.g-validation-failed-message').addClass('hidden').html('');
+
+                // The 4 possible outcomes of this validation are as follows...
+                //
+                // Case |  input-element  |  selected-model
+                //  1.  |      Valid      |      Valid
+                //  2.  |      Valid      |     Invalid
+                //  3.  |     Invalid     |      Valid
+                //  4.  |     Invalid     |     Invalid
+                if (!invalidInputElement && !invalidSelectedModel) {
+                    // Case 1
+                    this.root = this._hierarchyView.parentModel;
+                    this.$el.modal('hide');
+                    this.trigger('g:saved', selectedModel, this.$('#g-input-element').val());
+                } else if (!invalidInputElement && invalidSelectedModel) {
+                    // Case 2
+                    this.$('.g-selected-model').addClass('has-error');
+                    this.$('.g-validation-failed-message').removeClass('hidden').text(invalidSelectedModel);
+                } else if (invalidInputElement && !invalidSelectedModel) {
+                    // Case 3
+                    this.$('.g-input-element').addClass('has-error');
+                    this.$('.g-validation-failed-message').removeClass('hidden').text(invalidInputElement);
+                } else if (invalidInputElement && invalidSelectedModel) {
+                    // Case 4
+                    this.$('.g-selected-model').addClass('has-error');
+                    this.$('.g-input-element').addClass('has-error');
+                    this.$('.g-validation-failed-message').removeClass('hidden').html(
+                        _.escape(invalidInputElement) + '<br>' + _.escape(invalidSelectedModel));
+                }
+            });
+    },
+
+    /**
+     * If we have a defaultSelectedResource we need the root item for the hiearachyWidget
+     * This will calculate what the root item should be if one hasn't been supplied
+     */
+    _calculateDefaultSelectedRoot: function () {
+        // If we are are only using folders, the root is the defaultselectedResource then
+        if (!this.selectItem) {
+            this.root = this.defaultSelectedResource;
+            return;
+        }
+        // We need to calculate the parent model of the default.selectedResoure when selectItem is true
+        const modelTypes = {
+            folder: FolderModel,
+            collection: CollectionModel,
+            user: UserModel
+        };
+        let modelType = 'folder'; // folder type by default, other types if necessary
+        let modelId = null;
+        // If it is an item it will have a folderId associated with it as a parent item
+        if (this.defaultSelectedResource.get('folderId')) {
+            modelId = this.defaultSelectedResource.get('folderId');
+        } else if (this.defaultSelectedResource.get('parentCollection')) {
+            // Case for providing a folder as the defaultSelectedResource but want the user to select an item
+            // folder parent is either 'user' | 'folder' | 'collection', most likely folder though
+            modelType = this.defaultSelectedResource.get('parentCollection');
+            modelId = this.defaultSelectedResource.get('parentId');
+        }
+        if (modelTypes[modelType] && modelId) {
+            const parentModel = new modelTypes[modelType]();
+            parentModel.set({
+                _id: modelId
+            }).on('g:fetched', function () {
+                this.root = parentModel;
+                this.render();
+            }, this).on('g:error', function () {
+                this.render();
+            }, this).fetch();
+        }
+    }
+});
+
+export default BrowserWidget;

package/dist-lib/src/views/widgets/CheckedMenuWidget.js

@@ -0,0 +1,68 @@
+import HierarchyWidget from '@girder/core/views/widgets/HierarchyWidget';
+import View from '@girder/core/views/View';
+import { AccessType } from '@girder/core/constants';
+
+import CheckedActionsMenuTemplate from '@girder/core/templates/widgets/checkedActionsMenu.pug';
+
+import '@girder/core/utilities/jquery/girderEnable';
+
+/**
+ * This widget presents a list of available batch actions
+ * on a set of selected resources.
+ */
+var CheckedMenuWidget = View.extend({
+
+    initialize: function (params) {
+        this._fetchAndInit(params);
+        this.dropdownToggle = params.dropdownToggle;
+    },
+
+    render: function () {
+        // If nothing is checked, disable the parent element and return
+        if (this.folderCount + this.itemCount + this.pickedCount === 0) {
+            this.dropdownToggle.girderEnable(false);
+            return;
+        }
+
+        this.dropdownToggle.girderEnable(true);
+        this.$el.html(CheckedActionsMenuTemplate({
+            minFolderLevel: this.minFolderLevel,
+            minItemLevel: this.minItemLevel,
+            folderCount: this.folderCount,
+            itemCount: this.itemCount,
+            AccessType: AccessType,
+            pickedCount: this.pickedCount,
+            pickedCopyAllowed: this.pickedCopyAllowed,
+            pickedMoveAllowed: this.pickedMoveAllowed,
+            pickedDesc: this.pickedDesc,
+            HierarchyWidget: HierarchyWidget
+        }));
+
+        return this;
+    },
+
+    /**
+     * This should be called when the checkbox selection changes. It will
+     * update and re-render the checked action menu.
+     * @param minLevel The minimum access level across the checked resource set.
+     * @param folderCount The number of checked folders.
+     * @param itemCount The number of checked items.
+     */
+    update: function (params) {
+        this._fetchAndInit(params);
+        this.render();
+    },
+
+    _fetchAndInit: function (params) {
+        this.minFolderLevel = params.minFolderLevel || AccessType.READ;
+        this.minItemLevel = params.minItemLevel || AccessType.READ;
+        this.folderCount = params.folderCount || 0;
+        this.itemCount = params.itemCount || 0;
+        this.pickedCount = params.pickedCount || 0;
+        this.pickedCopyAllowed = params.pickedCopyAllowed || false;
+        this.pickedMoveAllowed = params.pickedMoveAllowed || false;
+        this.pickedDesc = params.pickedDesc || '';
+    }
+});
+
+export default CheckedMenuWidget;

package/dist-lib/src/views/widgets/CollectionInfoWidget.js

@@ -0,0 +1,40 @@
+import View from '@girder/core/views/View';
+import { formatDate, DATE_SECOND, renderMarkdown, formatSize } from '@girder/core/misc';
+
+import CollectionInfoDialogTemplate from '@girder/core/templates/widgets/collectionInfoDialog.pug';
+
+import '@girder/core/utilities/jquery/girderModal';
+
+/**
+ * This view shows a dialog containing detailed collection information.
+ */
+var CollectionInfoWidget = View.extend({
+    initialize: function () {
+        this.needToFetch = !this.model.has('nFolders');
+        if (this.needToFetch || this.timestamp !== this.model.get('updated')) {
+            this.model.once('g:fetched.details', function () {
+                this.needToFetch = false;
+                this.timestamp = this.model.get('updated');
+                this.render();
+            }, this).fetch({ extraPath: 'details' });
+        }
+    },
+
+    render: function () {
+        if (this.needToFetch) {
+            return;
+        }
+
+        this.$el.html(CollectionInfoDialogTemplate({
+            collection: this.model,
+            formatDate: formatDate,
+            formatSize: formatSize,
+            DATE_SECOND: DATE_SECOND,
+            renderMarkdown: renderMarkdown
+        })).girderModal(this);
+
+        return this;
+    }
+});
+
+export default CollectionInfoWidget;

package/dist-lib/src/views/widgets/DateTimeRangeWidget.js

@@ -0,0 +1,180 @@
+import _ from 'underscore';
+import moment from 'moment';
+
+import View from '@girder/core/views/View';
+
+import dateTimeRangeWidgetTemplate from '@girder/core/templates/widgets/dateTimeRangeWidget.pug';
+
+// Momentjs is not require()'d in the way this library expects
+// import 'eonasdan-bootstrap-datetimepicker'; // /src/js/bootstrap-datetimepicker.js'
+import 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css';
+
+/**
+ * This widget provides text input fields to specify a range of dates/times.
+ * That is, the first field specifies "from" and the second field specifies
+ * "to." The user chooses each date/time using a popup picker.
+ */
+var DateTimeRangeWidget = View.extend({
+
+    /**
+     * @param [settings.defaultFromDate=false] The default "from" date/time when
+     * not set explicitly. Set to false to have no default.
+     * @param [settings.defaultToDate=false] The default "to" date/time when not
+     * set explicitly. Set to false to have no default.
+     * @param [settings.showIcon=true] Whether to show calendar icons beside
+     * the input fields. When true, clicking the icon shows the popup. Otherwise,
+     * focusing the input field shows the popup.
+     * @param [settings.fromLabel='Start date'] The label text for the "from"
+     * input field.
+     * @param [settings.toLabel='End date'] The label text for the "to" input
+     * field.
+     */
+    initialize: function (settings) {
+        this.defaultFromDate = settings.defaultFromDate || false;
+        this.defaultToDate = settings.defaultToDate || false;
+        this.showIcon = _.has(settings, 'showIcon') ? settings.showIcon : true;
+        this.fromLabel = settings.fromLabel || 'Start date';
+        this.toLabel = settings.toLabel || 'End date';
+    },
+
+    render: function () {
+        this.$el.html(dateTimeRangeWidgetTemplate({
+            showIcon: this.showIcon,
+            fromLabel: this.fromLabel,
+            toLabel: this.toLabel
+        }));
+
+        // Link datetimepickers to disallow choosing range where "from" date is
+        // after "to" date
+
+        var options = {
+            showClear: true,
+            showTodayButton: true,
+            icons: {
+                time: 'icon-clock',
+                date: 'icon-calendar',
+                up: 'icon-up-open',
+                down: 'icon-down-open',
+                previous: 'icon-left-open',
+                next: 'icon-right-open',
+                clear: 'icon-trash',
+                close: 'icon-cancel',
+                today: 'icon-target'
+            }
+        };
+        options.useCurrent = 'day';
+        options.defaultDate = this.defaultFromDate;
+        this.$('.g-datetime-widget-from').datetimepicker(options);
+
+        options.useCurrent = false;
+        options.defaultDate = this.defaultToDate;
+        this.$('.g-datetime-widget-to').datetimepicker(options);
+
+        this.$('.g-datetime-widget-from').on('dp.change', (e) => {
+            var picker = this._picker('.g-datetime-widget-to');
+            picker.minDate(e.date);
+        });
+        this.$('.g-datetime-widget-to').on('dp.change', (e) => {
+            var picker = this._picker('.g-datetime-widget-from');
+            picker.maxDate(e.date);
+        });
+
+        return this;
+    },
+
+    /**
+     * Set "from" date/time. Argument can be an ISO 8601-formatted date string,
+     * a moment object, or a Date object. Call with null or the empty string to
+     * clear. When called with a string, the widget displays in local time.
+     *
+     * @param date From date/time to display.
+     */
+    setFromDate: function (date) {
+        this._setDate('.g-datetime-widget-from', date);
+    },
+
+    /**
+     * Set "to" date/time. Argument can be an ISO 8601-formatted date string,
+     * a moment object, or a Date object. Call with null or the empty string to
+     * clear. When called with a string, the widget displays in local time.
+     *
+     * @param date To date/time to display.
+     */
+    setToDate: function (date) {
+        this._setDate('.g-datetime-widget-to', date);
+    },
+
+    /*
+     * Convenience function to set date/time for a specified datetimepicker.
+     *
+     * @param [id] Element ID on which to access the datetimepicker.
+     */
+    _setDate: function (id, date) {
+        var picker = this._picker(id);
+        if (_.isEmpty(date)) {
+            picker.clear();
+        } else if (_.isString(date)) {
+            var localDate = moment.utc(date).local();
+            picker.date(localDate);
+        } else {
+            picker.date(date);
+        }
+    },
+
+    /**
+     * Get the "from" date/time as a moment object in UTC. Returns null if no
+     * date is set.
+     */
+    fromDate: function () {
+        return this._date('.g-datetime-widget-from');
+    },
+
+    /**
+     * Get the "to" date/time as a moment object in UTC. Returns null if no date
+     * is set.
+     */
+    toDate: function () {
+        return this._date('.g-datetime-widget-to');
+    },
+
+    /**
+     * Convenience function to return "from" the date/time as a string in UTC.
+     * Returns the empty string if no date is set.
+     */
+    fromDateString: function () {
+        return this._dateString('.g-datetime-widget-from');
+    },
+
+    /**
+     * Convenience function to return the "to" date/time as a string in UTC.
+     * Returns the empty string if no date is set.
+     */
+    toDateString: function () {
+        return this._dateString('.g-datetime-widget-to');
+    },
+
+    _picker: function (id) {
+        var picker = this.$(id).data('DateTimePicker');
+        return picker;
+    },
+
+    _date: function (id) {
+        var picker = this._picker(id);
+        var date = picker.date();
+        if (date !== null) {
+            date = moment(date);
+            date.utc();
+        }
+        return date;
+    },
+
+    _dateString: function (id) {
+        var date = this._date(id);
+        if (date === null) {
+            return '';
+        }
+        return date.format();
+    }
+});
+
+export default DateTimeRangeWidget;