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

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

@@ -0,0 +1,165 @@
+import _ from 'underscore';
+
+import FolderModel from '@girder/core/models/FolderModel';
+import HierarchyWidget from '@girder/core/views/widgets/HierarchyWidget';
+import router from '@girder/core/router';
+import UserModel from '@girder/core/models/UserModel';
+import UsersView from '@girder/core/views/body/UsersView';
+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 UserPageTemplate from '@girder/core/templates/body/userPage.pug';
+
+import '@girder/core/stylesheets/body/userPage.styl';
+
+import 'bootstrap/js/dropdown';
+
+/**
+ * This view shows a single user's page.
+ */
+var UserView = View.extend({
+    events: {
+        'click a.g-edit-user': function () {
+            var editUrl = 'useraccount/' + this.model.get('_id') + '/info';
+            router.navigate(editUrl, { trigger: true });
+        },
+
+        'click a.g-delete-user': function () {
+            confirm({
+                text: 'Are you sure you want to delete the user <b>' +
+                      this.model.escape('login') + '</b>?',
+                yesText: 'Delete',
+                escapedHtml: true,
+                confirmCallback: () => {
+                    this.model.on('g:deleted', function () {
+                        router.navigate('', { trigger: true });
+                    }).destroy();
+                }
+            });
+        },
+
+        'click a.g-approve-user': function () {
+            this._setAndSave(
+                { status: 'enabled' }, 'Approved user account.');
+        },
+
+        'click a.g-disable-user': function () {
+            this._setAndSave(
+                { status: 'disabled' }, 'Disabled user account.');
+        },
+
+        'click a.g-enable-user': function () {
+            this._setAndSave(
+                { status: 'enabled' }, 'Enabled user account.');
+        }
+    },
+
+    initialize: function (settings) {
+        cancelRestRequests('fetch');
+        this.folderId = settings.folderId || null;
+        this.upload = settings.upload || false;
+        this.folderAccess = settings.folderAccess || false;
+        this.folderCreate = settings.folderCreate || false;
+        this.folderEdit = settings.folderEdit || false;
+        this.itemCreate = settings.itemCreate || false;
+
+        if (settings.user) {
+            this.model = settings.user;
+
+            if (settings.folderId) {
+                this.folder = new FolderModel();
+                this.folder.set({
+                    _id: settings.folderId
+                }).on('g:fetched', function () {
+                    this.render();
+                }, this).on('g:error', function () {
+                    this.folder = null;
+                    this.render();
+                }, this).fetch();
+            } else {
+                this.render();
+            }
+        } else if (settings.id) {
+            this.model = new UserModel();
+            this.model.set('_id', settings.id);
+
+            this.model.on('g:fetched', function () {
+                this.render();
+            }, this).fetch();
+        }
+    },
+
+    render: function () {
+        this.$el.html(UserPageTemplate({
+            user: this.model,
+            AccessType: AccessType
+        }));
+
+        if (!this.hierarchyWidget) {
+            // The HierarchyWidget will self-render when instantiated
+            this.hierarchyWidget = new HierarchyWidget({
+                el: this.$('.g-user-hierarchy-container'),
+                parentModel: this.folder || this.model,
+                upload: this.upload,
+                folderAccess: this.folderAccess,
+                folderEdit: this.folderEdit,
+                folderCreate: this.folderCreate,
+                itemCreate: this.itemCreate,
+                parentView: this
+            });
+        } else {
+            this.hierarchyWidget
+                .setElement(this.$('.g-user-hierarchy-container'))
+                .render();
+        }
+
+        this.upload = false;
+        this.folderAccess = false;
+        this.folderEdit = false;
+        this.folderCreate = false;
+        this.itemCreate = false;
+
+        return this;
+    },
+
+    _setAndSave: function (data, message) {
+        this.model.set(data);
+        this.model.off('g:saved').on('g:saved', function () {
+            events.trigger('g:alert', {
+                icon: 'ok',
+                text: message,
+                type: 'success',
+                timeout: 4000
+            });
+            this.render();
+        }, this).off('g:error').on('g:error', function (err) {
+            events.trigger('g:alert', {
+                icon: 'cancel',
+                text: err.responseJSON.message,
+                type: 'danger'
+            });
+        }).save();
+    }
+}, {
+    /**
+     * Helper function for fetching the user and rendering the view with
+     * an arbitrary set of extra parameters.
+     */
+    fetchAndInit: function (userId, params) {
+        var user = new UserModel();
+        user.set({
+            _id: userId
+        }).on('g:fetched', function () {
+            events.trigger('g:navigateTo', UserView, _.extend({
+                user: user
+            }, params || {}));
+        }, this).on('g:error', function () {
+            events.trigger('g:navigateTo', UsersView);
+        }, this).fetch();
+    }
+});
+
+export default UserView;

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

@@ -0,0 +1,124 @@
+import $ from 'jquery';
+
+import PaginateWidget from '@girder/core/views/widgets/PaginateWidget';
+import RegisterView from '@girder/core/views/layout/RegisterView';
+import router from '@girder/core/router';
+import SearchFieldWidget from '@girder/core/views/widgets/SearchFieldWidget';
+import SortCollectionWidget from '@girder/core/views/widgets/SortCollectionWidget';
+import UserCollection from '@girder/core/collections/UserCollection';
+import UserModel from '@girder/core/models/UserModel';
+import View from '@girder/core/views/View';
+import { cancelRestRequests } from '@girder/core/rest';
+import { formatDate, formatSize, DATE_DAY } from '@girder/core/misc';
+import { getCurrentUser } from '@girder/core/auth';
+
+import UserListTemplate from '@girder/core/templates/body/userList.pug';
+
+import '@girder/core/stylesheets/body/userList.styl';
+
+/**
+ * This view lists users.
+ */
+var UsersView = View.extend({
+    events: {
+        'click a.g-user-link': function (event) {
+            var cid = $(event.currentTarget).attr('g-user-cid');
+            router.navigate('user/' + this.collection.get(cid).id, { trigger: true });
+        },
+        'click button.g-user-create-button': 'createUserDialog',
+        'submit .g-user-search-form': function (event) {
+            event.preventDefault();
+        }
+    },
+
+    initialize: function (settings) {
+        cancelRestRequests('fetch');
+        this.collection = new UserCollection();
+
+        const promiseArray = [];
+        promiseArray.push(this.collection.fetch());
+
+        this.paginateWidget = new PaginateWidget({
+            collection: this.collection,
+            parentView: this
+        });
+
+        this.sortCollectionWidget = new SortCollectionWidget({
+            collection: this.collection,
+            parentView: this,
+            fields: {
+                lastName: 'Last Name',
+                created: 'Creation Date',
+                size: 'Used Space'
+            }
+        });
+
+        this.searchWidget = new SearchFieldWidget({
+            placeholder: 'Search users...',
+            types: ['user'],
+            modes: 'prefix',
+            parentView: this
+        }).on('g:resultClicked', this._gotoUser, this);
+
+        if (getCurrentUser()) {
+            const userCountPromise = UserCollection.getTotalCount()
+                .done((count) => {
+                    this.usersCount = count;
+                });
+            promiseArray.push(userCountPromise);
+        }
+        this.register = settings.dialog === 'register' && getCurrentUser() &&
+                        getCurrentUser().get('admin');
+
+        $.when(...promiseArray)
+            .done(() => {
+                this.listenTo(this.collection, 'g:changed', this.render);
+                this.render();
+            });
+    },
+
+    render: function () {
+        this.$el.html(UserListTemplate({
+            users: this.collection.toArray(),
+            currentUser: getCurrentUser(),
+            usersCount: this.usersCount,
+            formatDate: formatDate,
+            formatSize: formatSize,
+            DATE_DAY: DATE_DAY
+        }));
+
+        this.paginateWidget.setElement(this.$('.g-user-pagination')).render();
+        this.sortCollectionWidget.setElement(this.$('.g-user-sort')).render();
+        this.searchWidget.setElement(this.$('.g-users-search-container')).render();
+
+        if (this.register) {
+            this.createUserDialog();
+        }
+
+        return this;
+    },
+
+    /**
+     * When the user clicks a search result user, this helper method
+     * will navigate them to the view for that specific user.
+     */
+    _gotoUser: function (result) {
+        var user = new UserModel();
+        user.set('_id', result.id).on('g:fetched', function () {
+            router.navigate('user/' + user.get('_id'), { trigger: true });
+        }, this).fetch();
+    },
+
+    createUserDialog: function () {
+        var container = $('#g-dialog-container');
+
+        new RegisterView({
+            el: container,
+            parentView: this
+        }).on('g:userCreated', function (info) {
+            router.navigate('user/' + info.user.id, { trigger: true });
+        }, this).render();
+    }
+});
+
+export default UsersView;

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

@@ -0,0 +1,37 @@
+import AdminView from './AdminView';
+import AssetstoresView from './AssetstoresView';
+import CollectionView from './CollectionView';
+import CollectionsView from './CollectionsView';
+import FilesystemImportView from './FilesystemImportView';
+import FolderView from './FolderView';
+import FrontPageView from './FrontPageView';
+import GroupView from './GroupView';
+import GroupsView from './GroupsView';
+import ItemView from './ItemView';
+import PluginsView from './PluginsView';
+import S3ImportView from './S3ImportView';
+import SearchResultsView from './SearchResultsView';
+import SystemConfigurationView from './SystemConfigurationView';
+import UserAccountView from './UserAccountView';
+import UserView from './UserView';
+import UsersView from './UsersView';
+
+export {
+    AdminView,
+    AssetstoresView,
+    CollectionView,
+    CollectionsView,
+    FilesystemImportView,
+    FolderView,
+    FrontPageView,
+    GroupView,
+    GroupsView,
+    ItemView,
+    PluginsView,
+    S3ImportView,
+    SearchResultsView,
+    SystemConfigurationView,
+    UserAccountView,
+    UserView,
+    UsersView
+};

package/dist-lib/src/views/index.js

@@ -0,0 +1,13 @@
+import App from './App';
+import View from './View';
+import * as body from './body';
+import * as layout from './layout';
+import * as widgets from './widgets';
+
+export {
+    App,
+    View,
+    body,
+    layout,
+    widgets
+};

package/dist-lib/src/views/layout/FooterView.js

@@ -0,0 +1,29 @@
+import View from '@girder/core/views/View';
+import { getApiRoot } from '@girder/core/rest';
+
+import LayoutFooterTemplate from '@girder/core/templates/layout/layoutFooter.pug';
+
+import '@girder/core/stylesheets/layout/footer.styl';
+
+/**
+ * This view shows the footer in the layout.
+ */
+var LayoutFooterView = View.extend({
+
+    initialize: function (settings) {
+        const contactEmail = settings.contactEmail || null;
+        this.contactHref = contactEmail !== null ? `mailto:${contactEmail}` : null;
+        this.privacyNoticeHref = settings.privacyNoticeHref || null;
+    },
+
+    render: function () {
+        this.$el.html(LayoutFooterTemplate({
+            apiRoot: getApiRoot(),
+            contactHref: this.contactHref,
+            privacyNoticeLink: this.privacyNoticeHref
+        }));
+        return this;
+    }
+});
+
+export default LayoutFooterView;

package/dist-lib/src/views/layout/GlobalNavView.js

@@ -0,0 +1,103 @@
+import $ from 'jquery';
+import Backbone from 'backbone';
+
+import router from '@girder/core/router';
+import View from '@girder/core/views/View';
+import events from '@girder/core/events';
+import { getCurrentUser } from '@girder/core/auth';
+
+import LayoutGlobalNavTemplate from '@girder/core/templates/layout/layoutGlobalNav.pug';
+
+import '@girder/core/stylesheets/layout/globalNav.styl';
+
+/**
+ * This view shows a list of global navigation links that should be
+ * displayed at all times.
+ */
+var LayoutGlobalNavView = View.extend({
+    events: {
+        'click .g-nav-link': function (event) {
+            event.preventDefault(); // so we can keep the href
+
+            var link = $(event.currentTarget);
+
+            router.navigate(link.attr('g-target'), { trigger: true });
+
+            // Must call this after calling navigateTo, since that
+            // deactivates all global nav links.
+            link.parent().addClass('g-active');
+        }
+    },
+
+    initialize: function (settings) {
+        events.on('g:highlightItem', this.selectForView, this);
+        events.on('g:login', this.render, this);
+        events.on('g:logout', this.render, this);
+        events.on('g:login-changed', this.render, this);
+
+        settings = settings || {};
+        if (settings.navItems) {
+            this.navItems = settings.navItems;
+        } else {
+            this.defaultNavItems = [{
+                name: 'Collections',
+                icon: 'icon-sitemap',
+                target: 'collections'
+            }, {
+                name: 'Groups',
+                icon: 'icon-users',
+                target: 'groups'
+            }];
+        }
+    },
+
+    render: function () {
+        var navItems;
+        if (this.navItems) {
+            navItems = this.navItems;
+        } else {
+            navItems = this.defaultNavItems;
+            if (getCurrentUser()) {
+                // copy navItems so that this.defaultNavItems is unchanged
+                navItems = navItems.slice();
+                navItems.push({
+                    name: 'Users',
+                    icon: 'icon-user',
+                    target: 'users'
+                });
+                if (getCurrentUser().get('admin')) {
+                    navItems.push({
+                        name: 'Admin console',
+                        icon: 'icon-wrench',
+                        target: 'admin'
+                    });
+                }
+            }
+        }
+        this.$el.html(LayoutGlobalNavTemplate({
+            navItems: navItems
+        }));
+
+        if (Backbone.history.fragment) {
+            this.$('[g-target="' + Backbone.history.fragment + '"]')
+                .parent().addClass('g-active');
+        }
+
+        return this;
+    },
+
+    /**
+     * Highlight the item with the given target attribute, which is the name
+     * of the view it navigates to.
+     */
+    selectForView: function (viewName) {
+        this.deactivateAll();
+        this.$('[g-name="' + viewName.slice(0, -4) + '"]').parent().addClass('g-active');
+    },
+
+    deactivateAll: function () {
+        this.$('.g-global-nav-li').removeClass('g-active');
+    }
+});
+
+export default LayoutGlobalNavView;

package/dist-lib/src/views/layout/HeaderUserView.js

@@ -0,0 +1,45 @@
+import View from '@girder/core/views/View';
+import events from '@girder/core/events';
+import { logout, getCurrentUser } from '@girder/core/auth';
+
+import LayoutHeaderUserTemplate from '@girder/core/templates/layout/layoutHeaderUser.pug';
+
+import '@girder/core/stylesheets/layout/headerUser.styl';
+
+import 'bootstrap/js/dropdown';
+
+/**
+ * This view shows the user menu, or register/sign in links if the user is
+ * not logged in.
+ */
+var LayoutHeaderUserView = View.extend({
+    events: {
+        'click a.g-login': function () {
+            events.trigger('g:loginUi');
+        },
+
+        'click a.g-register': function () {
+            events.trigger('g:registerUi');
+        },
+
+        'click a.g-logout': logout
+    },
+
+    initialize: function (settings) {
+        this.registrationPolicy = settings.registrationPolicy;
+
+        events.on('g:login', this.render, this);
+        events.on('g:login-changed', this.render, this);
+        events.on('g:logout', this.render, this);
+    },
+
+    render: function () {
+        this.$el.html(LayoutHeaderUserTemplate({
+            user: getCurrentUser(),
+            registrationPolicy: this.registrationPolicy
+        }));
+        return this;
+    }
+});
+
+export default LayoutHeaderUserView;

package/dist-lib/src/views/layout/HeaderView.js

@@ -0,0 +1,83 @@
+import _ from 'underscore';
+
+import LayoutHeaderUserView from '@girder/core/views/layout/HeaderUserView';
+import router from '@girder/core/router';
+import SearchFieldWidget from '@girder/core/views/widgets/SearchFieldWidget';
+import View from '@girder/core/views/View';
+
+import LayoutHeaderTemplate from '@girder/core/templates/layout/layoutHeader.pug';
+
+import '@girder/core/stylesheets/layout/header.styl';
+
+/**
+ * This view shows the header in the layout.
+ */
+var LayoutHeaderView = View.extend({
+    events: {
+        'click .g-app-title': function () {
+            router.navigate('', { trigger: true });
+        }
+    },
+
+    initialize: function (settings) {
+        this.brandName = settings.brandName || 'Girder';
+        this.bannerColor = settings.bannerColor || '#3F3B3B';
+
+        this.userView = new LayoutHeaderUserView({
+            parentView: this,
+            registrationPolicy: settings.registrationPolicy
+        });
+
+        /*
+         * The order of types correspond to the order of the displayed types results on the dialog box.
+         */
+        this.searchWidget = new SearchFieldWidget({
+            placeholder: 'Quick search...',
+            types: ['collection', 'folder', 'item', 'group', 'user'],
+            parentView: this
+        }).on('g:resultClicked', function (result) {
+            this.searchWidget.resetState();
+            router.navigate(result.type + '/' + result.id, {
+                trigger: true
+            });
+        }, this);
+    },
+
+    render: function () {
+        var textColor = this._getTextColor(this.bannerColor);
+        this.$el.html(LayoutHeaderTemplate({
+            brandName: this.brandName,
+            bannerColor: this.bannerColor,
+            textColor: textColor
+        }));
+        this.userView.setElement(this.$('.g-current-user-wrapper')).render();
+        if (textColor !== '#ffffff') {
+            // We will lose the hover color by setting this, so only do that if necessary
+            this.userView.$('.g-user-text a').css('color', textColor);
+        }
+        this.searchWidget.setElement(this.$('.g-quick-search-container')).render();
+
+        return this;
+    },
+
+    _getTextColor: function (bannerColor) {
+        // https://stackoverflow.com/a/3943023
+        const hexRed = bannerColor.substr(1, 2);
+        const hexGreen = bannerColor.substr(3, 2);
+        const hexBlue = bannerColor.substr(5, 2);
+        const sRGB = _.map([hexRed, hexGreen, hexBlue], (hexComponent) =>
+            parseInt(hexComponent, 16) / 255.0
+        );
+        const linearRBG = _.map(sRGB, (component) =>
+            (component <= 0.03928)
+                ? component / 12.92
+                : Math.pow((component + 0.055) / 1.055, 2.4)
+        );
+        const L = 0.2126 * linearRBG[0] + 0.7152 * linearRBG[1] + 0.0722 * linearRBG[2];
+        return ((L + 0.05) / (0.0 + 0.05) > (1.0 + 0.05) / (L + 0.05))
+            ? '#000000'
+            : '#ffffff';
+    }
+});
+
+export default LayoutHeaderView;