202 lines
9.0 KiB
Plaintext
202 lines
9.0 KiB
Plaintext
|
<style>
|
||
|
|
.checkbox-card .hide{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div id="member-filter" class="modal hide fade" tabindex="-1" role="dialog" data-backdrop="true">
|
||
|
|
<div class="modal-dialog" role="document">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
|
|
<h3><%= t('e_paper.subscribers') %></h3>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<div class="tabbable tabs-left">
|
||
|
|
<div class="nano">
|
||
|
|
<div class="content">
|
||
|
|
<ul class="nav nav-pills nav-stacked">
|
||
|
|
<li class="active"><a href="#epaper_subscribed" data-toggle="tab">Subscribed</a></li>
|
||
|
|
<li><a href="#epaper_unsubscribed" data-toggle="tab">Unsubscribed</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="tab-content tab-content-1">
|
||
|
|
<div class="tab-pane fade in active" id="epaper_subscribed">
|
||
|
|
<div id="subscribers_form">
|
||
|
|
<fieldset class="clearfix">
|
||
|
|
<div class="member-filter-result nano">
|
||
|
|
<div class="content">
|
||
|
|
<i class="icon-search"></i>
|
||
|
|
<input class="search_emails" placeholder="<%=t('email')%>" title="<%=t('email')%>">
|
||
|
|
<div style="margin-bottom: 1em;"></div>
|
||
|
|
<ul class="checkbox-card clearfix">
|
||
|
|
<% @subscribers.each do |subscriber| %>
|
||
|
|
<li class="check-item">
|
||
|
|
<label class="checkbox inline">
|
||
|
|
<span class="subscriber_email"><%= subscriber.email %></span>
|
||
|
|
<%= check_box_tag 'subscriber_ids[]', subscriber.id, false , :id => "subscriber_ids_#{subscriber.id}" %>
|
||
|
|
<%= hidden_field_tag 'subscriber_ids[]', subscriber.id %>
|
||
|
|
</label>
|
||
|
|
</li>
|
||
|
|
<% end %>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</fieldset>
|
||
|
|
<div class="form-actions">
|
||
|
|
<div class="btn-group dropup" style="text-align:left;">
|
||
|
|
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
|
||
|
|
Select
|
||
|
|
<span class="caret"></span>
|
||
|
|
</a>
|
||
|
|
<ul class="dropdown-menu">
|
||
|
|
<li><a href="#" class="select_all_modal"><i class="icon-ok"></i> Select All</a></li>
|
||
|
|
<li><a href="#" class="deselect_all_modal"><i class="icon-remove"></i> De-select All</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<button type="button" class="btn" data-dismiss="modal"><%= t(:cancel) %></button>
|
||
|
|
<%= submit_tag t(:confirm), class: "btn btn-primary" %>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="tab-pane fade" id="epaper_unsubscribed">
|
||
|
|
<div id="subscribers_form">
|
||
|
|
<fieldset class="clearfix">
|
||
|
|
<div class="member-filter-result nano">
|
||
|
|
<div class="content">
|
||
|
|
<i class="icon-search"></i>
|
||
|
|
<input class="search_emails" placeholder="<%=t('email')%>" title="<%=t('email')%>">
|
||
|
|
<div style="margin-bottom: 1em;"></div>
|
||
|
|
<ul class="checkbox-card clearfix">
|
||
|
|
<% @unsubscribers.each do |unsubscriber| %>
|
||
|
|
<li class="check-item">
|
||
|
|
<label class="checkbox inline">
|
||
|
|
<span class="subscriber_email"><%= unsubscriber.email %></span>
|
||
|
|
<%= check_box_tag 'subscriber_ids[]', unsubscriber.id, false , :id => "subscriber_ids_#{unsubscriber.id}" %>
|
||
|
|
<%= hidden_field_tag 'subscriber_ids[]', unsubscriber.id %>
|
||
|
|
</label>
|
||
|
|
</li>
|
||
|
|
<% end %>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</fieldset>
|
||
|
|
<div class="form-actions">
|
||
|
|
<div class="btn-group dropup" style="text-align:left;">
|
||
|
|
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
|
||
|
|
Select
|
||
|
|
<span class="caret"></span>
|
||
|
|
</a>
|
||
|
|
<ul class="dropdown-menu">
|
||
|
|
<li><a href="#" class="select_all_modal"><i class="icon-ok"></i> Select All</a></li>
|
||
|
|
<li><a href="#" class="deselect_all_modal"><i class="icon-remove"></i> De-select All</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<button type="button" class="btn" data-dismiss="modal"><%= t(:cancel) %></button>
|
||
|
|
<%= submit_tag t(:confirm), class: "btn btn-primary" %>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<style>
|
||
|
|
.checkbox-card li .member-pic {
|
||
|
|
float: left;
|
||
|
|
margin-right: 5px;
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(document).ready(function() {
|
||
|
|
$('#member-filter').on('show.bs.modal', function() {
|
||
|
|
$('#member-filter').off('show.bs.modal');
|
||
|
|
$(this).find('.nano').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true });
|
||
|
|
$(this).find('.checkbox-card').cardCheck();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
function encode_str(rawStr){
|
||
|
|
var encodedStr = rawStr.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
|
||
|
|
return '&#' + i.charCodeAt(0) + ';';
|
||
|
|
});
|
||
|
|
return encodedStr;
|
||
|
|
}
|
||
|
|
function generate_member_card(role_id,member_id,member_name,member_pic_url){
|
||
|
|
return ('<li class="filter-item selected_item selected_member check-item" id="'+member_id+'">'+
|
||
|
|
'<label>'+
|
||
|
|
'<img alt="Member pic" class="member-pic" src="'+member_pic_url+'">'+
|
||
|
|
'<span class="user-name" style="position: absolute;margin-left: 45px;">'+encode_str(member_name)+'</span>'+
|
||
|
|
'</label>'+
|
||
|
|
'<input name="<%=role_field_name rescue 'role_ids[]'%>" type="hidden" value='+role_id+'>'+
|
||
|
|
'<input name="<%=member_field_name rescue 'member_ids[]'%>" type="hidden" value='+member_id+'>'+
|
||
|
|
'<input type="checkbox">'+
|
||
|
|
'</li>')
|
||
|
|
};
|
||
|
|
function generate_role_card(role_id,role_name,member_infos){
|
||
|
|
if(member_infos.length == 0)
|
||
|
|
return "";
|
||
|
|
else{
|
||
|
|
var member_cards = "";
|
||
|
|
var fa = '<span style="top: 0.8em;position: absolute;right: 0.3em; font-family: FontAwesome;cursor: pointer;" class="fa fa-caret-down"></span>';
|
||
|
|
member_infos.forEach(function(member_info){
|
||
|
|
member_cards += generate_member_card(role_id,member_info.member_id,member_info.member_name,member_info.member_pic_url);
|
||
|
|
});
|
||
|
|
return ('<li class="selected_item selected_role role" id="'+role_id+'" style="height: unset;"><div class="selected">'+
|
||
|
|
'<label>' +
|
||
|
|
'<span class="role-name">' + role_name + '</span>'+
|
||
|
|
'<span class="badge badge-info" style="position: absolute;right: 1.5em;">' + member_infos.length + '</span>' +
|
||
|
|
'</label>' +
|
||
|
|
'<input class="filter-checkbox" type="checkbox" style="width: calc(100% - 1.5em);height: 40px;">'+fa+
|
||
|
|
'<ul class="sub-items">' +
|
||
|
|
member_cards +
|
||
|
|
'</ul></div>' +
|
||
|
|
'</li>')
|
||
|
|
};
|
||
|
|
};
|
||
|
|
function select_subscribers(){
|
||
|
|
window.selected_subscriber_ids = [];
|
||
|
|
var subscriber_cards = $('#member-filter [name="subscriber_ids[]"]:checked').map(function(i, subscriber){
|
||
|
|
window.selected_subscriber_ids.push(subscriber.value);
|
||
|
|
return $(subscriber).parent().parent().prop("outerHTML").replace('check-item active','check-item');
|
||
|
|
}).toArray().join('');
|
||
|
|
$('#members_field').html('<ul id="card-list-managers" class="checkbox-card clearfix">'+subscriber_cards+'</ul>');
|
||
|
|
$('#members_field #card-list-managers .check-item').removeClass('hide');
|
||
|
|
if(subscriber_cards != ""){
|
||
|
|
$('#members_field').css('display','block');
|
||
|
|
$('#edit_member_hint').css('display','none');
|
||
|
|
}else{
|
||
|
|
$('#members_field').css('display','none');
|
||
|
|
$('#edit_member_hint').css('display','block');
|
||
|
|
}
|
||
|
|
$('#members_field').change();
|
||
|
|
$("#member-filter").modal('hide');
|
||
|
|
}
|
||
|
|
$(document).ready(function(){
|
||
|
|
$('#subscribers_form [type="submit"]').click(select_subscribers);
|
||
|
|
if(window.selected_subscriber_ids){
|
||
|
|
window.selected_subscriber_ids.forEach(function(v){
|
||
|
|
var $v = $(`#member-filter input[value="${v}"]`);
|
||
|
|
$v.prop("checked", true);
|
||
|
|
$v.parent().parent().addClass('active');
|
||
|
|
})
|
||
|
|
}
|
||
|
|
$('.search_emails').off('input').on('input',function(){
|
||
|
|
var name = $(this).val();
|
||
|
|
var $check_items = $(this).parent().find('.check-item');
|
||
|
|
$check_items.each(function(i,item){
|
||
|
|
if( $(item).find('.subscriber_email').text().search(name) == -1){
|
||
|
|
$(item).addClass('hide');
|
||
|
|
}else{
|
||
|
|
$(item).removeClass('hide');
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
});
|
||
|
|
</script>
|