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); background-color: var(--bs-tertiary-bg);
} }
.ticket-item .ticket-item-indicator {
width: 5px;
height: 100%;
}
.ticket-item .ticket-item-icon { .ticket-item .ticket-item-icon {
width: 2rem; width: 2rem;
height: 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-tags", "tags");
setupFilter("#filterSidebar .filter-priority", "priority"); 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(); loadFilterCounts();
loadTicketItems(); loadTicketItems();
}); });
@ -91,6 +106,13 @@ function setupFilter(selector, key) {
else if (input.is(":radio") && input.is(":checked")) { else if (input.is(":radio") && input.is(":checked")) {
if (uuid === "all") delete filters[key]; if (uuid === "all") delete filters[key];
else filters[key] = [uuid]; 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}'`) console.debug(`Filter applied '${key}' as '${uuid}'`)
@ -143,9 +165,9 @@ function loadFilterCounts() {
updateFilterCounts('tags', data); updateFilterCounts('tags', data);
updateFilterCounts('department', data); updateFilterCounts('department', data);
$("#filterPriorityAll .badge").text(data.tickets); // $("#filterPriorityAll .badge").text(data.tickets);
$("#filterDepartmentAll .badge").text(data.tickets) // $("#filterDepartmentAll .badge").text(data.tickets);
// $("#ticketCounts .total").text(data.tickets) // $("#ticketCounts .total").text(data.tickets);
}, },
error: function(data) { error: function(data) {
console.error(JSON.stringify(data, null, 4)) console.error(JSON.stringify(data, null, 4))
@ -273,6 +295,10 @@ function loadTicketItems(page=1) {
template.find(".ticket-item-tags").append(tagTemplate); 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 // Add the priority using the badge template
var priorityTemplate = $($("#ticketContentBadgeTemplate").html()); var priorityTemplate = $($("#ticketContentBadgeTemplate").html());
priorityTemplate.find(".ticket-content-badge-text").text(ticket.priority.title + " Priority"); 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 %} {% if priorities %}
<li class="nav-item mT-10"> <li class="nav-item mT-10 filter-priority">
<h6 class="mx-3">Priorities</h6> <h6 class="peers ai-c jc-sb mb-2 px-3">
</li> <span class="peer-greed">Priorities</span>
<label for="filterPriority-all" class="nav-link text-reset actived p-0 cur-p" style="display: none">
<li id="filterPriorityAll" class="nav-item filter-priority"> <input type="radio" id="filterPriority-all" name="filterPriorities" class="btn-check deselect-radio-filters" checked="checked" value="all">
<label for="filterPriority-all" class="nav-link text-reset actived"> <span class="text-body badge small bg-none border-none py-0">
<div class="peers ai-c jc-sb"> <i class="ti-close"></i>
<div class="peer peer-greed"> </span>
<input type="radio" id="filterPriority-all" name="filterPriorities" class="form-check-input me-2" checked="checked" value="all"> </label>
<span>All</span> </h6>
</div>
<!-- <div class="peer">
<span class="badge rounded-pill bgc-green-50 c-green-700">0</span>
</div> -->
</div>
</label>
</li> </li>
{% for priority in priorities %} {% for priority in priorities %}
@ -60,6 +54,18 @@
</li> </li>
{% endfor %} {% 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 %} {% endif %}
@ -127,23 +133,33 @@
{% if departments %} {% if departments %}
<li class="nav-item"> <!-- <li class="nav-item">
<h6 class="px-3">Departments</h6> <h6 class="px-3">Departments</h6>
</li> </li> -->
<li id="filterDepartmentAll" class="nav-item filter-department"> <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"> <label for="filterDepartment-all" class="nav-link text-reset actived">
<div class="peers ai-c jc-sb"> <div class="peers ai-c jc-sb">
<div class="peer peer-greed"> <div class="peer peer-greed">
<input type="radio" id="filterDepartment-all" name="filterDepartment" class="form-check-input me-2" checked="checked" value="all"> <input type="radio" id="filterDepartment-all" name="filterDepartment" class="form-check-input me-2" checked="checked" value="all">
<span>All</span> <span>All</span>
</div> </div>
<!-- <div class="peer">
<span class="badge rounded-pill bgc-green-50 c-green-700">0</span>
</div> -->
</div> </div>
</label> </label>
</li> </li> -->
{% for department in departments %} {% for department in departments %}
@ -182,7 +198,7 @@
<i class="ti-tag"></i> <i class="ti-tag"></i>
</button> --> </button> -->
<button type="button" class="btn bg-body bdrs-2 mR-3" onclick="javascript:loadTicketItems();"> <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> </button>
</div> </div>
</div> </div>
@ -297,7 +313,7 @@
<i class="ti-angle-left"></i> <i class="ti-angle-left"></i>
</button> </button>
<button type="button" class="btn bg-body bdrs-2 mR-3" onclick="javascript:reloadCurrentTicket();"> <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>
<button type="button" class="btn bg-body bdrs-2 mR-3"> <button type="button" class="btn bg-body bdrs-2 mR-3">
<i class="ti-more-alt"></i> <i class="ti-more-alt"></i>
@ -423,24 +439,29 @@
{% block javascripts %} {% block javascripts %}
<!-- Ticket Item Template --> <!-- Ticket Item Template -->
<script id="ticketItemTemplate" type="text/template"> <script id="ticketItemTemplate" type="text/template">
<div class="ticket-item peers fxw-nw p-20 bdB" data-uuid="-1"> <div class="ticket-item peers fxw-nw bdB" data-uuid="-1">
<div class="peer mR-10"> <div class="peer align-self-stretch">
<img src="" alt="" class="ticket-item-icon me-2"> <div class="ticket-item-indicator"></div>
</div> </div>
<div class="peer peer-greed ov-h"> <div class="peer peer-greed peers fxw-nw p-20 w-100">
<div class="peers ai-c mb-2"> <div class="peer mR-10">
<div class="peer peer-greed"> <img src="" alt="" class="ticket-item-icon me-2">
<h6 class="ticket-item-author"></h6>
</div>
<div class="peer">
<small class="ticket-item-datetime"></small>
</div>
</div> </div>
<h5 class="ticket-item-title mb-0"></h5> <div class="peer peer-greed ov-h">
<div class="ticket-item-desc mt-2"></div> <div class="peers ai-c mb-2">
<div class="peers"> <div class="peer peer-greed">
<div class="ticket-item-priority pe-5 peer peer-greed"></div> <h6 class="ticket-item-author"></h6>
<div class="ticket-item-tags peer d-flex flex-wrap mw-100"></div> </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> </div>
</div> </div>
@ -457,7 +478,7 @@
</div> </div>
<div class="peer"> <div class="peer">
<small class="ticket-content-datetime"></small> <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 class="ticket-content-badges"></div>
</div> </div>
</div> </div>
@ -473,7 +494,7 @@
<!-- Ticket Content Badge Template --> <!-- Ticket Content Badge Template -->
<script id="ticketContentBadgeTemplate" type=text/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> <span class="ticket-content-badge-text"></span>
<i class="ticket-content-badge-icon"></i> <i class="ticket-content-badge-icon"></i>
</div> </div>