From aa1ef52694b82cb5ea884ecd239fb7c129d6b0cc Mon Sep 17 00:00:00 2001
From: corbz <corbz.jones@gmail.com>
Date: Wed, 17 Jan 2024 21:54:54 +0000
Subject: [PATCH] integrate API changes into frontend

---
 apps/api/views.py                |  2 +-
 apps/static/assets/js/tickets.js | 57 ++++++++++++--------------------
 apps/templates/home/tickets.html | 14 ++++----
 3 files changed, 30 insertions(+), 43 deletions(-)

diff --git a/apps/api/views.py b/apps/api/views.py
index 5ede093..da7c2a7 100644
--- a/apps/api/views.py
+++ b/apps/api/views.py
@@ -51,7 +51,7 @@ class TicketListApiView(generics.ListAPIView):
     queryset = Ticket.objects.all()
 
     filter_backends = [filters.SearchFilter, rest_filters.DjangoFilterBackend, filters.OrderingFilter]
-    filterset_fields = ["priority", "tags", "author"]
+    filterset_fields = ["uuid", "priority", "tags", "author", "author__department"]
     search_fields = ["author__forename", "author__surname", "title", "description"]
     ordering_fields = ["create_timestamp", "edit_timestamp"]
 
diff --git a/apps/static/assets/js/tickets.js b/apps/static/assets/js/tickets.js
index 6c8e3c7..1bc442b 100644
--- a/apps/static/assets/js/tickets.js
+++ b/apps/static/assets/js/tickets.js
@@ -49,7 +49,7 @@ $(document).ready(function() {
     })
 
     setupFilter("#filterSidebar .filter-department", "author__department");
-    setupFilter("#filterSidebar .filter-tag", "tags__in");
+    setupFilter("#filterSidebar .filter-tag", "tags");
     setupFilter("#filterSidebar .filter-priority", "priority");
  
     loadFilterCounts();
@@ -81,7 +81,12 @@ function setupFilter(selector, key) {
                 }
             }
             else if (input.is(":radio") && input.is(":checked")) {
-                filters[key] = [uuid];
+                if (uuid === "all") {
+                    delete filters[key];
+                }
+                else {
+                    filters[key] = [uuid];
+                }
             }
 
             console.debug(`Filter applied '${key}' as '${uuid}'`)
@@ -210,18 +215,18 @@ function loadAllTickets() {
         url: URL_Tickets,
         type: "GET",
         dataType: "json",
-        data: filters,
+        data: $.param(filters, true),
         success: function(data) {
             loadingTickets = false;
             console.log(JSON.stringify(data, null, 4))
 
-            $("#ticketCounts .current").text(data.length);
+            $("#ticketCounts .current").text(data.results.length);
             $("#ticketsContainer .loading").hide();
 
-            if (data.length === 0) $("#ticketsContainer .none-found").show();
+            if (data.results.length === 0) $("#ticketsContainer .none-found").show();
             else $("#ticketsContainer .none-found").hide();
 
-            data.forEach(function(ticket) {
+            data.results.forEach(function(ticket) {
                 var timestamp = new Date(ticket.timestamp);
                 var formattedTime = timestampToHumanDate(timestamp, ticket.was_yesterday);
 
@@ -229,31 +234,15 @@ function loadAllTickets() {
                     formattedTime += " • edited";
                 }
 
-                var item = $(`
-                    <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p" data-ticket-id="${ticket.uuid}" data-author-icon="${ticket.author.icon}">
-                        <div class="peer mR-10">
-                            <img src="${ticket.author.icon}" alt="" class="w-2r h-2r bdrs-50p me-2" style="object-fit: cover;">
-                        </div>
-                        <div class="peer peer-greed ov-h">
-                            <div class="peers ai-c">
-                                <div class="peer peer-greed">
-                                    <h6 class="ticket-author">${ticket.author.forename} ${ticket.author.surname}</h6>
-                                </div>
-                                <div class="peer">
-                                    <small class="ticket-timestamp">${formattedTime}</small>
-                                </div>
-                            </div>
-                            <h5 class="fsz-def tt-c c-grey-900 ticket-title">${ticket.title}</h5>
-                            <span class="whs-nw w-100 ov-h tov-e d-b ticket-desc">${ticket.description}</span>
-                        </div>
-                    </div>
-                `);
-                var template = $("#ticketItemTemplate").copy();
+                var template = $($("#ticketItemTemplate").html());
+                template.find(".ticket-item-author").text(`${ticket.author.forename} ${ticket.author.surname}`);
+                template.find(".ticket-item-datetime").text(formattedTime);
+                template.find(".ticket-item-title").text(ticket.title);
+                template.find(".ticket-item-desc").text(ticket.description);
                 template.find(".ticket-item-icon").attr("src", ticket.author.icon);
-                template.find(".ticket-item-author").text(ticket.author.forename + " " + ticket.author.surname);
+                template.attr("data-uuid", ticket.uuid);
 
-
-                $("#ticketsContainer .content").append(item);
+                $("#ticketsContainer .content").append(template);
             });
 
             applyTicketClickFunction();
@@ -267,7 +256,7 @@ function loadAllTickets() {
 }
 
 function applyTicketClickFunction() {
-    $(".email-list-item").on("click", function(e) {
+    $(".ticket-item").on("click", function(e) {
         e.preventDefault();
         displayTicket(this);
         $('.email-app').removeClass('side-active');
@@ -301,7 +290,7 @@ function changeTicket(next=true) {
 
 function displayTicket(ticketElement) {
     ticket = $(ticketElement);
-    ticketID = ticket.data("ticket-id");
+    ticketID = ticket.data("uuid");
 
     // $(".back-to-mailbox").off("click").on("click", function(event) {
     //     event.preventDefault();
@@ -334,13 +323,11 @@ function displayTicket(ticketElement) {
         url: URL_Tickets,
         type: 'get',
         dataType: 'json',
-        data: {
-            uuid__in: [ticketID]
-        },
+        data: $.param({uuid: ticketID}, true),
         success: function (data) {
             console.log(JSON.stringify(data, null, 4));
 
-            var ticket = data[0];
+            var ticket = data.results[0];
             var author = ticket.author;
             var department = author.department;
             var priority = ticket.priority;
diff --git a/apps/templates/home/tickets.html b/apps/templates/home/tickets.html
index 9fc4eb1..e79967c 100644
--- a/apps/templates/home/tickets.html
+++ b/apps/templates/home/tickets.html
@@ -422,8 +422,12 @@
         </div>
     </div>
 
-    <template id="ticketItemTemplate">
-        <div class="ticket-list-item peers fxw-nw p-20 bdB bgcH-grey-100" data-uuid="-1">
+{% endblock content %}
+
+{% block javascripts %}
+<!-- Ticket Item Template -->
+<script id="ticketItemTemplate" type="text/template">
+    <div class="ticket-item peers fxw-nw p-20 bdB bgcH-grey-100">
             <div class="peer mR-10">
                 <img src="" alt="" class="ticket-item-icon me-2">
             </div>
@@ -440,11 +444,7 @@
                 <div class="ticket-item-desc"></div>
             </div>
         </div>
-    </template>
-
-{% endblock content %}
-
-{% block javascripts %}
+</script>
 <!-- Define Variables -->
 <script>
     const URL_Tickets = "{% url 'api:tickets' %}";