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

package/dist-lib/src/views/body/GroupView.js

@@ -0,0 +1,336 @@
+import $ from 'jquery';
+import _ from 'underscore';
+
+import EditGroupWidget from '@girder/core/views/widgets/EditGroupWidget';
+import GroupAdminsWidget from '@girder/core/views/widgets/GroupAdminsWidget';
+import GroupInvitesWidget from '@girder/core/views/widgets/GroupInvitesWidget';
+import GroupMembersWidget from '@girder/core/views/widgets/GroupMembersWidget';
+import GroupModel from '@girder/core/models/GroupModel';
+import GroupModsWidget from '@girder/core/views/widgets/GroupModsWidget';
+import LoadingAnimation from '@girder/core/views/widgets/LoadingAnimation';
+import router from '@girder/core/router';
+import UserCollection from '@girder/core/collections/UserCollection';
+import View from '@girder/core/views/View';
+import { AccessType } from '@girder/core/constants';
+import { cancelRestRequests } from '@girder/core/rest';
+import { confirm } from '@girder/core/dialog';
+import events from '@girder/core/events';
+import { getCurrentUser } from '@girder/core/auth';
+
+import GroupPageTemplate from '@girder/core/templates/body/groupPage.pug';
+
+import '@girder/core/stylesheets/body/groupPage.styl';
+
+import 'bootstrap/js/dropdown';
+import 'bootstrap/js/tab';
+
+/**
+ * This view shows a single group's page.
+ */
+var GroupView = View.extend({
+    events: {
+        'click .g-edit-group': 'editGroup',
+        'click .g-group-join': 'joinGroup',
+        'click .g-group-leave': 'leaveGroup',
+        'click .g-group-delete': 'deleteGroup',
+        'click .g-group-request-invite': 'requestInvitation',
+        'click .g-group-request-accept': 'acceptMembershipRequest',
+        'click .g-group-request-deny': 'denyMembershipRequest',
+
+        'click #g-group-tab-pending a.g-member-name': function (e) {
+            var userId = $(e.currentTarget).parents('li').attr('userid');
+            router.navigate('user/' + userId, { trigger: true });
+        }
+    },
+
+    initialize: function (settings) {
+        cancelRestRequests('fetch');
+        this.tab = settings.tab || 'roles';
+        this.edit = settings.edit || false;
+
+        // If group model is already passed, there is no need to fetch.
+        if (settings.group) {
+            this.model = settings.group;
+            this.model.on('g:accessFetched', function () {
+                this.render();
+            }, this).fetchAccess();
+        } else if (settings.id) {
+            this.model = new GroupModel();
+            this.model.set('_id', settings.id);
+
+            this.model.on('g:fetched', function () {
+                this.model.on('g:accessFetched', function () {
+                    this.render();
+                }, this).fetchAccess();
+            }, this).fetch();
+        }
+    },
+
+    editGroup: function () {
+        var container = $('#g-dialog-container');
+
+        if (!this.editGroupWidget) {
+            this.editGroupWidget = new EditGroupWidget({
+                el: container,
+                model: this.model,
+                parentView: this
+            }).off('g:saved').on('g:saved', function () {
+                this.render();
+            }, this);
+        }
+        this.editGroupWidget.render();
+    },
+
+    deleteGroup: function () {
+        confirm({
+            text: 'Are you sure you want to delete the group <b>' +
+                this.model.escape('name') + '</b>?',
+            escapedHtml: true,
+            confirmCallback: () => {
+                this.model.on('g:deleted', function () {
+                    router.navigate('groups', { trigger: true });
+                }).destroy();
+            }
+        });
+    },
+
+    render: function () {
+        this.isMember = false;
+        this.isInvited = false;
+        this.isRequested = false;
+        this.isModerator = false;
+        this.isAdmin = false;
+
+        if (getCurrentUser()) {
+            _.every(getCurrentUser().get('groups'), function (groupId) {
+                if (groupId === this.model.get('_id')) {
+                    this.isMember = true;
+                    return false; // 'break;'
+                }
+                return true;
+            }, this);
+
+            _.every(getCurrentUser().get('groupInvites'), function (inv) {
+                if (inv.groupId === this.model.get('_id')) {
+                    this.isInvited = true;
+                    return false; // 'break;'
+                }
+                return true;
+            }, this);
+
+            _.every(this.model.get('requests') || [], function (user) {
+                if (user.id === getCurrentUser().get('_id')) {
+                    this.isRequested = true;
+                    return false; // 'break;'
+                }
+                return true;
+            }, this);
+        }
+
+        if (this.isMember) {
+            _.every(this.model.get('access').users || [], function (access) {
+                if (access.id === getCurrentUser().get('_id')) {
+                    if (access.level === AccessType.WRITE) {
+                        this.isModerator = true;
+                    } else if (access.level === AccessType.ADMIN) {
+                        this.isAdmin = true;
+                    }
+                    return false; // 'break';
+                }
+                return true;
+            }, this);
+        }
+        this.$el.html(GroupPageTemplate({
+            group: this.model,
+            getCurrentUser: getCurrentUser,
+            AccessType: AccessType,
+            isInvited: this.isInvited,
+            isRequested: this.isRequested,
+            isMember: this.isMember,
+            isModerator: this.isModerator,
+            isAdmin: this.isAdmin
+        }));
+
+        if (this.invitees) {
+            this._renderInvitesWidget();
+        } else {
+            var container = this.$('.g-group-invites-body');
+            new LoadingAnimation({
+                el: container,
+                parentView: this
+            }).render();
+
+            this.invitees = new UserCollection();
+            this.invitees.altUrl =
+                'group/' + this.model.get('_id') + '/invitation';
+            this.invitees.on('g:changed', () => {
+                this._renderInvitesWidget();
+                this.updatePendingStatus();
+            }, this).fetch();
+        }
+
+        this._updateRolesLists();
+
+        router.navigate('group/' + this.model.get('_id') + '/' +
+                               this.tab, { replace: true });
+
+        if (this.edit) {
+            if (this.model.get('_accessLevel') >= AccessType.ADMIN) {
+                this.editGroup();
+            }
+            this.edit = false;
+        }
+
+        _.each($('.g-group-tabs>li>a'), (el) => {
+            var tabLink = $(el);
+            tabLink.tab().on('shown.bs.tab', (e) => {
+                this.tab = $(e.currentTarget).attr('name');
+                router.navigate('group/' + this.model.get('_id') + '/' + this.tab);
+            });
+
+            if (tabLink.attr('name') === this.tab) {
+                tabLink.tab('show');
+            }
+        });
+
+        return this;
+    },
+
+    _renderInvitesWidget: function () {
+        new GroupInvitesWidget({
+            el: this.$('.g-group-invites-body'),
+            invitees: this.invitees,
+            group: this.model,
+            parentView: this
+        }).render();
+        this.updatePendingStatus();
+    },
+
+    updatePendingStatus: function () {
+        var count = this.invitees.length +
+            this.model.get('requests').length;
+        $('#g-group-tab-pending-status').text(' (' + count + ')');
+    },
+
+    joinGroup: function () {
+        this.model.off('g:joined').on('g:joined', function () {
+            this.invitees.fetch(null, true);
+        }, this).joinGroup();
+    },
+
+    leaveGroup: function () {
+        confirm({
+            text: 'Are you sure you want to leave this group?',
+            confirmCallback: () => {
+                this.model.off('g:removed').on('g:removed', () => {
+                    this.render();
+                }).removeMember(getCurrentUser().get('_id'));
+            }
+        });
+    },
+
+    removeMember: function (user) {
+        var id = user;
+        if ($.type(user) !== 'string') {
+            id = user.get('_id');
+        }
+        this.model.off('g:removed').on('g:removed', function () {
+            this.render();
+        }, this).removeMember(id);
+    },
+
+    requestInvitation: function () {
+        this.model.off('g:inviteRequested').on('g:inviteRequested', function () {
+            this.render();
+        }, this).requestInvitation();
+    },
+
+    acceptMembershipRequest: function (e) {
+        var userId = $(e.currentTarget).parents('li').attr('userid');
+        this.model.off('g:invited').on('g:invited', this.render, this)
+            .sendInvitation(userId, AccessType.READ, true);
+    },
+
+    denyMembershipRequest: function (e) {
+        var userId = $(e.currentTarget).parents('li').attr('userid');
+        this.model.off('g:removed').on('g:removed', this.render, this)
+            .removeMember(userId);
+    },
+
+    _updateRolesLists: function () {
+        var mods = [],
+            admins = [];
+
+        _.each(this.model.get('access').users, function (userAccess) {
+            if (userAccess.level === AccessType.WRITE) {
+                mods.push(userAccess);
+            } else if (userAccess.level === AccessType.ADMIN) {
+                admins.push(userAccess);
+            }
+        }, this);
+
+        this.adminsWidget = new GroupAdminsWidget({
+            el: this.$('.g-group-admins-container'),
+            group: this.model,
+            admins: admins,
+            parentView: this
+        }).off().on('g:demoteUser', function (userId) {
+            this.model.off('g:demoted').on('g:demoted', this.render, this)
+                .demoteUser(userId, AccessType.ADMIN);
+        }, this).on('g:removeMember', this.removeMember, this)
+            .on('g:moderatorAdded', this.render, this)
+            .render();
+
+        this.modsWidget = new GroupModsWidget({
+            el: this.$('.g-group-mods-container'),
+            group: this.model,
+            moderators: mods,
+            parentView: this
+        }).on('g:demoteUser', function (userId) {
+            this.model.off('g:demoted').on('g:demoted', this.render, this)
+                .demoteUser(userId, AccessType.WRITE);
+        }, this).on('g:removeMember', this.removeMember, this)
+            .on('g:adminAdded', this.render, this)
+            .render();
+
+        this.membersWidget = new GroupMembersWidget({
+            el: this.$('.g-group-members-container'),
+            group: this.model,
+            admins: admins,
+            moderators: mods,
+            parentView: this
+        }).on('g:sendInvite', function (params) {
+            var opts = {
+                force: params.force || false
+            };
+            this.model.off('g:invited').on('g:invited', function () {
+                this.invitees.fetch(null, true);
+                if (params.force) {
+                    this.model.fetchAccess();
+                }
+            }, this).off('g:error').on('g:error', function (err) {
+                events.trigger('g:alert', {
+                    text: err.responseJSON.message,
+                    type: 'warning'
+                });
+            }, this).sendInvitation(params.user.id, params.level, false, opts);
+        }, this).on('g:removeMember', this.removeMember, this)
+            .on('g:moderatorAdded', this.render, this)
+            .on('g:adminAdded', this.render, this);
+    }
+}, {
+    /**
+     * Helper function for fetching the user and rendering the view with
+     * an arbitrary set of extra parameters.
+     */
+    fetchAndInit: function (groupId, params) {
+        var group = new GroupModel();
+        group.set({ _id: groupId }).once('g:fetched', function () {
+            events.trigger('g:navigateTo', GroupView, _.extend({
+                group: group
+            }, params || {}));
+        }, this).fetch();
+    }
+});
+
+export default GroupView;

package/dist-lib/src/views/body/GroupsView.js

@@ -0,0 +1,106 @@
+import $ from 'jquery';
+
+import EditGroupWidget from '@girder/core/views/widgets/EditGroupWidget';
+import GroupCollection from '@girder/core/collections/GroupCollection';
+import GroupModel from '@girder/core/models/GroupModel';
+import PaginateWidget from '@girder/core/views/widgets/PaginateWidget';
+import router from '@girder/core/router';
+import SearchFieldWidget from '@girder/core/views/widgets/SearchFieldWidget';
+import View from '@girder/core/views/View';
+import { cancelRestRequests } from '@girder/core/rest';
+import { formatDate, DATE_DAY } from '@girder/core/misc';
+import { getCurrentUser } from '@girder/core/auth';
+
+import GroupListTemplate from '@girder/core/templates/body/groupList.pug';
+
+import '@girder/core/stylesheets/body/groupList.styl';
+
+/**
+ * This view lists groups.
+ */
+var GroupsView = View.extend({
+    events: {
+        'click a.g-group-link': function (event) {
+            var cid = $(event.currentTarget).attr('g-group-cid');
+            router.navigate('group/' + this.collection.get(cid).id, { trigger: true });
+        },
+        'submit .g-group-search-form': function (event) {
+            event.preventDefault();
+        },
+        'click .g-group-create-button': function () {
+            this.createGroupDialog();
+        }
+    },
+
+    initialize: function (settings) {
+        cancelRestRequests('fetch');
+        this.collection = new GroupCollection();
+        this.collection.on('g:changed', function () {
+            this.render();
+        }, this).fetch();
+
+        this.paginateWidget = new PaginateWidget({
+            collection: this.collection,
+            parentView: this
+        });
+
+        this.searchWidget = new SearchFieldWidget({
+            placeholder: 'Search groups...',
+            types: ['group'],
+            parentView: this
+        }).on('g:resultClicked', this._gotoGroup, this);
+
+        this.create = settings.dialog === 'create';
+    },
+
+    render: function () {
+        this.$el.html(GroupListTemplate({
+            groups: this.collection.toArray(),
+            getCurrentUser: getCurrentUser,
+            formatDate: formatDate,
+            DATE_DAY: DATE_DAY
+        }));
+
+        this.paginateWidget.setElement(this.$('.g-group-pagination')).render();
+        this.searchWidget.setElement(this.$('.g-groups-search-container')).render();
+
+        if (this.create) {
+            this.createGroupDialog();
+            this.create = false;
+        }
+
+        return this;
+    },
+
+    /**
+     * Prompt the user to create a new group
+     */
+    createGroupDialog: function () {
+        new EditGroupWidget({
+            el: $('#g-dialog-container'),
+            parentView: this
+        }).off('g:saved').on('g:saved', function (group) {
+            // Since the user has now joined this group, we can append its ID
+            // to their groups list
+            var userGroups = getCurrentUser().get('groups') || [];
+            userGroups.push(group.get('_id'));
+            getCurrentUser().set('groups', userGroups);
+
+            router.navigate('group/' + group.get('_id'), { trigger: true });
+        }, this).render();
+    },
+
+    /**
+     * When the user clicks a search result group, this helper method
+     * will navigate them to the view for that group.
+     */
+    _gotoGroup: function (result) {
+        var group = new GroupModel();
+        group.set('_id', result.id).on('g:fetched', function () {
+            router.navigate('group/' + group.get('_id'), { trigger: true });
+        }, this).fetch();
+    }
+
+});
+
+export default GroupsView;

package/dist-lib/src/views/body/ItemView.js

@@ -0,0 +1,177 @@
+import $ from 'jquery';
+import _ from 'underscore';
+
+import EditItemWidget from '@girder/core/views/widgets/EditItemWidget';
+import FileListWidget from '@girder/core/views/widgets/FileListWidget';
+import ItemBreadcrumbWidget from '@girder/core/views/widgets/ItemBreadcrumbWidget';
+import ItemModel from '@girder/core/models/ItemModel';
+import MetadataWidget from '@girder/core/views/widgets/MetadataWidget';
+import router from '@girder/core/router';
+import UploadWidget from '@girder/core/views/widgets/UploadWidget';
+import View from '@girder/core/views/View';
+import { AccessType } from '@girder/core/constants';
+import { cancelRestRequests } from '@girder/core/rest';
+import { confirm, handleClose } from '@girder/core/dialog';
+import events from '@girder/core/events';
+import { formatSize, formatDate, renderMarkdown, DATE_SECOND } from '@girder/core/misc';
+
+import ItemPageTemplate from '@girder/core/templates/body/itemPage.pug';
+
+import '@girder/core/stylesheets/body/itemPage.styl';
+
+import 'bootstrap/js/dropdown';
+
+/**
+ * This view shows a single item's page.
+ */
+var ItemView = View.extend({
+    events: {
+        'click .g-edit-item': 'editItem',
+        'click .g-delete-item': 'deleteItem',
+        'click .g-upload-into-item': 'uploadIntoItem'
+    },
+
+    initialize: function (settings) {
+        cancelRestRequests('fetch');
+        this.edit = settings.edit || false;
+        this.fileEdit = settings.fileEdit || false;
+        this.upload = settings.upload || false;
+
+        // If collection model is already passed, there is no need to fetch.
+        if (settings.item) {
+            this.model = settings.item;
+            this.render();
+        } else {
+            console.error('Implement fetch then render item');
+        }
+    },
+
+    uploadIntoItem: function () {
+        new UploadWidget({
+            el: $('#g-dialog-container'),
+            parent: this.model,
+            parentType: 'item',
+            parentView: this
+        }).on('g:uploadFinished', function () {
+            handleClose('upload');
+            this.upload = false;
+
+            events.trigger('g:alert', {
+                icon: 'ok',
+                text: 'Files added.',
+                type: 'success',
+                timeout: 4000
+            });
+
+            this.fileListWidget.collection.fetch(null, true);
+        }, this).render();
+    },
+
+    editItem: function () {
+        var container = $('#g-dialog-container');
+
+        if (!this.editItemWidget) {
+            this.editItemWidget = new EditItemWidget({
+                el: container,
+                item: this.model,
+                parentView: this
+            }).off('g:saved').on('g:saved', function () {
+                this.render();
+            }, this);
+        }
+        this.editItemWidget.render();
+    },
+
+    deleteItem: function () {
+        var folderId = this.model.get('folderId');
+        var parentRoute = this.model.get('baseParentType') + '/' +
+            this.model.get('baseParentId') + '/folder/' + folderId;
+        confirm({
+            text: 'Are you sure you want to delete <b>' + this.model.escape('name') + '</b>?',
+            yesText: 'Delete',
+            escapedHtml: true,
+            confirmCallback: () => {
+                this.model.on('g:deleted', () => {
+                    router.navigate(parentRoute, { trigger: true });
+                }).off('g:error').on('g:error', () => {
+                    this.render();
+                    events.trigger('g:alert', {
+                        icon: 'cancel',
+                        text: 'Failed to delete item.',
+                        type: 'danger',
+                        timeout: 4000
+                    });
+                }, this).destroy();
+            }
+        });
+    },
+
+    render: function () {
+        // Fetch the access level asynchronously and render once we have
+        // it. TODO: load the page and adjust only the action menu once
+        // the access level is fetched.
+        this.model.getAccessLevel((accessLevel) => {
+            this.accessLevel = accessLevel;
+            this.$el.html(ItemPageTemplate({
+                item: this.model,
+                accessLevel: accessLevel,
+                AccessType: AccessType,
+                formatSize: formatSize,
+                formatDate: formatDate,
+                renderMarkdown: renderMarkdown,
+                DATE_SECOND: DATE_SECOND
+            }));
+
+            this.fileListWidget = new FileListWidget({
+                el: this.$('.g-item-files-container'),
+                item: this.model,
+                fileEdit: this.fileEdit,
+                upload: this.upload,
+                parentView: this
+            });
+            this.fileListWidget.once('g:changed', function () {
+                this.trigger('g:rendered');
+            }, this);
+
+            this.fileEdit = false;
+            this.upload = false;
+
+            this.metadataWidget = new MetadataWidget({
+                el: this.$('.g-item-metadata'),
+                item: this.model,
+                accessLevel: accessLevel,
+                parentView: this
+            });
+
+            this.model.getRootPath((resp) => {
+                this.breadcrumbWidget = new ItemBreadcrumbWidget({
+                    el: this.$('.g-item-breadcrumb-container'),
+                    parentChain: resp,
+                    parentView: this
+                });
+            });
+
+            if (this.edit) {
+                this.editItem();
+                this.edit = false;
+            }
+        });
+
+        return this;
+    }
+}, {
+    /**
+     * Helper function for fetching the user and rendering the view with
+     * an arbitrary set of extra parameters.
+     */
+    fetchAndInit: function (itemId, params) {
+        var item = new ItemModel();
+        item.set({ _id: itemId }).on('g:fetched', function () {
+            events.trigger('g:navigateTo', ItemView, _.extend({
+                item: item
+            }, params || {}));
+        }, this).fetch();
+    }
+});
+
+export default ItemView;

package/dist-lib/src/views/body/PluginsView.js

@@ -0,0 +1,73 @@
+import $ from 'jquery';
+import _ from 'underscore';
+
+import router from '@girder/core/router';
+import View from '@girder/core/views/View';
+import { getPluginConfigRoute } from '@girder/core/utilities/PluginUtils';
+import { restRequest, cancelRestRequests } from '@girder/core/rest';
+
+import PluginsTemplate from '@girder/core/templates/body/plugins.pug';
+
+import '@girder/core/stylesheets/body/plugins.styl';
+
+/**
+ * This is the plugin management page for administrators.
+ */
+var PluginsView = View.extend({
+    events: {
+        'click a.g-plugin-config-link': function (evt) {
+            var route = $(evt.currentTarget).attr('g-route');
+            router.navigate(route, { trigger: true });
+        }
+    },
+
+    initialize: function (settings) {
+        cancelRestRequests('fetch');
+        if (settings.all) {
+            this.allPlugins = settings.all;
+            this.render();
+        } else {
+            // Fetch the plugin list
+            restRequest({
+                url: 'system/plugins',
+                method: 'GET'
+            })
+                .done((resp) => {
+                    this.allPlugins = resp.all;
+                    this.render();
+                }).fail(() => {
+                    router.navigate('/', { trigger: true });
+                });
+        }
+    },
+
+    render: function () {
+        _.each(this.allPlugins, function (info, name) {
+            info.configRoute = getPluginConfigRoute(name);
+        }, this);
+
+        this.$el.html(PluginsTemplate({
+            allPlugins: this._sortPlugins(this.allPlugins)
+        }));
+
+        return this;
+    },
+
+    _sortPlugins: function (plugins) {
+        /* Sort a dictionary of plugins alphabetically so that the appear in a
+         * predictable order to the user.
+         *
+         * @param plugins: a dictionary to sort.  Each entry has a .name
+         *                 attribute used for sorting.
+         * @returns sortedPlugins: the sorted list. */
+        var sortedPlugins = _.map(plugins, function (value, key) {
+            return { key: key, value: value };
+        });
+        sortedPlugins.sort(function (a, b) {
+            return a.value.name.localeCompare(b.value.name);
+        });
+        return sortedPlugins;
+    }
+});
+
+export default PluginsView;