Commit 36913deb authored by Guillaume Agniéray's avatar Guillaume Agniéray Committed by Johan Cwiklinski
Browse files

Rework ajax members modal with SUI

parent 078de956
<table id="listing" class="select_members{% if not multiple %} single{% endif %}">
<div class="ui stackable grid align-items-center">
<div class="eleven wide column">
<table id="listing" class="select_members{% if not multiple %} single{% endif %} ui celled table">
<thead>
<tr>
<th class="listing id_row">#</th>
......@@ -13,8 +15,14 @@
<tfoot>
<tr>
<td colspan="3" class="center">
{{ _T("Pages:") }}<br/>
<ul class="pages">{{ pagination|raw }}</ul>
<div class="ui basic left aligned fitted segment">
<div class="ui inverted pagination menu">
<div class="header item">
{{ _T('Pages:') }}
</div>
{{ pagination|raw }}
</div>
</div>
</td>
</tr>
</tfoot>
......@@ -51,30 +59,44 @@
{% endfor %}
</tbody>
</table>
</div>
{% if multiple %}
<section id="selected_members">
<header class="ui-state-default ui-state-active"><h3>{{ _T("Selected members") }}</h3></header>
<ul>
<div class="five wide column">
<section id="selected_members" class="ui basic fitted segment">
<div class="ui top attached accordion-styled header">
{{ _T("Selected members") }}
</div>
<div class="ui bottom attached accordion-styled segment">
{% for recipient in selected_members %}
<li id="member_{{ recipient.id }}">
<i class="ui user minus icon" aria-hidden="true"></i>
{{ recipient.sfullname }}
</li>
{% else %}
<li id="none_selected">{{ _T("No members has been selected yet.") }}</li>
<p id="none_selected">{{ _T("No members has been selected yet.") }}</p>
{% endfor %}
<ul class="ui middle aligned relaxed divided selection list">
{% for recipient in selected_members %}
<li id="member_{{ recipient.id }}" class="item">
<i class="ui user minus icon" aria-hidden="true"></i>
<span class="ui content">{{ recipient.sfullname }}</span>
</li>
{% endfor %}
{% if unreachables_members is defined and unreachables_members|length > 0 %}
{% for recipient in unreachables_members %}
<li id="member_{{ recipient.id }}" class="unreachables">
<i class="ui user minus icon" aria-hidden="true"></i>
{{ recipient.sfullname }}
</li>
<li id="member_{{ recipient.id }}" class="item">
<i class="icons">
<i class="dont disabled icon"></i>
<i class="top right corner minus icon"></i>
</i>
<span class="ui disabled content">{{ recipient.sfullname }}</span>
</li>
{% endfor %}
{% endif %}
</ul>
<button class="button" id="btnvalid">{{ _T("Validate") }}</button>
{% if the_id is defined %}
<input type="hidden" name="the_id" id="the_id" value="{{ the_id }}"/>
{% endif %}
</ul>
</div>
<div class="ui basic center aligned fitted segment">
<button class="ui fluid primary button" id="btnvalid">{{ _T("Validate") }}</button>
{% if the_id is defined %}
<input type="hidden" name="the_id" id="the_id" value="{{ the_id }}"/>
{% endif %}
</div>
</section>
</div>
{% endif %}
......@@ -235,7 +235,10 @@
data: {
multiple: true
},
{% include "elements/js/loader.js.twig" %},
{% include "elements/js/loader.js.twig" with {
selector: '#btnusers',
loader: 'button'
} %},
success: function(res){
_members_dialog(res);
},
......@@ -260,7 +263,7 @@
}
var _members_ajax_mapper = function(res){
$('#btnvalid').button().click(function(){
$('#btnvalid').click(function(){
//first, let's store new recipients in mailing object
var _recipients = new Array();
$('li[id^="member_"]').each(function(){
......@@ -272,7 +275,10 @@
data: {
recipients: _recipients
},
{% include "elements/js/loader.js.twig" %},
{% include "elements/js/loader.js.twig" with {
selector: '#btnvalid',
loader: 'button'
} %},
success: function(res){
$('#unreachables_count').remove();
$('#recipients_count').replaceWith(res);
......@@ -298,7 +304,7 @@
var _mname = $(this).text();
$('#none_selected').remove()
if ( $('#member_' + _mid).length == 0 ) {
var _li = '<li id="member_' + _mid + '">' + _mname + '</li>';
var _li = '<li id="member_' + _mid + '" class="item"><i class="user minus icon"></i><span class="ui content">' + _mname + '</span></li>';
$('#selected_members ul').append(_li);
$('#member_' + _mid).click(function(){
$(this).remove();
......@@ -330,7 +336,9 @@
members: _members,
unreachables: _unreach
},
{% include "elements/js/loader.js.twig" %},
{% include "elements/js/loader.js.twig" with {
loader: '#members_list'
} %},
success: function(res){
$('#members_list').empty();
_members_ajax_mapper(res);
......
......@@ -180,7 +180,9 @@
groups: _groups,
managed: _managed
},
{% include "elements/js/loader.js.twig" %},
{% include "elements/js/loader.js.twig" with {
selector: '#groups_field'
} %},
success: function(res){
_groups_dialog(res, _groups, _managed);
},
......@@ -258,7 +260,7 @@
var _gname = $(this).text();
$('#none_selected').remove()
if ( $('#group_' + _gid).length == 0 ) {
var _li = '<li id="group_' + _gid + '"><i class="ui user minus icon"></i> ' + _gname + '</li>';
var _li = '<li id="group_' + _gid + '" class="item"><i class="user minus icon"></i><span class="ui content">' + _gname + '</span></li>';
$('#selected_groups ul').append(_li);
$('#group_' + _gid).click(function(){
$(this).remove();
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment