tickets/app/views/admin/tickets_manage/show.html.erb

396 lines
14 KiB
Plaintext

<% content_for :page_specific_css do %>
<%= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" %>
<%= stylesheet_link_tag "tickets/ticket_show" %>
<%= stylesheet_link_tag "select2/select2" %>
<% end %>
<% content_for :page_specific_javascript do %>
<%= javascript_include_tag "lib/jquery.form.js" %>
<%= javascript_include_tag "validator" %>
<%= javascript_include_tag "select2/select2.min" %>
<%= javascript_include_tag "jquery.viewport" %>
<% end %>
<% if !@ticket .nil? %>
<% case @ticket.status
when "open"
badge_class = "t-status-open"
when "closed"
badge_class = "t-status-close"
when "commenced"
badge_class = "t-status-processing"
end
%>
<div class="ticket-home-btn-wrap ticket-container">
<a class="btn btn-normal" href="/admin/tickets">
<i class="ticket-home-btn-icon fa fa-home"></i>
Back to Dashboard
</a>
<% if !@ticket.registered_site.nil? %>
<a href="http://<%= @ticket.registered_site.site_domain %>" target="_blank" class="btn btn-normal">
<i class="ticket-external-link-icon fa fa-external-link"></i>
<%= @ticket.registered_site.title %>
</a>
<a href="/admin/tickets_manage/search?keywords=sitename%3A+<%= @ticket.registered_site.title %>" target="_blank" class="btn btn-normal">
<i class="ticket-external-link-icon fa fa-search"></i>
Search tickets from <b><i><%= @ticket.registered_site.title %></i></b>
</a>
<% else %>
<span class="btn btn-normal"><i class="fa fa-chain-broken"></i> Site Deleted</span>
<% end %>
</div>
<div class="ticket-wrap">
<div class="ticket-header">
<div id="ticket-urgent-marker" class="ticket-heading-wrap <%= "active" if @ticket.is_urgent? %>" >
<h3 class="ticket-heading">#<%= @ticket.uid %> - <%= @ticket.subject[0..50] %>
<% if !@ticket.taken_by.nil? %>
<% user = User.find(@ticket.taken_by) %>
<% if user.nil? || user.member_profile.avatar.nil? || user.member_profile.avatar.thumb.url == "thumb_person.png"
avatar = "/assets/thumb_person.png"
else
avatar = user.member_profile.avatar.thumb.url
end
%>
<div class="ticket-heading-avatar tool-tip-parent">
<img class="t-avatar" src="<%= avatar %>">
<span class="ticket-heading-avatar-name tool-tip"><%= user.name rescue "Member was deleted" %></span>
</div>
<% end %>
</h3>
<div class="ticket-action">
<div class="ticket-dropdown">
<a class="ticket-dropdown-toggle" data-toggle="dropdown" href="#">
<i class="ticket-dropdown-icon fa fa-angle-down"></i>
</a>
<ul class="t-list-unstyled dropdown-menu" role="menu">
<% if @ticket.status == "open" %>
<li>
<a class="ticket-start t-item" href="/admin/tickets_manage/<%= @ticket.id.to_s %>/start" data-ticket-id="<%= @ticket.id.to_s %>">
<i class="fa fa-times-circle"></i>
Start
</a>
</li>
<li>
<a class="ticket-close t-item" href="/admin/tickets_manage/<%= @ticket.id.to_s %>/close" data-ticket-id="<%= @ticket.id.to_s %>">
<i class="fa fa-eye-slash"></i>
Close
</a>
</li>
<% elsif @ticket.status == "commenced" %>
<li>
<a class="ticket-start t-item" data-confirm="Are you sure?" href="/admin/tickets_manage/<%= @ticket.id.to_s %>/leave" data-ticket-id="<%= @ticket.id.to_s %>">
<i class="fa fa-times-circle"></i>
Leave
</a>
</li>
<li>
<a class="ticket-close t-item" href="/admin/tickets_manage/<%= @ticket.id.to_s %>/close" data-ticket-id="<%= @ticket.id.to_s %>">
<i class="fa fa-eye-slash"></i>
Close
</a>
</li>
<% elsif @ticket.status == "closed" %>
<% if @ticket.can_be_reopened? %>
<li>
<% if params[:reopen] == "true" %>
<a href="#" class="reopen-back-btn t-item" >Cancel</a>
<% else %>
<a href="/admin/tickets_manage/<%= @ticket.id.to_s %>?reopen=true" class="t-btn">Reopen</a>
<% end %>
</li>
<% else %>
<li>
This ticket cannot be reopened. Please create a new ticket.
</li>
<% end %>
<% end %>
<li>
<a class="ticket-delete t-item" data-method="delete" data-confirm="Are you sure?" href="/admin/tickets_manage/<%= @ticket.id.to_s %>" data-ticket-id="<%= @ticket.id.to_s %>">
<i class="fa fa-trash-o"></i>
Delete
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="ticket-meta-wrap clearfix">
<div class="ticket-meta">
<span class="ticket-author t-label t-label-primary">
<i class="icon-user"></i>
<%= !@ticket.ticket_creater_name.nil? ? @ticket.ticket_creater_name : @ticket.ticket_creater_id %>
</span>
<span class="ticket-created-date t-label t-label-primary">
<i class="icon-time"></i>
<% dt = DateTime.parse(@ticket.created_at.to_s) %> <%= dt.strftime("%d %B %Y - %H:%M") %>
</span>
</div>
<div class="ticket-state">
<% if @ticket.status != "closed" %>
<div class="onoffswitch ticket-toggle-urgent" title="">
<span class="ticket-tooltip-wrap"></span>
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox <%= "active" if @ticket.is_urgent? %>" id="myonoffswitch" data-url="/admin/tickets_manage/<%= @ticket.id.to_s %>/toggleurgent">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<% end %>
<span class="ticket-status t-status <%= badge_class %>">
<i class="fa fa-eye"></i>
<%= @ticket.status %>
</span>
<span class="ticket-category t-category t-category-primary">
<a class="ticket-category-dropdown" data-toggle="dropdown" href="#">
<i class="fa fa-th-list"></i>
<%= @ticket.category.title %>
<i class="fa fa-angle-down"></i>
</a>
<ul class="ticket-category-select dropdown-menu" role="menu">
<% @categories.each do |category| %>
<% if @ticket.category_id.to_s != category.id.to_s %>
<li>
<a class="ticket-start t-item ticket-category-select-option" href="#" data-category-id="<%= category.id.to_s %>">
<%= category.title %>
</a>
</li>
<% end %>
<% end %>
</ul>
</span>
</div>
</div>
</div>
<div id="query_box" class="ticket-content">
<%= render :partial => "query", :collection => @ticket.ticket_queries.asc(:created_at) %>
</div>
<% if params[:reopen] == "true"%>
<% if @ticket.status == "closed" %>
<div id="form_container" class="ticket-editor">
<form method="post" action="/admin/tickets_manage/<%= @ticket.id.to_s %>/reopen" id="reopen-form" for="query">
<textarea class="ckeditor" name="ticket_query" data-fv-validation="required;" data-fv-messages="Cannot be empty;"></textarea>
</form>
<input type="submit" id="reopen-form-submit" class="btn btn-primary" value="Reopen" />
<input type="button" class="btn reopen-back-btn" value="Cancel" />
</div>
<div id="ticket_loader" style="display:none;">
<%= image_tag("preloader.gif", size: "50") %>
<div>Posting your query.</div>
</div>
<% else %>
<h4> Ticket is already opened. </h4>
<% end %>
<% end %>
</div>
<% else %>
<div>
Error in fetching ticket.
</div>
<% end %>
<script type="text/javascript">
(function(){
var locale = "<%= I18n.locale.to_s %>",
fv = new FormValidator($("#reopen-form")),
user_id = "<%= current_user.id.to_s %>";
$("#reopen-form-submit").on("click",function(){
for (instance in CKEDITOR.instances) {
CKEDITOR.instances[instance].updateElement();
}
if(fv.isFormValidated()){
$("#form_container").hide();
$("#ticket_loader").show();
fv.form.ajaxSubmit({
success : function(data){
setTimeout(function(){
if(fv.form.attr("for") == "query"){
$("#form_container").remove();
window.location.href = window.location.pathname;
}else{
fv.reset();
$(".member_tags").select2("val","");
for (instance in CKEDITOR.instances) {
CKEDITOR.instances[instance].setData("");
}
$("#form_container").show();
$("#response-container").append(data);
}
$("#ticket_loader").hide();
},500)
},
error : function(){
$("#ticket_loader").find("img").hide();
$("#ticket_loader").find("div").text("There was some error.");
}
});
}
})
$(document).ready(function(){
if(window.location.hash != ""){
var item = window.location.hash.replace("#","");
el = $("div[data-scroll-id=" + item + "]");
if(el.length > 0){
$('html, body').scrollTop(el.offset().top - 100);
el.addClass("scroll-element");
$.ajax({
url : "/admin/comments/read",
dataType : "json",
type : "post",
data : {"response_id" : item.split("_")[1]}
}).done(function(data){
if(data.success){
el.find("img[data-avatar-id="+ data.user_id +"]").addClass("read");
}
})
el.one("mouseover",function(){
el.css('border-color', 'transparent');
})
}
}
$(".member_tags").select2({
formatResult: function (el) {
var $el = $(el.element),
member = $el.data("member"),
name = (member.name[locale] == "" ? member.name.zh_tw : member.name[locale]),
user_name = "(" + member.user_name + ")",
text = name + " " + user_name;
if (!el.id) { return el.text; }
var $state = $(
'<span><img src="' + member.avatar + '" class="img-avatar" /> ' + text + '</span>'
);
return $state;
},
placeholder: "Tag Members"
});
readbyFunction();
})
$(".reopen-back-btn").on("click",function(){
for (instance in CKEDITOR.instances) {
CKEDITOR.instances[instance].updateElement();
}
if(fv.form.find("textarea").val() == ""){
window.history.back();
}else if(confirm("Are you sure, you want to discard changes?")){
window.history.back();
}else{
return false;
}
});
function switchTooltip() {
var $switch = $('.onoffswitch'),
$input = $switch.children('input'),
$tooltip = $switch.find('.ticket-tooltip-wrap');
if ($input.hasClass("active")) {
$tooltip.text('This ticket is marked urgent, click to unmark');
} else {
$tooltip.text('Click to mark this ticket urgent');
}
}
$(".ticket-category-select-option").on("click",function(){
var el = $(this);
if(confirm("Are you sure?")){
window.location.href = window.location.pathname + "/changecategory?category_id=" + el.data("category-id");
}
return false;
});
switchTooltip();
$("#myonoffswitch").on("click",function(){
var $el = $(this);
var mark_urgent = !$el.hasClass("active");
$.ajax({
url : $el.attr("data-url"),
type : "POST",
data : {"mark_urgent": mark_urgent},
dataType : "json"
}).done(function(response){
if(response.success){
if(mark_urgent){
if(response.can_make_urgent){
$("#ticket-urgent-marker").addClass('active');
$el.addClass("active");
}else{
alert("Urgent quota for this category is already over.");
}
}else{
$("#ticket-urgent-marker").removeClass('active');
$el.removeClass("active");
}
switchTooltip();
}
})
return false;
})
$("body").on("click",".ticket-response-delete",function(){
var el = $(this);
$.ajax({
url : el.attr("href"),
data : {"response_id" : el.data("response-id")},
type : "delete",
dataType : "json"
}).done(function(){
$("div[data-scroll-id=response_" + el.data("response-id") + "]").slideUp(function(){
$(this).remove();
})
})
return false;
})
$("body").on("click",".reply-response",function(){
var el = $(this),
response_id = el.data("response-id");
$(".member_tags").select2("val",[$("div[data-scroll-id=response_" + response_id + "]").data("response-by")]);
$("html, body").animate({ scrollTop: ($("#form_container").offset().top - 50) }, "slow");
return false;
})
var openImageWindow = null;
$("body").on("click", ".ticket-response-content img, .ticket-query img", function(){
var el = $(this);
if(el.parent().prop("tagName") != "A"){
if(openImageWindow == null || openImageWindow.closed){
openImageWindow = window.open(el.attr("src"));
}else{
openImageWindow.location = el.attr("src");
}
}
})
var readbyFunction = function(){
var responses_seen = $("div[data-user-tags*=" + user_id + "]:in-viewport");
$.each(responses_seen,function(){
var el = $(this),
avatar = $("div[data-scroll-id=response_" + el.data("response-id") + "]").find("img[data-avatar-id="+ user_id +"]");
if(!avatar.hasClass("read")){
$.ajax({
url : "/admin/comments/read",
dataType : "json",
type : "post",
data : {"response_id" : el.data("response-id")}
}).done(function(data){
if(data.success){
avatar.addClass("read");
notificationManager.setNotificationNumber(data.total_ticket_count);
}
})
}
})
}
var timer = null;
$(document).on("scroll",function(){
clearTimeout(timer);
timer = setTimeout(readbyFunction,1000);
})
})();
</script>