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

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

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