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

jones-dev #19

Merged
corbz merged 106 commits from jones-dev into master 2024-01-26 17:39:03 +00:00
Conversation 0 Commits 106 Files Changed 103 +86 -27
2 changed files with 86 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f97bccbcec - Show all commits

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

@ -14,8 +14,8 @@ $(document).ready(function() {
loadTicketItems();
});
function updateInterfaceState(state) {
console.debug(`updating interface state to '${state}'`);
function updateItemsState(state) {
console.debug(`updating items state to '${state}'`);
switch (state) {
case "content":
$("#ticketsContainer .none-found").hide();
@ -32,13 +32,28 @@ function updateInterfaceState(state) {
$("#ticketsContainer .loading").hide();
break;
default:
throw new Error(`Invalid Interface State '${state}'`);
throw new Error(`Invalid Items State '${state}'`);
}
}
function updateContentState(state) {
console.debug(`updating items state to '${state}'`);
switch (state) {
case "content":
$("#ticketContent .loading").hide();
break;
case "loading":
$("#ticketContent .content").empty();
$("#ticketContent .loading").show();
break;
default:
throw new Error(`Invalid Items State '${state}'`);
}
}
function initSearchBar() {
$("#searchTickets").keyup(() => {
updateInterfaceState("loading");
updateItemsState("loading");
clearTimeout(searchTimeout);
searchTimeout = setTimeout(() => {
console.debug("searching");
@ -189,7 +204,7 @@ function changeItemsPage(next) {
}
function loadTicketItems(page=1) {
updateInterfaceState("loading");
updateItemsState("loading");
filters["page"] = page;
fetchTicketsPromise(filters).then((response) => {
@ -199,7 +214,7 @@ function loadTicketItems(page=1) {
// If there are no tickets
if (!response.count) {
updateInterfaceState("no-content");
updateItemsState("no-content");
return;
}
@ -240,19 +255,19 @@ function loadTicketItems(page=1) {
// Make tickets clickable
applyTicketClickFunction();
updateInterfaceState("content");
updateItemsState("content");
});
}
function loadTicketContent(uuid) {
// updateInterfaceState("loading-content");
updateContentState("loading");
if (global_loadingTickets) {
console.debug("Spam prevention\nStopped loadTicketContent because already loading.");
return;
}
$("#ticketContent").empty();
$("#ticketContent .content").empty();
fetchTicketsPromise({uuid: uuid}).then((response) => {
ticket = response.results[0];
@ -272,7 +287,9 @@ function loadTicketContent(uuid) {
template.find(".ticket-content-desc").text(ticket.description);
template.find(".ticket-content-icon").attr("src", ticket.author.icon);
$("#ticketContent").append(template);
$("#ticketContent .content").append(template);
updateContentState("content");
});
// $("#ticketContent").empty();

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

@ -11,7 +11,7 @@
{% block content %}
<!-- ### $App Screen Content ### -->
<main class='main-content bgc-grey-100'>
<main class='main-content'>
<div id='mainContent'>
<div class="full-container" style="overflow-x: hidden;">
<div class="email-app">
@ -20,7 +20,7 @@
<div class="p-20 bg-body-tertiary layer w-100">
<button type="button" class="btn btn-danger c-white w-100" data-bs-toggle="modal" data-bs-target="#ticketModal">New Ticket</button>
</div>
<div class="pos-r bdT layer w-100 fxg-1 bg-body overflow-y-auto">
<div class="scrollable pos-r bdT layer w-100 fxg-1 bg-body">
<ul id="filterSidebar" class="p-20 nav flex-column">
{% if priorities %}
@ -30,15 +30,15 @@
</li>
<li id="filterPriorityAll" class="nav-item filter-priority">
<label for="filterPriority-all" class="nav-link c-grey-800 cH-blue-500 actived">
<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">
<!-- <div class="peer">
<span class="badge rounded-pill bgc-green-50 c-green-700">0</span>
</div>
</div> -->
</div>
</label>
</li>
@ -46,7 +46,7 @@
{% for priority in priorities %}
<li class="nav-item filter-priority">
<label for="filterPriority-{{ priority.uuid }}" class="nav-link c-grey-800 cH-blue-500 actived">
<label for="filterPriority-{{ priority.uuid }}" class="nav-link text-reset actived">
<div class="peers ai-c jc-sb">
<div class="peer peer-greed">
<input type="radio" id="filterPriority-{{ priority.uuid }}" name="filterPriorities" class="form-check-input me-2" value="{{ priority.uuid }}">
@ -104,7 +104,7 @@
{% for tag in tags %}
<li class="nav-item filter-tags">
<label for="filterTag-{{ tag.uuid }}" class="nav-link c-grey-800 cH-blue-500 actived">
<label for="filterTag-{{ tag.uuid }}" class="nav-link text-reset actived">
<div class="peers ai-c jc-sb">
<div class="peer peer-greed">
<input type="checkbox" id="filterTag-{{ tag.uuid }}" class="form-check-input me-2" value="{{ tag.uuid }}">
@ -132,15 +132,15 @@
</li>
<li id="filterDepartmentAll" class="nav-item filter-department">
<label for="filterDepartment-all" class="nav-link c-grey-800 cH-blue-500 actived">
<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">
<!-- <div class="peer">
<span class="badge rounded-pill bgc-green-50 c-green-700">0</span>
</div>
</div> -->
</div>
</label>
</li>
@ -148,14 +148,14 @@
{% for department in departments %}
<li class="nav-item filter-department">
<label for="filterDepartment-{{ department.uuid }}" class="nav-link c-grey-800 cH-blue-500 actived">
<label for="filterDepartment-{{ department.uuid }}" class="nav-link text-reset actived">
<div class="peers ai-c jc-sb">
<div class="peer peer-greed">
<input type="radio" id="filterDepartment-{{ department.uuid }}" name="filterDepartment" class="form-check-input me-2" value="{{ department.uuid }}">
<span>{{ department.title }}</span>
</div>
<div class="peer">
<span class="badge rounded-pill bgc-green-50 c-green-700">0</span>
<span class="badge rounded-pill bg-secondary-subtle text-secondary-emphasis">0</span> <!-- bgc-green-50 c-green-700 -->
</div>
</div>
</label>
@ -169,7 +169,7 @@
</div>
</div>
</div>
<div class="email-wrapper row remain-height bg-body overflow-y-auto">
<div class="email-wrapper row remain-height bg-body pos-r scrollable">
<div class="email-list h-100 layers">
<div class="layer w-100">
<div class="bg-body-tertiary peers ai-c p-20 fxw-nw">
@ -210,7 +210,7 @@
</div>
</div>
<div id="ticketsContainer" class="layer w-100 fxg-1 overflow-y-auto">
<div id="ticketsContainer" class="layer w-100 fxg-1 pos-r scrollable">
<div class="content"></div>
<div class="none-found pos-a top-50 start-50 translate-middle" style="display: none;">
<h6 class="fw-bold">No Tickets Found</h6>
@ -220,7 +220,7 @@
<li>Try using the refresh button</li>
</ul>
</div>
<div class="loading bgc-grey-50 h-100" style="display: none;">
<div class="loading bg-body-secondary h-100" style="display: none;">
{% for i in "x"|rjust:"3" %}
<div class="email-list-item peers fxw-nw p-20 bdB placeholder-glow" >
<div class="peer mR-10">
@ -313,6 +313,48 @@
</div>
</div>
<div id="ticketContent" class="email-content-wrapper">
<div class="content"></div>
<div class="loading" style="display: none;">
<!-- Header -->
<div class="ticket-content placeholder-glow">
<div class="peers ai-c jc-sb pX-40 pY-30">
<div class="peers peer-greed">
<div class="peer mR-20">
<span class="ticket-content-icon placeholder me-2"></span>
</div>
<div class="peer-greed">
<div >
<span class="placeholder rounded col-4"></span>
</div>
<div class="mY-5">
<span class="placeholder rounded col-5"></span>
</div>
<div class="row g-0 ">
{% for i in "x"|rjust:"12" %}
<div class="col pe-3">
<div class="placeholder rounded w-100"></div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="bdT pX-40 pY-30">
<span class="placeholder rounded col-6 mB-30"></span>
<div class="row g-3">
<div class="placeholder rounded col-12 px-3"></div>
<div class="placeholder rounded col-7"></div>
<div class="col-1"></div>
<div class="placeholder rounded col-4"></div>
<div class="placeholder rounded col-3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -378,7 +420,7 @@
{% block javascripts %}
<!-- Ticket Item Template -->
<script id="ticketItemTemplate" type="text/template">
<div class="ticket-item peers fxw-nw p-20 bdB bgcH-grey-100" data-uuid="-1">
<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>
@ -391,7 +433,7 @@
<small class="ticket-item-datetime"></small>
</div>
</div>
<h5 class="ticket-item-title c-grey-900"></h5>
<h5 class="ticket-item-title"></h5>
<div class="ticket-item-desc"></div>
</div>
</div>