corbz/ticket-website
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects 1 Releases 1 Wiki Activity

integrate API changes into frontend

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-01-17 21:54:54 +00:00
parent 77dc45044b
commit aa1ef52694
3 changed files with 30 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/api/views.py
View File

@ -51,7 +51,7 @@ class TicketListApiView(generics.ListAPIView):
queryset = Ticket.objects.all() queryset = Ticket.objects.all()
filter_backends = [filters.SearchFilter, rest_filters.DjangoFilterBackend, filters.OrderingFilter] 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"] search_fields = ["author__forename", "author__surname", "title", "description"]
ordering_fields = ["create_timestamp", "edit_timestamp"] ordering_fields = ["create_timestamp", "edit_timestamp"]

57
apps/static/assets/js/tickets.js
View File

@ -49,7 +49,7 @@ $(document).ready(function() {
}) })
setupFilter("#filterSidebar .filter-department", "author__department"); setupFilter("#filterSidebar .filter-department", "author__department");
setupFilter("#filterSidebar .filter-tag", "tags__in"); setupFilter("#filterSidebar .filter-tag", "tags");
setupFilter("#filterSidebar .filter-priority", "priority"); setupFilter("#filterSidebar .filter-priority", "priority");
loadFilterCounts(); loadFilterCounts();
@ -81,7 +81,12 @@ function setupFilter(selector, key) {
} }
} }
else if (input.is(":radio") && input.is(":checked")) { 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}'`) console.debug(`Filter applied '${key}' as '${uuid}'`)
@ -210,18 +215,18 @@ function loadAllTickets() {
url: URL_Tickets, url: URL_Tickets,
type: "GET", type: "GET",
dataType: "json", dataType: "json",
data: filters, data: $.param(filters, true),
success: function(data) { success: function(data) {
loadingTickets = false; loadingTickets = false;
console.log(JSON.stringify(data, null, 4)) console.log(JSON.stringify(data, null, 4))
$("#ticketCounts .current").text(data.length); $("#ticketCounts .current").text(data.results.length);
$("#ticketsContainer .loading").hide(); $("#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(); else $("#ticketsContainer .none-found").hide();
data.forEach(function(ticket) { data.results.forEach(function(ticket) {
var timestamp = new Date(ticket.timestamp); var timestamp = new Date(ticket.timestamp);
var formattedTime = timestampToHumanDate(timestamp, ticket.was_yesterday); var formattedTime = timestampToHumanDate(timestamp, ticket.was_yesterday);
@ -229,31 +234,15 @@ function loadAllTickets() {
formattedTime += " • edited"; formattedTime += " • edited";
} }
var item = $(` var template = $($("#ticketItemTemplate").html());
<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}"> template.find(".ticket-item-author").text(`${ticket.author.forename} ${ticket.author.surname}`);
<div class="peer mR-10"> template.find(".ticket-item-datetime").text(formattedTime);
<img src="${ticket.author.icon}" alt="" class="w-2r h-2r bdrs-50p me-2" style="object-fit: cover;"> template.find(".ticket-item-title").text(ticket.title);
</div> template.find(".ticket-item-desc").text(ticket.description);
<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();
template.find(".ticket-item-icon").attr("src", ticket.author.icon); 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(template);
$("#ticketsContainer .content").append(item);
}); });
applyTicketClickFunction(); applyTicketClickFunction();
@ -267,7 +256,7 @@ function loadAllTickets() {
} }
function applyTicketClickFunction() { function applyTicketClickFunction() {
$(".email-list-item").on("click", function(e) { $(".ticket-item").on("click", function(e) {
e.preventDefault(); e.preventDefault();
displayTicket(this); displayTicket(this);
$('.email-app').removeClass('side-active'); $('.email-app').removeClass('side-active');
@ -301,7 +290,7 @@ function changeTicket(next=true) {
function displayTicket(ticketElement) { function displayTicket(ticketElement) {
ticket = $(ticketElement); ticket = $(ticketElement);
ticketID = ticket.data("ticket-id"); ticketID = ticket.data("uuid");
// $(".back-to-mailbox").off("click").on("click", function(event) { // $(".back-to-mailbox").off("click").on("click", function(event) {
// event.preventDefault(); // event.preventDefault();
@ -334,13 +323,11 @@ function displayTicket(ticketElement) {
url: URL_Tickets, url: URL_Tickets,
type: 'get', type: 'get',
dataType: 'json', dataType: 'json',
data: { data: $.param({uuid: ticketID}, true),
uuid__in: [ticketID]
},
success: function (data) { success: function (data) {
console.log(JSON.stringify(data, null, 4)); console.log(JSON.stringify(data, null, 4));
var ticket = data[0]; var ticket = data.results[0];
var author = ticket.author; var author = ticket.author;
var department = author.department; var department = author.department;
var priority = ticket.priority; var priority = ticket.priority;

14
apps/templates/home/tickets.html
View File

@ -422,8 +422,12 @@
</div> </div>
</div> </div>
<template id="ticketItemTemplate"> {% endblock content %}
<div class="ticket-list-item peers fxw-nw p-20 bdB bgcH-grey-100" data-uuid="-1">
{% 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"> <div class="peer mR-10">
<img src="" alt="" class="ticket-item-icon me-2"> <img src="" alt="" class="ticket-item-icon me-2">
</div> </div>
@ -440,11 +444,7 @@
<div class="ticket-item-desc"></div> <div class="ticket-item-desc"></div>
</div> </div>
</div> </div>
</template> </script>
{% endblock content %}
{% block javascripts %}
<!-- Define Variables --> <!-- Define Variables -->
<script> <script>
const URL_Tickets = "{% url 'api:tickets' %}"; const URL_Tickets = "{% url 'api:tickets' %}";