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

implemented filter counts #4

Browse Source 
While this contributes to #4, it doesn't complete it as the filters are still mostly eye candy.
This commit is contained in:
Corban-Lee Jones 2024-01-09 22:48:28 +00:00
parent 7ccdbc326a
commit cae5ac024e
3 changed files with 142 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/home/urls.py
View File

@ -16,6 +16,7 @@ urlpatterns = [
path('get/', include([ path('get/', include([
path('one/', views.get_ticket, name="ticket-getone"), path('one/', views.get_ticket, name="ticket-getone"),
path('many/', views.get_tickets, name="ticket-getmany"), path('many/', views.get_tickets, name="ticket-getmany"),
path("filtercounts/", views.get_filter_counts, name="ticket-getfiltercounts"),
])), ])),
])), ])),

27
apps/home/views.py
View File

@ -57,6 +57,33 @@ def get_tickets(request):
return JsonResponse(data) return JsonResponse(data)
@login_required
@require_POST
def get_filter_counts(request):
priorities = TicketPriority.objects.all()
tags = TicketTag.objects.all()
departments = Department.objects.all()
tickets = Ticket.objects.all()
data = {
"priority_counts": {},
"tag_counts": {},
"department_counts": {},
"ticket_count": tickets.count()
}
for priority in priorities:
data["priority_counts"][str(priority.id)] = tickets.filter(priority=priority).count()
for tag in tags:
data["tag_counts"][str(tag.id)] = tickets.filter(tags__in=[tag]).count()
for department in departments:
data["department_counts"][str(department.id)] = tickets.filter(author__department=department).count()
return JsonResponse(data)
@login_required() @login_required()
@require_POST @require_POST

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

@ -21,138 +21,86 @@
<button type="button" class="btn btn-danger c-white w-100" data-bs-toggle="modal" data-bs-target="#ticketModal">New Ticket</button> <button type="button" class="btn btn-danger c-white w-100" data-bs-toggle="modal" data-bs-target="#ticketModal">New Ticket</button>
</div> </div>
<div class="scrollable pos-r bdT layer w-100 fxg-1"> <div class="scrollable pos-r bdT layer w-100 fxg-1">
<ul class="p-20 nav flex-column"> <ul id="filterSidebar" class="p-20 nav flex-column">
<li class="nav-item">
<h6>Filters</h6> {% if priorities %}
<li class="nav-item mT-15">
<h6>Priorities</h6>
</li> </li>
{% if priorities %} {% for priority in priorities %}
<li class="nav-item px-3 mt-3">
<h6 class="small">Priority</h6>
{% for priority in priorities %}
<div class="form-check mb-2">
<input type="checkbox" id="priority-{{ priority.id }}" class="form-check-input me-3">
<label for="priority-{{ priority.id }}" class="form-check-label">
<span class="badge rounded-pill" style="color: {{ priority.colour }}; background-color: {{ priority.backgroundcolour }};">
{{ priority.title }}
<i class="ti-control-record ms-auto"></i>
</span>
</label>
</div>
{% endfor %}
</li>
{% endif %}
{% if departments %} <li class="nav-item filter-priority" data-uuid="{{ priority.id }}">
<li class="nav-item px-3 mt-3"> <label for="filterPriority-{{ priority.id }}" class="nav-link c-grey-800 cH-blue-500 actived">
<h6 class="small">Department</h6> <div class="peers ai-c jc-sb">
{% for department in departments %} <div class="peer peer-greed">
<div class="form-check mb-2"> <input type="checkbox" id="filterPriority-{{ priority.id }}" class="form-check-input me-2">
<input type="checkbox" id="department-{{ department.id }}" class="form-check-input me-2"> <span>{{ priority.title }}</span>
<label for="department-{{ department.id }}" class="form-check-label d-flex jc-sb"> </div>
{{ department.title }} <div class="peer">
<i class="{{ department.icon }} ms-auto"></i> <span class="badge rounded-pill" style="color: {{ priority.colour }}; background-color: {{ priority.backgroundcolour }};">0</span>
</label> </div>
</div> </div>
{% endfor %} </label>
</li> </li>
{% endif %}
{% if tags %} {% endfor %}
<li class="nav-item px-3 mt-3">
<h6 class="small">Tags</h6> {% endif %}
{% for tag in tags %}
<div class="form-check mb-2"> {% if tags %}
<input type="checkbox" id="tag-{{ tag.id }}" class="form-check-input me-3">
<label for="tag-{{ tag.id }}" class="form-check-label"> <li class="nav-item mT-15">
<span class="badge rounded-pill" style="color: {{ tag.colour }}; background-color: {{ tag.backgroundcolour }};"> <h6>Tags</h6>
{{ tag.title }} </li>
<i class="ti-tag ms-auto"></i>
</span> {% for tag in tags %}
</label>
<li class="nav-item filter-tag" data-uuid="{{ tag.id }}">
<label for="filterTag-{{ tag.id }}" class="nav-link c-grey-800 cH-blue-500 actived">
<div class="peers ai-c jc-sb">
<div class="peer peer-greed">
<input type="checkbox" id="filterTag-{{ tag.id }}" class="form-check-input me-2">
<span>{{ tag.title }}</span>
</div>
<div class="peer">
<span class="badge rounded-pill" style="color: {{ tag.colour }}; background-color: {{ tag.backgroundcolour }};">0</span>
</div>
</div> </div>
{% endfor %} </label>
</li> </li>
{% endif %}
<!-- {% endfor %}
<li class="nav-item mt-5">
<a href="javascript:void(0)" class="nav-link c-grey-800 cH-blue-500 actived"> {% endif %}
<div class="peers ai-c jc-sb">
<div class="peer peer-greed"> {% if departments %}
<i class="mR-10 ti-email"></i>
<span>Inbox</span> <li class="nav-item mT-15">
</div> <h6>Departments</h6>
<div class="peer"> </li>
<span class="badge rounded-pill bgc-deep-purple-50 c-deep-purple-700">+99</span>
</div> {% for department in departments %}
</div>
</a> <li class="nav-item filter-department" data-uuid="{{ department.id }}">
</li> --> <label for="filterDepartment-{{ department.id }}" class="nav-link c-grey-800 cH-blue-500 actived">
<!--<li class="nav-item"> <div class="peers ai-c jc-sb">
<a href="" class="nav-link c-grey-800 cH-blue-500"> <div class="peer peer-greed">
<div class="peers ai-c jc-sb"> <input type="checkbox" id="filterDepartment-{{ department.id }}" class="form-check-input me-2">
<div class="peer peer-greed"> <span>{{ department.title }}</span>
<i class="mR-10 ti-share"></i> </div>
<span>Sent</span> <div class="peer">
</div> <span class="badge rounded-pill bgc-green-50 c-green-700">0</span>
<div class="peer"> </div>
<span class="badge rounded-pill bgc-green-50 c-green-700">12</span> </div>
</div> </label>
</div> </li>
</a>
</li> {% endfor %}
<li class="nav-item">
<a href="" class="nav-link c-grey-800 cH-blue-500"> {% endif %}
<div class="peers ai-c jc-sb">
<div class="peer peer-greed">
<i class="mR-10 ti-star"></i>
<span>Important</span>
</div>
<div class="peer">
<span class="badge rounded-pill bgc-blue-50 c-blue-700">3</span>
</div>
</div>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link c-grey-800 cH-blue-500">
<div class="peers ai-c jc-sb">
<div class="peer peer-greed">
<i class="mR-10 ti-file"></i>
<span>Drafts</span>
</div>
<div class="peer">
<span class="badge rounded-pill bgc-amber-50 c-amber-700">5</span>
</div>
</div>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link c-grey-800 cH-blue-500">
<div class="peers ai-c jc-sb">
<div class="peer peer-greed">
<i class="mR-10 ti-alert"></i>
<span>Spam</span>
</div>
<div class="peer">
<span class="badge rounded-pill bgc-red-50 c-red-700">1</span>
</div>
</div>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link c-grey-800 cH-blue-500">
<div class="peers ai-c jc-sb">
<div class="peer peer-greed">
<i class="mR-10 ti-trash"></i>
<span>Trash</span>
</div>
<div class="peer">
<span class="badge rounded-pill bgc-red-50 c-red-700">+99</span>
</div>
</div>
</a>
</li> -->
</ul> </ul>
</div> </div>
</div> </div>
@ -399,6 +347,7 @@
console.error(error) console.error(error)
}); });
loadFilterCounts();
loadAllTickets(); loadAllTickets();
}); });
@ -429,6 +378,47 @@
} }
} }
function loadFilterCounts() {
// $("#filterSidebar")
$.ajax({
url: "{% url 'ticket-getfiltercounts' %}",
type: "POST",
dataType: "json",
data: {
csrfmiddlewaretoken: "{{ csrf_token }}",
},
success: function(data) {
alert(JSON.stringify(data, null, 4));
var priorities = data.priority_counts;
var tags = data.tag_counts;
var departments = data.department_counts;
$("#filterSidebar .filter-priority").each(function() {
var uuid = $(this).data("uuid");
var count = priorities[uuid];
$(this).find(".badge").text(count);
});
$("#filterSidebar .filter-tag").each(function() {
var uuid = $(this).data("uuid");
var count = tags[uuid];
$(this).find(".badge").text(count);
});
$("#filterSidebar .filter-department").each(function() {
var uuid = $(this).data("uuid");
var count = departments[uuid];
$(this).find(".badge").text(count);
});
},
error: function(data) {
alert(JSON.stringify(data, null, 4))
}
});
}
function loadAllTickets() { function loadAllTickets() {
$("#ticketsContainer").empty(); $("#ticketsContainer").empty();