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

Fixup the mailinglist crud ui

Browse Source
This commit is contained in:
Johannes Zellner
2018-04-06 16:43:43 +02:00
parent c308bd90cb
commit de212f49c2
3 changed files with 135 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/views/email.html
+53 -7
View File
@@ -40,6 +40,23 @@
</div>
</div>
<!-- Modal remove mailinglist -->
<div class="modal fade" id="mailinglistRemoveModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<p>Really delete mailinglist <b>{{ mailinglists.remove.list.name }}@{{selectedDomain.domain}}</b>?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger" ng-click="mailinglists.remove.submit()" ng-disabled="mailinglists.remove.busy"><i class="fa fa-circle-o-notch fa-spin" ng-show="mailinglist.remove.busy"></i> Delete</button>
</div>
</div>
</div>
</div>
<!-- Test email sent -->
<div class="modal fade" id="testEmailModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
@@ -184,16 +201,45 @@
<div class="card card-large" style="margin-bottom: 15px;" ng-show="selectedDomain.mailConfig.enabled">
<div class="row">
<div class="col-md-12">
Mailinglists or forwarders are bound to user groups. Each user in a group will receive the mails sent to this group's email address.
Mailinglists will forward all emails to the assigned mailboxes.
</div>
</div>
<br/>
<div class="row">
<div class="col-md-6">
<multiselect ng-model="mailinglists.groups" options="name for name in mailinglists.availableGroups" data-multiple="true"></multiselect>
<button class="btn btn-outline btn-primary" ng-disabled="mailinglists.busy" ng-click="mailinglists.submit()"><i class="fa fa-circle-o-notch fa-spin" ng-show="mailinglists.busy"></i> Save</button>
</div>
</div>
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Mailboxes</th>
<th class="text-right" style="width: 100px;">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="list in mailinglists.mailinglists">
<td style="vertical-align: middle;">
{{ list.name }}
</td>
<td>
<multiselect ng-model="list.members" options="name for name in mailinglists.availableMailboxNames" data-multiple="true"></multiselect>
</td>
<td class="text-right no-wrap">
<button ng-show="list.members !== list.orig.members" class="btn btn-success" ng-disabled="list.busy" ng-click="mailinglists.submit(list)"><i class="fa" ng-class="{ 'fa-spin': list.busy, 'fa-circle-o-notch': list.busy, 'fa-check': !list.busy }"></i></button>
<button class="btn btn-danger" ng-click="mailinglists.remove.show(list)"><i class="fa fa-trash"></i></button>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" ng-model="mailinglists.add.name" placeholder="new list">
<p ng-show="mailinglists.add.error" class="text-danger"><b>{{ mailinglists.add.error }}</b></p>
</td>
<td>
<multiselect ng-model="mailinglists.add.members" options="name for name in mailinglists.availableMailboxNames" data-multiple="true"></multiselect>
</td>
<td class="text-right no-wrap">
<button class="btn btn-primary" ng-disabled="!mailinglists.add.name || !mailinglists.add.members.length || mailinglists.add.busy" ng-click="mailinglists.add.submit()"><i class="fa fa-circle-o-notch fa-spin" ng-show="mailinglists.add.busy"></i> Add</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="text-left" ng-show="selectedDomain.mailConfig.enabled">
dashboard/src/views/email.js
+78 -40
View File
@@ -62,42 +62,94 @@ angular.module('Application').controller('EmailController', ['$scope', '$locatio
$scope.mailinglists = {
busy: false,
groups: [], // current model in the ui by name
availableGroups: [], // all available groups by name
availableGroupsFull: [], // all available groups full objects
currentGroups: [], // currently set groups in the backend for new/removed detection
availableMailboxNames: [],
mailinglists: [],
submit: function () {
$scope.mailinglists.busy = true;
add: {
busy: false,
error: '',
name: '',
members: [],
var removedGroups = $scope.mailinglists.currentGroups.filter(function (g) { return $scope.mailinglists.groups.indexOf(g) === -1; })
.map(function (groupName) {
return $scope.mailinglists.availableGroupsFull.find(function (g) { return g.name === groupName; });
submit: function () {
$scope.mailinglists.add.busy = true;
Client.addMailingList($scope.selectedDomain.domain, $scope.mailinglists.add.name, $scope.mailinglists.add.members, function (error) {
$scope.mailinglists.add.busy = false;
if (error) {
$scope.mailinglists.add.error = error.message;
console.error(error);
return;
}
$scope.mailinglists.add.error = '';
$scope.mailinglists.add.name = '';
$scope.mailinglists.add.members = [];
$scope.mailinglists.refresh();
});
var newGroups = $scope.mailinglists.groups.filter(function (g) { return $scope.mailinglists.currentGroups.indexOf(g) === -1; })
.map(function (groupName) {
return $scope.mailinglists.availableGroupsFull.find(function (g) { return g.name === groupName; });
}
},
remove: {
busy: false,
list: null,
show: function (list) {
$scope.mailinglists.remove.list = list;
$('#mailinglistRemoveModal').modal('show');
},
submit: function () {
$scope.mailinglists.remove.busy = true;
Client.removeMailingList($scope.selectedDomain.domain, $scope.mailinglists.remove.list.name, function (error) {
$scope.mailinglists.remove.busy = false;
if (error) return console.error(error);
$scope.mailinglists.remove.list = null;
$scope.mailinglists.refresh();
$('#mailinglistRemoveModal').modal('hide');
});
}
},
asyncForEach(removedGroups, function (group, callback) {
if (!group) return callback();
refresh: function () {
Client.getMailboxes($scope.selectedDomain.domain, function (error, result) {
if (error) return console.error(error);
Client.removeMailingList($scope.selectedDomain.domain, group.id, callback);
}, function (error) {
if (error) console.error('Unable to remove mailinglists.', error);
console.log('mailboxes', result);
asyncForEach(newGroups, function (group, callback) {
if (!group) return callback();
$scope.mailinglists.availableMailboxNames = result.map(function (m) { return m.name; });
Client.addMailingList($scope.selectedDomain.domain, group.id, callback);
}, function (error) {
if (error) console.error('Unable to remove mailinglists.', error);
Client.listMailingLists($scope.selectedDomain.domain, function (error, result) {
if (error) return console.error(error);
// reset the state
$scope.mailinglists.currentGroups = $scope.mailinglists.groups.slice();
$scope.mailinglists.busy = false;
console.log('lists', result);
$scope.mailinglists.mailinglists = result.map(function (m) {
m.orig = {};
m.orig.members = m.members;
return m;
});
});
});
},
submit: function (list) {
list.busy = true;
Client.updateMailingList($scope.selectedDomain.domain, list.name, list.members, function (error) {
if (error) console.error(error);
list.orig.members = list.members;
list.busy = false;
});
}
};
@@ -427,21 +479,7 @@ angular.module('Application').controller('EmailController', ['$scope', '$locatio
$scope.selectedDomain.mailStatus = {};
$scope.mailboxes.refresh();
// mailinglists/groups
Client.getGroups(function (error, groups) {
if (error) return console.error(error);
$scope.mailinglists.availableGroupsFull = groups.slice();
$scope.mailinglists.availableGroups = groups.map(function (u) { return u.name; });
Client.listMailingLists($scope.selectedDomain.domain, function (error, lists) {
if (error) return console.error(error);
$scope.mailinglists.groups = lists.map(function (u) { return u.name; });
$scope.mailinglists.currentGroups = lists.map(function (u) { return u.name; });
});
});
$scope.mailinglists.refresh();
// we will fetch the status without blocking the ui
Client.getMailStatusForDomain($scope.selectedDomain.domain, function (error, mailStatus) {