vendor/uvdesk/support-center-bundle/Resources/views/Knowledgebase/ticketList.html.twig line 1

Open in your IDE?
  1. {% extends "@UVDeskSupportCenter/Templates/layout.html.twig" %}
  4. {# WebkulUVDeskSupportCenterBundle/Resources/views/Front/ticketList.html.twig #}
  5. {% block title %}{% trans %}Tickets{% endtrans %}{% endblock %}
  6. {% block ogtitle %}{% trans %}Tickets{% endtrans %}{% endblock %}
  7. {% block twtitle %}{% trans %}Tickets{% endtrans %}{% endblock %}
  8. {% block metaDescription %}{% trans %}ticketlist.metaDescription{% endtrans %}{% endblock %}
  9. {% block metaKeywords %}{% trans %}ticketlist.metaKeywords{% endtrans %}{% endblock %}
  11. {% block tabHeader %}
  12.     <div class="uv-nav-bar uv-nav-tab">
  13.         <div class="uv-container">
  14.             <div class="uv-nav-bar-lt">
  15.                 <ul class="uv-nav-tab-label">
  17.                     <li><a class="uv-nav-tab-active" href="{{ path('helpdesk_customer_ticket_collection') }}">{{ 'Ticket Requests'|trans }}</a></li>
  18.                     {% if websiteConfiguration.ticketCreateOption is defined and websiteConfiguration.ticketCreateOption %}
  19.                         <li><a href="{{ path('helpdesk_customer_create_ticket') }}">{{ 'New Ticket Request'|trans }}</a></li>
  20.                         <li>  <a href="{{path('helpdesk_knowledgebase_folder')}}">{{"Home"|trans}}</a></li>
  21.                     {% endif %}
  22.                 </ul>
  23.             </div>
  24.             <div class="uv-nav-bar-rt">
  25.                 <form method="get" action="{{path('helpdesk_customer_front_article_search')}}">
  27.                     <input name="s" class="uv-nav-search" type="text" placeholder="{{ 'Search'|trans }}">
  28.                 </form>
  29.             </div>
  30.         </div>
  31.     </div>
  34. {% endblock %}
  35. {% block body %}
  37.     <style>
  38.         .uv-container{
  39.             width: 1500px !important
  40.         } 
  41.          /* Estilo para opciones desactivadas */
  42.         .uv-report-brick.disabled {
  43.             opacity: 0.2; /* Reduce la opacidad para mostrar que está desactivado */
  44.             pointer-events: none; /* Desactiva los clics en las opciones */
  45.         }
  47.         #comment {
  48.         width: 100%; /* Establece el ancho del textarea al 100% del contenedor padre */
  49.         height: 100px; /* Establece la altura del textarea en píxeles o cualquier otra unidad deseada */
  50.         padding: 10px; /* Agrega relleno (padding) para espacio adicional dentro del textarea */
  51.         border: 1px solid #ccc; /* Agrega un borde alrededor del textarea */
  52.         border-radius: 5px; /* Agrega bordes redondeados al textarea */
  53.         resize: none; /* Evita que el usuario pueda cambiar el tamaño del textarea */
  54.         font-size: 16px; /* Establece el tamaño de fuente del texto en el textarea */
  55.         line-height: 1.5; /* Establece la altura de línea del texto para mejorar la legibilidad */
  56.         /* Puedes agregar más estilos aquí, como colores de fondo, colores de texto, etc. */
  57.         }
  59.         .uv-icon-kudos {
  60.             background-image: url("{{ asset('bundles/uvdeskcoreframework/images/uvdesk-kudo-sprite.svg') }}");
  61.             display: inline-block;
  62.             width: 40px;
  63.             height: 40px;
  64.         }
  65.         .uv-icon-kudos.kudos-1 {
  66.             background-position: 0px 40px;
  67.         }
  68.         .uv-icon-kudos.kudos-2 {
  69.             background-position: -40px 40px;
  70.         }
  71.         .uv-icon-kudos.kudos-3 {
  72.             background-position: -80px 40px;
  73.         }
  74.         .uv-icon-kudos.kudos-4 {
  75.             background-position: -120px 40px;
  76.         }
  77.         .uv-icon-kudos.kudos-5 {
  78.             background-position: -160px 40px;
  79.         }
  80.         .kudos-text-1 {
  81.             color: #FC6E46;
  82.         }
  83.         .kudos-text-2 {
  84.             color: #FC6E46;
  85.         }
  86.         .kudos-text-3 {
  87.             color: #FCDA32;
  88.         }
  89.         .kudos-text-4 {
  90.             color: #01D101;
  91.         }
  92.         .kudos-text-5 {
  93.             color: #01D101;
  94.         }
  95.         .uv-table td a {
  96.             color: #333;
  97.         }
  98.         .tooltip {
  99.             position: relative;
  100.         }
  102.         .tooltip .tooltip-text {
  103.             visibility: hidden;
  104.             background-color: #fff;
  105.             color: #000;
  106.             text-align: center;
  107.             border: 1px solid #000;
  108.             border-radius: 4px;
  109.             padding: 5px;
  110.             position: absolute;
  111.             z-index: 1;
  112.             bottom: 100%;
  113.             left: 50%;
  114.             transform: translateX(-50%);
  115.             opacity: 0;
  116.             transition: opacity 0.3s;
  117.             font-size: 14px;
  118.             max-width: 100%; /* Limita el ancho máximo del tooltip al 100% */
  119.             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  120.             white-space: nowrap;
  121.             overflow: hidden;
  122.             text-overflow: ellipsis; /* Agrega puntos suspensivos si el contenido desborda */
  123.         }
  125.         .tooltip:before {
  126.             content: "";
  127.             top: 100%;
  128.             left: 50%;
  129.             transform: translateX(-50%);
  130.             border-width: 6px;
  131.             border-color: transparent transparent #fff transparent;
  132.         }
  134.         .tooltip:hover .tooltip-text {
  135.             visibility: visible;
  136.             opacity: 1;
  137.         }
  140.     </style>
  141.     
  142.     <div class="uv-nav-tab-view">
  143.         <h1>{{ 'Ticket Requests'|trans }}</h1>
  144.         <div class="uv-action-view">
  145.             <div class="uv-action-view-lt">
  147.                 <!--Sort by-->
  148.                 <div class="uv-dropdown sort">
  149.                     <div class="uv-dropdown-btn uv-vertical-align uv-margin-right-5">
  150.                         {{ 'Sort By:'|trans }} {{ 'Ticket Id'|trans }}
  151.                     </div>
  152.                     <div class="uv-dropdown-list uv-bottom-left">
  153.                         <div class="uv-dropdown-container">
  154.                             <label>{{ 'Sort By'|trans }}</label>
  155.                             <ul>
  156.                             </ul>
  157.                         </div>
  158.                     </div>
  159.                 </div>
  160.                 <!--Sort by-->
  162.                 <!--Filter By Status-->
  163.                 <div class="uv-dropdown filter-by-status">
  164.                     <div class="uv-dropdown-btn">
  165.                         {{ 'Status:'|trans }} {{ 'All'|trans }}
  166.                     </div>
  167.                     <div class="uv-dropdown-list uv-bottom-left">
  168.                         <div class="uv-dropdown-container">
  169.                             <label>{{ 'Status'|trans }}</label>
  170.                             <ul>
  171.                                 <li class="uv-drop-list-active"><a href="#" data-id="">{{ 'All'|trans }}</a></li>
  172.                                 {% for status in ticket_service.getStatus() %}
  173.                                     
  174.                                         <li><a href="#" data-id="{{status.id}}">{{ status.description|trans }}</a></li>
  175.                                     
  176.                                 {% endfor %}
  177.                             </ul>
  178.                         </div>
  179.                     </div>
  180.                 </div>
  181.                 <!--//Filter By Status-->
  182.             </div>
  183.             <div class="uv-action-view-rt">
  184.                 <input type="text" class="uv-search-inline uv-search-inline-full" placeholder="{{ 'Search Tickets'|trans }}">
  185.             </div>
  186.         </div>
  187.     </div>
  188.     <!--//Action Bar-->
  190.     <div class="uv-table uv-list-view">
  191.         <table>
  192.             <thead>
  193.                 <tr>
  194.                     <th>{{ "Ticket Id"|trans }}</th>
  195.                     <th>{{ "Priority"|trans }}</th>
  196.                     <th>{{ "Reference"|trans }}</th>
  197.                     <th>{{ "Subject"|trans }}</th>
  198.                     <th>{{ "Status"|trans }}</th>
  199.                     <th>{{ "Timestamp"|trans }}</th>
  200.                     <th>{{ "Agent"|trans }}</th>
  201.                     <th class="uv-last">{{ "Kudos"|trans }} </th>
  202.                 </tr>
  203.             </thead>
  204.             <tbody>
  205.             </tbody>
  206.         </table>
  207.         <div class="navigation"></div>
  208.     </div>
  210.     
  211. {% endblock %}
  214. {% block footer %}
  215.     {{ parent() }}
  216.     <!-- Sorting Template -->
  217.     <script id="ticket_list_sorting_tmp" type="text/template">
  218.         <li class="<% if(sort == 't.id') { %>uv-drop-list-active<% } %>">
  219.             <a href="#<% if(queryString != '') { %><%- queryString %>/<% } %><% if(page) { %>page/<%- page %><% } else { %>page/1<% } %>/sort/t.id/<% if(sort == 't.id') { %><% if(direction) { %>direction/<%- direction %><% } else { %>direction/desc<% } %><% } else { %>direction/asc<% } %>" data-field="t.id">
  220.                 {{ 'Ticket Id'|trans }}
  221.             </a>
  222.             <% if(sort == 't.id') { %>
  223.                 <span class="uv-sorting <% if(direction == 'asc') { %> descend <% } else { %> ascend <% } %>"></span>
  225.             <% } %>
  226.         </li>
  227.         <li class="<% if(sort == 'name') { %>uv-drop-list-active<% } %>">
  228.             <a href="#<% if(queryString != '') { %><%- queryString %>/<% } %><% if(page) { %>page/<%- page %><% } else { %>page/1<% } %>/sort/name/<% if(sort == 'name') { %><% if(direction) { %>direction/<%- direction %><% } else { %>direction/desc<% } %><% } else { %>direction/asc<% } %>" data-field="name">
  229.                 {{ 'Agent Name'|trans }}
  230.             </a>
  231.             <% if(sort == 'name') { %>
  232.                 <span class="uv-sorting <% if(direction == 'asc') { %> descend <% } else { %> ascend <% } %>"></span>
  234.             <% } %>
  235.         </li>
  236.     </script>
  237.     <!-- //Sorting Template -->
  239.     <script id="ticket_list_item_tmp" type="text/template">
  240.         <td data-value="{{ 'Ticket Id'|trans }}">
  241.            <a class="not-shiny" href="<%- path %>">
  242.                 #<%- id %>
  243.             </a>
  244.         </td>
  245.         <td style="<% if(priority.colorCode) { %>background-color:<%= priority.colorCode %><% } %>"  data-value="{{ 'Priority'|trans }}">
  246.                <a class="not-shiny" href="<%- path %>">
  247.                    <%- priority.description %>
  248.             </a>
  249.         </td>
  250.         <td data-value="{{ 'Reference'|trans }}" class="tooltip">
  251.             <a class="not-shiny" href="<%- path %>">
  252.                 <%- reference %>
  253.             </a>
  254.             <span class="tooltip-text">
  255.                 <%- lastThread.threadMessage && lastThread.threadMessage.length <= 100 ? lastThread.threadMessage : lastThread.threadMessage.substr(0, 100) + '...' %>
  256.             </span>
  257.         </td>
  258.         <td data-value="{{ 'Subject'|trans }}" class="tooltip">
  259.             <a class="not-shiny" href="<%- path %>">
  260.                 <%- subject %>
  261.             </a>
  262.             <span class="tooltip-text">
  263.                 <%- lastThread.threadMessage && lastThread.threadMessage.length <= 100 ? lastThread.threadMessage : lastThread.threadMessage.substr(0, 100) + '...' %>
  264.             </span>
  265.         </td>
  266.         <td style="<% if(status.colorCode) { %>background-color:<%= status.colorCode %><% } %>" data-value="{{ 'Status'|trans }}">
  267.                <a class="not-shiny" href="<%- path %>">
  268.                    <%- status.code %>
  269.             </a>
  270.         </td>
  271.         <td data-value="{{ 'Timestamp'|trans }}">
  272.                <a class="not-shiny" href="<%- path %>">
  273.                    <%= formatedCreatedAt %>
  274.             </a>
  275.         </td>
  276.         <td data-value="{{ 'Agent'|trans }}">
  277.             <a class="not-shiny" href="<%- path %>">
  278.                 <%  if(agent) { %>
  279.                     <% if(agent.smallThumbnail != null) { %>
  280.                         <img class="uv-table-agent" src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~ asset('') }}<%- agent.smallThumbnail %>" alt=""/>
  281.                     <% } else { %>
  282.                         <img class="uv-table-agent" src="{{ asset(default_agent_image_path) }}" alt=""/>
  283.                     <% } %>
  284.                     <%- agent.firstName + ' ' + (agent.lastName == null ? '' : agent.lastName) %>
  285.                 <% } else { %>
  286.                     {{ 'Unassigned'|trans }}
  287.                 <% } %>
  288.             </a>
  289.         </td>
  291.         <td>
  292.             <div class="uv-report-brick-wrapper" <% if (status.id === 5 || status.id === 9) { %>style="display: block;"<% } else { %>style="visibility: hidden;"<% } %>>
  293.                 <!-- Primer elemento -->
  294.                 <span class="uv-report-brick <% if (vote !== null) { %>selected<% } %> <% if (vote !== null && vote !== 2) { %>disabled<% } %>" data-ticket-id="<%- id %>" data-vote="2" data-voted="<%- vote === 2 %>" title="{{ 'Sad'|trans }}" onclick="mostrarValor(this)">
  295.                     <span class="uv-icon-kudos kudos-2"></span>
  296.                 </span>
  298.                 <!-- Segundo elemento -->
  299.                 <span class="uv-report-brick <% if (vote !== null) { %>selected<% } %> <% if (vote !== null && vote !== 3) { %>disabled<% } %>" data-ticket-id="<%- id %>" data-vote="3" data-voted="<%- vote === 3 %>" title="{{ 'Neutral'|trans }}" onclick="mostrarValor(this)">
  300.                     <span class="uv-icon-kudos kudos-3"></span>
  301.                 </span>
  303.                 <!-- Tercer elemento -->
  304.                 <span class="uv-report-brick <% if (vote !== null) { %>selected<% } %> <% if (vote !== null && vote !== 4) { %>disabled<% } %>" data-ticket-id="<%- id %>" data-vote="4" data-voted="<%- vote === 4 %>" title="{{ 'Happy'|trans }}" onclick="mostrarValor(this)">
  305.                     <span class="uv-icon-kudos kudos-4"></span>
  306.                 </span>
  307.             </div>
  308.         </td>
  311.     </script>
  313.     <div class="uv-pop-up-overlay" id="confirm-modal" style="display: none;">
  314.         <div class="uv-pop-up-box uv-pop-up-slim">
  315.             <span class="uv-pop-up-close"></span>
  316.             <h2>{{ 'Confirm Action'|trans }}</h2>
  317.             <p>{{ 'Are you sure? You want to perform this action.'|trans }}</p>
  318.             
  319.             <!-- Agrega el campo de comentario -->
  320.             <textarea id="comment" placeholder="Add a comment"></textarea>
  321.             
  322.             <div class="uv-pop-up-actions">
  323.                 <a href="#" class="uv-btn uv-btn-error confirm">{{ 'Confirm'|trans }}</a>
  324.                 <a href="#" class="uv-btn cancel">{{ 'Cancel'|trans }}</a>
  325.             </div>
  326.         </div>
  327.     </div>
  329.     
  330.     <script type="text/javascript">
  331.         
  332.         function mostrarValor(element) {
  333.             // Obtener el valor del voto desde el atributo "data-vote"
  334.             var voteValue = element.getAttribute("data-vote");
  335.             
  336.             // Obtener el ID del ticket desde el atributo "data-ticket-id"
  337.             var ticketId = element.getAttribute("data-ticket-id");
  339.             // Obtener el primer número antes del guión "-"
  340.             var ticketIdParts = ticketId.split("-");
  341.             var firstNumber = ticketIdParts[0];
  343.             // Verificar si la carita ya tiene un valor asignado (clase "selected")
  344.             if (!element.classList.contains("selected")) {
  345.                 // Mostrar el mensaje de confirmación
  346.                 var confirmModal = document.getElementById("confirm-modal");
  347.                 confirmModal.style.display = "block";
  349.                 // Asignar acciones a los botones del mensaje de confirmación
  350.                 var confirmButton = confirmModal.querySelector(".confirm");
  351.                 var cancelButton = confirmModal.querySelector(".cancel");
  353.                 // Construir la URL utilizando plantillas literales
  354.                 var url = "{{ path('helpdesk_customer_create_vote', {'id': 'ReplaceMeWithFirstNumber', 'vote': 'ReplaceMeWithVote', 'comment': 'ReplaceMeWithComment'}) }}";
  356.                 url = url.replace("ReplaceMeWithFirstNumber", firstNumber);
  357.                 url = url.replace("ReplaceMeWithVote", voteValue);
  358.     
  360.                  confirmButton.onclick = function () {
  361.                            let comment = document.getElementById("comment").value;
  362.                         console.log('comment', comment);
  363.                         if (comment === '') {
  364.                             comment = 'NoCommentProvided'; // O proporciona un valor predeterminado adecuado
  365.                         }
  366.                         url = url.replace("ReplaceMeWithComment", comment);
  367.                             console.log('url',url);
  368.                         // Realizar la solicitud AJAX
  369.                         $.ajax({
  370.                             url: url,
  371.                             type: 'POST',
  372.                             dataType: 'json',
  373.                             success: function (response) {
  374.                                     // Desactivar todas las caritas en el mismo ticket
  375.                                     var caritasEnMismoTicket = document.querySelectorAll(`.uv-report-brick[data-ticket-id="${ticketId}"]`);
  376.                                     caritasEnMismoTicket.forEach(function(carita) {
  377.                                         carita.classList.remove("selected");
  378.                                         carita.classList.add("disabled");
  379.                                     });
  381.                                     // Activar la carita clickeada
  382.                                     element.classList.remove("disabled");
  383.                                     element.classList.add("selected");
  384.                                     
  385.                                     // Ocultar el mensaje de confirmación
  386.                                     confirmModal.style.display = "none";
  388.                                     app.appView.renderResponseAlert(response)
  389.                                     
  390.                             },
  391.                             error: function (xhr) {
  392.                                 // Manejar errores si es necesario
  393.                                 console.error("Error en la solicitud AJAX: " + xhr.statusText);
  394.                                 // Ocultar el mensaje de confirmación
  395.                                 confirmModal.style.display = "none";
  396.                                 app.appView.renderResponseAlert(response)
  397.                             }
  398.                         });
  399.                 }
  401.                 // Acción al hacer clic en "Cancelar"
  402.                 cancelButton.onclick = function () {
  403.                     // Ocultar el mensaje de confirmación
  404.                     confirmModal.style.display = "none";
  405.                 };
  407.             }
  408.         }
  412.         $(function() {
  414.     
  416.             var ticketPath = "{{ path('helpdesk_customer_ticket', {'id': 'replaceId' }) }}";
  417.             var TicketModel = Backbone.Model.extend({
  418.                 idAttribute : "id",
  419.                 defaults : {
  420.                     path : "",
  421.                 }
  422.             });
  424.             var TicketCollection = AppCollection.extend({
  425.                 model : TicketModel,
  426.                 url : "{{ path('helpdesk_customer_ticket_collection_xhr') }}",
  427.                 filterParameters : {
  428.                     "status" : "",
  429.                     "search" : "",
  430.                 },
  431.                 parseRecords: function (resp, options) {
  432.                     return resp.tickets;
  433.                 },
  434.                 syncData : function() {
  435.                     app.appView.showLoader();
  436.                     this.fetch({
  437.                         data : this.getValidParameters(),
  438.                         reset: true,
  439.                         success: function(model, response) {
  440.                             app.appView.hideLoader();
  441.                             var ticketListView = new TicketList();
  443.                             app.pager.paginationData = response.pagination;
  444.                             app.pager.url = response.pagination.url;
  445.                             if(ticketCollection.length == 0 && app.pager.paginationData.current != "0")
  446.                                 router.navigate(url.replace('replacePage', app.pager.paginationData.last),{trigger: true});
  447.                             else {
  448.                                 app.pager.render();
  449.                                 $(".uv-pagination a").on("mouseover", function() {
  450.                                     $(this).attr('style', 'color: white !important')
  451.                                 }).on("mouseout", function() {
  452.                                     $(this).removeAttr("style");
  453.                                 });
  454.                             }
  455.                         },
  456.                         error: function (model, xhr, options) {
  457.                             if(url = xhr.getResponseHeader('Location'))
  458.                                 window.location = url;
  459.                         }
  460.                     });
  461.                 }
  462.             });
  464.             var TicketItem = Backbone.View.extend({
  465.                 tagName : "tr",
  466.                 template : _.template($("#ticket_list_item_tmp").html()),
  467.                 render : function () {
  468.                         this.model.set({path:ticketPath.replace('replaceId', this.model.attributes.id + '-' + this.model.attributes.numeracion)})
  469.                                         if(this.model.attributes.numeracion){
  470.                                          this.model.set('id', this.model.attributes.id + '-' + this.model.attributes.numeracion)
  471.                                         }
  473.                     this.$el.html(this.template(this.model.toJSON()));
  474.                     var text= this.$el.html()
  476.                     if(this.model.attributes.isCustomerView != true){
  477.                         this.$el.html(text);
  478.                         this.$el.addClass('unread')
  479.                     }
  480.                     
  481.                     if(this.model.attributes.status.id==8 || this.model.attributes.status.id==7){
  482.                         var result4= text.split('class="not-shiny"').join('class="not-shiny" style="color: aliceblue;"')
  483.                         this.$el.html(result4);
  484.                         this.el.bgColor="#a70000"
  485.                     }
  486.                     //console.log(this)    
  487.                     return this;
  488.                 }
  489.             });
  491.             var TicketList = Backbone.View.extend({
  492.                 el : $(".uv-list-view table tbody"),
  493.                 initialize : function() {
  494.                     this.render();
  495.                 },
  496.                 render : function () {
  497.                     this.$el.html('');
  498.                     if(ticketCollection.length) {
  499.                         _.each(ticketCollection.models, function (item) {
  500.                             
  501.                             this.renderTicket(item);
  502.                         }, this);
  503.                     } else {
  504.                         this.$el.append("<tr style='text-align: center;float: none;'><td colspan='5'>{% trans %}No Record Found{% endtrans %}</td></tr>")
  505.                     }
  506.                 },
  507.                 renderTicket : function (item) {
  508.                     var ticketItem = new TicketItem({
  509.                         model: item
  510.                     });
  512.                     this.$el.append(ticketItem.render().el);
  513.                         
  514.                 }
  515.             });
  517.             var Filter = app.Filter.extend({
  518.                 defaultSortIndex: 't.id',
  519.                 sortText: "{% trans %}Sort By:{% endtrans %} ",
  520.                 defaultSortText: "{% trans %}Sort By:{% endtrans %} {% trans %}Ticket Id{% endtrans %}",
  521.                 template : _.template($("#ticket_list_sorting_tmp").html()),
  522.                 filterByStatus : function(e) {
  523.                     e.preventDefault()
  524.                     this.collection.reset();
  525.                     this.collection.state.currentPage = null;
  526.                     this.collection.setSorting(null, null, {full: false});
  527.                     this.collection.filterParameters.status = Backbone.$(e.currentTarget).find('a').attr('data-id');
  528.                     var queryString = app.appView.buildQuery($.param(this.collection.getValidParameters()));
  529.                     router.navigate(queryString, {trigger: true});
  530.                 },
  531.             })
  533.             var ticketCollection = new TicketCollection();
  535.             var filter = new Filter({
  536.                 el: $('.uv-action-view'),
  537.                 collection : ticketCollection
  538.             });
  540.             Router = Backbone.Router.extend({
  541.                 routes: {
  542.                     'page/:number(/sort/:sortField)(/direction/:order)' : 'paginate',
  543.                     'search/:query(/page/:number)(/sort/:sortField)(/direction/:order)' : 'filterByQuery',
  544.                     'status/:status(/search/:query)(/page/:number)(/sort/:sortField)(/direction/:order)' : 'filterByStatus',
  545.                     '' : 'initializeList',
  546.                     '_=_' : 'initializeList',
  547.                 },
  548.                 initializeList : function() {
  549.                     this.resetParams('','');
  550.                     this.fetch(null, null, null);
  551.                 },
  552.                 paginate : function(number, sortField, order) {
  553.                     this.resetParams('', '');
  554.                     this.fetch(number, sortField, order);
  555.                 },
  556.                 filterByQuery : function(query, number, sortField, order) {
  557.                     if(query != null)
  558.                         query = query.replace(/\+/g,' ');
  560.                     this.resetParams(query, '');
  561.                     this.fetch(number, sortField, order);
  562.                 },
  563.                 filterByStatus : function(status, query, number, sortField, order) {
  564.                     if(query != null)
  565.                         query = query.replace(/\+/g,' ');
  567.                     this.resetParams(query, status);
  569.                     this.fetch(number, sortField, order);
  570.                 },
  571.                 fetch : function(number, sortField, order) {
  572.                     ticketCollection.state.currentPage = number;
  573.                     filter.sortCollection(sortField, order);
  574.                     ticketCollection.syncData();
  575.                 },
  576.                 resetParams : function(query, status) {
  577.                     ticketCollection.filterParameters.search = query;
  578.                     $(".uv-search-inline ").val(query);
  579.                     ticketCollection.filterParameters.status = status;
  580.                     var statusText = status ? $(".filter-by-status a[data-id='" + status + "']").text() : "{% trans %}All{% endtrans %}";
  581.                     $(".filter-by-status .uv-dropdown-btn").text("{% trans %}Status:{% endtrans %} " + statusText);
  582.                 }
  583.             });
  585.             router = new Router();
  586.             Backbone.history.start({push_state:true});
  587.         });
  588.     </script>
  590. {% endblock %}