Ticket Navigation Buttons

Added buttons to move to the next or prev ticket from the current selected ticket.

Also segmented JS into functions.

apps/static/assets/js/tickets.js

@@ -172,6 +172,20 @@ function loadFilterCounts() {
     });
 }
 
+function timestampToHumanDate(timestamp, wasYesterday) {
+    if (wasYesterday) {
+        var day = getOrdinalSuffix(timestamp.getDate());
+        var month = timestamp.toLocaleString('en-GB', { month: 'short' });
+        var year = timestamp.toLocaleString('en-GB', { year: 'numeric' });
+        var time = timestamp.toLocaleString('en-GB', { hour: 'numeric', minute: 'numeric' });
+        return time + ', ' + day + ' ' + month + ' ' + year;
+    }
+
+    var hours = timestamp.getUTCHours();
+    var minutes = timestamp.getUTCMinutes();
+    return hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0');
+}
+
 function loadAllTickets() {
     if (loadingTickets === true) {
         return;
@@ -201,22 +215,7 @@ function loadAllTickets() {
 
             data.forEach(function(ticket) {
                 var timestamp = new Date(ticket.timestamp);
-                var formattedTime;
+                var formattedTime = timestampToHumanDate(timestamp, ticket.was_yesterday);
-
-                if (ticket.was_yesterday) {
-                    var day = getOrdinalSuffix(timestamp.getDate());
-                    var month = timestamp.toLocaleString('en-GB', { month: 'short' });
-                    var year = timestamp.toLocaleString('en-GB', { year: 'numeric' });
-                    var time = timestamp.toLocaleString('en-GB', { hour: 'numeric', minute: 'numeric' });
-
-                    // Formatting the final result
-                    var formattedTime = time + ', ' + day + ' ' + month + ' ' + year;
-                }
-                else {
-                    var hours = timestamp.getUTCHours();
-                    var minutes = timestamp.getUTCMinutes();
-                    formattedTime = hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0');
-                }
 
                 if (ticket.is_edited) {
                     formattedTime += " • edited";
@@ -246,11 +245,7 @@ function loadAllTickets() {
                 $("#ticketsContainer .content").append(item);
             });
 
-            $(".email-list-item").on("click", function(e) {
+            applyTicketClickFunction();
-                e.preventDefault();
-                displayTicket(this);
-                $('.email-content').toggleClass('open');
-            });
         },
         error: function(data) {
             loadingTickets = false;
@@ -260,6 +255,38 @@ function loadAllTickets() {
     });
 }
 
+function applyTicketClickFunction() {
+    $(".email-list-item").on("click", function(e) {
+        e.preventDefault();
+        displayTicket(this);
+        $('.email-content').toggleClass('open');
+    });
+}
+
+function reloadCurrentTicket() {
+    displayTicket($(".email-list-item.bgc-grey-100"));
+}
+
+function changeTicket(next=true) {
+    var selectedTicket = $(".email-list-item.bgc-grey-100");
+
+    if (!selectedTicket.length) {
+        displayTicket($(".email-list-item").first());
+        return;
+    }
+
+    if (next) {
+        displayTicket(selectedTicket.next());
+    }
+    else {
+        displayTicket(selectedTicket.prev());
+    }
+
+    if (!$('.email-content').hasClass('open')) {
+        $('.email-content').addClass('open');
+    }
+}
+
 function displayTicket(ticketElement) {
     ticket = $(ticketElement);
     ticketID = ticket.data("ticket-id");
@@ -326,17 +353,7 @@ function displayTicket(ticketElement) {
 
             // timestamp
             var timestamp = new Date(ticket.timestamp);
-            var formattedTime;
+            var formattedTime = timestampToHumanDate(timestamp, ticket.was_yesterday);
-
-            if (ticket.was_yesterday) {
-                var options = { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric' };
-                formattedTime = timestamp.toLocaleDateString('en-GB', options);
-            }
-            else {
-                var hours = timestamp.getUTCHours();
-                var minutes = timestamp.getUTCMinutes();
-                formattedTime = hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0');
-            }
 
             if (ticket.is_edited) {
                 formattedTime += " • edited";

apps/templates/home/tickets.html

@@ -138,14 +138,14 @@
                         </div>
                         <div class="peer">
                             
-                            <!-- <div class="btn-group" role="group">
+                            <div class="btn-group" role="group">
-                                <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
+                                <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p" onclick="javascript:changeTicket(false);">
                                     <i class="ti-angle-left"></i>
                                 </button>
-                                <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
+                                <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p" onclick="javascript:changeTicket(true);">
                                     <i class="ti-angle-right"></i>
                                 </button>
-                            </div> -->
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -193,7 +193,7 @@
                             <button type="button" class="back-to-mailbox btn bgc-white bdrs-2 mR-3 cur-p">
                                 <i class="ti-angle-left"></i>
                             </button>
-                            <button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p" onclick="javascript:loadAllTickets();">
+                            <button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p" onclick="javascript:reloadCurrentTicket();">
                                 <i class="fa fa-refresh"></i>
                             </button>
                             <button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p">
@@ -203,10 +203,10 @@
                     </div>
                     <div class="peer">
                         <div class="btn-group" role="group">
-                            <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
+                            <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p" onclick="javascript:changeTicket(false);">
                                 <i class="ti-angle-left"></i>
                             </button>
-                            <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
+                            <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p" onclick="javascript:changeTicket(true);">
                                 <i class="ti-angle-right"></i>
                             </button>
                         </div>