tags and priorities now shown in ticket items

apps/static/js/tickets.js

@@ -37,7 +37,7 @@ function updateItemsState(state) {
 }
 
 function updateContentState(state) {
-    console.debug(`updating items state to '${state}'`);
+    console.debug(`updating content state to '${state}'`);
     switch (state) {
         case "content":
             $("#ticketContent .loading").hide();
@@ -47,7 +47,7 @@ function updateContentState(state) {
             $("#ticketContent .loading").show();
             break;
         default:
-            throw new Error(`Invalid Items State '${state}'`);
+            throw new Error(`Invalid Content State '${state}'`);
     }
 }
 
@@ -156,6 +156,10 @@ function loadFilterCounts() {
 function applyTicketClickFunction() {
     $(".ticket-item").on("click", function(e) {
         e.preventDefault();
+        if ($(this).hasClass("active")) {
+            return;
+        }
+
         loadTicketContent($(this).data("uuid"));
         $(".ticket-item").removeClass("active");
         $(this).addClass("active");
@@ -164,6 +168,11 @@ function applyTicketClickFunction() {
     });
 }
 
+$(".back-to-mailbox").on("click", function(e) {
+    e.preventDefault();
+    $(".ticket-item.active").removeClass("active");
+});
+
 function reloadCurrentTicket() {
     loadTicketContent($(".ticket-item.active").data("uuid"));
 }
@@ -203,7 +212,10 @@ function loadTicketItems(page=1) {
     updateItemsState("loading");
     filters["page"] = page;
 
-    fetchTicketsPromise(filters).then((response) => {
+    var fetchFilters = { ...filters };
+    fetchFilters["only_fields"] = "uuid,title,short_description,author,priority,tags,timestamp,was_yesterday,is_edited,author__forename,author__surname,author__department,author__icon";
+
+    fetchTicketsPromise(fetchFilters).then((response) => {
         // Update the counts to show how many tickets were found
         $("#ticketCounts .current").text(response.results.length);
         $("#ticketCounts .total").text(response.count);
@@ -225,6 +237,15 @@ function loadTicketItems(page=1) {
             "prev": ticketHasPrevPage
         }
 
+        // Update the pagination count with the current page
+        $("#paginationCounts .current").text(pageNumber);
+
+        // If we are on page one (which has been normalised to be the case in many intances)
+        // We can use the amount of results to calculate the total amount of pages.
+        if (pageNumber === 1) {
+            $("#paginationCounts .total").text(Math.ceil(response.count / response.results.length));
+        }
+
         // Iterate over and handle each ticket
         response.results.forEach(function(ticket) {
     
@@ -240,9 +261,24 @@ function loadTicketItems(page=1) {
             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-desc").html(ticket.short_description);
             template.find(".ticket-item-icon").attr("src", ticket.author.icon);
             template.attr("data-uuid", ticket.uuid);
+
+            // Add tickets using the badge template
+            ticket.tags.forEach(function(tag) {
+                var tagTemplate = $($("#ticketContentBadgeTemplate").html());
+                tagTemplate.find(".ticket-content-badge-text").text(tag.title);
+                tagTemplate.css({ "color": tag.colour, "background-color": tag.backgroundcolour });
+                template.find(".ticket-item-tags").append(tagTemplate);
+            });
+
+            // Add the priority using the badge template
+            var priorityTemplate = $($("#ticketContentBadgeTemplate").html());
+            priorityTemplate.find(".ticket-content-badge-text").text(ticket.priority.title + " Priority");
+            priorityTemplate.css({ "color": ticket.priority.colour, "background-color": ticket.priority.backgroundcolour });
+            priorityTemplate.removeClass("rounded-pill").addClass("rounded-1");
+            template.find(".ticket-item-priority").append(priorityTemplate);
     
             // Add the content to the interface
             $("#ticketsContainer .content").append(template);
@@ -276,12 +312,20 @@ function loadTicketContent(uuid) {
         if (ticket.is_edited) formattedTime += " • edited";
 
         // Create a copy of the template using the ticket data
-        var template = $($("#ticketContentTemplate").html())
+        var template = $($("#ticketContentTemplate").html());
         template.find(".ticket-content-author").text(`${ticket.author.forename} ${ticket.author.surname}`);
         template.find(".ticket-content-datetime").text(formattedTime);
         template.find(".ticket-content-title").text(ticket.title);
-        template.find(".ticket-content-desc").text(ticket.description);
+        template.find(".ticket-content-desc").html(ticket.description);
         template.find(".ticket-content-icon").attr("src", ticket.author.icon);
+        console.debug(ticket.description);
+
+        ticket.tags.forEach(function(tag) {
+            var tagTemplate = $($("#ticketContentBadgeTemplate").html());
+            tagTemplate.find(".ticket-content-badge-text").text(tag.title);
+            tagTemplate.css({ "color": tag.colour, "background-color": tag.backgroundcolour });
+            template.find(".ticket-content-badges").append(tagTemplate);
+        });
 
         $("#ticketContent .content").append(template);