client_management/app/views/client_managements/show.html.erb

<% content_for :page_menu do %>
 	<ul class="list-sidebar">
    <li class="item-sidebar"><a class="btn-sidebar" href="<%= sites_path %>"><i class="fa fa-home" aria-hidden="true"></i><%= t("client_management.my_sites") %></a></li>
    <li class="item-sidebar active"><a class="btn-sidebar" href="/cpanel/site/<%= @site_construct.uid %>"><i class="fa fa-envelope" aria-hidden="true"></i><%= t("client_management.tickets") %></a></li>
    <li class="item-sidebar"><a class="btn-sidebar" href="<%= cpanel_add_new_site_path(:site => @site_construct.id) %>"><i class="fa fa-server" aria-hidden="true"></i><%= t("client_management.services") %></a></li>
    <li class="item-sidebar"><a class="btn-sidebar" href="#"><i class="fa fa fa-credit-card-alt" aria-hidden="true"></i><%= t("client_management.payments") %></a></li>
  </ul>
<% end %>

<section class="cp-content col-md-10">
	<div class="cp-bread">
    <ol class="breadcrumb">
      <li><a href="/cpanel/sites">Sites</a></li>
      <li><a href="/cpanel/site/<%= @site_construct.uid %>"><%= @site_construct.title %></a></li>
      <li class="active">Tickets</li>
    </ol>
  </div>
  <h2 class="cp-page-title">
    <%= @site_construct.title %>
    <span class="cp-title-smalltext">Total Ticket(s): <span id="total-tickets-count"><%= @site_construct.tickets.count %></span></span>
  </h2>
  <div class="cp-function-box clear">
    <div class="cp-search-box">
      <form method="get">
        <%= select_tag "category", options_for_select(@categories), {:prompt => "Select Category", :class => "form-control cp-select"} %>
        <input type="text" name="keyword" id="ticket-search" class="form-control cp-input" placeholder="Keyword">
        <button type="submit" class="btn btn-success cp-submit fa fa-search form-control"></button>
        <a href="/cpanel/site/<%= @site_construct.uid %>" id="search-clear-btn" class="btn btn-default cp-reset form-control hide">Clear</a>
      </form>
    </div>
    <a href="/cpanel/site/<%= @site_construct.uid %>/new_ticket" class="btn btn-primary pull-right"><%= t("client_management.create_ticket") %></a>
  </div>
  <div id="error-msg-area" class="cp-message-box hide">
    <div class="message-text">
      Sorry, we found nothing.
    </div>
  </div>
	<div id="tickets-loading" class="cp-loading-box" style="display: none;">
    <span class="loading-text">
      <%= t("client_management.loading_tickets") %>
    </span>
    <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
  </div>
  <ul class="list-ticket" id="tickets-area" <%= current_cpanel_user.first_time_run ? "style='display:none;" : "" %>>
    
  </ul>
  <div class="cp-pagination" id="pagination-area">
    <nav aria-label="Page navigation">
    </nav>
  </div>
  <div class="cp-function-box bottom">
    <a href="/cpanel/site/<%= @site_construct.uid %>/new_ticket" class="btn btn-primary pull-right"><%= t("client_management.create_ticket") %></a>
  </div>
</section>
<script type="text/javascript">
	var urlVars = getUrlVars();
	var	pageNo = (urlVars["page"] ? parseInt(urlVars["page"]) : 1),
			category = urlVars["category"],
			keyword = urlVars["keyword"],
			loader = $("#tickets-loading"),
			ticketCounter = $("#total-tickets-count"),
			ticketsDom = $("#tickets-area"),
      errorArea = $("#error-msg-area"),
      paginationArea = $("#pagination-area");

  $(document).bind("ajaxSend", function(elm, xhr, s){
    if ((s.type == "POST") || (s.type == "DELETE")) {
      xhr.setRequestHeader('X-CSRF-Token', '<%= form_authenticity_token %>');
    }
  });

	$(document).ready(function(){
		getObjects(pageNo);
		if(category){
			$("select#category").val(category);
      $("#search-clear-btn").removeClass("hide");
		}
		if(keyword){
			$("input#ticket-search").val(keyword);
      $("#search-clear-btn").removeClass("hide");
		}
	})

  ticketsDom.on("click","a.ticket-action-btn",function(){
    var el = $(this),
        actionType = "get";
    if(el.hasClass("btn-danger")){
      actionType = "delete";
    }
    if(confirm("Are you sure?")){
      $.ajax({
        url : el.attr("href"),
        type : actionType,
        dataType : "json"
      }).done(function(data){
        if(data.success){
          getObjects(pageNo);
        }else{
          errorArea.find(".message-text").text("Sorry, we were unable to perform the requested action.");
          errorArea.removeClass("hide");
          $("*").animate({scrollTop:0}, '300');
        }
      })
    }
    return false;
  })

	var getObjects = function(page){
    pageNo = page;
		ticketsDom.hide();
		loader.show();
    paginationArea.hide();
		$.ajax({
			url : "/cpanel/site/<%= params[:site_uid] %>/tickets",
			data : {"page" : page, "category" : category, "keyword" : keyword},
			dataType : "html",
			type : "get"
		}).done(function(html){
			setTimeout(function(){
				ticketsDom.html(html).show();
				ticketCounter.text(ticketsDom.find("input[type=hidden].total-tickets").val());
				loader.hide();
				var total_pages = parseInt(ticketsDom.find("input[type=hidden].total-pages").val());
				if (total_pages > 1){
					constructPagination(page, total_pages);
				}
			}, 500);
		})
	}
	
</script>