[folder perm] rewrote it

media/css/seahub.css

@@ -2168,7 +2168,7 @@ textarea:-moz-placeholder {/* for FF */
     padding:15px;
     min-height:200px;
 }
-#folder-perm-popup .hd
+#folder-perm-popup .hd,
 #file-share .hd,
 #share-popup .hd {
     margin:0 0 8px 4px;
@@ -2829,7 +2829,10 @@ textarea:-moz-placeholder {/* for FF */
     display: inline-block;
 }
 .perm-add-perm,
+.user-perm-add-perm,
+.group-perm-add-perm,
 .perm-toggle-select,
+#folder-perm-tabs .perm-select,
 .share-permission-select,
 .user-role-select,
 .user-status-select {
@@ -3396,17 +3399,6 @@ textarea:-moz-placeholder {/* for FF */
 .group-perm-add-tr input {
     padding:2px 5px;
 }
-
-.user-perm-add-perm,
-.group-perm-add-perm,
-.perm-toggle-select,
-.share-permission-select {
-    position:relative;/*for long text in other lang in 'share admin'*/
-    padding:3px 2px;
-    background:#fff;
-    border:1px solid #ddd;
-    border-radius:2px;
-}
 .perm-add-select-folder {
     position:relative;
     right:18px;
@@ -3523,25 +3515,19 @@ textarea:-moz-placeholder {/* for FF */
 }
 
 /* user & group folder perm */
-#group-folder-perm,
+#folder-perm-tabs .tabs-panel {
-#user-folder-perm {
     width:400px;
 }
-#group-folder-perm .folder-permission-select,
+#folder-perm-tabs .perm-select {
-#user-folder-perm .folder-permission-select {
-    position:relative;/*for long text in other lang in 'share admin'*/
     height:30px;
-    padding:3px 2px;
-    background:#fff;
-    border:1px solid #ddd;
-    border-radius:2px;
 }
-#group-folder-perm .submit,
+#folder-perm-tabs .submit {
-#user-folder-perm .submit {
     margin-top:2px;
     height:30px;
 }
-#group-folder-perm .select2-choices,
+#folder-perm-tabs .select2-choices {
-#user-folder-perm .select2-choices {
     border-radius:2px;
 }
+#folder-perm-tabs table {
+    margin-top:0;
+}

seahub/templates/js/templates.html

@@ -196,7 +196,7 @@
                 <li><a class="op mv" href="#">{% trans "Move" %}</a></li>
                 <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
                 <% if (is_repo_owner) { %>
-                <li><a class="op set-permission" href="#">{% trans "Permission" %}</a></li>
+                <li><a class="op set-folder-permission" href="#">{% trans "Permission" %}</a></li>
                 <% } %>
             </ul>
             <% } %>
@@ -306,7 +306,6 @@
         </ul>
 
         <div class="fright">
-
             <img src="{{MEDIA_URL}}img/loading-icon.gif" alt="" class="loading-tip" />
             <div id="download-link-share" class="tabs-panel">
                 <form id="generate-download-link-form" action="" class="hide">
@@ -566,42 +565,43 @@
 </form>
 </script>
 <script type="text/template" id="folder-perm-item-tmpl">
-    <% for (var i = 0, len = perms.length; i < len; i++) { %>
+    <% if (is_user_perm) { %>
-        <% if (is_user) { %>
+    <td>
-            <tr class="folder-perm-item" data-user="<%= perms[i].user %>" data-perm="<%= perms[i].perm %>">
+        <a href="{{ SITE_ROOT }}profile/<% print(encodeURIComponent(user)); %>/" target="_blank"><%- user %></a>
-            <td><a href="{{ SITE_ROOT }}profile/<%= perms[i].user %>/" target="_blank"><%= perms[i].user %></a></td>
+    </td>
-        <% } else { %>
+    <% } else { %>
-            <tr class="folder-perm-item" data-group_id="<%= perms[i].group_id %>" data-perm="<%= perms[i].perm %>">
+    <td>
-            <td><a href="#/group/<%= perms[i].group_id %>/" target="_blank"><%= perms[i].group_name %></a></td>
+        <a href="#group/<%= group_id %>/" target="_blank"><%- group_name %></a>
-        <% } %>
+    </td>
-        <td>
-            <div class="perm-change">
-                <% if (perms[i].perm == 'rw') { %>
-                    <span class="perm-cur-value">{% trans "Read-Write" %}</span>
-                <% } else { %>
-                    <span class="perm-cur-value">{% trans "Read-Only" %}</span>
-                <% } %>
-                <img src="{{ MEDIA_URL }}img/edit_12.png" alt="{% trans "Edit"%}" title="{% trans "Edit"%}" class="perm-edit-icon cspt vh" />
-            </div>
-            <select class="perm-toggle-select hide w100">
-                <% if (perms[i].perm == 'rw') { %>
-                    <option value="rw" selected="selected" >{% trans "Read-Write" %}</option>
-                    <option value="r" >{% trans "Read-Only" %}</option>
-                <% } else { %>
-                    <option value="rw" >{% trans "Read-Write" %}</option>
-                    <option value="r" selected="selected" >{% trans "Read-Only" %}</option>
-                <% } %>
-            </select>
-        </td>
-        <td>
-            <img src="{{ MEDIA_URL }}img/rm.png" class="perm-delete-btn op-icon vh" title="Delete">
-        </td>
-    </tr>
     <% } %>
+    <td>
+        <div class="perm">
+            <span>
+            <% if (perm == 'rw') { %>
+                {% trans "Read-Write" %}
+            <% } else { %>
+                {% trans "Read-Only" %}
+            <% } %>
+            </span>
+            <img src="{{ MEDIA_URL }}img/edit_12.png" alt="{% trans "Edit" %}" title="{% trans "Edit" %}" class="perm-edit-icon op-icon vh" />
+        </div>
+        <select class="perm-toggle-select hide w100">
+            <% if (perm == 'rw') { %>
+                <option value="rw" selected="selected" >{% trans "Read-Write" %}</option>
+                <option value="r" >{% trans "Read-Only" %}</option>
+            <% } else { %>
+                <option value="rw" >{% trans "Read-Write" %}</option>
+                <option value="r" selected="selected" >{% trans "Read-Only" %}</option>
+            <% } %>
+        </select>
+    </td>
+    <td>
+        <img src="{{ MEDIA_URL }}img/rm.png" class="perm-delete-icon op-icon vh" alt="" title="{% trans "Delete" %}" />
+    </td>
 </script>
-<script type="text/template" id="set-folder-perm-tmpl">
+<script type="text/template" id="folder-perm-popup-tmpl">
     <h3 class="hd"><%= title %></h3>
-    <div id="set-folder-perm-tabs" class="left-right-tabs ovhd">
+    <div id="folder-perm-tabs" class="left-right-tabs ovhd">
         <ul class="left-right-tabs-nav fleft">
             <li class="tab"><a href="#user-folder-perm" class="a">{% trans "User Permission" %}</a></li>
             <li class="tab"><a href="#group-folder-perm" class="a">{% trans "Group Permission" %}</a></li>
@@ -609,51 +609,47 @@
         <div class="fright">
             <div id="user-folder-perm" class="tabs-panel">
                 <table>
-                    <tbody>
+                    <tr>
-                        <tr>
+                        <th width="50%">{% trans "User" %}</th>
-                            <th width="50%">User</th>
+                        <th width="30%">{% trans "Permission" %}</th>
-                            <th width="30%">Permission</th>
+                        <th width="20%"></th>
-                            <th width="20%"></th>
+                    </tr>
-                        </tr>
+                    <tr id="add-user-folder-perm">
-                        <tr id="user-folder-perm-form">
+                        <td>
-                            <td>
+                            <input name="email" placeholder="{% trans 'Enter or select one' %}" class="w100" />
-                                <input name="email" placeholder="{% trans 'Email' %}" class="w100" />
+                        </td>
-                            </td>
+                        <td>
-                            <td>
+                            <select name="permission" class="perm-select w100">
-                                <select name="permission" class="folder-permission-select w100">
+                                <option value="rw" selected="selected">{% trans "Read-Write" %}</option>
-                                    <option value="rw" selected="selected">{% trans "Read-Write" %}</option>
+                                <option value="r">{% trans "Read-Only" %}</option>
-                                    <option value="r">{% trans "Read-Only" %}</option>
+                            </select>
-                                </select>
+                        </td>
-                            </td>
+                        <td><input type="submit" value="{% trans "Submit" %}" class="submit" /></td>
-                            <td><input type="submit" value="{% trans "Submit" %}" class="submit" /></td>
+                    </tr>
-                        </tr>
-                    </tbody>
                 </table>
+                <p class="error hide"></p>
             </div>
             <div id="group-folder-perm" class="tabs-panel">
                 <table>
-                    <tbody>
+                    <tr>
-                        <tr>
+                        <th width="50%">{% trans "Group" %}</th>
-                            <th width="50%">Group</th>
+                        <th width="30%">{% trans "Permission" %}</th>
-                            <th width="30%">Permission</th>
+                        <th width="20%"></th>
-                            <th width="20%"></th>
+                    </tr>
-                        </tr>
+                    <tr id="add-group-folder-perm">
-                        <tr id="group-folder-perm-form">
+                        <td>
-                            <td>
+                            <select name="group" placeholder="{% trans 'Select one' %}" class="w100" multiple="multiple"></select>
-                                <select name="group" placeholder="{% trans 'Group' %}" class="w100" multiple="multiple"></select>
+                        </td>
-                            </td>
+                        <td>
-                            <td>
+                            <select name="permission" class="perm-select w100">
-                                <select name="permission" class="folder-permission-select w100">
+                                <option value="rw" selected="selected">{% trans "Read-Write" %}</option>
-                                    <option value="rw" selected="selected">{% trans "Read-Write" %}</option>
+                                <option value="r">{% trans "Read-Only" %}</option>
-                                    <option value="r">{% trans "Read-Only" %}</option>
+                            </select>
-                                </select>
+                        </td>
-                            </td>
+                        <td><input type="submit" value="{% trans "Submit" %}" class="submit" /></td>
-                            <td>
+                    </tr>
-                            <input type="submit" value="{% trans "Submit" %}" class="submit" />
-                            </td>
-                        </tr>
-                    </tbody>
                 </table>
+                <p class="error hide"></p>
             </div>
         </div>
     </div>

seahub/views/ajax.py

@@ -2248,13 +2248,12 @@ def get_folder_perm_by_path(request, repo_id):
             group_result_perm = {
                 "perm": group_perm.permission,
                 "group_id": group_perm.group_id,
-                "group_name": escape(get_group(group_perm.group_id).group_name),
+                "group_name": get_group(group_perm.group_id).group_name,
             }
             group_result_perms.append(group_result_perm)
 
     result['user_perms'] = user_result_perms
     result['group_perms'] = group_result_perms
-    result['success'] = True
 
     return HttpResponse(json.dumps(result), content_type=content_type)
 

static/scripts/app/views/dirent.js

@@ -56,18 +56,7 @@ define([
             'click .rename': 'rename',
             'click .mv': 'mvcp',
             'click .cp': 'mvcp',
-            'click .set-permission': 'setFolderPerm'
+            'click .set-folder-permission': 'setFolderPerm'
-
-        },
-
-        setFolderPerm: function() {
-            var options = {
-                    'obj_name': this.model.get('obj_name'),
-                    'dir_path': this.dir.path,
-                    'repo_id': this.dir.repo_id
-                };
-            new FolderPermView(options);
-            return false;
         },
 
         highlight: function() {
@@ -448,6 +437,16 @@ define([
                 return false;
             });
             return false;
+        },
+
+        setFolderPerm: function() {
+            var options = {
+                'obj_name': this.model.get('obj_name'),
+                'dir_path': this.dir.path,
+                'repo_id': this.dir.repo_id
+            };
+            new FolderPermView(options);
+            return false;
         }
 
     });

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

@@ -0,0 +1,138 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common'
+], function($, _, Backbone, Common) {
+    'use strict';
+
+    var FolderPermItemView = Backbone.View.extend({
+        tagName: 'tr',
+
+        template: _.template($('#folder-perm-item-tmpl').html()),
+
+        initialize: function(options) {
+            this.item_data = options.item_data;
+            this.repo_id = options.repo_id;
+            this.path = options.path;
+
+            this.render();
+        },
+
+        render: function () {
+            this.$el.html(this.template(this.item_data));
+            return this;
+        },
+
+        events: {
+            'mouseenter': 'showPermOpIcons',
+            'mouseleave': 'hidePermOpIcons',
+            'click .perm-edit-icon': 'editIconClick',
+            'change .perm-toggle-select': 'editPerm',
+            'click .perm-delete-icon': 'deletePerm'
+        },
+
+        showPermOpIcons: function () {
+            this.$el.find('.op-icon').removeClass('vh');
+        },
+
+        hidePermOpIcons: function () {
+            this.$el.find('.op-icon').addClass('vh');
+        },
+
+        editIconClick: function (e) {
+            $(e.currentTarget).closest('td')
+                .find('.perm').addClass('hide').end()
+                .find('.perm-toggle-select').removeClass('hide');
+        },
+
+        editPerm: function (e) {
+            var _this = this;
+            var perm = $(e.currentTarget).val();
+            var post_data = {
+                'perm': perm,
+                'path': this.path,
+                'type': 'modify'
+            };
+            var is_user_perm = this.item_data.is_user_perm;
+            if (is_user_perm) {
+                $.extend(post_data, {'user': this.item_data.user});
+            } else {
+                $.extend(post_data, {'group_id': this.item_data.group_id});
+            }
+            $.ajax({
+                url: Common.getUrl({
+                    name: is_user_perm ? 'set_user_folder_perm' : 'set_group_folder_perm',
+                    repo_id: this.repo_id
+                }),
+                type: 'POST',
+                dataType: 'json',
+                cache: false,
+                beforeSend: Common.prepareCSRFToken,
+                data: post_data,
+                success: function() {
+                    _this.item_data.perm = perm;
+                    _this.render();
+                },
+                error: function(xhr) {
+                    var err;
+                    if (xhr.responseText) {
+                        err = $.parseJSON(xhr.responseText).error;
+                    } else {
+                        err = gettext("Failed. Please check the network.");
+                    }
+                    if (is_user_perm) {
+                        $('#user-folder-perm .error').html(err).removeClass('hide');
+                    } else {
+                        $('#group-folder-perm .error').html(err).removeClass('hide');
+                    }
+                }
+            });
+        },
+
+        deletePerm: function () {
+            var _this = this;
+            var post_data = {
+                'perm': this.item_data.perm,
+                'path': this.path,
+                'type': 'delete'
+            };
+            var is_user_perm = this.item_data.is_user_perm;
+            if (is_user_perm) {
+                $.extend(post_data, {'user': this.item_data.user});
+            } else {
+                $.extend(post_data, {'group_id': this.item_data.group_id});
+            }
+            $.ajax({
+                url: Common.getUrl({
+                    name: is_user_perm ? 'set_user_folder_perm' : 'set_group_folder_perm',
+                    repo_id: this.repo_id
+                }),
+                type: 'POST',
+                dataType: 'json',
+                cache: false,
+                beforeSend: Common.prepareCSRFToken,
+                data: post_data,
+                success: function() {
+                    _this.remove();
+                },
+                error: function(xhr) {
+                    var err;
+                    if (xhr.responseText) {
+                        err = $.parseJSON(xhr.responseText).error;
+                    } else {
+                        err = gettext("Failed. Please check the network.");
+                    }
+                    if (is_user_perm) {
+                        $('#user-folder-perm .error').html(err).removeClass('hide');
+                    } else {
+                        $('#group-folder-perm .error').html(err).removeClass('hide');
+                    }
+                }
+            });
+        }
+
+    });
+
+    return FolderPermItemView;
+});

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

@@ -4,87 +4,95 @@ define([
     'backbone',
     'common',
     'jquery.ui.tabs',
-    'select2'
+    'select2',
-], function($, _, Backbone, Common, Tabs, Select2) {
+    'app/views/folder-perm-item'
+], function($, _, Backbone, Common, Tabs, Select2, FolderPermItemView) {
     'use strict';
 
     var FolderPermView = Backbone.View.extend({
         tagName: 'div',
         id: 'folder-perm-popup',
-        template: _.template($('#set-folder-perm-tmpl').html()),
+
-        itemTemplate: _.template($('#folder-perm-item-tmpl').html()),
+        template: _.template($('#folder-perm-popup-tmpl').html()),
 
         initialize: function(options) {
             this.repo_id = options.repo_id;
             this.obj_name = options.obj_name;
             this.dir_path = options.dir_path;
-            this.showPopup();
+            this.path = this.dir_path + this.obj_name;
+
+            this.render();
+
+            this.$el.modal({
+                appendTo: "#main",
+                focus: false,
+                containerCss: {"padding": 0}
+            });
+            $('#simplemodal-container').css({'width':'auto', 'height':'auto'});
+
+            this.$("#folder-perm-tabs").tabs();
+
+            this.panelsInit();
+
+            var _this = this;
             $(document).on('click', function(e) {
                 var target = e.target || event.srcElement;
-                if (!$('.perm-edit-icon, .perm-toggle-select').is(target)) {
+                if (!_this.$('.perm-edit-icon, .perm-toggle-select').is(target)) {
-                    $('.perm-change').removeClass('hide');
+                    _this.$('.perm').removeClass('hide');
-                    $('.perm-toggle-select').addClass('hide');
+                    _this.$('.perm-toggle-select').addClass('hide');
                 }
             });
         },
 
-        events: {
+        render: function () {
-            'mouseenter .folder-perm-item': 'showPermEditIcon',
+            this.$el.html(this.template({
-            'mouseleave .folder-perm-item': 'hidePermEditIcon',
+                title: gettext("Set {placeholder}'s permission")
-            'click .submit': 'addFolderPerm',
+                    .replace('{placeholder}', '<span class="op-target">' + Common.HTMLescape(this.obj_name) + '</span>')
-            'click .perm-edit-icon': 'editIconClick',
-            'click .perm-delete-btn': 'deleteFolderPerm',
-            'change .perm-toggle-select': 'modifyFolderPerm'
-        },
-
-        editIconClick: function (e) {
-            $(e.currentTarget).parent().addClass('hide')
-                              .next().removeClass('hide');
-        },
-
-        showPermEditIcon: function (e) {
-            var target = $(e.currentTarget);
-            target.find('.perm-edit-icon').removeClass('vh');
-            target.find('.perm-delete-btn').removeClass('vh');
-        },
-
-        hidePermEditIcon: function (e) {
-            var target = $(e.currentTarget);
-            target.find('.perm-edit-icon').addClass('vh');
-            target.find('.perm-delete-btn').addClass('vh');
-        },
-
-        showPopup: function () {
-            var $el = this.$el;
-            $el.html(this.template({
-                title: gettext("Set {placeholder}'s permission").replace('{placeholder}', '<span class="op-target">' + Common.HTMLescape(this.obj_name) + '</span>')
             }));
-            this.$("#set-folder-perm-tabs").tabs();
+            return this;
-            $el.modal({ appendTo: "#main", focus: false, containerCss: {"padding": 0} });
-            $('#simplemodal-container').css({'width':'auto', 'height':'auto'});
-            this.folderPermInit();
         },
 
-        folderPermInit: function() {
+        panelsInit: function() {
-            var user_form = this.$('#user-folder-perm-form'),
+            this.$add_user_perm = this.$('#add-user-folder-perm');
-                group_form = this.$('#group-folder-perm-form'),
+            this.$add_group_perm = this.$('#add-group-folder-perm');
 
-                contacts = app.pageOptions.contacts || [],
+            var _this = this;
-                groups = app.pageOptions.groups || [],
+            var $add_user_perm = this.$add_user_perm,
-                g_opts = '',
+                $add_group_perm = this.$add_group_perm;
 
-                _this = this,
+            // show existing perm items
-                data = { 'path': this.dir_path + this.obj_name },
+            Common.ajaxGet({
-                success_callback = function(data) {
+                'get_url': Common.getUrl({
-                    if (data['success']) {
+                    name: 'get_folder_perm_by_path',
-                         user_form.after(_this.itemTemplate({perms: data['user_perms'], is_user: true}));
+                    repo_id: this.repo_id
-                         group_form.after(_this.itemTemplate({perms: data['group_perms'], is_user: false}));
+                }),
-                    }
+                'data': {'path': this.path},
-                };
+                'after_op_success': function (data) {
+                    $(data['user_perms']).each(function(index, item) {
+                        var perm_item = new FolderPermItemView({
+                            'repo_id': _this.repo_id,
+                            'path': _this.path,
+                            'item_data':$.extend(item, {'is_user_perm': true})
+                        });
+                        $add_user_perm.after(perm_item.el);
+                    });
 
-            $('[name="email"]', user_form).select2({
+                    $(data['group_perms']).each(function(index, item) {
+                        var perm_item = new FolderPermItemView({
+                            'repo_id': _this.repo_id,
+                            'path': _this.path,
+                            'item_data':$.extend(item, {'is_user_perm': false})
+                        });
+                        $add_group_perm.after(perm_item.el);
+                    });
+                }
+            });
+
+            // use select2 to 'user' input in 'add user perm'
+            $('[name="email"]', $add_user_perm).select2({
                 maximumSelectionSize: 1,
                 tags: function () {
+                    var contacts = app.pageOptions.contacts || [];
                     var contact_list = [];
                     for (var i = 0, len = contacts.length; i < len; i++) {
                         contact_list.push(contacts[i].email);
@@ -93,186 +101,121 @@ define([
                 },
                 tokenSeparators: [',', ' '],
                 escapeMarkup: function(m) { return m; }
-            }).on("select2-focus", function(e) {
-                _this.$('.select2-choices', user_form).css({'border-color': '', 'background-color': ''});
             });
 
+            // use select2 to 'group' input in 'add group perm'
+            var groups = app.pageOptions.groups || [],
+                g_opts = '';
             for (var i = 0, len = groups.length; i < len; i++) {
                 g_opts += '<option value="' + groups[i].id + '" data-index="' + i + '">' + groups[i].name + '</option>';
             }
-            $('[name="group"]', group_form).html(g_opts).select2({
+            $('[name="group"]', $add_group_perm).html(g_opts).select2({
                 maximumSelectionSize: 1,
                 escapeMarkup: function(m) { return m; }
-            }).on("select2-focus", function(e) {
-                _this.$('.select2-choices', group_form).css({'border-color': '', 'background-color': ''});
-            });
-
-            Common.ajaxGet({
-                'get_url': Common.getUrl({name: 'get_folder_perm_by_path', repo_id: this.repo_id}),
-                'data': data,
-                'after_op_success': success_callback
             });
         },
 
-        isOnUserTab: function(e) {
+        events: {
-            if ($(e.currentTarget).closest('#user-folder-perm').length === 1) {
+            'click #add-user-folder-perm .submit': 'addUserFolderPerm',
-                return true;
+            'click #add-group-folder-perm .submit': 'addGroupFolderPerm'
-            } else {
+        },
+
+        addUserFolderPerm: function() {
+            var _this = this;
+            var form = this.$add_user_perm, // pseudo form
+                email = $('[name="email"]', form).val();
+            if (!email) {
                 return false;
             }
-        },
-
-        addFolderPerm: function (e) {
-            var is_user = this.isOnUserTab(e),
-                form, form_id, email, group_id,
-                post_url, after_op_success,
-                post_data = {'path': this.dir_path + this.obj_name, 'type': 'add'},
-                _this = this,
-                after_op_error = function(xhr, textStatus, errorThrown) {
-                    if (xhr.responseText) {
-                        Common.feedback($.parseJSON(xhr.responseText).error, 'error');
-                    } else {
-                        Common.feedback(gettext("Failed. Please check the network."), 'error');
-                    }
-                };
-
-            if (is_user) {
-                form = this.$('#user-folder-perm-form');
-                form_id = form.attr('id');
-                email = $('[name="email"]', form).val();
-                if (!email) {
-                    this.$('.select2-choices', form).css({'border-color': '#dbb1b1', 'background-color': '#fff0f0'});
-                    return false;
-                } else {
-                    post_data['user'] = email;
-                }
-                post_url = Common.getUrl({name: 'set_user_folder_perm', repo_id: this.repo_id});
-                after_op_success = function(data) {
-                    if (data['success']) {
-                        form.after(_this.itemTemplate({perms: [post_data], is_user: true}));
-                        $('[name="email"]', form).select2("val", "");
-                        _this.$('.select2-choices', form).css({'border-color': '', 'background-color': ''});
-                    }
-                };
-            } else {
-                form = this.$('#group-folder-perm-form');
-                form_id = form.attr('id');
-                group_id = $('[name="group"]', form).val();
-                if (!group_id) {
-                    this.$('.select2-choices', form).css({'border-color': '#dbb1b1', 'background-color': '#fff0f0'});
-                    return false;
-                } else {
-                    post_data['group_id'] = parseInt(group_id);
-                }
-                post_url = Common.getUrl({name: 'set_group_folder_perm', repo_id: this.repo_id});
-                after_op_success = function(data) {
-                    if (data['success']) {
-                        post_data['group_name'] = Common.HTMLescape($('[name="group"]', form).select2('data')[0].text);
-                        form.after(_this.itemTemplate({perms: [post_data], is_user: false}));
-                        $('[name="group"]', form).select2("val", "");
-                        _this.$('.select2-choices', form).css({'border-color': '', 'background-color': ''});
-                    }
-                };
-            }
-
-            post_data['perm'] = $('[name="permission"]', form).val();
 
+            var perm = $('[name="permission"]', form).val();
             Common.ajaxPost({
                 'form': form,
-                'post_url': post_url,
+                'form_id': form.attr('id'),
-                'post_data': post_data,
+                'post_url': Common.getUrl({
-                'after_op_success': after_op_success,
+                    name: 'set_user_folder_perm',
-                'after_op_error': after_op_error,
+                    repo_id: this.repo_id
-                'form_id': form_id
+                }),
-            });
+                'post_data': {
-            return false;
+                    'path': this.path,
-        },
+                    'type': 'add',
-
+                    'user': email,
-        modifyFolderPerm: function (e) {
+                    'perm': perm
-            var is_user = this.isOnUserTab(e),
-                $select = $(e.currentTarget),
-                selected_val = $select.val(),
-                url,
-                data = {
-                    'perm': selected_val,
-                    'path': this.dir_path + this.obj_name,
-                    'type': 'modify'
                 },
-                $tr = $select.closest('tr');
+                'after_op_success': function(data) {
+                    var perm_item = new FolderPermItemView({
+                        'repo_id': _this.repo_id,
+                        'path': _this.path,
+                        'item_data': {
+                            'user': email,
+                            'perm': perm,
+                            'is_user_perm': true
+                        }
+                    });
+                    form.after(perm_item.el);
 
-            if (is_user) {
+                    $('[name="email"]', form).select2("val", "");
-                data['user'] = $tr.data('user');
-                url = Common.getUrl({name: 'set_user_folder_perm', repo_id: this.repo_id});
-            } else {
-                data['group_id'] = $tr.data('group_id');
-                url = Common.getUrl({name: 'set_group_folder_perm', repo_id: this.repo_id});
-            }
-
-            $.ajax({
-                url: url,
-                type: 'POST',
-                dataType: 'json',
-                cache: false,
-                beforeSend: Common.prepareCSRFToken,
-                data: data,
-                success: function(data) {
-                    $select.addClass('hide')
-                           .prev().removeClass('hide')
-                                  .children('span')
-                                  .html($select.children('option[value="' + selected_val + '"]').text());
-                    $tr.attr('data-perm', selected_val);
                 },
-                error: function(xhr, textStatus, errorThrown) {
+                'after_op_error': function(xhr) {
+                    var err;
                     if (xhr.responseText) {
-                        Common.feedback($.parseJSON(xhr.responseText).error, 'error');
+                        err = $.parseJSON(xhr.responseText).error;
                     } else {
-                        Common.feedback(gettext("Failed. Please check the network."), 'error');
+                        err = gettext("Failed. Please check the network.");
                     }
+                    $('#user-folder-perm .error').html(err).removeClass('hide');
                 }
             });
-            return false;
         },
 
-        deleteFolderPerm: function (e) {
+        addGroupFolderPerm: function() {
-            var is_user = this.isOnUserTab(e),
+            var _this = this;
-                $tr = $(e.currentTarget).closest('tr'),
+            var form = this.$add_group_perm, // pseudo form
-                url,
+                group_input = $('[name="group"]', form),
-                data = {
+                group_id = group_input.val()[0];
-                    'perm': $tr.data('perm'),
+            if (!group_id) {
-                    'path': this.dir_path + this.obj_name,
+                return false;
-                    'type': 'delete'
-                },
-                after_op_success = function(data) {
-                    if (data['success']) {
-                        $tr.remove();
-                    }
-                };
-
-            if (is_user) {
-                data['user'] = $tr.data('user');
-                url = Common.getUrl({name: 'set_user_folder_perm', repo_id: this.repo_id});
-            } else {
-                data['group_id'] = $tr.data('group_id');
-                url = Common.getUrl({name: 'set_group_folder_perm', repo_id: this.repo_id});
             }
 
-            $.ajax({
+            var perm = $('[name="permission"]', form).val();
-                url: url,
+            Common.ajaxPost({
-                type: 'POST',
+                'form': form,
-                dataType: 'json',
+                'form_id': form.attr('id'),
-                cache: false,
+                'post_url': Common.getUrl({
-                beforeSend: Common.prepareCSRFToken,
+                    name: 'set_group_folder_perm',
-                data: data,
+                    repo_id: this.repo_id
-                success: after_op_success,
+                }),
-                error: function(xhr, textStatus, errorThrown) {
+                'post_data': {
+                    'path': this.path,
+                    'type': 'add',
+                    'group_id': group_id,
+                    'perm': perm
+                },
+                'after_op_success': function(data) {
+                    var perm_item = new FolderPermItemView({
+                        'repo_id': _this.repo_id,
+                        'path': _this.path,
+                        'item_data': {
+                            'is_user_perm': false,
+                            'perm': perm,
+                            'group_id': group_id,
+                            'group_name': $('[name="group"]', form).select2('data')[0].text
+                        }
+                    });
+                    form.after(perm_item.el);
+
+                    $('[name="group"]', form).select2("val", "");
+                },
+                'after_op_error': function(xhr) {
+                    var err;
                     if (xhr.responseText) {
-                        Common.feedback($.parseJSON(xhr.responseText).error, 'error');
+                        err = $.parseJSON(xhr.responseText).error;
                     } else {
-                        Common.feedback(gettext("Failed. Please check the network."), 'error');
+                        err = gettext("Failed. Please check the network.");
                     }
+                    $('#group-folder-perm .error').html(err).removeClass('hide');
                 }
             });
-            return false;
         }
     });
 

static/scripts/common.js

@@ -280,11 +280,6 @@ define([
                 after_op_error = params.after_op_error;
             } else {
                 after_op_error = function(xhr, textStatus, errorThrown) {
-                    if (xhr.responseText) {
-                        _this.feedback($.parseJSON(xhr.responseText).error, 'error');
-                    } else {
-                        _this.feedback(gettext("Failed. Please check the network."), 'error');
-                    }
                 };
             }
             $.ajax({