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

Clear filter button & item priority indicator

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-01-21 22:52:11 +00:00
parent 25fbfb3aa1
commit 4647236e20
3 changed files with 97 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/static/css/index.css
View File

@ -114,6 +114,11 @@ body {
background-color: var(--bs-tertiary-bg);
}
.ticket-item .ticket-item-indicator {
width: 5px;
height: 100%;
}
.ticket-item .ticket-item-icon {
width: 2rem;
height: 2rem;

32
apps/static/js/tickets.js
View File

@ -10,6 +10,21 @@ $(document).ready(function() {
setupFilter("#filterSidebar .filter-tags", "tags");
setupFilter("#filterSidebar .filter-priority", "priority");
// alert($(".deselect-radio-filters").length);
// $(".deselect-radio-filters").on("change", function() {
// const checked = $(this).prop("checked");
// alert(checked);
// if (checked) {
// const name = $(this).prop("name");
// $(`[name='${name}']`).each(function(elem) {
// alert($(elem).prop("id"));
// });
// }
// });
loadFilterCounts();
loadTicketItems();
});
@ -91,6 +106,13 @@ function setupFilter(selector, key) {
else if (input.is(":radio") && input.is(":checked")) {
if (uuid === "all") delete filters[key];
else filters[key] = [uuid];
const deselectOption = $(`[name='${input.prop("name")}'].deselect-radio-filters`);
if (deselectOption.length) {
if (deselectOption.prop("checked")) deselectOption.parent().hide();
else deselectOption.parent().show();
}
}
console.debug(`Filter applied '${key}' as '${uuid}'`)
@ -143,9 +165,9 @@ function loadFilterCounts() {
updateFilterCounts('tags', data);
updateFilterCounts('department', data);
$("#filterPriorityAll .badge").text(data.tickets);
$("#filterDepartmentAll .badge").text(data.tickets)
// $("#ticketCounts .total").text(data.tickets)
// $("#filterPriorityAll .badge").text(data.tickets);
// $("#filterDepartmentAll .badge").text(data.tickets);
// $("#ticketCounts .total").text(data.tickets);
},
error: function(data) {
console.error(JSON.stringify(data, null, 4))
@ -273,6 +295,10 @@ function loadTicketItems(page=1) {
template.find(".ticket-item-tags").append(tagTemplate);
});
var priorityElem = template.find(".ticket-item-indicator");
priorityElem.css("background-color", ticket.priority.backgroundcolour);
priorityElem.attr("data-title", ticket.priority.title + " Priority");
// Add the priority using the badge template
var priorityTemplate = $($("#ticketContentBadgeTemplate").html());
priorityTemplate.find(".ticket-content-badge-text").text(ticket.priority.title + " Priority");

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

@ -25,22 +25,16 @@
{% if priorities %}
<li class="nav-item mT-10">
<h6 class="mx-3">Priorities</h6>
</li>
<li id="filterPriorityAll" class="nav-item filter-priority">
<label for="filterPriority-all" class="nav-link text-reset actived">
<div class="peers ai-c jc-sb">
<div class="peer peer-greed">
<input type="radio" id="filterPriority-all" name="filterPriorities" class="form-check-input me-2" checked="checked" value="all">
<span>All</span>
</div>
<!-- <div class="peer">
<span class="badge rounded-pill bgc-green-50 c-green-700">0</span>
</div> -->
</div>
</label>
<li class="nav-item mT-10 filter-priority">
<h6 class="peers ai-c jc-sb mb-2 px-3">
<span class="peer-greed">Priorities</span>
<label for="filterPriority-all" class="nav-link text-reset actived p-0 cur-p" style="display: none">
<input type="radio" id="filterPriority-all" name="filterPriorities" class="btn-check deselect-radio-filters" checked="checked" value="all">
<span class="text-body badge small bg-none border-none py-0">
<i class="ti-close"></i>
</span>
</label>
</h6>
</li>
{% for priority in priorities %}
@ -60,6 +54,18 @@
</li>
{% endfor %}
<!--
<li id="filterPriorityAll" class="nav-item filter-priority">
<label for="filterPriority-all" class="nav-link text-reset actived">
<div class="peers ai-c jc-sb">
<div class="peer peer-greed">
<input type="radio" id="filterPriority-all" name="filterPriorities" class="btn-check" checked="checked" value="all">
<span class="btn btn-sm btn-secondary">Remove Filter</span>
</div>
</div>
</label>
</li> -->
{% endif %}
@ -127,23 +133,33 @@
{% if departments %}
<li class="nav-item">
<!-- <li class="nav-item">
<h6 class="px-3">Departments</h6>
</li>
</li> -->
<li id="filterDepartmentAll" class="nav-item filter-department">
<h6 class="peers ai-c jc-sb mb-2 px-3">
<span class="peer-greed">Departments</span>
<label for="filterDepartment-all" class="nav-link text-reset actived p-0 cur-p" style="display: none">
<input type="radio" id="filterDepartment-all" name="filterDepartment" class="btn-check deselect-radio-filters" checked="checked" value="all">
<span class="text-body badge small bg-none border-none py-0">
<i class="ti-close"></i>
</span>
</label>
</h6>
</li>
<!-- <li id="filterDepartmentAll" class="nav-item filter-department">
<label for="filterDepartment-all" class="nav-link text-reset actived">
<div class="peers ai-c jc-sb">
<div class="peer peer-greed">
<input type="radio" id="filterDepartment-all" name="filterDepartment" class="form-check-input me-2" checked="checked" value="all">
<span>All</span>
</div>
<!-- <div class="peer">
<span class="badge rounded-pill bgc-green-50 c-green-700">0</span>
</div> -->
</div>
</label>
</li>
</li> -->
{% for department in departments %}
@ -182,7 +198,7 @@
<i class="ti-tag"></i>
</button> -->
<button type="button" class="btn bg-body bdrs-2 mR-3" onclick="javascript:loadTicketItems();">
<i class="fa fa-refresh"></i>
<i class="ti-reload"></i>
</button>
</div>
</div>
@ -297,7 +313,7 @@
<i class="ti-angle-left"></i>
</button>
<button type="button" class="btn bg-body bdrs-2 mR-3" onclick="javascript:reloadCurrentTicket();">
<i class="fa fa-refresh"></i>
<i class="ti-reload"></i>
</button>
<button type="button" class="btn bg-body bdrs-2 mR-3">
<i class="ti-more-alt"></i>
@ -423,24 +439,29 @@
{% block javascripts %}
<!-- Ticket Item Template -->
<script id="ticketItemTemplate" type="text/template">
<div class="ticket-item peers fxw-nw p-20 bdB" data-uuid="-1">
<div class="peer mR-10">
<img src="" alt="" class="ticket-item-icon me-2">
<div class="ticket-item peers fxw-nw bdB" data-uuid="-1">
<div class="peer align-self-stretch">
<div class="ticket-item-indicator"></div>
</div>
<div class="peer peer-greed ov-h">
<div class="peers ai-c mb-2">
<div class="peer peer-greed">
<h6 class="ticket-item-author"></h6>
</div>
<div class="peer">
<small class="ticket-item-datetime"></small>
</div>
<div class="peer peer-greed peers fxw-nw p-20 w-100">
<div class="peer mR-10">
<img src="" alt="" class="ticket-item-icon me-2">
</div>
<h5 class="ticket-item-title mb-0"></h5>
<div class="ticket-item-desc mt-2"></div>
<div class="peers">
<div class="ticket-item-priority pe-5 peer peer-greed"></div>
<div class="ticket-item-tags peer d-flex flex-wrap mw-100"></div>
<div class="peer peer-greed ov-h">
<div class="peers ai-c mb-2">
<div class="peer peer-greed">
<h6 class="ticket-item-author"></h6>
</div>
<div class="peer">
<small class="ticket-item-datetime"></small>
</div>
</div>
<h5 class="ticket-item-title mb-0"></h5>
<div class="ticket-item-desc mt-2"></div>
<div class="peers">
<!-- <div class="ticket-item-priority pe-5 peer peer-greed"></div> -->
<div class="ticket-item-tags peer d-flex flex-wrap mw-100" data-bs-toggle="tooltip"></div>
</div>
</div>
</div>
</div>
@ -457,7 +478,7 @@
</div>
<div class="peer">
<small class="ticket-content-datetime"></small>
<h5 class="ticket-content-author"></h5>
<h5 class="ticket-content-author mb-0"></h5>
<div class="ticket-content-badges"></div>
</div>
</div>
@ -473,7 +494,7 @@
<!-- Ticket Content Badge Template -->
<script id="ticketContentBadgeTemplate" type=text/template>
<div class="ticket-content-badge badge rounded-pill mT-15 me-2">
<div class="ticket-content-badge badge rounded mt-2 me-2">
<span class="ticket-content-badge-text"></span>
<i class="ticket-content-badge-icon"></i>
</div>