[address book] added 'rename', 'set perm', 'details' for group owned library, and etc.

* added feedback for invalid quota input
    * modified empty tips for group
    * added 'New Department Library'
    * [group owned repo] added 'rename', 'set permission', 'details'

media/css/seahub.css

@@ -3907,15 +3907,15 @@ img.thumbnail {
 #groups .group-name .a {
     color:#322;
 }
-#groups table {
+#group-list table {
     margin:0 0 32px;
 }
-#groups th {
+#group-list th {
     font-size:0;
     padding:0;
+    border-bottom:0;
 }
-#groups th,
+#groups-list td {
-#groups td {
     border-bottom:0;
 }
 #groups .empty-tip {

seahub/institutions/templates/institutions/user_info.html

@@ -44,7 +44,7 @@
         </dl>
 
         <form id="set-quota-form" method="post" class="hide">{% csrf_token %}
-            <h3>{% trans "Set user storage limit" %}</h3>
+            <h3>{% trans "Set Quota" %}</h3>
             <input type="hidden" name="email" value="{{ email }}" />
             <input type="text" name="space_quota" class="input" /> MB
             <p class="tip">{% trans "Available quota:" %} {{ available_quota|seahub_filesizeformat}}</p>

seahub/templates/js/templates.html

@@ -65,6 +65,17 @@
         <input type="submit" value="{% trans "Submit"%}" class="submit" />
     </form>
 </script>
+
+<script type="text/template" id="create-department-repo-tmpl">
+    <form id="repo-create-form" action="" method="post">{% csrf_token %}
+        <h3 id="dialogTitle">{% trans "New Department Library"%}</h3>
+        <label for="repo-name">{% trans "Name"%}</label><br/>
+        <input id="repo-name" type="text" name="repo_name" value="" maxlength="{{max_file_name}}" class="input" /><br />
+        <p class="error hide"></p>
+        <input type="submit" value="{% trans "Submit"%}" class="submit" />
+    </form>
+</script>
+
 <script type="text/template" id="add-lib-label-form-tmpl">
 <form action="" method="">
     <h3 id="dialogTitle">{% trans "Label current state" %}</h3>
@@ -240,8 +251,8 @@
     <td>
         <img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
     </td>
-    <td><a href="#group/<%= group_id %>/lib/<%= id %>" class="normal"><%- name %></a></td>
+    <td><span class="repo-name-span"><a href="#group/<%= group_id %>/lib/<%= id %>" class="normal"><%- name %></a></span></td>
-    <td class="alc">
+    <td class="repo-op-td">
         <% if (app.pageOptions.is_pro) { %>
             <% if (parent_group_id == 0) { %>
                 <% if (is_repo_owner || is_admin) { %>
@@ -253,6 +264,16 @@
             <% } else { %>
                 <% if (is_staff) { %>
                     <a href="#" class="sf2-icon-delete sf2-x delete-repo op-icon vh" title="{% trans "Delete" %}" aria-label="{% trans "Delete" %}"></a>
+                    <div class="sf-dropdown sf-dropdown-inline">
+                        <a href="#" class="sf2-icon-caret-down more-op-icon op-icon vh sf-dropdown-toggle" title="{% trans "More Operations" %}" aria-label="{% trans "More Operations" %}"></a>
+                        <ul class="hidden-op repo-hidden-op hide sf-dropdown-menu">
+                            <li><a class="op js-repo-rename" href="#">{% trans "Rename" %}</a></li>
+                            <% if (app.pageOptions.folder_perm_enabled) { %>
+                            <li><a class="op js-set-repo-perm" href="#">{% trans "Permission" %}</a></li>
+                            <% } %>
+                            <li><a class="op js-repo-details" href="#">{% trans "Details" %}</a></li>
+                        </ul>
+                    </div>
                 <% } %>
             <% } %>
         <% } else { %>
@@ -275,21 +296,41 @@
         <img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
     </td>
     <td>
-        <a href="#group/<%= group_id %>/lib/<%= id %>" class="normal"><%- name %></a><br />
+        <span class="repo-name-span">
-        <% if (show_repo_owner) { %>
+            <a href="#group/<%= group_id %>/lib/<%= id %>" class="normal"><%- name %></a><br />
-        <span class="repo-meta-info" title="<%- owner %>"><%- owner_name %></span>
+            <% if (show_repo_owner) { %>
-        <% } %>
+            <span class="repo-meta-info" title="<%- owner %>"><%- owner_name %></span>
-        <span class="repo-meta-info"><%= size_formatted %></span>
+            <% } %>
-        <span class="repo-meta-info"><%= mtime_relative %></span>
+            <span class="repo-meta-info"><%= size_formatted %></span>
+            <span class="repo-meta-info"><%= mtime_relative %></span>
+        </span>
     </td>
-    <td class="alc">
+    <td class="repo-op-td">
         <% if (app.pageOptions.is_pro) { %>
-            <% if (is_repo_owner || is_admin) { %>
+            <% if (parent_group_id == 0) { %>
-                <a href="#" class="sf2-icon-share sf2-x repo-share-btn op-icon" title="{% trans "Share" %}" aria-label="{% trans "Share" %}"></a>
+                <% if (is_repo_owner || is_admin) { %>
-            <% } %>
+                    <a href="#" class="sf2-icon-share sf2-x repo-share-btn op-icon" title="{% trans "Share" %}" aria-label="{% trans "Share" %}"></a>
-            <% if (is_staff || is_repo_owner || is_admin) { %>
+                <% } %>
-                <a href="#" class="sf2-icon-delete sf2-x cancel-share op-icon" title="{% trans "Unshare" %}" aria-label="{% trans "Unshare" %}"></a>
+                <% if (is_staff || is_repo_owner || is_admin) { %>
+                    <a href="#" class="sf2-icon-delete sf2-x cancel-share op-icon" title="{% trans "Unshare" %}" aria-label="{% trans "Unshare" %}"></a>
+                <% } %>
+
+            <% } else { %>
+                <% if (is_staff) { %>
+                    <div class="sf-dropdown sf-dropdown-inline">
+                        <a href="#" class="sf2-icon-caret-down more-op-icon op-icon sf-dropdown-toggle" title="{% trans "More Operations" %}" aria-label="{% trans "More Operations" %}"></a>
+                        <ul class="hidden-op repo-hidden-op hide sf-dropdown-menu">
+                            <li><a class="op delete-repo" href="#">{% trans "Delete" %}</a></li>
+                            <li><a class="op js-repo-rename" href="#">{% trans "Rename" %}</a></li>
+                            <% if (app.pageOptions.folder_perm_enabled) { %>
+                            <li><a class="op js-set-repo-perm" href="#">{% trans "Permission" %}</a></li>
+                            <% } %>
+                            <li><a class="op js-repo-details" href="#">{% trans "Details" %}</a></li>
+                        </ul>
+                    </div>
+                <% } %>
             <% } %>
+
         <% } else { %>
             <% if (is_repo_owner) { %>
                 <a href="#" class="sf2-icon-share sf2-x repo-share-btn op-icon" title="{% trans "Share" %}" aria-label="{% trans "Share" %}"></a>
@@ -1917,7 +1958,7 @@
         <tbody></tbody>
     </table>
     <% } else { %>
-    <p class="empty-tip alc">{% trans "No library is shared to this group" %}</p>
+    <p class="empty-tip alc">{% trans "No libraries" %}</p>
     <% } %>
 </script>
 <script type="text/template" id="group-item-mobile-tmpl">
@@ -1934,7 +1975,7 @@
         <tbody></tbody>
     </table>
     <% } else { %>
-    <p class="empty-tip alc">{% trans "No library is shared to this group" %}</p>
+    <p class="empty-tip alc">{% trans "No libraries" %}</p>
     <% } %>
 </script>
 

seahub/templates/libraries.html

@@ -94,6 +94,7 @@ html,body {
 </script>
 
 <script type="text/template" id="groups-tmpl">
+<div class="cur-view-main">
 <div class="cur-view-path">
     <h3>{% trans "My Groups" %}</h3>
 </div>
@@ -110,6 +111,7 @@ html,body {
     <span class="loading-icon loading-tip"></span>
     <p class="error error-tip hide"></p>
 </div>
+</div>
 </script>
 
 <script type="text/template" id="group-tmpl">
@@ -126,11 +128,18 @@ html,body {
             <thead></thead>
             <tbody></tbody>
         </table>
-        <div class="empty-tips hide">
+        <div class="empty-tips common-group-empty-tips hide">
             <h2 class="alc">{% trans "No library is shared to this group" %}</h2>
             <p>{% blocktrans %}You can share libraries by clicking the "New Library" button above or the "Share" icon on your libraries list.{% endblocktrans %}</p>
             <p>{% trans "Libraries shared as writable can be downloaded and synced by other group members. Read only libraries can only be downloaded, updates by others will not be uploaded." %}</p>
         </div>
+        <div class="empty-tips address-book-group-empty-tips-for-member hide">
+            <h2 class="alc">{% trans "No libraries" %}</h2>
+        </div>
+        <div class="empty-tips address-book-group-empty-tips-for-admin hide">
+            <h2 class="alc">{% trans "No libraries" %}</h2>
+            <p>{% blocktrans %}You can create libraries by clicking the "New Library" button above.{% endblocktrans %}</p>
+        </div>
         <p class="error error-tip hide"></p>
     </div>
 </div>

seahub/templates/sysadmin/useradmin_js.html

@@ -264,6 +264,7 @@ $('#set-quota-form').on('submit', function() {
     }
 
     if (!(quota_int == space_quota && quota_int >= 0)) {
+        $error.html("{% trans "Invalid quota." %}").show();
         return false;
     }
 

seahub/templates/sysadmin/useradmin_table.html

@@ -155,7 +155,7 @@
 </table>
 
 <form id="set-quota-form" method="post" action="" class="hide">{% csrf_token %}
-    <h3>{% trans "Set user storage limit" %}</h3>
+    <h3>{% trans "Set quota" %}</h3>
     <input type="text" name="space_quota" class="input" /> MB
     <p class="tip">
     <span>{% trans "An integer that is greater than or equal to 0." %}</span><br />

seahub/templates/sysadmin/userinfo.html

@@ -170,7 +170,7 @@
         </form>
 
         <form id="set-quota-form" method="post" class="hide">{% csrf_token %}
-            <h3>{% trans "Set user storage limit" %}</h3>
+            <h3>{% trans "Set quota" %}</h3>
             <input type="text" name="space_quota" class="input" /> MB
             <p class="tip">
             <span>{% trans "An integer that is greater than or equal to 0." %}</span><br />
@@ -621,6 +621,7 @@ $('#set-quota-form').on('submit', function() {
     }
 
     if (!(quota_int == space_quota && quota_int >= 0)) {
+        apply_form_error(form_id, "{% trans "Invalid quota." %}");
         return false;
     }
 

static/scripts/app/views/add-department-repo.js

@@ -0,0 +1,30 @@
+define([
+    'jquery',
+    'simplemodal',
+    'underscore',
+    'backbone',
+    'common',
+    'app/views/add-repo'
+], function($, simplemodal, _, Backbone, Common, AddRepoView) {
+    'use strict';
+
+    var View = AddRepoView.extend({
+
+        template: _.template($('#create-department-repo-tmpl').html()),
+
+        templateData: function() {
+            return {
+            };
+        },
+
+        newAttributes: function() {
+            return {
+                'name': $.trim($('input[name=repo_name]', this.$el).val()),
+                'permission': $('select[name=permission]', this.$el).val()
+            };
+        }
+
+    });
+
+    return View;
+});

static/scripts/app/views/folder-perm.js

@@ -21,7 +21,8 @@ define([
             this.dir_path = options.dir_path;
             this.is_group_owned_repo = options.is_group_owned_repo;
             this.group_id = options.group_id;
-            this.path = Common.pathJoin([this.dir_path, this.obj_name])
+            this.path = this.dir_path == '/' ? '/' :
+                Common.pathJoin([this.dir_path, this.obj_name]);
 
             this.render();
 

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

@@ -16,7 +16,8 @@ define([
         events: {
         },
 
-        initialize: function() {
+        initialize: function(options) {
+            this.repoDetailsView = options.repoDetailsView;
         },
 
         render: function() {
@@ -36,6 +37,7 @@ define([
             var group_id = this.model.get('id'),
                 parent_group_id = this.model.get('parent_group_id'),
                 is_staff = $.inArray(app.pageOptions.username, this.model.get('admins')) != -1 ? true : false,
+                repoDetailsView = this.repoDetailsView,
                 $listContainer = this.$('tbody');
             var groupRepos = new GroupRepos();
             groupRepos.setGroupID(group_id);
@@ -45,6 +47,7 @@ define([
                     group_id: group_id,
                     parent_group_id: parent_group_id,
                     is_staff: is_staff,
+                    repoDetailsView: repoDetailsView,
                     show_repo_owner: false // don't show 'Owner'
                 });
                 $listContainer.append(view.render().el);

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

@@ -3,9 +3,12 @@ define([
     'underscore',
     'backbone',
     'common',
+    'app/views/share',
+    'app/views/folder-perm',
     'app/views/widgets/hl-item-view',
-    'app/views/share'
+    'app/views/widgets/dropdown'
-], function($, _, Backbone, Common, HLItemView, ShareView) {
+], function($, _, Backbone, Common, ShareView, FolderPermView,
+    HLItemView, DropdownView) {
     'use strict';
 
     var GroupRepoView = HLItemView.extend({
@@ -13,9 +16,16 @@ define([
 
         template: _.template($('#group-repo-tmpl').html()),
         mobileTemplate: _.template($('#group-repo-mobile-tmpl').html()),
+        renameTemplate: _.template($("#repo-rename-form-template").html()),
 
         events: {
-            'click .delete-repo': 'delRepo', // for group owned repo
+            // for group owned repo
+            'click .delete-repo': 'delRepo',
+            'click .js-set-repo-perm': 'setRepoPerm',
+            'click .js-repo-rename': 'renameRepo',
+            'click .js-repo-details': 'viewDetails',
+            'click': 'clickItem',
+
             'click .cancel-share': 'unshare',
             'click .repo-share-btn': 'share'
         },
@@ -27,7 +37,9 @@ define([
             this.parent_group_id = options.parent_group_id;
             this.is_staff = options.is_staff;
             this.show_repo_owner = options.show_repo_owner;
+            this.repoDetailsView = options.repoDetailsView;
 
+            this.listenTo(this.model, "change", this.render);
             this.listenTo(this.model, 'destroy', this.remove);
         },
 
@@ -56,6 +68,153 @@ define([
             return false;
         },
 
+        setRepoPerm: function() {
+            var options = {
+                'obj_name': this.model.get('name'),
+                'dir_path': '/',
+                'repo_id': this.model.get('id'),
+                'is_group_owned_repo': true,
+                'group_id': this.group_id
+            };
+            this._hideMenu();
+            new FolderPermView(options);
+            return false;
+        },
+
+        _hideMenu: function() {
+            this.dropdown.hide();
+        },
+
+        renameRepo: function() {
+            var repo_name = this.model.get('name');
+
+            var form = $(this.renameTemplate({
+                repo_name: repo_name
+            }));
+
+            var $name_span = this.$('.repo-name-span'),
+                $op_td = this.$('.repo-op-td'),
+                $name_td = $name_span.closest('td');
+            $name_td.attr('colspan', 2).css({
+                'width': $name_span.width() + $op_td.outerWidth(),
+                'height': $name_span.height()
+            }).append(form);
+            $op_td.hide();
+            $name_span.hide();
+            $('[name="newname"]', form).trigger('select');
+
+            this._hideMenu();
+            app.ui.freezeItemHightlight = true;
+
+            var cancelRename = function() {
+                app.ui.freezeItemHightlight = false;
+                form.remove();
+                $op_td.show();
+                $name_span.show();
+                $name_td.attr('colspan', 1).css({
+                    'width': $name_span.width()
+                });
+                return false; // stop bubbling (to 'doc click to hide .hidden-op')
+            };
+            $('.cancel', form).on('click', cancelRename);
+            var form_id = form.attr('id');
+            var _this = this;
+            form.on('submit', function() {
+                var new_name = $.trim($('[name="newname"]', form).val());
+                var err_msg;
+                if (!new_name) {
+                    err_msg = gettext("It is required.");
+                    Common.feedback(err_msg, 'error');
+                    return false;
+                }
+
+                if (new_name.indexOf('/') != -1) {
+                    err_msg = gettext("Name should not include '/'.");
+                    Common.feedback(err_msg, 'error');
+                    return false;
+                }
+
+                if (new_name == repo_name) {
+                    cancelRename();
+                    return false;
+                }
+
+                var submit_btn = $('[type="submit"]', form);
+                Common.disableButton(submit_btn);
+                $.ajax({
+                    url: Common.getUrl({
+                        'name': 'group_owned_repo',
+                        'group_id': _this.group_id,
+                        'repo_id': _this.model.get('id')
+                    }),
+                    type: 'PUT',
+                    dataType: 'json',
+                    beforeSend: Common.prepareCSRFToken,
+                    data: {
+                        'name': new_name
+                    },
+                    success: function(data) {
+                        app.ui.freezeItemHightlight = false;
+                        _this.model.set({'name': data.name}); // it will trigger 'change' event
+                    },
+                    error: function(xhr) {
+                        var err_msg;
+                        if (xhr.responseText) {
+                            err_msg = JSON.parse(xhr.responseText).error||JSON.parse(xhr.responseText).error_msg;
+                        } else {
+                            err_msg = gettext("Failed. Please check the network.");
+                        }
+                        Common.feedback(err_msg, 'error');
+                        Common.enableButton(submit_btn);
+                    }
+                });
+                return false;
+            });
+
+            return false;
+        },
+
+        viewDetails: function() {
+            var obj = this.model.toJSON();
+            var icon_size = Common.isHiDPI() ? 48 : 24;
+            var data = $.extend({}, obj, {
+                icon_url: this.model.getIconUrl(icon_size),
+                big_icon_url: this.model.getIconUrl()
+            });
+            var detailsView = this.repoDetailsView;
+            detailsView.show(data);
+
+            // fetch other data
+            $.ajax({
+                url: Common.getUrl({
+                    'name': 'repo_v2.1',
+                    'repo_id': this.model.get('id')
+                }),
+                cache: false,
+                dataType: 'json',
+                success: function(data) {
+                    detailsView.update({
+                        'file_count': data.file_count
+                    });
+                },
+                error: function() {
+                    detailsView.update({'error': true});
+                }
+            });
+
+            this._hideMenu();
+            return false;
+        },
+
+        clickItem: function(e) {
+            var target =  e.target || event.srcElement;
+            if (this.parent_group_id != 0 && // only for address book group repo
+                this.$('td').is(target) &&
+                this.repoDetailsView.$el.is(':visible')) {
+                this.viewDetails();
+            }
+        },
+
         render: function() {
             var obj = this.model.toJSON();
             var icon_size = Common.isHiDPI() ? 48 : 24;
@@ -74,6 +233,15 @@ define([
                 icon_title: this.model.getIconTitle()
             });
             this.$el.html(tmpl(obj));
+
+            var dropdownOptions = {};
+            if ($(window).width() < 768) {
+                dropdownOptions = {'right': 0};
+            }
+            this.dropdown = new DropdownView($.extend({
+                el: this.$('.sf-dropdown')
+            }, dropdownOptions));
+
             return this;
         },
 

static/scripts/app/views/group.js

@@ -7,11 +7,14 @@ define([
     'app/collections/group-owned-repos', // for address book group
     'app/views/group-repo',
     'app/views/add-group-repo',
+    'app/views/add-department-repo',
+    'app/views/repo-details',
     'app/views/group-members',
     'app/views/group-discussions',
     'app/views/group-settings'
 ], function($, _, Backbone, Common, GroupRepos, GroupOwnedRepos, GroupRepoView,
-    AddGroupRepoView, GroupMembersView, GroupDiscussionsView, GroupSettingsView) {
+    AddGroupRepoView, AddDepartmentRepoView, RepoDetailsView,
+    GroupMembersView, GroupDiscussionsView, GroupSettingsView) {
     'use strict';
 
     var GroupView = Backbone.View.extend({
@@ -47,6 +50,8 @@ define([
             this.settingsView = new GroupSettingsView({groupView: this});
             this.membersView = new GroupMembersView({groupView: this});
             this.discussionsView = new GroupDiscussionsView({groupView: this});
+
+            this.repoDetailsView = new RepoDetailsView({'parentView': this});
         },
 
         addOne: function(repo, collection, options) {
@@ -64,7 +69,8 @@ define([
                 model: repo,
                 group_id: this.group_id,
                 parent_group_id: this.group.parent_group_id,
-                show_repo_owner: this.group.show_repo_owner,
+                show_repo_owner: this.group.is_address_book_group ? false : true,
+                repoDetailsView: this.repoDetailsView,
                 is_staff: this.repos.is_staff
             });
 
@@ -102,12 +108,24 @@ define([
                 this.repos.each(this.addOne, this);
                 this.$table.show();
             } else {
-                this.$emptyTip.show();
+                this.showEmptyTip();
                 this.$table.hide();
             }
 
         },
 
+        showEmptyTip: function() {
+            if (this.group.is_address_book_group) {
+                if (this.group.user_is_admin) {
+                    this.$emptyTip.filter('.address-book-group-empty-tips-for-admin').show();
+                } else {
+                    this.$emptyTip.filter('.address-book-group-empty-tips-for-member').show();
+                }
+            } else {
+                this.$emptyTip.filter('.common-group-empty-tips').show();
+            }
+        },
+
         showGroup: function(options) {
             var _this = this;
 
@@ -128,17 +146,16 @@ define([
 
                     var user_can_add_repo = false;
                     var user_is_admin = false;
-                    var is_address_book_group = false;
                     if ($.inArray(app.pageOptions.username, data.admins) != -1) {
                         user_is_admin = true;
                     }
+                    _this.group.is_address_book_group = false;
+                    _this.group.user_is_admin = user_is_admin;
                     if (data.parent_group_id == 0) { // common group
                         user_can_add_repo = true;
-                        _this.group.show_repo_owner = true; // for repo list
                         _this.group.repos_for_new = _this.repos; // for creating a new library
                     } else { // address book group
-                        is_address_book_group = true;
+                        _this.group.is_address_book_group = true;
-                        _this.group.show_repo_owner = false;
                         if (app.pageOptions.is_pro && user_is_admin) {
                             user_can_add_repo = true;
                             _this.group.repos_for_new = _this.ownedRepos; // for creating a new library
@@ -152,7 +169,7 @@ define([
 
                     _this.renderPath({
                         'name': data.name,
-                        'is_address_book_group': is_address_book_group
+                        'is_address_book_group': _this.group.is_address_book_group
                     });
                     _this.renderToolbar2({
                         'id': data.id,
@@ -249,6 +266,11 @@ define([
                 this.renderToolbar();
                 this.renderMainCon();
             }
+            // when switch from a group to another group
+            if (this.repoDetailsView.$el.is(':visible')) {
+                this.repoDetailsView.hide();
+            }
+
             this.group_id = group_id;
             this.showGroup(options);
         },
@@ -261,7 +283,11 @@ define([
         createRepo: function() {
             var repos = this.group.repos_for_new;
             repos.setGroupID(this.group_id);
-            new AddGroupRepoView(repos);
+            if (this.group.is_address_book_group) {
+                new AddDepartmentRepoView(repos);
+            } else {
+                new AddGroupRepoView(repos);
+            }
         },
 
         sortByName: function() {

static/scripts/app/views/groups.js

@@ -4,8 +4,10 @@ define([
     'backbone',
     'common',
     'app/collections/groups',
+    'app/views/repo-details',
     'app/views/group-item'
-], function($, _, Backbone, Common, Groups, GroupItemView) {
+], function($, _, Backbone, Common, Groups, RepoDetailsView,
+    GroupItemView) {
     'use strict';
 
     var GroupsView = Backbone.View.extend({
@@ -19,6 +21,8 @@ define([
             this.groups = new Groups();
             this.listenTo(this.groups, 'add', this.addOne);
             this.listenTo(this.groups, 'reset', this.reset);
+
+            this.repoDetailsView = new RepoDetailsView({'parentView': this});
         },
 
         events: {
@@ -27,7 +31,8 @@ define([
 
         addOne: function(group, collection, options) {
             var view = new GroupItemView({
-                model: group
+                model: group,
+                repoDetailsView: this.repoDetailsView
             });
             if (options.prepend) {
                 this.$groupList.prepend(view.render().el);
@@ -56,7 +61,7 @@ define([
         },
 
         renderMainCon: function() {
-            this.$mainCon = $('<div class="main-panel-main" id="groups"></div>').html(this.template());
+            this.$mainCon = $('<div class="main-panel-main main-panel-main-with-side" id="groups"></div>').html(this.template());
             this.$el.append(this.$mainCon);
 
             this.$loadingTip = this.$('.loading-tip');

static/scripts/app/views/myhome-repos.js

@@ -33,7 +33,7 @@ define([
             this.listenTo(this.repos, 'add', this.addOne);
             this.listenTo(this.repos, 'reset', this.reset);
 
-            this.repoDetailsView = new RepoDetailsView();
+            this.repoDetailsView = new RepoDetailsView({'parentView': this});
         },
 
         addOne: function(repo, collection, options) {

static/scripts/app/views/repo-details.js

@@ -12,8 +12,10 @@ define([
 
         template:  _.template($('#repo-details-tmpl').html()),
 
-        initialize: function() {
+        initialize: function(options) {
             var _this = this;
+
+            this.parentView = options.parentView;
             $(document).on('keydown', function(e) {
                 // ESCAPE key pressed
                 if (e.which == 27) {
@@ -52,7 +54,7 @@ define([
             this.render();
 
             if (!$('#' + this.id).length) {
-                $('#my-repos').append(this.$el);
+                this.parentView.$('.main-panel-main-with-side').append(this.$el);
                 if (!this.$el.is(':visible')) {
                     this.$el.show();
                 }

static/scripts/sysadmin-app/views/address-book-group-item.js

@@ -77,6 +77,7 @@ define([
 
                 if (!(quota_int == quota &&
                     (quota_int > 0 || quota_int == -2))) {
+                    $error.html(gettext("Invalid quota.")).show();
                     return false;
                 }