@girder/core 5.0.0-beta.1 → 5.0.0

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

@@ -0,0 +1,125 @@
+import $ from 'jquery';
+
+import GroupModel from '@girder/core/models/GroupModel';
+import View from '@girder/core/views/View';
+import { getCurrentUser } from '@girder/core/auth';
+import { handleClose, handleOpen } from '@girder/core/dialog';
+
+import EditGroupWidgetTemplate from '@girder/core/templates/widgets/editGroupWidget.pug';
+
+import '@girder/core/utilities/jquery/girderModal';
+
+/**
+ * This widget is used to create a new group or edit an existing one.
+ */
+var EditGroupWidget = View.extend({
+    events: {
+        'submit #g-group-edit-form': function (e) {
+            e.preventDefault();
+
+            var fields = {
+                name: this.$('#g-name').val(),
+                description: this.$('#g-description').val(),
+                public: this.$('#g-access-public').is(':checked')
+            };
+            if (this.$('#g-add-to-group').length) {
+                fields.addAllowed = this.$('#g-add-to-group').val();
+            }
+
+            if (this.model) {
+                this.updateGroup(fields);
+            } else {
+                this.createGroup(fields);
+            }
+
+            this.$('button.g-save-group').girderEnable(false);
+            this.$('.g-validation-failed-message').text('');
+        },
+
+        'change .g-public-container .radio input': 'privacyChanged'
+    },
+
+    initialize: function (settings) {
+        this.model = settings.model || null;
+    },
+
+    render: function () {
+        var pub = this.model ? this.model.get('public') : false;
+        var groupAddAllowed;
+        var addToGroupPolicy = this.model ? this.model.get('_addToGroupPolicy') : null;
+        if (getCurrentUser().get('admin')) {
+            if (addToGroupPolicy === 'nomod' || addToGroupPolicy === 'yesmod') {
+                groupAddAllowed = 'mod';
+            } else if (addToGroupPolicy === 'noadmin' || addToGroupPolicy === 'yesadmin') {
+                groupAddAllowed = 'admin';
+            }
+        }
+        var modal = this.$el.html(EditGroupWidgetTemplate({
+            group: this.model,
+            publicFlag: pub,
+            addToGroupPolicy: addToGroupPolicy,
+            groupAddAllowed: groupAddAllowed,
+            addAllowed: this.model ? this.model.get('addAllowed') : false
+        })).girderModal(this).on('shown.bs.modal', () => {
+            this.$('#g-name').trigger('focus');
+            if (this.model) {
+                handleOpen('edit');
+            } else {
+                handleOpen('create');
+            }
+        }).on('hidden.bs.modal', () => {
+            if (this.create) {
+                handleClose('create');
+            } else {
+                handleClose('edit');
+            }
+        }).on('ready.girder.modal', () => {
+            if (this.model) {
+                this.$('#g-name').val(this.model.get('name'));
+                this.$('#g-description').val(this.model.get('description'));
+                this.create = false;
+            } else {
+                this.create = true;
+            }
+        });
+        modal.trigger($.Event('ready.girder.modal', { relatedTarget: modal }));
+        this.$('#g-name').trigger('focus');
+
+        this.privacyChanged();
+
+        return this;
+    },
+
+    createGroup: function (fields) {
+        var group = new GroupModel();
+        group.set(fields);
+        group.on('g:saved', function () {
+            this.$el.modal('hide');
+            this.trigger('g:saved', group);
+        }, this).on('g:error', function (err) {
+            this.$('.g-validation-failed-message').text(err.responseJSON.message);
+            this.$('button.g-save-group').girderEnable(true);
+            this.$('#g-' + err.responseJSON.field).trigger('focus');
+        }, this).save();
+    },
+
+    updateGroup: function (fields) {
+        this.model.set(fields);
+        this.model.off().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-group').girderEnable(true);
+            this.$('#g-' + err.responseJSON.field).trigger('focus');
+        }, this).save();
+    },
+
+    privacyChanged: function () {
+        this.$('.g-public-container .radio').removeClass('g-selected');
+        var selected = this.$('.g-public-container .radio input:checked');
+        selected.parents('.radio').addClass('g-selected');
+    }
+});
+
+export default EditGroupWidget;

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

@@ -0,0 +1,110 @@
+import $ from 'jquery';
+import _ from 'underscore';
+
+import ItemModel from '@girder/core/models/ItemModel';
+import MarkdownWidget from '@girder/core/views/widgets/MarkdownWidget';
+import View from '@girder/core/views/View';
+import { handleClose, handleOpen } from '@girder/core/dialog';
+
+import EditItemWidgetTemplate from '@girder/core/templates/widgets/editItemWidget.pug';
+
+import '@girder/core/utilities/jquery/girderEnable';
+import '@girder/core/utilities/jquery/girderModal';
+
+/**
+ * This widget is used to create a new item or edit an existing one.
+ */
+var EditItemWidget = View.extend({
+    events: {
+        'submit #g-item-edit-form': function () {
+            var fields = {
+                name: this.$('#g-name').val(),
+                description: this.descriptionEditor.val()
+            };
+
+            if (this.item) {
+                this.updateItem(fields);
+            } else {
+                this.createItem(fields);
+            }
+
+            this.descriptionEditor.saveText();
+            this.$('button.g-save-item').girderEnable(false);
+            this.$('.g-validation-failed-message').empty();
+
+            return false;
+        }
+    },
+
+    initialize: function (settings) {
+        this.item = settings.item || null;
+        this.parentModel = settings.parentModel;
+        this.descriptionEditor = new MarkdownWidget({
+            text: this.item ? this.item.get('description') : '',
+            prefix: 'item-description',
+            placeholder: 'Enter a description',
+            enableUploads: false,
+            parentView: this
+        });
+    },
+
+    render: function () {
+        var modal = this.$el.html(EditItemWidgetTemplate({
+            item: this.item
+        })).girderModal(this).on('shown.bs.modal', () => {
+            this.$('#g-name').trigger('focus');
+            if (this.item) {
+                handleOpen('itemedit');
+            } else {
+                handleOpen('itemcreate');
+            }
+        }).on('hidden.bs.modal', () => {
+            if (this.create) {
+                handleClose('itemcreate');
+            } else {
+                handleClose('itemedit');
+            }
+        }).on('ready.girder.modal', () => {
+            if (this.item) {
+                this.$('#g-name').val(this.item.get('name'));
+                this.$('#g-description').val(this.item.get('description'));
+                this.create = false;
+            } else {
+                this.create = true;
+            }
+        });
+        modal.trigger($.Event('ready.girder.modal', { relatedTarget: modal }));
+        this.descriptionEditor.setElement(this.$('.g-description-editor-container')).render();
+
+        return this;
+    },
+
+    createItem: function (fields) {
+        var item = new ItemModel();
+        item.set(_.extend(fields, {
+            folderId: this.parentModel.get('_id')
+        }));
+        item.on('g:saved', function () {
+            this.$el.modal('hide');
+            this.trigger('g:saved', item);
+        }, this).on('g:error', function (err) {
+            this.$('.g-validation-failed-message').text(err.responseJSON.message);
+            this.$('button.g-save-item').girderEnable(true);
+            this.$('#g-' + err.responseJSON.field).trigger('focus');
+        }, this).save();
+    },
+
+    updateItem: function (fields) {
+        this.item.set(fields);
+        this.item.off().on('g:saved', function () {
+            this.$el.modal('hide');
+            this.trigger('g:saved', this.item);
+        }, this).on('g:error', function (err) {
+            this.$('.g-validation-failed-message').text(err.responseJSON.message);
+            this.$('button.g-save-item').girderEnable(true);
+            this.$('#g-' + err.responseJSON.field).trigger('focus');
+        }, this).save();
+    }
+});
+
+export default EditItemWidget;

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

@@ -0,0 +1,26 @@
+import View from '@girder/core/views/View';
+import { formatDate, DATE_SECOND } from '@girder/core/misc';
+
+import FileInfoDialogTemplate from '@girder/core/templates/widgets/fileInfoDialog.pug';
+
+import '@girder/core/utilities/jquery/girderModal';
+
+/**
+ * This widget shows information about a single file in a modal dialog.
+ */
+var FileInfoWidget = View.extend({
+    initialize: function (settings) {
+        this.parentItem = settings.parentItem;
+    },
+
+    render: function () {
+        this.$el.html(FileInfoDialogTemplate({
+            file: this.model,
+            formatDate: formatDate,
+            DATE_SECOND: DATE_SECOND
+        })).girderModal(this);
+        return this;
+    }
+});
+
+export default FileInfoWidget;

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

@@ -0,0 +1,151 @@
+import $ from 'jquery';
+
+import EditFileWidget from '@girder/core/views/widgets/EditFileWidget';
+import FileCollection from '@girder/core/collections/FileCollection';
+import FileInfoWidget from '@girder/core/views/widgets/FileInfoWidget';
+import UploadWidget from '@girder/core/views/widgets/UploadWidget';
+import View from '@girder/core/views/View';
+import { AccessType } from '@girder/core/constants';
+import { confirm } from '@girder/core/dialog';
+import { formatSize } from '@girder/core/misc';
+import events from '@girder/core/events';
+
+import FileListTemplate from '@girder/core/templates/widgets/fileList.pug';
+
+/**
+ * This widget shows a list of files in a given item.
+ */
+var FileListWidget = View.extend({
+    events: {
+        'click a.g-show-more-files': function () {
+            this.collection.fetchNextPage();
+        },
+
+        'click a.g-show-info': function (e) {
+            var cid = $(e.currentTarget).attr('file-cid');
+            new FileInfoWidget({
+                el: $('#g-dialog-container'),
+                model: this.collection.get(cid),
+                parentItem: this.parentItem,
+                parentView: this
+            }).render();
+        },
+
+        'click a.g-update-contents': function (e) {
+            var cid = $(e.currentTarget).parent().attr('file-cid');
+            this.uploadDialog(cid);
+        },
+
+        'click a.g-update-info': function (e) {
+            var cid = $(e.currentTarget).parent().attr('file-cid');
+            this.editFileDialog(cid);
+        },
+
+        'click a.g-delete-file': function (e) {
+            var cid = $(e.currentTarget).parent().attr('file-cid');
+            var file = this.collection.get(cid);
+
+            confirm({
+                text: 'Are you sure you want to delete the file <b>' +
+                      file.escape('name') + '</b>?',
+                yesText: 'Delete',
+                escapedHtml: true,
+                confirmCallback: () => {
+                    file.once('g:deleted', function () {
+                        events.trigger('g:alert', {
+                            icon: 'ok',
+                            type: 'success',
+                            text: 'File deleted.',
+                            timeout: 4000
+                        });
+
+                        this.render();
+                    }, this).once('g:error', function () {
+                        events.trigger('g:alert', {
+                            icon: 'cancel',
+                            text: 'Failed to delete file.',
+                            type: 'danger',
+                            timeout: 4000
+                        });
+                    }).destroy();
+                }
+            });
+        }
+    },
+
+    initialize: function (settings) {
+        this.upload = settings.upload;
+        this.fileEdit = settings.fileEdit;
+        this.checked = [];
+        this.collection = new FileCollection();
+        this.collection.altUrl = 'item/' +
+            (settings.itemId || settings.item.get('_id')) + '/files';
+        this.collection.append = true; // Append, don't replace pages
+        this.collection.on('g:changed', function () {
+            this.render();
+            this.trigger('g:changed');
+        }, this).fetch();
+
+        this.parentItem = settings.item;
+    },
+
+    editFileDialog: function (cid) {
+        this.editFileWidget = new EditFileWidget({
+            el: $('#g-dialog-container'),
+            file: this.collection.get(cid),
+            parentView: this
+        }).off('g:saved', null, this).on('g:saved', function () {
+            this.render();
+        }, this);
+        this.editFileWidget.render();
+    },
+
+    uploadDialog: function (cid) {
+        new UploadWidget({
+            el: $('#g-dialog-container'),
+            title: 'Replace file contents',
+            parent: this.collection.get(cid),
+            parentType: 'file',
+            parentView: this
+        }).on('g:uploadFinished', function () {
+            events.trigger('g:alert', {
+                icon: 'ok',
+                text: 'File contents updated.',
+                type: 'success',
+                timeout: 4000
+            });
+        }, this).render();
+    },
+
+    render: function () {
+        this.checked = [];
+        this.$el.html(FileListTemplate({
+            files: this.collection.toArray(),
+            hasMore: this.collection.hasNextPage(),
+            AccessType: AccessType,
+            formatSize: formatSize,
+            parentItem: this.parentItem
+        }));
+
+        if (this.fileEdit) {
+            this.editFileDialog(this.fileEdit);
+            this.fileEdit = false;
+        } else if (this.upload) {
+            this.uploadDialog(this.upload);
+            this.upload = false;
+        }
+
+        return this;
+    },
+
+    /**
+     * Insert a file into the collection and re-render it.
+     */
+    insertFile: function (file) {
+        this.collection.add(file);
+        this.render();
+        this.trigger('g:changed');
+    }
+});
+
+export default FileListWidget;

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

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

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

@@ -0,0 +1,106 @@
+import $ from 'jquery';
+import _ from 'underscore';
+
+import FolderCollection from '@girder/core/collections/FolderCollection';
+import LoadingAnimation from '@girder/core/views/widgets/LoadingAnimation';
+import View from '@girder/core/views/View';
+
+import FolderListTemplate from '@girder/core/templates/widgets/folderList.pug';
+
+/**
+ * This widget shows a list of folders under a given parent.
+ * Initialize this with a "parentType" and "parentId" value, which will
+ * be passed to the folder GET endpoint.
+ */
+var FolderListWidget = View.extend({
+    events: {
+        'click a.g-folder-list-link': function (event) {
+            event.preventDefault();
+            var cid = $(event.currentTarget).attr('g-folder-cid');
+            this.trigger('g:folderClicked', this.collection.get(cid));
+        },
+        'click a.g-show-more-folders': function () {
+            this.collection.fetchNextPage();
+        },
+        'change .g-list-checkbox': function (event) {
+            const target = $(event.currentTarget);
+            const cid = target.attr('g-folder-cid');
+            if (target.prop('checked')) {
+                this.checked.push(cid);
+            } else {
+                const idx = this.checked.indexOf(cid);
+                if (idx !== -1) {
+                    this.checked.splice(idx, 1);
+                }
+            }
+            this.trigger('g:checkboxesChanged');
+        }
+    },
+
+    initialize: function (settings) {
+        this.checked = [];
+        this._checkboxes = settings.checkboxes;
+
+        new LoadingAnimation({
+            el: this.$el,
+            parentView: this
+        }).render();
+
+        this.collection = new FolderCollection();
+        this.collection.append = true; // Append, don't replace pages
+        this.collection.filterFunc = settings.folderFilter;
+
+        this.collection.on('g:changed', function () {
+            this.render();
+            this.trigger('g:changed');
+        }, this).fetch({
+            parentType: settings.parentType || 'folder',
+            parentId: settings.parentId
+        });
+    },
+
+    render: function () {
+        this.checked = [];
+        this.$el.html(FolderListTemplate({
+            folders: this.collection.toArray(),
+            hasMore: this.collection.hasNextPage(),
+            checkboxes: this._checkboxes
+        }));
+        return this;
+    },
+
+    /**
+     * Insert a folder into the collection and re-render it.
+     */
+    insertFolder: function (folder) {
+        this.collection.add(folder);
+        this.trigger('g:changed');
+        this.render();
+    },
+
+    /**
+     * Set all folder checkboxes to a certain checked state. The event
+     * g:checkboxesChanged is triggered once after checking/unchecking everything.
+     * @param {bool} checked The checked state.
+     */
+    checkAll: function (checked) {
+        this.$('.g-list-checkbox').prop('checked', checked);
+
+        this.checked = [];
+        if (checked) {
+            this.collection.each(function (model) {
+                this.checked.push(model.cid);
+            }, this);
+        }
+
+        this.trigger('g:checkboxesChanged');
+    },
+
+    recomputeChecked: function () {
+        this.checked = _.map(this.$('.g-list-checkbox:checked'), function (checkbox) {
+            return $(checkbox).attr('g-folder-cid');
+        }, this);
+    }
+});
+
+export default FolderListWidget;

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

@@ -0,0 +1,88 @@
+import $ from 'jquery';
+import _ from 'underscore';
+
+import UserModel from '@girder/core/models/UserModel';
+import UserView from '@girder/core/views/body/UserView';
+import View from '@girder/core/views/View';
+import { AccessType } from '@girder/core/constants';
+import { confirm } from '@girder/core/dialog';
+import events from '@girder/core/events';
+
+import GroupAdminListTemplate from '@girder/core/templates/widgets/groupAdminList.pug';
+
+import 'bootstrap/js/dropdown';
+
+/**
+ * This view shows a list of administrators of a group.
+ */
+var GroupAdminsWidget = View.extend({
+    events: {
+        'click .g-demote-moderator': function (e) {
+            var li = $(e.currentTarget).parents('.g-group-admins>li');
+            var userid = li.attr('userid');
+
+            confirm({
+                text: 'Are you sure you want to demote <b>' +
+                    _.escape(li.attr('username')) + '</b> to a moderator?',
+                escapedHtml: true,
+                confirmCallback: () => {
+                    var user = new UserModel({ _id: userid });
+                    this.model.off('g:promoted').on('g:promoted', () => {
+                        this.trigger('g:moderatorAdded');
+                    }, this).promoteUser(user, AccessType.WRITE);
+                }
+            });
+        },
+
+        'click .g-demote-member': function (e) {
+            var li = $(e.currentTarget).parents('.g-group-admins>li');
+
+            confirm({
+                text: 'Are you sure you want to remove admin privileges ' +
+                    'from <b>' + _.escape(li.attr('username')) + '</b>?',
+                escapedHtml: true,
+                confirmCallback: () => {
+                    this.trigger('g:demoteUser', li.attr('userid'));
+                }
+            });
+        },
+
+        'click a.g-group-admin-remove': function (e) {
+            var li = $(e.currentTarget).parents('li');
+
+            confirm({
+                text: 'Are you sure you want to remove <b> ' +
+                    _.escape(li.attr('username')) +
+                    '</b> from this group?',
+                escapedHtml: true,
+                confirmCallback: () => {
+                    this.trigger('g:removeMember', li.attr('userid'));
+                }
+            });
+        },
+
+        'click a.g-member-name': function (e) {
+            events.trigger('g:navigateTo', UserView, {
+                id: $(e.currentTarget).parents('li').attr('userid')
+            });
+        }
+    },
+
+    initialize: function (settings) {
+        this.model = settings.group;
+        this.admins = settings.admins;
+    },
+
+    render: function () {
+        this.$el.html(GroupAdminListTemplate({
+            group: this.model,
+            level: this.model.get('_accessLevel'),
+            admins: this.admins,
+            accessType: AccessType
+        }));
+
+        return this;
+    }
+});
+
+export default GroupAdminsWidget;