From bda85406ca5f689f11d62458fadb863b4b229bab Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Fri, 8 Jan 2016 11:33:06 +0800
Subject: [PATCH] [group settings] manage members: added 'add multi members
 once' and other improvement

---
 seahub/templates/js/templates.html            | 15 +++--
 ...roup-member2.js => group-manage-member.js} |  9 ++-
 .../scripts/app/views/group-manage-members.js | 60 +++++++++++++++----
 static/scripts/common.js                      |  1 +
 4 files changed, 62 insertions(+), 23 deletions(-)
 rename static/scripts/app/views/{group-member2.js => group-manage-member.js} (92%)

diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html
index a7958d6a6b..7959bdb151 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -967,7 +967,6 @@
 <form method="post" action="" id="add-group-members-form">
     <input type="hidden" name="user_name" />
     <input type="submit" value="{% trans "Add" %}" class="submit" />
-    <p class="error hide"></p>
 </form>
 <div class="members">
     <table>
@@ -976,16 +975,16 @@
             <tr>
                 <th width="5%"></th>
                 <th width="25%">{% trans "Name" %}</th>
-                <th width="25%">{% trans "Email" %}</th>
+                <th width="35%">{% trans "Email" %}</th>
                 <th width="25%">{% trans "Role" %}</th>
-                <th width="20%">{% trans "Operations" %}</th>
+                <th width="10%"><!--Operations--></th>
             </tr>
             <% } else { %>
             <tr>
                 <th width="5%"></th>
                 <th width="30%">{% trans "Name" %}</th>
-                <th width="40%">{% trans "Email" %}</th>
-                <th width="20%">{% trans "Operations" %}</th>
+                <th width="55%">{% trans "Email" %}</th>
+                <th width="10%"><!--Operations--></th>
             </tr>
             <% } %>
         </thead>
@@ -995,7 +994,7 @@
     <p class="error hide"></p>
 </div>
 </script>
-<script type="text/template" id="group-member2-tmpl"> {# TODO: any better id? #}
+<script type="text/template" id="group-manage-member-tmpl">
 <td>
     <img src="<%= avatar_url %>" alt="" width="20" class="avatar" />
 </td>
@@ -1032,12 +1031,12 @@
     <td></td>
 <% } else { %>
     <% if (is_owner) { %>
-        <td><span class="sf2-icon-delete op-icon vh rm" title="{% trans "Delete" %}"></span></td>
+        <td><span class="sf2-icon-x2 op-icon vh rm" title="{% trans "Delete" %}"></span></td>
     <% } else { %>
         <% if (is_admin) { %>
             <td></td>
         <% } else { %>
-            <td><span class="sf2-icon-delete op-icon vh rm" title="{% trans "Delete" %}"></span></td>
+            <td><span class="sf2-icon-x2 op-icon vh rm" title="{% trans "Delete" %}"></span></td>
         <% } %>
     <% } %>
 <% } %>
diff --git a/static/scripts/app/views/group-member2.js b/static/scripts/app/views/group-manage-member.js
similarity index 92%
rename from static/scripts/app/views/group-member2.js
rename to static/scripts/app/views/group-manage-member.js
index 7b1a42fc07..55ebb0e0e7 100644
--- a/static/scripts/app/views/group-member2.js
+++ b/static/scripts/app/views/group-manage-member.js
@@ -9,7 +9,7 @@ define([
     var View = Backbone.View.extend({
         tagName: 'tr',
 
-        template: _.template($('#group-member2-tmpl').html()),
+        template: _.template($('#group-manage-member-tmpl').html()),
 
         events: {
             'mouseenter': 'highlight',
@@ -22,6 +22,7 @@ define([
         initialize: function(options) {
             this.group_id = options.group_id;
             this.is_owner = options.is_owner;
+            this.$errorContainer = options.errorContainer;
 
             this.listenTo(this.model, 'change', this.render);
         },
@@ -77,8 +78,7 @@ define([
                     } else {
                         err_msg = gettext("Failed. Please check the network.");
                     }
-                    // improve it? 
-                    Common.feedback(error_msg, 'error');
+                    _this.$errorContainer.html(err_msg).show();
                 }
             });
         },
@@ -104,8 +104,7 @@ define([
                     } else {
                         err_msg = gettext("Failed. Please check the network.");
                     }
-                    // improve it? 
-                    Common.feedback(error_msg, 'error');
+                    _this.$errorContainer.html(err_msg).show();
                 }
             });
         }
diff --git a/static/scripts/app/views/group-manage-members.js b/static/scripts/app/views/group-manage-members.js
index bf1b6b1b9e..79a7575ac9 100644
--- a/static/scripts/app/views/group-manage-members.js
+++ b/static/scripts/app/views/group-manage-members.js
@@ -4,7 +4,7 @@ define([
     'backbone',
     'common',
     'app/collections/group-members',
-    'app/views/group-member2'
+    'app/views/group-manage-member'
 ], function($, _, Backbone, Common, GroupMembers, ItemView) {
     'use strict';
 
@@ -24,6 +24,10 @@ define([
                 focus: false,
                 containerCss: {
                     'width': 560
+                },
+                onClose: function() {
+                    $(document).off('click', hideRoleEdit);
+                    $.modal.close();
                 }
             });
             this.$modalContainer = $('#simplemodal-container').css({'height':'auto'});
@@ -39,14 +43,14 @@ define([
 
             this.$loadingTip = this.$('.loading-tip');
             this.$listContainer = this.$('tbody');   
-            this.$listError = this.$('.members .error');
+            this.$error = this.$('.error');
 
             var _this = this;
             $(window).resize(function() {
                 _this.setConMaxHeight();
             });
             // click other place to hide '.role-edit'
-            $(document).click(function(e) {
+            var hideRoleEdit = function(e) {
                 var target = e.target || event.srcElement;
                 var $el = _this.$('.role-edit:visible');
                 var $td = $el.parent();
@@ -57,7 +61,8 @@ define([
                     $el.hide();
                     $td.find('.cur-role, .role-edit-icon').show();
                 }
-            });
+            };
+            $(document).click(hideRoleEdit);
         },
 
         render: function() {
@@ -78,7 +83,8 @@ define([
             var view = new ItemView({
                 model: item,
                 group_id: this.group_id,
-                is_owner: this.is_owner
+                is_owner: this.is_owner,
+                errorContainer: this.$error
             });
             if (options.prepend) {
                 this.$listContainer.prepend(view.render().el);
@@ -108,7 +114,7 @@ define([
                     } else {
                         err_msg = gettext('Please check the network.');
                     }
-                    _this.$listError.html(err_msg).show();
+                    _this.$error.html(err_msg).show();
                 }
             });
         },
@@ -121,7 +127,7 @@ define([
                 return false;
             }
             var input_val_list = input_val.split(',');
-            if (input_val_list.length == 1) {
+            if (input_val_list.length == 1) { // 1 email
                 this.collection.create({'email': input_val}, {
                     wait: true,
                     validate: true,
@@ -130,17 +136,50 @@ define([
                         $input.select2('val', '');
                     },  
                     error: function(collection, response, options) {
+                        $input.select2('val', '');
                         var err_msg;
                         if (response.responseText) {
                             err_msg = response.responseJSON.error_msg;
                         } else {
                             err_msg = gettext('Please check the network.');
                         }   
-                        _this.$listError.html(err_msg).show();
+                        _this.$error.html(err_msg).show();
                     }  
                 });
             } else {
-                // TODO: input_val_list.length > 1
+                $.ajax({
+                    url: Common.getUrl({
+                        'name': 'group_member_bulk',
+                        'group_id': _this.group_id
+                    }),
+                    type: 'post',
+                    dataType: 'json',
+                    beforeSend: Common.prepareCSRFToken,
+                    data: {'emails': input_val},
+                    success: function(data) { // data: {success, failed}
+                        $input.select2('val', '');
+
+                        if (data.success.length > 0) {
+                            _this.collection.add(data.success, {prepend: true});
+                        }
+                        var err_str = '';
+                        if (data.failed.length > 0) {
+                            $(data.failed).each(function(index, item) {
+                                err_str += item.email + ': ' + item.error_msg + '<br />';
+                            });
+                            _this.$error.html(err_str).show();
+                        }
+                    },
+                    error: function(xhr) {
+                        var err_msg;
+                        if (xhr.responseText) {
+                            err_msg = gettext('Error');
+                        } else {
+                            err_msg = gettext("Failed. Please check the network.");
+                        }
+                        _this.$error.html(err_msg).show();
+                    }
+                });
             }
 
             return false;
@@ -154,7 +193,8 @@ define([
                     - parseInt($modalContainer.css('padding-top'))
                     - parseInt($modalContainer.css('padding-bottom'))
                     - this.$('h3').outerHeight(true)
-                    - this.$('form').outerHeight(true),
+                    - this.$('form').outerHeight(true)
+                    - 20, // add some gap between the bottom borders of the popup & the window
                 'overflow': 'auto'
             });
         }
diff --git a/static/scripts/common.js b/static/scripts/common.js
index 6e3685e2d4..fede4594dc 100644
--- a/static/scripts/common.js
+++ b/static/scripts/common.js
@@ -106,6 +106,7 @@ define([
               case 'group': return siteRoot + 'api/v2.1/groups/' + options.group_id + '/';
               case 'group_members': return siteRoot + 'api/v2.1/groups/' + options.group_id + '/members/';
               case 'group_member': return siteRoot + 'api/v2.1/groups/' + options.group_id + '/members/' + options.email + '/';
+              case 'group_member_bulk': return siteRoot + 'api/v2.1/groups/' + options.group_id + '/members/bulk/';
               case 'group_repos': return siteRoot + 'api2/groups/' + options.group_id + '/repos/';
               case 'group_basic_info': return siteRoot + 'ajax/group/' + options.group_id + '/basic-info/';
               case 'toggle_group_modules': return siteRoot + 'ajax/group/' + options.group_id + '/toggle-modules/';