Merge pull request #1457 from haiwen/admin-group

udpate admin groups page

static/scripts/app/views/group-manage-members.js

@@ -167,7 +167,7 @@ define([
                         var err_str = '';
                         if (data.failed.length > 0) {
                             $(data.failed).each(function(index, item) {
-                                err_str += item.email + ': ' + item.error_msg + '<br />';
+                                err_str += Common.HTMLescape(item.email) + ': ' + Common.HTMLescape(item.error_msg) + '<br />';
                             });
                             _this.$error.html(err_str).show();
                         }

static/scripts/app/views/group-settings.js

@@ -270,7 +270,7 @@ define([
                         if (data.failed.length > 0) {
                             var err_msg = '';
                             $(data.failed).each(function(index, item) {
-                                err_msg += item.email + ': ' + item.error_msg + '<br />';
+                                err_msg += Common.HTMLescape(item.email) + ': ' + Common.HTMLescape(item.error_msg) + '<br />';
                             });
                             $error.html(err_msg).removeClass('hide');
                             Common.enableButton($submitBtn);

static/scripts/common.js

@@ -179,6 +179,10 @@ define([
                 case 'admin-library-dirents': return siteRoot + 'api/v2.1/admin/libraries/' + options.repo_id + '/dirents/';
                 case 'admin-groups': return siteRoot + 'api/v2.1/admin/groups/';
                 case 'admin-group': return siteRoot + 'api/v2.1/admin/groups/' + options.group_id + '/';
+                case 'admin-group-libraries': return siteRoot + 'api/v2.1/admin/groups/' + options.group_id + '/libraries/';
+                case 'admin-group-library': return siteRoot + 'api/v2.1/admin/groups/' + options.group_id + '/libraries/' + options.repo_id + '/';
+                case 'admin-group-members': return siteRoot + 'api/v2.1/admin/groups/' + options.group_id + '/members/';
+                case 'admin-group-member': return siteRoot + 'api/v2.1/admin/groups/' + options.group_id + '/members/' + options.email+ '/';
                 case 'admin-system-library': return siteRoot + 'api/v2.1/admin/system-library/';
                 case 'admin-trash-libraries': return siteRoot + 'api/v2.1/admin/trash-libraries/';
                 case 'admin-trash-library': return siteRoot + 'api/v2.1/admin/trash-libraries/' + options.repo_id + '/';
@@ -286,6 +290,16 @@ define([
             }
         },
 
+        getLibIconTitle: function(is_encrypted, is_readonly) {
+            if (is_encrypted) {
+                return gettext("Encrypted library");
+            } else if (is_readonly) {
+                return gettext("Read-Only library");
+            } else {
+                return gettext("Read-Write library");
+            }
+        },
+
         isHiDPI: function() {
             var pixelRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;
             if (pixelRatio > 1) {

static/scripts/sysadmin-app/collection/group-members.js

@@ -0,0 +1,29 @@
+define([
+    'underscore',
+    'backbone',
+    'common',
+    'sysadmin-app/models/group-member'
+], function(_, Backbone, Common, GroupMemberModel) {
+
+    'use strict';
+
+    var GroupMemberCollection = Backbone.Collection.extend({
+
+        model: GroupMemberModel,
+
+        setGroupId: function(group_id) {
+            this.group_id = group_id;
+        },
+
+        parse: function (data) {
+            this.group_name= data.group_name;
+            return data.members; // return the array
+        },
+
+        url: function () {
+            return Common.getUrl({name: 'admin-group-members', group_id: this.group_id});
+        }
+    });
+
+    return GroupMemberCollection;
+});

static/scripts/sysadmin-app/collection/group-repos.js

@@ -0,0 +1,29 @@
+define([
+    'underscore',
+    'backbone',
+    'common',
+    'sysadmin-app/models/group-repo'
+], function(_, Backbone, Common, GroupRepoModel) {
+
+    'use strict';
+
+    var GroupRepoCollection = Backbone.Collection.extend({
+
+        model: GroupRepoModel,
+
+        setGroupId: function(group_id) {
+            this.group_id = group_id;
+        },
+
+        parse: function (data) {
+            this.group_name= data.group_name;
+            return data.libraries; // return the array
+        },
+
+        url: function () {
+            return Common.getUrl({name: 'admin-group-libraries', group_id: this.group_id});
+        }
+    });
+
+    return GroupRepoCollection;
+});

static/scripts/sysadmin-app/models/group-member.js

@@ -0,0 +1,12 @@
+define([
+    'underscore',
+    'backbone',
+    'common'
+], function(_, Backbone, Common) {
+
+    'use strict';
+
+    var GroupMember = Backbone.Model.extend({});
+
+    return GroupMember;
+});

static/scripts/sysadmin-app/models/group-repo.js

@@ -0,0 +1,25 @@
+define([
+    'underscore',
+    'backbone',
+    'common'
+], function(_, Backbone, Common) {
+
+    'use strict';
+
+    var GroupRepo = Backbone.Model.extend({
+
+        getIconUrl: function(size) {
+            var is_encrypted = this.get('encrypted');
+            var is_readonly = this.get('permission') == "r" ? true : false;
+            return Common.getLibIconUrl(is_encrypted, is_readonly, size);
+        },
+
+        getIconTitle: function() {
+            var is_encrypted = this.get('encrypted');
+            var is_readonly = this.get('permission') == "r" ? true : false;
+            return Common.getLibIconTitle(is_encrypted, is_readonly);
+        }
+    });
+
+    return GroupRepo;
+});

static/scripts/sysadmin-app/models/repo.js

@@ -12,14 +12,8 @@ define([
         },
 
         getIconTitle: function() {
-            var icon_title = '';
-            if (this.get('encrypted')) {
-                icon_title = gettext("Encrypted library");
-            } else {
-                icon_title = gettext("Read-Write library");
-            }
-
-            return icon_title;
+            var is_encrypted = this.get('encrypted');
+            return Common.getLibIconTitle(is_encrypted, false);
         }
     });
 

static/scripts/sysadmin-app/router.js

@@ -16,12 +16,14 @@ define([
     'sysadmin-app/views/dir',
     'sysadmin-app/views/groups',
     'sysadmin-app/views/search-groups',
+    'sysadmin-app/views/group-repos',
+    'sysadmin-app/views/group-members',
     'app/views/account'
 ], function($, Backbone, Common, SideNavView, DashboardView,
     DesktopDevicesView, MobileDevicesView, DeviceErrorsView,
     ReposView, SearchReposView, SystemReposView, TrashReposView,
     SearchTrashReposView, DirView, GroupsView, SearchGroupsView,
-    AccountView) {
+    GroupReposView, GroupMembersView, AccountView) {
 
     "use strict";
 
@@ -40,6 +42,8 @@ define([
             'libs/:repo_id(/*path)': 'showLibraryDir',
             'groups/': 'showGroups',
             'search-groups/': 'showSearchGroups',
+            'groups/:group_id/libs/': 'showGroupLibraries',
+            'groups/:group_id/members/': 'showGroupMembers',
             // Default
             '*actions': 'showDashboard'
         },
@@ -69,6 +73,8 @@ define([
 
             this.groupsView = new GroupsView();
             this.searchGroupsView = new SearchGroupsView();
+            this.groupReposView = new GroupReposView();
+            this.groupMembersView = new GroupMembersView();
 
             app.ui.accountView = this.accountView = new AccountView();
 
@@ -205,6 +211,18 @@ define([
             this.searchGroupsView.show({
                 'name': decodeURIComponent(group_name)
             });
+        },
+
+        showGroupLibraries: function(group_id) {
+            this.switchCurrentView(this.groupReposView);
+            this.sideNavView.setCurTab('groups');
+            this.groupReposView.show(group_id);
+        },
+
+        showGroupMembers: function(group_id) {
+            this.switchCurrentView(this.groupMembersView);
+            this.sideNavView.setCurTab('groups');
+            this.groupMembersView.show(group_id);
         }
 
     });

static/scripts/sysadmin-app/views/group-member.js

@@ -0,0 +1,118 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common',
+    'app/views/widgets/hl-item-view'
+], function($, _, Backbone, Common, HLItemView) {
+
+    'use strict';
+
+    var GroupMemberView = HLItemView.extend({
+
+        tagName: 'tr',
+
+        template: _.template($('#group-member-item-tmpl').html()),
+
+        events: {
+            'click .user-role-edit-icon': 'showEdit',
+            'change .user-role-select': 'editRole',
+            'click .member-delete-btn': 'deleteGroupMember'
+        },
+
+        initialize: function() {
+            HLItemView.prototype.initialize.call(this);
+            this.listenTo(this.model, 'change', this.render);
+
+            var _this = this;
+            $(document).on('click', function(e) {
+                var target = e.target || event.srcElement;
+                if (!_this.$('.user-role-edit-icon, .user-role-select').is(target)) {
+                    _this.$('.cur-role, .user-role-edit-icon').show();
+                    _this.$('.user-role-select').hide();
+                }
+            });
+        },
+
+        showEdit: function() {
+            this.$('.cur-role, .user-role-edit-icon').hide();
+            this.$('.user-role-select').show();
+        },
+
+        editRole: function() {
+            var _this = this;
+
+            // '0': member, '1': admin
+            var val = this.$('[name="role"]').val();
+            var is_admin = val == 1 ? true : false;
+            $.ajax({
+                url: Common.getUrl({
+                    'name': 'admin-group-member',
+                    'group_id': _this.model.get('group_id'),
+                    'email': _this.model.get('email')
+                }),
+                type: 'put',
+                dataType: 'json',
+                beforeSend: Common.prepareCSRFToken,
+                data: {
+                    'is_admin': is_admin
+                },
+                success: function(data) {
+                    _this.model.set({
+                        'is_admin': data['is_admin'],
+                        'role': data['role']
+                    });
+                },
+                error: function(xhr) {
+                    var err_msg;
+                    if (xhr.responseText) {
+                        err_msg = $.parseJSON(xhr.responseText).error_msg;
+                    } else {
+                        err_msg = gettext("Failed. Please check the network.");
+                    }
+                    Common.feedback(err_msg, 'error');
+                }
+            });
+        },
+
+        deleteGroupMember: function() {
+            var _this = this;
+            var email = this.model.get('email');
+            var popupTitle = gettext("Delete Member");
+            var popupContent = gettext("Are you sure you want to delete %s ?").replace('%s', '<span class="op-target ellipsis ellipsis-op-target" title="' + Common.HTMLescape(email) + '">' + Common.HTMLescape(email) + '</span>');
+            var yesCallback = function() {
+                $.ajax({
+                    url: Common.getUrl({
+                        'name': 'admin-group-member',
+                        'group_id': _this.model.get('group_id'),
+                        'email': email
+                    }),
+                    type: 'DELETE',
+                    beforeSend: Common.prepareCSRFToken,
+                    dataType: 'json',
+                    success: function() {
+                        _this.$el.remove();
+                        var msg = gettext("Successfully deleted member {placeholder}").replace('{placeholder}', email);
+                        Common.feedback(msg, 'success');
+                    },
+                    error: function(xhr, textStatus, errorThrown) {
+                        Common.ajaxErrorHandler(xhr, textStatus, errorThrown);
+                    },
+                    complete: function() {
+                        $.modal.close();
+                    }
+                });
+            };
+            Common.showConfirm(popupTitle, popupContent, yesCallback);
+            return false;
+        },
+
+        render: function() {
+            this.$el.html(this.template(this.model.toJSON()));
+            return this;
+        }
+
+    });
+
+    return GroupMemberView;
+});

static/scripts/sysadmin-app/views/group-members.js

@@ -0,0 +1,187 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common',
+    'sysadmin-app/views/group-member',
+    'sysadmin-app/collection/group-members'
+], function($, _, Backbone, Common, GroupMemberView, GroupMemberCollection) {
+
+    'use strict';
+
+    var GroupMembersView = Backbone.View.extend({
+
+        id: 'admin-groups',
+
+        tabNavTemplate: _.template($("#groups-tabnav-tmpl").html()),
+        template: _.template($("#group-members-tmpl").html()),
+        addMemberFormTemplate: _.template($('#add-group-member-form-tmpl').html()),
+
+        initialize: function() {
+            this.groupMemberCollection = new GroupMemberCollection();
+            this.listenTo(this.groupMemberCollection, 'add', this.addOne);
+            this.listenTo(this.groupMemberCollection, 'reset', this.reset);
+        },
+
+        events: {
+            'click #js-add-group-member': 'addGroupMember'
+        },
+
+        addGroupMember: function () {
+            var $form = $(this.addMemberFormTemplate()),
+                _this = this;
+
+            $form.modal();
+            $('#simplemodal-container').css({'height':'auto', 'width':'auto'});
+
+            $('[name="email"]', $form).select2($.extend(
+                Common.contactInputOptionsForSelect2(), {
+                width: '275px',
+                containerCss: {'margin-bottom': '5px'},
+                placeholder: gettext("Search user or enter email and press Enter")
+            }));
+
+            $form.submit(function() {
+                var group_id = _this.groupMemberCollection.group_id;
+                var emails = $.trim($('[name="email"]', $form).val());
+                var $error = $('.error', $form);
+                var $submitBtn = $('[type="submit"]', $form);
+
+                if (!emails) {
+                    $error.html(gettext("Email is required.")).show();
+                    return false;
+                }
+
+                var input_emails = [];
+                var emails_list = emails.split(',');
+                for (var i = 0; i < emails_list.length; i++) {
+                    input_emails.push(emails_list[i]);
+                }
+
+                $error.hide();
+                Common.disableButton($submitBtn);
+
+                $.ajax({
+                    url: Common.getUrl({
+                        'name': 'admin-group-members',
+                        'group_id': group_id
+                    }),
+                    type: 'POST',
+                    dataType: 'json',
+                    beforeSend: Common.prepareCSRFToken,
+                    traditional: true,
+                    data: {'email': input_emails},
+                    success: function(data) {
+                        if (data.success.length > 0) {
+                            _this.groupMemberCollection.add(data.success, {prepend: true});
+                        }
+
+                        var err_str = '';
+                        if (data.failed.length > 0) {
+                            $(data.failed).each(function(index, item) {
+                                err_str += Common.HTMLescape(item.email) + ': ' + Common.HTMLescape(item.error_msg) + '<br />';
+                            });
+                            $error.html(err_str).show();
+                            Common.enableButton($submitBtn);
+                        } else {
+                            Common.closeModal();
+                        }
+
+                    },
+                    error: function(jqXHR, textStatus, errorThrown){
+                        var err_msg;
+                        if (jqXHR.responseText) {
+                            err_msg = jqXHR.responseJSON.error_msg;
+                        } else {
+                            err_msg = gettext('Please check the network.');
+                        }
+                        $error.html(err_msg).show();
+                        Common.enableButton($submitBtn);
+                    }
+                });
+                return false;
+            });
+            return false;
+        },
+
+        render: function() {
+            var group_id = this.groupMemberCollection.group_id;
+            this.$el.html(this.tabNavTemplate({'cur_tab': 'members', 'group_id': group_id}) + this.template());
+
+            this.$table = this.$('table');
+            this.$tableBody = $('tbody', this.$table);
+            this.$loadingTip = this.$('.loading-tip');
+            this.$emptyTip = this.$('.empty-tips');
+        },
+
+        initPage: function() {
+            this.$table.hide();
+            this.$tableBody.empty();
+            this.$loadingTip.show();
+            this.$emptyTip.hide();
+        },
+
+        hide: function() {
+            this.$el.detach();
+            this.attached = false;
+        },
+
+        show: function(group_id) {
+            if (!this.attached) {
+                this.attached = true;
+                $("#right-panel").html(this.$el);
+            }
+
+            // init collection
+            this.groupMemberCollection.setGroupId(group_id);
+            this.render();
+            this.showGroupMembers();
+        },
+
+        showGroupMembers: function() {
+            this.initPage();
+            var _this = this;
+
+            this.groupMemberCollection.fetch({
+                cache: false,
+                reset: true,
+                error: function(collection, response, opts) {
+                    var err_msg;
+                    if (response.responseText) {
+                        if (response['status'] == 401 || response['status'] == 403) {
+                            err_msg = gettext("Permission error");
+                        } else {
+                            err_msg = $.parseJSON(response.responseText).error_msg;
+                        }
+                    } else {
+                        err_msg = gettext("Failed. Please check the network.");
+                    }
+                    Common.feedback(err_msg, 'error');
+                }
+            });
+        },
+
+        reset: function() {
+            this.$loadingTip.hide();
+            if (this.groupMemberCollection.length > 0) {
+                this.groupMemberCollection.each(this.addOne, this);
+                this.$table.show();
+            } else {
+                this.$emptyTip.show();
+            }
+            this.$('.path-bar').append(this.groupMemberCollection.group_name);
+        },
+
+        addOne: function(item, collection, options) {
+            var view = new GroupMemberView({model: item});
+            if (options.prepend) {
+                this.$tableBody.prepend(view.render().el);
+            } else {
+                this.$tableBody.append(view.render().el);
+            }
+        }
+    });
+
+    return GroupMembersView;
+
+});

static/scripts/sysadmin-app/views/group-repo.js

@@ -0,0 +1,75 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common',
+    'app/views/widgets/hl-item-view'
+], function($, _, Backbone, Common, HLItemView) {
+
+    'use strict';
+
+    var GroupRepoView = HLItemView.extend({
+
+        tagName: 'tr',
+
+        template: _.template($('#group-library-item-tmpl').html()),
+
+        events: {
+            'click .repo-unshare-btn': 'unshareGroupLibrary'
+        },
+
+        initialize: function() {
+            HLItemView.prototype.initialize.call(this);
+        },
+
+        unshareGroupLibrary: function() {
+            var _this = this;
+            var repo_name = this.model.get('name');
+            var popupTitle = gettext("Unshare Library");
+            var popupContent = gettext("Are you sure you want to unshare %s ?").replace('%s', '<span class="op-target ellipsis ellipsis-op-target" title="' + Common.HTMLescape(repo_name) + '">' + Common.HTMLescape(repo_name) + '</span>');
+            var yesCallback = function() {
+                $.ajax({
+                    url: Common.getUrl({
+                        'name': 'admin-group-library',
+                        'group_id': _this.model.get('group_id'),
+                        'repo_id': _this.model.get('repo_id')
+                    }),
+                    type: 'DELETE',
+                    beforeSend: Common.prepareCSRFToken,
+                    dataType: 'json',
+                    success: function() {
+                        _this.$el.remove();
+                        var msg = gettext("Successfully unshared library {placeholder}").replace('{placeholder}', repo_name);
+                        Common.feedback(msg, 'success');
+                    },
+                    error: function(xhr, textStatus, errorThrown) {
+                        Common.ajaxErrorHandler(xhr, textStatus, errorThrown);
+                    },
+                    complete: function() {
+                        $.modal.close();
+                    }
+                });
+            };
+            Common.showConfirm(popupTitle, popupContent, yesCallback);
+            return false;
+        },
+
+        render: function() {
+            var data = this.model.toJSON(),
+                icon_size = Common.isHiDPI() ? 96 : 24,
+                icon_url = this.model.getIconUrl(icon_size);
+
+            data['icon_url'] = icon_url;
+            data['icon_title'] = this.model.getIconTitle();
+            data['formatted_size'] = Common.fileSizeFormat(data['size'], 1),
+            data['enable_sys_admin_view_repo'] = app.pageOptions.enable_sys_admin_view_repo;
+            data['is_pro'] = app.pageOptions.is_pro;
+            this.$el.html(this.template(data));
+
+            return this;
+        }
+
+    });
+
+    return GroupRepoView;
+});

static/scripts/sysadmin-app/views/group-repos.js

@@ -0,0 +1,102 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common',
+    'sysadmin-app/views/group-repo',
+    'sysadmin-app/collection/group-repos'
+], function($, _, Backbone, Common, GroupRepoView, GroupRepoCollection) {
+
+    'use strict';
+
+    var GroupReposView = Backbone.View.extend({
+
+        id: 'admin-groups',
+
+        tabNavTemplate: _.template($("#groups-tabnav-tmpl").html()),
+        template: _.template($("#group-libraries-tmpl").html()),
+
+        initialize: function() {
+            this.groupRepoCollection = new GroupRepoCollection();
+            this.listenTo(this.groupRepoCollection, 'add', this.addOne);
+            this.listenTo(this.groupRepoCollection, 'reset', this.reset);
+        },
+
+        render: function() {
+            var group_id = this.groupRepoCollection.group_id;
+            this.$el.html(this.tabNavTemplate({'cur_tab': 'libs', 'group_id': group_id}) + this.template());
+
+            this.$table = this.$('table');
+            this.$tableBody = $('tbody', this.$table);
+            this.$loadingTip = this.$('.loading-tip');
+            this.$emptyTip = this.$('.empty-tips');
+        },
+
+        initPage: function() {
+            this.$table.hide();
+            this.$tableBody.empty();
+            this.$loadingTip.show();
+            this.$emptyTip.hide();
+        },
+
+        hide: function() {
+            this.$el.detach();
+            this.attached = false;
+        },
+
+        show: function(group_id) {
+            if (!this.attached) {
+                this.attached = true;
+                $("#right-panel").html(this.$el);
+            }
+
+            // init collection
+            this.groupRepoCollection.setGroupId(group_id);
+            this.render();
+            this.showGroupLibraries();
+        },
+
+        showGroupLibraries: function() {
+            this.initPage();
+            var _this = this;
+
+            this.groupRepoCollection.fetch({
+                cache: false,
+                reset: true,
+                error: function(collection, response, opts) {
+                    var err_msg;
+                    if (response.responseText) {
+                        if (response['status'] == 401 || response['status'] == 403) {
+                            err_msg = gettext("Permission error");
+                        } else {
+                            err_msg = $.parseJSON(response.responseText).error_msg;
+                        }
+                    } else {
+                        err_msg = gettext("Failed. Please check the network.");
+                    }
+                    Common.feedback(err_msg, 'error');
+                }
+            });
+        },
+
+        reset: function() {
+            this.$loadingTip.hide();
+            if (this.groupRepoCollection.length > 0) {
+                this.groupRepoCollection.each(this.addOne, this);
+                this.$table.show();
+            } else {
+                this.$emptyTip.show();
+            }
+
+            this.$('.path-bar').append(this.groupRepoCollection.group_name);
+        },
+
+        addOne: function(library) {
+            var view = new GroupRepoView({model: library});
+            this.$tableBody.append(view.render().el);
+        }
+    });
+
+    return GroupReposView;
+
+});