From d6a937aa2a2c4e879445a63c754426fee402bfe2 Mon Sep 17 00:00:00 2001
From: Cynthia Lin <cynthialin1004@gmail.com>
Date: Mon, 18 Dec 2017 17:16:45 -0800
Subject: [PATCH] org settings: Add functionality for adding/removing users
 from groups.

---
 static/js/settings_user_groups.js             | 36 +++++++++++++++++--
 static/styles/settings.css                    |  2 +-
 .../admin_user_group_list.handlebars          |  2 +-
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/static/js/settings_user_groups.js b/static/js/settings_user_groups.js
index 180903520f..947eed114a 100644
--- a/static/js/settings_user_groups.js
+++ b/static/js/settings_user_groups.js
@@ -47,9 +47,9 @@ exports.populate_user_groups = function () {
         });
 
         function update_save_state(draft_group) {
-            var original_group = data.members;
+            var original_group = user_groups.get_user_group_from_id(data.id).members;
             var same_groups = _.isEqual(_.sortBy(draft_group), _.sortBy(original_group));
-            var save_changes = pill_container.siblings('.save-changes');
+            var save_changes = pill_container.siblings('.save-member-changes');
             var save_hidden = save_changes.css('display') === 'none';
 
             if ((!draft_group.length || same_groups) && !save_hidden) {
@@ -76,6 +76,38 @@ exports.populate_user_groups = function () {
         pills.onPillRemove(function () {
             update_save_state(pills.keys());
         });
+
+        $('#user-groups #' + data.id).on('click', '.save-member-changes', function () {
+            var draft_group = pills.keys();
+            var group_data = user_groups.get_user_group_from_id(data.id);
+            var original_group = group_data.members;
+            var added = _.difference(draft_group, original_group);
+            var removed = _.difference(original_group, draft_group);
+            var btn = $(this);
+
+            channel.post({
+                url: "/json/user_groups/" + data.id + '/members',
+                data: {
+                    add: JSON.stringify(added),
+                    delete: JSON.stringify(removed),
+                },
+                success: function () {
+                    original_group = _.reject(original_group, function (e) {
+                        return removed.includes(e);
+                    });
+                    original_group = original_group.concat(added);
+                    group_data.members = original_group;
+                    user_groups.remove(group_data);
+                    user_groups.add(group_data);
+                    btn.text(i18n.t("Saved!")).delay(200).fadeOut(function () {
+                        $(this).html('<i class="fa fa-check" aria-hidden="true"></i>');
+                    });
+                },
+                error: function () {
+                    btn.text(i18n.t("Failed!"));
+                },
+            });
+        });
     });
 };
 
diff --git a/static/styles/settings.css b/static/styles/settings.css
index ea48c759af..b10c1cd390 100644
--- a/static/styles/settings.css
+++ b/static/styles/settings.css
@@ -827,7 +827,7 @@ input[type=checkbox].inline-block {
     font-weight: initial;
 }
 
-#user-groups .save-changes {
+#user-groups .save-member-changes {
     display: none;
     opacity: 0;
 }
diff --git a/static/templates/admin_user_group_list.handlebars b/static/templates/admin_user_group_list.handlebars
index c98a010e23..11f7157cf0 100644
--- a/static/templates/admin_user_group_list.handlebars
+++ b/static/templates/admin_user_group_list.handlebars
@@ -7,7 +7,7 @@
     <button class="button rounded small delete btn-danger">
         <i class="icon-vector-trash" aria-hidden="true"></i>
     </button>
-    <button class="button rounded small save-changes sea-green">
+    <button class="button rounded small save-member-changes sea-green">
         <i class="fa fa-check" aria-hidden="true"></i>
     </button>
 </div>