jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add group edit ui to select mailing lists

Browse Source
This commit is contained in:
Johannes Zellner
2018-01-26 11:31:43 +01:00
parent 8af587b6d9
commit 9d57c81505
2 changed files with 115 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
webadmin/src/views/users.html
View File

@@ -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>

79
webadmin/src/views/users.js
View File

@@ -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: {},