@girder/core 5.0.0-beta.1 → 5.0.0-beta.2

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

@@ -0,0 +1,110 @@
+import _ from 'underscore';
+import moment from 'moment';
+
+import View from '@girder/core/views/View';
+
+import dateTimeWidgetTemplate from '@girder/core/templates/widgets/dateTimeWidget.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 a text input field to specify a date/time. The user
+ * chooses the date/time using a popup picker.
+ */
+var DateTimeWidget = View.extend({
+
+    /**
+     * @param [settings.defaultDate=false] The default date/time when not set
+     * explicitly. Set to false to have no default.
+     * @param [settings.showIcon=true] Whether to show a calendar icon beside
+     * the input field. When true, clicking the icon shows the popup. Otherwise,
+     * focusing the input field shows the popup.
+     */
+    initialize: function (settings) {
+        this.defaultDate = settings.defaultDate || false;
+        this.showIcon = _.has(settings, 'showIcon') ? settings.showIcon : true;
+    },
+
+    render: function () {
+        this.$el.html(dateTimeWidgetTemplate({
+            showIcon: this.showIcon
+        }));
+
+        this.$('.g-datetime-widget').datetimepicker({
+            showClear: true,
+            showTodayButton: true,
+            useCurrent: 'day',
+            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'
+            },
+            defaultDate: this.defaultDate
+        });
+
+        return this;
+    },
+
+    /**
+     * Set 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 Date/time to display.
+     */
+    setDate: function (date) {
+        var picker = this._picker();
+        if (_.isEmpty(date)) {
+            picker.clear();
+        } else if (_.isString(date)) {
+            var localDate = moment.utc(date).local();
+            picker.date(localDate);
+        } else {
+            picker.date(date);
+        }
+    },
+
+    /**
+     * Get the date/time as a moment object in UTC. Returns null if no date is
+     * set.
+     */
+    date: function () {
+        var picker = this._picker();
+        var date = picker.date();
+        if (date !== null) {
+            date = moment(date);
+            date.utc();
+        }
+        return date;
+    },
+
+    /**
+     * Convenience function to return the date/time as a string in UTC. Returns
+     * the empty string if no date is set.
+     */
+    dateString: function () {
+        var date = this.date();
+        if (date === null) {
+            return '';
+        }
+        return date.format();
+    },
+
+    /**
+     * Convenience function to access the datetimepicker on an element.
+     */
+    _picker: function () {
+        var picker = this.$('.g-datetime-widget').data('DateTimePicker');
+        return picker;
+    }
+});
+
+export default DateTimeWidget;

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

@@ -0,0 +1,122 @@
+import $ from 'jquery';
+import _ from 'underscore';
+
+import ApiKeyModel from '@girder/core/models/ApiKeyModel';
+import View from '@girder/core/views/View';
+import { getCurrentUser } from '@girder/core/auth';
+import { restRequest } from '@girder/core/rest';
+
+import EditApiKeyWidgetTemplate from '@girder/core/templates/widgets/editApiKeyWidget.pug';
+
+import '@girder/core/utilities/jquery/girderEnable';
+import '@girder/core/utilities/jquery/girderModal';
+
+/**
+ * This widget is used to create a new API key or edit an existing one.
+ */
+var EditApiKeyWidget = View.extend({
+    events: {
+        'submit #g-api-key-edit-form': function (e) {
+            e.preventDefault();
+
+            var fields = {
+                name: this.$('#g-api-key-name').val(),
+                tokenDuration: this.$('#g-api-key-token-duration').val(),
+                scope: null
+            };
+
+            if (this._getSelectedScopeMode() === 'custom') {
+                fields.scope = _.map(this.$('.g-custom-scope-checkbox:checked'), function (el) {
+                    return $(el).val();
+                });
+            }
+
+            this.saveModel(this.model, fields);
+
+            this.$('button.g-save-api-key').girderEnable(false);
+            this.$('.g-validation-failed-message').text('');
+        },
+
+        'change .g-scope-selection-container .radio input': function () {
+            var mode = this._getSelectedScopeMode();
+            if (mode === 'full') {
+                this.$('.g-custom-scope-checkbox').girderEnable(false)
+                    .parent().parent().girderEnable(false);
+            } else if (mode === 'custom') {
+                this.$('.g-custom-scope-checkbox').girderEnable(true)
+                    .parent().parent().girderEnable(true);
+            }
+        }
+    },
+
+    initialize: function (settings) {
+        this.model = settings.model || null;
+        this.scopeInfo = null;
+        this._shouldRender = false;
+
+        restRequest({
+            url: 'token/scopes'
+        }).done((resp) => {
+            this.scopeInfo = resp;
+            if (this._shouldRender) {
+                this._shouldRender = false;
+                this.render();
+            }
+        });
+    },
+
+    render: function () {
+        if (!this.scopeInfo) { // Wait for scope list to be fetched
+            this._shouldRender = true;
+            return;
+        }
+
+        let tokenScopes = this.scopeInfo.custom;
+        if (getCurrentUser().get('admin')) {
+            tokenScopes = tokenScopes.concat(this.scopeInfo.adminCustom);
+        }
+
+        var modal = this.$el.html(EditApiKeyWidgetTemplate({
+            apiKey: this.model,
+            tokenScopes: tokenScopes
+        })).girderModal(this).on('shown.bs.modal', () => {
+            this.$('#g-api-key-name').trigger('focus');
+        }).on('ready.girder.modal', () => {
+            if (this.model) {
+                this.$('#g-api-key-name').val(this.model.get('name'));
+                this.$('#g-api-key-token-duration').val(this.model.get('tokenDuration') || '');
+                if (this.model.get('scope')) {
+                    this.$('#g-scope-mode-custom').attr('checked', 'checked').trigger('change');
+                    this.$('.g-custom-scope-checkbox').girderEnable(true);
+                    _.each(this.model.get('scope'), function (scope) {
+                        this.$('.g-custom-scope-checkbox[value="' + scope + '"]').attr('checked', 'checked');
+                    }, this);
+                }
+            }
+        });
+        modal.trigger($.Event('ready.girder.modal', { relatedTarget: modal }));
+
+        this.$('#g-api-key-name').trigger('focus');
+
+        return this;
+    },
+
+    saveModel: function (model, fields) {
+        model = model || new ApiKeyModel();
+
+        model.set(fields);
+        model.once('g:saved', function () {
+            this.$el.modal('hide');
+            this.trigger('g:saved', model);
+        }, this).off('g:error', null, this).on('g:error', function (err) {
+            this.$('.g-validation-failed-message').text(err.responseJSON.message);
+            this.$('button.g-save-api-key').girderEnable(true);
+        }, this).save();
+    },
+
+    _getSelectedScopeMode: function () {
+        return this.$('.g-scope-selection-container .radio input:checked').attr('value');
+    }
+});
+
+export default EditApiKeyWidget;

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

@@ -0,0 +1,133 @@
+import $ from 'jquery';
+import _ from 'underscore';
+
+import View from '@girder/core/views/View';
+import { AssetstoreType } from '@girder/core/constants';
+import { handleClose, handleOpen } from '@girder/core/dialog';
+
+import EditAssetstoreWidgetTemplate from '@girder/core/templates/widgets/editAssetstoreWidget.pug';
+
+import '@girder/core/utilities/jquery/girderEnable';
+import '@girder/core/utilities/jquery/girderModal';
+
+/**
+ * This widget is used to edit an existing assetstore.
+ */
+var EditAssetstoreWidget = View.extend({
+    events: {
+        'submit #g-assetstore-edit-form': function (e) {
+            e.preventDefault();
+
+            var fields = this.fieldsMap[this.model.get('type')].get.call(this);
+            fields.name = this.$('#g-edit-name').val();
+
+            this.updateAssetstore(fields);
+
+            this.$('button.g-save-assetstore').girderEnable(false);
+            this.$('.g-validation-failed-message').text('');
+        }
+    },
+
+    initialize: function (settings) {
+        this.model = settings.model || null;
+    },
+
+    /**
+     * This maps each type of assetstore to a function to getter and setter
+     * functions. The set functions are reponsible for populating the dialog
+     * fields with the appropriate current model values, and the get functions
+     * are responsible for reading the user input values from the dialog and
+     * returning a set of fields (excluding the name field) to set on the model.
+     *
+     * This is meant to make it easy for plugins that add new assetstore types
+     * to extend this dialog to allow the setting of custom fields using whatever
+     * widgets make the most sense. By adding a new field to this object, this
+     * edit dialog can support any type of assetstore dynamically.
+     *
+     * Since the keys of this array are values defined by variables,
+     * we set them after this class rather than inline with object creation syntax.
+     */
+    fieldsMap: {},
+
+    render: function () {
+        var modal = this.$el.html(EditAssetstoreWidgetTemplate({
+            assetstore: this.model,
+            types: AssetstoreType
+        })).girderModal(this).on('shown.bs.modal', () => {
+            this.$('#g-edit-name').trigger('focus');
+            handleOpen('assetstoreedit', undefined, this.model.get('id'));
+            this.$('#g-edit-name').val(this.model.get('name'));
+            this.fieldsMap[this.model.get('type')].set.call(this);
+        }).on('hidden.bs.modal', () => {
+            handleClose('assetstoreedit', undefined, this.model.get('id'));
+        });
+        modal.trigger($.Event('ready.girder.modal', { relatedTarget: modal }));
+        return this;
+    },
+
+    updateAssetstore: function (fields) {
+        var oldfields = {};
+        var model = this.model;
+        _.each(fields, function (value, key) {
+            oldfields[key] = model.get(key);
+        });
+        this.model.set(fields);
+        this.model.on('g:saved', function () {
+            this.$el.modal('hide');
+            this.trigger('g:saved', this.model);
+        }, this).on('g:error', function (err) {
+            this.$('.g-validation-failed-message').text(err.responseJSON.message);
+            this.$('button.g-save-assetstore').girderEnable(true);
+            this.$('#g-' + err.responseJSON.field).trigger('focus');
+            this.model.set(oldfields);
+        }, this).save();
+    }
+});
+
+var fieldsMap = EditAssetstoreWidget.prototype.fieldsMap;
+
+fieldsMap[AssetstoreType.FILESYSTEM] = {
+    get: function () {
+        return {
+            root: this.$('#g-edit-fs-root').val(),
+            perms: this.$('#g-edit-fs-perms').val()
+        };
+    },
+    set: function () {
+        var permStr = this.model.get('perms') ? this.model.get('perms').toString(8) : '600';
+        this.$('#g-edit-fs-perms').val(permStr);
+        this.$('#g-edit-fs-root').val(this.model.get('root'));
+    }
+};
+
+fieldsMap[AssetstoreType.S3] = {
+    get: function () {
+        return {
+            bucket: this.$('#g-edit-s3-bucket').val(),
+            prefix: this.$('#g-edit-s3-prefix').val(),
+            accessKeyId: this.$('#g-edit-s3-access-key-id').val(),
+            secret: this.$('#g-edit-s3-secret').val(),
+            service: this.$('#g-edit-s3-service').val(),
+            region: this.$('#g-edit-s3-region').val(),
+            readOnly: this.$('#g-edit-s3-readonly').is(':checked'),
+            inferCredentials: this.$('#g-edit-s3-infercredentials').is(':checked'),
+            serverSideEncryption: this.$('#g-edit-s3-sse').is(':checked')
+        };
+    },
+    set: function () {
+        this.$('#g-edit-s3-bucket').val(this.model.get('bucket'));
+        this.$('#g-edit-s3-prefix').val(this.model.get('prefix'));
+        this.$('#g-edit-s3-access-key-id').val(this.model.get('accessKeyId'));
+        this.$('#g-edit-s3-secret').val(this.model.get('secret'));
+        this.$('#g-edit-s3-service').val(this.model.get('service'));
+        this.$('#g-edit-s3-region').val(this.model.get('region'));
+        this.$('#g-edit-s3-readonly').attr('checked',
+            this.model.get('readOnly') ? 'checked' : undefined);
+        this.$('#g-edit-s3-infercredentials').attr('checked',
+            (this.model.get('inferCredentials') ? 'checked' : undefined));
+        this.$('#g-edit-s3-sse').attr('checked',
+            (this.model.get('serverSideEncryption') ? 'checked' : undefined));
+    }
+};
+
+export default EditAssetstoreWidget;

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

@@ -0,0 +1,93 @@
+import $ from 'jquery';
+
+import CollectionModel from '@girder/core/models/CollectionModel';
+import View from '@girder/core/views/View';
+import MarkdownWidget from '@girder/core/views/widgets/MarkdownWidget';
+import { handleClose, handleOpen } from '@girder/core/dialog';
+
+import EditCollectionWidgetTemplate from '@girder/core/templates/widgets/editCollectionWidget.pug';
+
+import '@girder/core/utilities/jquery/girderEnable';
+import '@girder/core/utilities/jquery/girderModal';
+
+/**
+ * This widget is used to create a new collection or edit an existing one.
+ */
+const EditCollectionWidget = View.extend({
+    events: {
+        'submit #g-collection-edit-form': function (e) {
+            e.preventDefault();
+
+            const fields = {
+                name: this.$('#g-name').val(),
+                description: this.descriptionEditor.val()
+            };
+
+            this.descriptionEditor.saveText();
+            this.$('button.g-save-collection').girderEnable(false);
+            this.$('.g-validation-failed-message').text('');
+
+            this._saveCollection(fields)
+                .always(() => {
+                    this.$('button.g-save-collection').girderEnable(true);
+                })
+                .done(() => {
+                    this.$el.modal('hide');
+                })
+                .fail((err) => {
+                    this.$('.g-validation-failed-message').text(err.responseJSON.message);
+                    this.$('#g-' + err.responseJSON.field).trigger('focus');
+                });
+        }
+    },
+
+    initialize: function (settings) {
+        this.create = !settings.model;
+        this.model = settings.model || new CollectionModel();
+        this.descriptionEditor = new MarkdownWidget({
+            text: this.model ? this.model.get('description') : '',
+            prefix: 'collection-description',
+            placeholder: 'Enter a description',
+            enableUploads: false,
+            parentView: this
+        });
+    },
+
+    render: function () {
+        this.$el.html(EditCollectionWidgetTemplate({
+            create: this.create,
+            collection: this.model
+        }));
+        const modal = this.$el
+            .girderModal(this)
+            .on('shown.bs.modal', () => {
+                this.$('#g-name').trigger('focus');
+            })
+            .on('hidden.bs.modal', () => {
+                handleClose(this.create ? 'create' : 'edit');
+            })
+            .on('ready.girder.modal', () => {
+                if (!this.create) {
+                    this.$('#g-name').val(this.model.get('name'));
+                    this.$('#g-description').val(this.model.get('description'));
+                }
+            });
+        modal.trigger($.Event('ready.girder.modal', { relatedTarget: modal }));
+        this.descriptionEditor.setElement(this.$('.g-description-editor-container')).render();
+        this.$('#g-name').trigger('focus');
+
+        handleOpen(this.create ? 'create' : 'edit');
+
+        return this;
+    },
+
+    _saveCollection: function (fields) {
+        this.model.set(fields);
+        return this.model.save()
+            .done(() => {
+                this.trigger('g:saved', this.model);
+            });
+    }
+});
+
+export default EditCollectionWidget;

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

@@ -0,0 +1,56 @@
+import View from '@girder/core/views/View';
+import { handleClose, handleOpen } from '@girder/core/dialog';
+
+import EditFileWidgetTemplate from '@girder/core/templates/widgets/editFileWidget.pug';
+
+import '@girder/core/utilities/jquery/girderEnable';
+import '@girder/core/utilities/jquery/girderModal';
+
+/**
+ * This widget is used to edit file information.
+ */
+var EditFileWidget = View.extend({
+    events: {
+        'submit #g-file-edit-form': function () {
+            var fields = {
+                name: this.$('#g-name').val(),
+                mimeType: this.$('#g-mimetype').val()
+            };
+
+            this.file.set(fields);
+            this.file.off(null, null, this).on('g:saved', function () {
+                this.$el.modal('hide');
+                this.trigger('g:saved', this.file);
+            }, this).on('g:error', function (err) {
+                this.$('.g-validation-failed-message').text(err.responseJSON.message);
+                this.$('button.g-save-file').girderEnable(true);
+                this.$('#g-' + err.responseJSON.field).trigger('focus');
+            }, this).save();
+
+            this.$('button.g-save-file').girderEnable(false);
+            this.$('.g-validation-failed-message').empty();
+
+            return false;
+        }
+    },
+
+    initialize: function (settings) {
+        this.file = settings.file || null;
+    },
+
+    render: function () {
+        if (this.file.get('mimeType') === undefined) {
+            this.file.set('mimeType', '');
+        }
+        this.$el.html(EditFileWidgetTemplate({ file: this.file }))
+            .girderModal(this).on('shown.bs.modal', () => {
+                this.$('#g-name').trigger('select').trigger('focus');
+            }).on('hidden.bs.modal', () => {
+                handleClose('fileedit', undefined, this.file.get('_id'));
+            });
+        handleOpen('fileedit', undefined, this.file.get('_id'));
+        return this;
+    }
+});
+
+export default EditFileWidget;

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

@@ -0,0 +1,116 @@
+import $ from 'jquery';
+import _ from 'underscore';
+
+import FolderModel from '@girder/core/models/FolderModel';
+import MarkdownWidget from '@girder/core/views/widgets/MarkdownWidget';
+import View from '@girder/core/views/View';
+import { handleClose, handleOpen } from '@girder/core/dialog';
+
+import EditFolderWidgetTemplate from '@girder/core/templates/widgets/editFolderWidget.pug';
+
+import '@girder/core/utilities/jquery/girderEnable';
+import '@girder/core/utilities/jquery/girderModal';
+
+/**
+ * This widget is used to create a new folder or edit an existing one.
+ */
+var EditFolderWidget = View.extend({
+    events: {
+        'submit #g-folder-edit-form': function (e) {
+            e.preventDefault();
+            var fields = {
+                name: this.$('#g-name').val(),
+                description: this.descriptionEditor.val()
+            };
+
+            if (this.folder) {
+                this.updateFolder(fields);
+            } else {
+                this.createFolder(fields);
+            }
+
+            this.descriptionEditor.saveText();
+            this.$('button.g-save-folder').girderEnable(false);
+            this.$('.g-validation-failed-message').text('');
+        }
+    },
+
+    initialize: function (settings) {
+        this.folder = settings.folder || null;
+        this.parentModel = settings.parentModel;
+        this.descriptionEditor = new MarkdownWidget({
+            text: this.folder ? this.folder.get('description') : '',
+            prefix: 'folder-description',
+            placeholder: 'Enter a description',
+            parent: this.folder,
+            allowedExtensions: ['png', 'jpg', 'jpeg', 'gif'],
+            enableUploads: !!this.folder,
+            parentView: this
+        }).on('g:fileUploaded', function (args) {
+            this.trigger('g:fileUploaded', args);
+        }, this);
+    },
+
+    render: function () {
+        var modal = this.$el.html(EditFolderWidgetTemplate({
+            folder: this.folder
+        })).girderModal(this).on('shown.bs.modal', () => {
+            this.$('#g-name').trigger('focus');
+            if (this.folder) {
+                handleOpen('folderedit');
+            } else {
+                handleOpen('foldercreate');
+            }
+        }).on('hidden.bs.modal', () => {
+            if (this.create) {
+                handleClose('foldercreate');
+            } else {
+                handleClose('folderedit');
+            }
+        }).on('ready.girder.modal', () => {
+            if (this.folder) {
+                this.$('#g-name').val(this.folder.get('name'));
+                this.descriptionEditor.val(this.folder.get('description'));
+                this.create = false;
+            } else {
+                this.create = true;
+            }
+        });
+        modal.trigger($.Event('ready.girder.modal', { relatedTarget: modal }));
+        this.$('#g-name').trigger('focus');
+        this.descriptionEditor.setElement(
+            this.$('.g-description-editor-container')).render();
+
+        return this;
+    },
+
+    createFolder: function (fields) {
+        var folder = new FolderModel();
+        folder.set(_.extend(fields, {
+            parentType: this.parentModel.resourceName,
+            parentId: this.parentModel.get('_id')
+        }));
+        folder.on('g:saved', function () {
+            this.$el.modal('hide');
+            this.trigger('g:saved', folder);
+        }, this).on('g:error', function (err) {
+            this.$('.g-validation-failed-message').text(err.responseJSON.message);
+            this.$('button.g-save-folder').girderEnable(true);
+            this.$('#g-' + err.responseJSON.field).trigger('focus');
+        }, this).save();
+    },
+
+    updateFolder: function (fields) {
+        this.folder.set(fields);
+        this.folder.off().on('g:saved', function () {
+            this.$el.modal('hide');
+            this.trigger('g:saved', this.folder);
+        }, this).on('g:error', function (err) {
+            this.$('.g-validation-failed-message').text(err.responseJSON.message);
+            this.$('button.g-save-folder').girderEnable(true);
+            this.$('#g-' + err.responseJSON.field).trigger('focus');
+        }, this).save();
+    }
+});
+
+export default EditFolderWidget;