From 9d57c8150534b815d605112dfbaa0c9b553b11d1 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@nebulon.de>
Date: Fri, 26 Jan 2018 11:31:43 +0100
Subject: [PATCH] Add group edit ui to select mailing lists

---
 webadmin/src/views/users.html | 40 ++++++++++++++++--
 webadmin/src/views/users.js   | 79 +++++++++++++++++++++++++++++++++++
 2 files changed, 115 insertions(+), 4 deletions(-)

diff --git a/webadmin/src/views/users.html b/webadmin/src/views/users.html
index f200e4aee..d927d02ce 100644
--- a/webadmin/src/views/users.html
+++ b/webadmin/src/views/users.html
@@ -188,6 +188,37 @@
     </div>
 </div>
 
+<!-- Modal edit group -->
+<div class="modal fade" id="groupEditModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">Edit group {{ groupEdit.group.name }}</h4>
+            </div>
+            <div class="modal-body" ng-show="groupEdit.busyFetching">
+                <h2><center><i class="fa fa-circle-o-notch fa-spin"></i></center></h2>
+            </div>
+            <div class="modal-body" ng-hide="groupEdit.busyFetching">
+                <form name="groupEditForm" role="form" ng-submit="groupEdit.submit()" autocomplete="off">
+                    <input type="password" style="display: none;">
+                    <div class="form-group">
+                        <label class="control-label">Email mailinglists on domains</label>
+                        <p>Each user in this group will receive the mails sent to this group's email address.</p>
+                        <div>
+                            <multiselect ng-model="groupEdit.selectedLists" options="l.address for l in groupEdit.availableLists" data-multiple="true"></multiselect>
+                        </div>
+                    </div>
+                    <input class="hide" type="submit" ng-disabled="groupEditForm.$invalid || groupEdit.busy"/>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-success" ng-click="groupEdit.submit()" ng-disabled="groupEditForm.$invalid || groupEdit.busy"><i class="fa fa-circle-o-notch fa-spin" ng-show="groupEdit.busy"></i> Save</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <!-- Modal remove group -->
 <div class="modal fade" id="groupRemoveModal" tabindex="-1" role="dialog">
     <div class="modal-dialog">
@@ -272,8 +303,8 @@
                       <thead>
                           <tr>
                               <th style="width: 1px;"></th>
-                              <th style="">User</th>
-                              <th style="" class="text-left hidden-xs hidden-sm">Groups</th>
+                              <th>User</th>
+                              <th class="text-left hidden-xs hidden-sm">Groups</th>
                               <th style="width: 100px" class="text-right">Actions</th>
                           </tr>
                       </thead>
@@ -330,16 +361,17 @@
                   <table class="table table-hover">
                       <thead>
                           <tr>
-                              <th style="">Name</th>
+                              <th>Name</th>
                               <th style="width: 300px" class="text-right">Actions</th>
                           </tr>
                       </thead>
                       <tbody>
                           <tr ng-repeat="group in groups | ignoreAdminGroup">
-                              <td class="text-overflow: ellipsis; white-space: nowrap;">
+                              <td class="hand" style="text-overflow: ellipsis; white-space: nowrap;" ng-click="groupEdit.show(group)">
                                   {{ group.name }}
                               </td>
                               <td class="text-right" style="vertical-align: bottom">
+                                  <button class="btn btn-xs btn-default" ng-click="groupEdit.show(group)" title="Edit Group"><i class="fa fa-pencil"></i></button>
                                   <button class="btn btn-xs btn-danger" ng-click="groupRemove.show(group)" title="Remove Group"><i class="fa fa-trash-o"></i></button>
                               </td>
                           </tr>
diff --git a/webadmin/src/views/users.js b/webadmin/src/views/users.js
index 3a0ff09a3..4d0e5b2a5 100644
--- a/webadmin/src/views/users.js
+++ b/webadmin/src/views/users.js
@@ -363,6 +363,85 @@ angular.module('Application').controller('UsersController', ['$scope', '$locatio
         setupLink: ''
     };
 
+    $scope.groupEdit = {
+        busy: false,
+        busyFetching: false,
+        error: {},
+        group: null,
+        lists: [],
+        availableLists: [],
+
+        show: function (group) {
+            $scope.groupEdit.busy = false;
+            $scope.groupEdit.busyFetching = true;
+            $scope.groupEdit.error = {};
+            $scope.groupEdit.availableLists = $scope.emailDomains.map(function (domain) { return { domain: domain, address: group.name + '@' + domain.domain }; });
+            $scope.groupEdit.selectedLists = [];
+            $scope.groupEdit.currentLists = [];
+
+            $scope.groupEdit.group = angular.copy(group);
+
+            var tmp = [];
+            asyncForEach($scope.emailDomains, function (domain, callback) {
+                Client.getMailingList(domain.domain, $scope.groupEdit.group.id, function (error) {
+                    if (error) return callback(error);
+
+                    var list = $scope.groupEdit.availableLists.find(function (list) { return list.domain.domain === domain.domain; });
+                    tmp.push(list);
+                    $scope.groupEdit.currentLists.push(list);
+
+                    callback();
+                });
+            }, function (error) {
+                $scope.groupEdit.busyFetching = false;
+
+                if (error) return console.error('Unable to get mailing lists.', error);
+
+                $scope.groupEdit.selectedLists = tmp;
+            });
+
+            $scope.groupEditForm.$setUntouched();
+            $scope.groupEditForm.$setPristine();
+
+            $('#groupEditModal').modal('show');
+        },
+
+        submit: function () {
+            $scope.groupEdit.busy = true;
+
+            var addedLists = $scope.groupEdit.selectedLists.filter(function (s) {
+                return !$scope.groupEdit.currentLists.find(function (c) {
+                    return c.domain.domain === s.domain.domain;
+                });
+            });
+            var removedLists = $scope.groupEdit.currentLists.filter(function (c) {
+                return !$scope.groupEdit.selectedLists.find(function (s) {
+                    return s.domain.domain === c.domain.domain;
+                });
+            });
+
+            asyncForEach(addedLists, function (list, callback) {
+                Client.addMailingList(list.domain.domain, $scope.groupEdit.group.id, callback);
+            }, function (error) {
+                if (error) {
+                    $scope.groupEdit.busy = false;
+                    return console.error('Failed to add group to mailinglists.', error);
+                }
+
+                asyncForEach(removedLists, function (list, callback) {
+                    Client.removeMailingList(list.domain.domain, $scope.groupEdit.group.id, callback);
+                }, function (error) {
+                    $scope.groupEdit.busy = false;
+                    if (error) {
+                        return console.error('Failed to remove group to mailinglists.', error);
+                    }
+
+                    $('#groupEditModal').modal('hide');
+                });
+            });
+        }
+    };
+
     $scope.groupRemove = {
         busy: false,
         error: {},