From 2d44e356d391fc9d0efa14f8630f2b80390e4cc6 Mon Sep 17 00:00:00 2001
From: Girish Ramakrishnan <girish@cloudron.io>
Date: Tue, 24 Jul 2018 22:20:00 -0700
Subject: [PATCH] Add user multi-select to group edit dialog

---
 src/js/client.js     | 12 ++++++++++++
 src/views/users.html |  9 +++++++--
 src/views/users.js   | 26 +++++++++++++++++++++-----
 3 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/src/js/client.js b/src/js/client.js
index 4e6085039..1a19e92be 100644
--- a/src/js/client.js
+++ b/src/js/client.js
@@ -723,6 +723,18 @@ angular.module('Application').service('Client', ['$http', '$interval', 'md5', 'N
         }).error(defaultErrorHandler(callback));
     };
 
+    Client.prototype.setGroupMembers = function (id, userIds, callback) {
+        var data = {
+            userIds: userIds
+
+        };
+
+        put('/api/v1/groups/' + id + '/members', data).success(function(data, status) {
+            if (status !== 200 || typeof data !== 'object') return callback(new ClientError(status, data));
+            callback(null, data);
+        }).error(defaultErrorHandler(callback));
+    };
+
     Client.prototype.removeGroup = function (groupId, password, callback) {
         var config = {
             data: {
diff --git a/src/views/users.html b/src/views/users.html
index 13454b0b1..13fc2bebe 100644
--- a/src/views/users.html
+++ b/src/views/users.html
@@ -200,11 +200,16 @@
             </div>
             <div class="modal-body">
                 <form name="groupEdit_form" role="form" ng-submit="groupEdit.submit()" autocomplete="off">
-                    <!-- currently hidden since not sure if this should be supported  -->
-                    <div class="form-group" ng-class="{ 'has-error': groupEditForm.groupName.$invalid }" ng-hide="true">
+                    <div class="form-group" ng-class="{ 'has-error': groupEditForm.groupName.$invalid }">
                         <label class="control-label">Group name</label>
                         <input type="text" class="form-control" ng-model="groupEdit.name" name="groupName" ng-disabled="groupEdit.busy" autofocus>
                     </div>
+                    <div class="form-group">
+                        <label class="control-label">Users</label>
+                        <div class="control-label">
+                            <multiselect ng-model="groupEdit.selectedUsers" options="user.username for user in users" data-compare-by="username" data-multiple="true"></multiselect>
+                        </div>
+                    </div>
                     <div class="form-group">
                         <label class="control-label">Permissions</label>
                         <div class="checkbox">
diff --git a/src/views/users.js b/src/views/users.js
index 255217fd6..c9b3f2077 100644
--- a/src/views/users.js
+++ b/src/views/users.js
@@ -8,6 +8,7 @@ angular.module('Application').controller('UsersController', ['$scope', '$locatio
 
     $scope.ready = false;
     $scope.users = [];
+    $scope.usersById = [];
     $scope.groups = [];
     $scope.groupsById = { };
     $scope.config = Client.getConfig();
@@ -286,6 +287,8 @@ angular.module('Application').controller('UsersController', ['$scope', '$locatio
         error: {},
         groupInfo: {},
         name: '',
+        selectedUsers: [],
+
         roles: {
             canManageUsers: false,
             canManageApps: false,
@@ -296,6 +299,7 @@ angular.module('Application').controller('UsersController', ['$scope', '$locatio
             $scope.groupEdit.error = {};
             $scope.groupEdit.groupInfo = groupInfo;
             $scope.groupEdit.name = groupInfo.name;
+            $scope.groupEdit.selectedUsers = groupInfo.userIds.map(function (uid) { return $scope.usersById[uid]; });
 
             for (var i = 0; i < groupInfo.roles.length; i++) {
                 switch (groupInfo.roles[i]) {
@@ -322,7 +326,7 @@ angular.module('Application').controller('UsersController', ['$scope', '$locatio
             if ($scope.groupEdit.roles.canManageDomains) roles.push('manage_domains');
 
             Client.updateGroup($scope.groupEdit.groupInfo.id, $scope.groupEdit.name, roles, function (error) {
-                $scope.groupEdit.busy = false;
+                $scope.groupEdit.busy = !!error;
 
                 if (error && error.statusCode === 409) {
                     $scope.groupEdit.error.name = 'Name already taken';
@@ -337,9 +341,17 @@ angular.module('Application').controller('UsersController', ['$scope', '$locatio
                 }
                 if (error) return console.error('Unable to edit group.', error.statusCode, error.message);
 
-                refresh();
+                var userIds = $scope.groupEdit.selectedUsers.map(function (u) { return u.id; });
 
-                $('#groupEditModal').modal('hide');
+                Client.setGroupMembers($scope.groupEdit.groupInfo.id, userIds, function (error) {
+                    $scope.groupEdit.busy = false;
+
+                    if (error) return console.error('Unable to edit group.', error.statusCode, error.message);
+
+                    refresh();
+
+                    $('#groupEditModal').modal('hide');
+                });
             });
         }
     };
@@ -464,7 +476,7 @@ angular.module('Application').controller('UsersController', ['$scope', '$locatio
         getGroups(function (error, result) {
             if (error) return console.error('Unable to get group listing.', error);
 
-            $scope.groups = result;
+            angular.copy(result, $scope.groups);
             $scope.groupsById = { };
             for (var i = 0; i < result.length; i++) {
                 $scope.groupsById[result[i].id] = result[i];
@@ -473,7 +485,11 @@ angular.module('Application').controller('UsersController', ['$scope', '$locatio
             getUsers(function (error, result) {
                 if (error) return console.error('Unable to get user listing.', error);
 
-                $scope.users = result;
+                angular.copy(result, $scope.users);
+                $scope.usersById = { };
+                for (var i = 0; i < result.length; i++) {
+                    $scope.usersById[result[i].id] = result[i];
+                }
 
                 $scope.ready = true;
             });