epaper/app/views/admin/e_paper_subscribers/_modal_select.html.erb

207 lines
9.1 KiB
Plaintext
Executable File

<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">&times;</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(){
if(window.still_processing){
return;
}
window.still_processing = true;
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');
window.still_processing = false;
}
$(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>