From 7c00552714af585d955dbf1f92e2dd8548c67219 Mon Sep 17 00:00:00 2001 From: Corban-Lee Jones Date: Tue, 23 Jan 2024 12:10:42 +0000 Subject: [PATCH] Commenting & segmenting into functions --- apps/static/js/tickets.js | 149 +++++++++++++++++++++++--------------- 1 file changed, 91 insertions(+), 58 deletions(-) diff --git a/apps/static/js/tickets.js b/apps/static/js/tickets.js index 87fcc8c..05a79c9 100644 --- a/apps/static/js/tickets.js +++ b/apps/static/js/tickets.js @@ -231,6 +231,13 @@ $("#strictTags").on("change", function() { loadTicketItems(); }); + +/** + * Loads the list of ticket items using the current filters. + * + * @function loadTicketItems + * @param {Number} page For pagination, an invalid page will result in an error. + */ function loadTicketItems(page=1) { if (global_loadingTickets) { @@ -278,43 +285,7 @@ function loadTicketItems(page=1) { // Iterate over and handle each ticket response.results.forEach(function(ticket) { - - // Create a copy of the template using the ticket data - var template = $($("#ticketItemTemplate").html()); - template.find(".ticket-item-author").text(`${ticket.author.forename} ${ticket.author.surname}`); - template.find(".ticket-item-datetime").text(ticket.display_datetime); - template.find(".ticket-item-title").text(ticket.title); - 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); - }); - - var priorityElem = template.find(".ticket-item-priority"); - priorityElem.css("color", ticket.priority.colour); - priorityElem.css("background-color", ticket.priority.backgroundcolour); - priorityElem.attr("data-bs-title", ticket.priority.title + " Priority"); - priorityElem.tooltip(); - - var departmentElem = template.find(".ticket-item-department"); - if (ticket.author.department === null) { - departmentElem.hide(); - } - else { - departmentElem.css("color", ticket.author.department.colour); - departmentElem.css("background-color", ticket.author.department.backgroundcolour); - departmentElem.attr("data-bs-title", ticket.author.department.title + " Department"); - departmentElem.tooltip(); - } - - // Add the content to the interface - $("#ticketsContainer .content").append(template); + $("#ticketsContainer .content").append(createTicketItem(ticket)); }); // Make tickets clickable @@ -325,6 +296,62 @@ function loadTicketItems(page=1) { }); } +/** + * Returns a jquery object representing an element for a ticket item, constructed using the passed + * ticket and a predefined template. + * + * @function createTicketItem + * @param {Object} ticket An object representing a ticket. + * @return {jQuery} ticketElement to be appeneded as content. + */ +function createTicketItem(ticket) { + // Create a copy of the template using the ticket data + var template = $($("#ticketItemTemplate").html()); + template.find(".ticket-item-author").text(`${ticket.author.forename} ${ticket.author.surname}`); + template.find(".ticket-item-datetime").text(ticket.display_datetime); + template.find(".ticket-item-title").text(ticket.title); + 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); + }); + + const priority = ticket.priority; + + var priorityElem = template.find(".ticket-item-priority"); + priorityElem.css("color", priority.colour); + priorityElem.css("background-color", priority.backgroundcolour); + priorityElem.attr("data-bs-title", priority.title + " Priority"); + priorityElem.tooltip(); + + const department = ticket.author.department; + + var departmentElem = template.find(".ticket-item-department"); + if (department === null) { + departmentElem.hide(); + } + else { + departmentElem.css("color", ticket.author.department.colour); + departmentElem.css("background-color", ticket.author.department.backgroundcolour); + departmentElem.attr("data-bs-title", ticket.author.department.title + " Department"); + departmentElem.tooltip(); + } + + return template; +} + +/** + * Load the content of a selected ticket. + * + * @function loadTicketContent + * @param {String} uuid A string representation of the ticket's UUID. + */ function loadTicketContent(uuid) { updateContentState("loading"); @@ -338,32 +365,38 @@ function loadTicketContent(uuid) { fetchTicketsPromise({uuid: uuid}).then((response) => { ticket = response.results[0]; - - // Create a copy of the template using the ticket data - var template = $($("#ticketContentTemplate").html()); - template.find(".ticket-content-author").text(`${ticket.author.forename} ${ticket.author.surname}`); - template.find(".ticket-content-datetime").text(ticket.display_datetime); - template.find(".ticket-content-title").text(ticket.title); - 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); - + $("#ticketContent .content").append(createTicketContent(ticket)); updateContentState("content"); global_loadingTickets = false; }); +} - // $("#ticketContent").empty(); +/** + * Returns a jquery object representing an element for a ticket content, constructed using the + * passed ticket and a predefined template. + * + * @function createTicketItem + * @param {Object} ticket An object representing a ticket. + * @return {jQuery} ticketElement to be shown as content. + */ +function createTicketContent(ticket) { + // Create a copy of the template using the ticket data + var template = $($("#ticketContentTemplate").html()); + template.find(".ticket-content-author").text(`${ticket.author.forename} ${ticket.author.surname}`); + template.find(".ticket-content-datetime").text(ticket.display_datetime); + template.find(".ticket-content-title").text(ticket.title); + template.find(".ticket-content-desc").html(ticket.description); + template.find(".ticket-content-icon").attr("src", ticket.author.icon); + console.debug(ticket.description); - // updateInterfaceState("showing-content"); + 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); + }); + + return template; } function fetchTicketsPromise(queryFilters) {