From 46fb0580b97790063d1d968014222367699fc250 Mon Sep 17 00:00:00 2001
From: Corban-Lee Jones <corbz.jones@gmail.com>
Date: Fri, 5 Jan 2024 16:45:52 +0000
Subject: [PATCH] Change tickets to use Ajax over Template Syntax

The tickets are now loaded dynamically using ajax, instead of when the page loads using django template syntax.

This allows for dynamic reloading.
---
 apps/home/urls.py                |  5 +-
 apps/home/views.py               | 13 +++--
 apps/templates/home/tickets.html | 87 +++++++++++++++++++++++++++-----
 3 files changed, 89 insertions(+), 16 deletions(-)

diff --git a/apps/home/urls.py b/apps/home/urls.py
index 20c8c41..8d52334 100644
--- a/apps/home/urls.py
+++ b/apps/home/urls.py
@@ -13,7 +13,10 @@ urlpatterns = [
     path('tickets/', include([
         path('', views.tickets, name="tickets"),
         path('new/', views.new_ticket, name="ticket-new"),
-        path('get/', views.get_ticket, name="ticket-get"),
+        path('get/', include([
+            path('one/', views.get_ticket, name="ticket-getone"),
+            path('many/', views.get_tickets, name="ticket-getmany"),
+        ])),
     ])),
 
     # Matches any html file
diff --git a/apps/home/views.py b/apps/home/views.py
index 5a3923f..abd9bbd 100644
--- a/apps/home/views.py
+++ b/apps/home/views.py
@@ -48,13 +48,20 @@ def get_ticket(request):
 
 @login_required
 @require_POST
-def get_tickets(request, filters: dict):
-    pass
+def get_tickets(request):
+
+    filters = dict(request.POST.get("filters", {}))
+
+    tickets = Ticket.objects.filter(**filters).order_by("-create_timestamp")    
+    data = {"tickets": [ticket.serialize() for ticket in tickets]}
+
+    return JsonResponse(data)
 
 
 @login_required()
+@require_POST
 def new_ticket(request):
-    return render(request, "home/newticket.html")
+    return JsonResponse({"placeholder": "nothing here yet"})
 
 
 @login_required()
diff --git a/apps/templates/home/tickets.html b/apps/templates/home/tickets.html
index 5476391..066b9a1 100644
--- a/apps/templates/home/tickets.html
+++ b/apps/templates/home/tickets.html
@@ -203,15 +203,11 @@
                     <input type="text" class="form-control m-0 bdw-0 pY-15 pX-20 bdrs-0" placeholder="Search...">
                     </div>
                 </div>
-                <div class="layer w-100 fxg-1 scrollable pos-r">
-                    {% for ticket in tickets %}
+                <div id="ticketsContainer" class="layer w-100 fxg-1 scrollable pos-r">
+                    <!-- {% for ticket in tickets %}
                     <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p" data-ticket-id="{{ ticket.id }}" data-author-icon="{{ ticket.author.icon.url }}">
                         <div class="peer mR-10">
                             <img src="{{ ticket.author.icon.url }}" alt="" class="w-2r bdrs-50p me-2">
-                            <!-- <div class="checkbox checkbox-circle checkbox-info peers ai-c">
-                                <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
-                                <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
-                            </div> -->
                         </div>
                         <div class="peer peer-greed ov-h">
                             <div class="peers ai-c">
@@ -235,7 +231,7 @@
                             <span class="whs-nw w-100 ov-h tov-e d-b ticket-desc">{{ ticket.description|safe }}</span>
                         </div>
                     </div>
-                    {% endfor %}
+                    {% endfor %} -->
                 </div>
                 </div>
                 <div class="email-content h-100">
@@ -350,7 +346,7 @@
 
     <div id="ticketModal" class="modal fade" aria-hidden="true">
         <div class="modal-dialog">
-            <form method="post">
+            <form method="post" action="{% url 'ticket-new' %}">
 
                 {% csrf_token %}
 
@@ -412,14 +408,81 @@
         });
 
         ClassicEditor
-            .create( document.getElementById("newDesc"), {
-
-            })
+            .create( document.getElementById("newDesc"), {})
             .catch( error => {
                 console.error(error)
             });
+
+        loadAllTickets();
     });
 
+    function loadAllTickets() {
+        $("#ticketsContainer").empty();
+
+        $.ajax({
+            url: "{% url 'ticket-getmany' %}",
+            type: "POST",
+            dataType: "json",
+            data: {
+                csrfmiddlewaretoken: "{{ csrf_token }}",
+                filters: {}
+            },
+            success: function(data) {
+                console.log(JSON.stringify(data, null, 4))
+
+                data.tickets.forEach(function(ticket) {
+                    var timestamp = new Date(ticket.timestamp);
+                    var formattedTime;
+
+                    if (ticket.is_older_than_day) {
+                        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";
+                    }
+
+                    var item = $(`
+                        <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p" data-ticket-id="${ticket.id}" data-author-icon="${ticket.author.icon}">
+                            <div class="peer mR-10">
+                                <img src="${ticket.author.icon}" alt="" class="w-2r bdrs-50p me-2">
+                            </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>
+                    `);
+
+
+                    $("#ticketsContainer").append(item);
+                });
+
+                $(".email-list-item").on("click", function() {
+                    displayTicket(this);
+                });
+            },
+            error: function(data) {
+                alert(JSON.stringify(data, null, 4))
+            }
+        });
+
+    }
+
     function displayTicket(ticketElement) {
         ticket = $(ticketElement);
         ticketID = ticket.data("ticket-id");
@@ -447,7 +510,7 @@
         displayedTicketID = ticketID;
 
         $.ajax({
-            url: `/tickets/get/`,
+            url: `{% url 'ticket-getone' %}`,
             type: 'POST',
             dataType: 'json',
             data: {