DataTables styling improved in tickets page

Author: tdunn891

tickets/templates/tickets.html

@@ -3,20 +3,22 @@
 TrackIt | Tickets
 {% endblock %}
 {% block head %}
-<!-- <link rel="stylesheet" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"> -->
+<!-- DataTables.net css -->
 <link rel="stylesheet" type="text/css"
    href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/cr-1.5.2/r-2.2.3/sp-1.0.1/sl-1.3.1/datatables.min.css" />
 {% endblock %}
 {% block page_heading %}
 <i class="material-icons-outlined">confirmation_number</i> Tickets ({{ tickets.count }})
 <a class="btn btn-primary float-right" href="{% url 'add_ticket' %}">Raise Ticket
    <i class="material-icons align-bottom">add</i></a>
+<hr>
 {% endblock %}
+{% block container-class %}tickets-container{% endblock %}
 {% block content %}
 <div class="row">
    <div class="col col-12">
-      <br>
-      <table class="table table-hover table-responsive display" id="tickets-table">
+      <a href="{% url 'tickets' %}" class="btn btn-light btn-sm float-right align-top">Reset</a>
+      <table class="table table-hover table-responsive display" style="width:100%" id="tickets-table">
          <thead>
             <tr>
                <th>ID</th>
@@ -26,29 +28,30 @@
                <th>Assignee</th>
                <th>Priority</th>
                <th>Status</th>
-               <th>Created</th>
-               <th>Age (days)</th>
-               <th>Upvotes</th>
+               <th>Submitted</th>
+               <th>Resolved</th>
             </tr>
          </thead>
          <tbody>
             {% for ticket in tickets %}
             {% if ticket.status == "New" %}
-            <tr data-url="{% url 'view_ticket' ticket.id %}" class="table-light clickable-row">
+            <tr data-url="{% url 'view_ticket' ticket.id %}" class="table-info clickable-row">
                {% elif ticket.status == "In Progress" %}
             <tr data-url="{% url 'view_ticket' ticket.id %}" class="table-warning clickable-row">
                {% elif ticket.status == "Resolved" %}
             <tr data-url="{% url 'view_ticket' ticket.id %}" class="table-success clickable-row">
+               {% elif ticket.status == "Cancelled" %}
+            <tr data-url="{% url 'view_ticket' ticket.id %}" class="table-secondary clickable-row">
                {% endif %}
                <td>{{ ticket.id }}</td>
                <td><a href="{% url 'view_ticket' ticket.id %}" data-toggle="tooltip" data-placement="bottom"
                      title="{{ ticket.description }}">{{ ticket.summary }}</a></td>
                {% if ticket.ticket_type == "Bug" %}
-               <td><i class="material-icons-outlined" data-toggle="tooltip" title="Bug"
+               <td><i class="material-icons-outlined ticket-type-icon" data-toggle="tooltip" title="Bug"
                      data-placement="left">bug_report</i>
                </td>
                {% else %}
-               <td><i class="material-icons-outlined" data-toggle="tooltip" title="Feature"
+               <td><i class="material-icons-outlined ticket-type-icon" data-toggle="tooltip" title="Feature"
                      data-placement="left">build</i><span class="d-none">Feature</span>
                </td>
                {% endif %}
@@ -75,53 +78,42 @@
                <td><i class="material-icons" data-toggle="tooltip" title="Resolved" data-placement="right">done</i><span
                      class="d-none">Resolved</span></td>
                {% elif ticket.status == "Cancelled" %}
-               <td><i class="material-icons" data-toggle="tooltip" title="Cancelled"
+               <td><i class="material-icons-outlined" data-toggle="tooltip" title="Cancelled"
                      data-placement="right">cancel</i><span class="d-none">Cancelled</span></td>
                {% endif %}
                <td>{{ ticket.created_date.date }}</td>
-               <!-- {% if ticket.resolved_date == None %}
+               {% if ticket.resolved_date == None %}
                <td>--</td>
                {% else %}
-               <td>{{ ticket.resolved_date }}</td>
-               {% endif %} -->
-               <td>{{ ticket.age }}</td>
-               <td>{{ ticket.upvotes }}</td>
+               <td>{{ ticket.resolved_date.date }}</td>
+               {% endif %}
             </tr>
             {% endfor %}
          </tbody>
+         <tfoot>
+            <!-- Search Inputs for each column-->
+            <tr id="ticket-search-boxes">
+               <th></th>
+               <th></th>
+               <th></th>
+               <th></th>
+               <th></th>
+               <th></th>
+               <th></th>
+               <th></th>
+               <th></th>
+            </tr>
+         </tfoot>
       </table>
    </div>
 </div>
 {% endblock %}
 {% block scripts %}
-<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
+<!-- PDF Maker js -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
+<!-- VFS Fonts js -->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
+<!-- DataTables js -->
 <script type="text/javascript"
    src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/cr-1.5.2/r-2.2.3/sp-1.0.1/sl-1.3.1/datatables.min.js"></script>
-<script>
-   $(document).ready(function () {
-      $('#tickets-table').DataTable({
-         /*
-         dom: 'Prftip',
-         layout: 'columns-1',
-                  searchPanes: {
-                     orderable: false,
-                  },
-         columns: [2]
-         dom: '<"dtsp-verticalContainer"<"dtsp-verticalPanes"P><"dtsp-dataTable"frtip>>'
-         dataLength: 20,
-         dom: 'Brftip',
-         pageLength: 20,
-         responsive: true,
-         colReorder: true,
-         "scrollX": true,
-         buttons: ['copy', 'excel', 'pdf']
-         */
-      });
-      $('.clickable-row').on("click", function () {
-         window.location = $(this).data("url");
-      });
-   });
-</script>
 {% endblock %}