Move new mailinglist form to a dialog

This commit is contained in:
Johannes Zellner
2018-04-09 16:12:18 +02:00
parent 10a3af8e5e
commit 63e43e8d20
2 changed files with 85 additions and 46 deletions

View File

@@ -23,7 +23,7 @@
</div>
</div>
<!-- Modal enable email -->
<!-- Modal add mailbox -->
<div class="modal fade" id="mailboxAddModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
@@ -107,6 +107,41 @@
</div>
</div>
<!-- Modal add mailinglist -->
<div class="modal fade" id="mailinglistAddModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add Mailinglist</h4>
</div>
<div class="modal-body">
<form name="mailinglistadd_form" role="form" ng-submit="mailinglists.add.submit()" autocomplete="off">
<input type="password" style="display: none;">
<div class="form-group" ng-class="{ 'has-error': mailinglists.add.error.statusCode === 409 }">
<label class="control-label">Name</label>
<div class="control-label" ng-show="mailinglists.add.error.statusCode === 409">
<small>A mailbox of list with this name already exists</small>
</div>
<div class="input-group form-inline" style="margin-top: 10px;">
<input type="text" class="form-control" ng-model="mailinglists.add.name" placeholder="Name" required autofocus autocomplete="off"/>
<div class="input-group-addon">@{{ selectedDomain.domain }}</div>
</div>
</div>
<div class="form-group">
<label class="control-label">Associated Mailboxes</label><br/>
<multiselect ng-model="mailinglists.add.members" options="name for name in mailinglists.availableMailboxNames" data-multiple="true"></multiselect>
</div>
<input class="hide" type="submit" ng-disabled="mailinglistadd_form.$invalid || mailinglists.add.members.length === 0 || mailinglists.add.busy"/>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" ng-click="mailinglists.add.submit()" ng-disabled="mailinglistadd_form.$invalid || mailinglists.add.members.length === 0 || mailinglists.add.busy"><i class="fa fa-circle-o-notch fa-spin" ng-show="mailinglists.add.busy"></i> Save</button>
</div>
</div>
</div>
</div>
<!-- Modal edit mailinglist -->
<div class="modal fade" id="mailinglistEditModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
@@ -289,44 +324,38 @@
<div class="row">
<div class="col-md-12">
Mailinglists will forward all emails to the assigned mailboxes.
<br/>
<br/>
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Mailboxes</th>
<th class="text-right">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="list in mailinglists.mailinglists">
<td class="hand" ng-click="mailinglists.edit.show(list)">
{{ list.name }}
</td>
<td class="hand" ng-click="mailinglists.edit.show(list)">
{{ list.members.join(', ') }}
</td>
<td class="text-right no-wrap">
<button class="btn btn-xs btn-default" ng-click="mailinglists.edit.show(list)"><i class="fa fa-pencil"></i></button>
<button class="btn btn-xs btn-danger" ng-click="mailinglists.remove.show(list)"><i class="fa fa-trash"></i></button>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary btn-outline pull-right" ng-click="mailinglists.add.show()">
<i class="fa fa-list"></i> New Mailinglist
</button>
</div>
</div>
<br/>
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Mailboxes</th>
<th class="text-right">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="list in mailinglists.mailinglists">
<td class="hand" ng-click="mailinglists.edit.show(list)">
{{ list.name }}
</td>
<td class="hand" ng-click="mailinglists.edit.show(list)">
{{ list.members.join(', ') }}
</td>
<td class="text-right no-wrap">
<button class="btn btn-xs btn-default" ng-click="mailinglists.edit.show(list)"><i class="fa fa-pencil"></i></button>
<button class="btn btn-xs 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 Mailinglist">
<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>
<br/>