310 lines
16 KiB
HTML
310 lines
16 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %} Tickets {% endblock title %}
|
|
|
|
<!-- Specific CSS goes HERE -->
|
|
{% block stylesheets %}
|
|
<link rel="stylesheet" href="{{ ASSETS_ROOT }}/css/select2-bootstrap.min.css">
|
|
{% endblock stylesheets %}
|
|
|
|
{% block content %}
|
|
|
|
<!-- ### $App Screen Content ### -->
|
|
<main class='main-content bgc-grey-100'>
|
|
<div id='mainContent'>
|
|
<div class="full-container">
|
|
<div class="email-app">
|
|
<div class="email-side-nav remain-height ov-h">
|
|
<div class="h-100 layers">
|
|
<div class="p-20 bgc-grey-100 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="scrollable pos-r bdT layer w-100 fxg-1">
|
|
<ul id="filterSidebar" class="p-20 nav flex-column">
|
|
|
|
{% if priorities %}
|
|
|
|
<li class="nav-item mT-15">
|
|
<h6>Priorities</h6>
|
|
</li>
|
|
|
|
<li id="filterPriorityAll" class="nav-item filter-priority">
|
|
<label for="filterPriority-all" class="nav-link c-grey-800 cH-blue-500 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>
|
|
|
|
{% 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">
|
|
<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 }}">
|
|
<span>{{ priority.title }}</span>
|
|
</div>
|
|
<div class="peer">
|
|
<span class="badge rounded-pill" style="color: {{ priority.colour }}; background-color: {{ priority.backgroundcolour }};">0</span>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
|
|
{% endfor %}
|
|
|
|
{% endif %}
|
|
|
|
{% if tags %}
|
|
|
|
<li class="nav-item mT-15">
|
|
<h6>Tags</h6>
|
|
</li>
|
|
|
|
{% for tag in tags %}
|
|
|
|
<li class="nav-item filter-tag">
|
|
<label for="filterTag-{{ tag.uuid }}" 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.uuid }}" class="form-check-input me-2" value="{{ tag.uuid }}">
|
|
<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>
|
|
</label>
|
|
</li>
|
|
|
|
{% endfor %}
|
|
|
|
{% endif %}
|
|
|
|
{% if departments %}
|
|
|
|
<li class="nav-item mT-15">
|
|
<h6>Departments</h6>
|
|
</li>
|
|
|
|
{% 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">
|
|
<div class="peers ai-c jc-sb">
|
|
<div class="peer peer-greed">
|
|
<input type="checkbox" id="filterDepartment-{{ department.uuid }}" 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>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
|
|
{% endfor %}
|
|
|
|
{% endif %}
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="email-wrapper row remain-height bgc-white ov-h">
|
|
<div class="email-list h-100 layers">
|
|
<div class="layer w-100">
|
|
<div class="bgc-grey-100 peers ai-c p-20 fxw-nw">
|
|
<div class="peer me-auto">
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="email-side-toggle d-n@md+ btn bgc-white bdrs-2 mR-3 cur-p">
|
|
<i class="ti-menu"></i>
|
|
</button>
|
|
<!-- <button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p">
|
|
<i class="ti-tag"></i>
|
|
</button> -->
|
|
<button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p" onclick="javascript:loadAllTickets();">
|
|
<i class="fa fa-refresh"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="peer">
|
|
Showing <span id="ticketCount" class="fw-bolder"></span> Results
|
|
<!-- <div class="btn-group" role="group">
|
|
<button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
|
|
<i class="ti-angle-left"></i>
|
|
</button>
|
|
<button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
|
|
<i class="ti-angle-right"></i>
|
|
</button>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layer w-100">
|
|
<div class="bdT bdB">
|
|
<input type="text" id="searchTickets" class="form-control m-0 bdw-0 pY-15 pX-20 bdrs-0" placeholder="Search...">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="ticketsContainer" class="layer w-100 fxg-1 scrollable pos-r"></div>
|
|
|
|
</div>
|
|
<div class="email-content h-100">
|
|
<div class="h-100 scrollable pos-r">
|
|
<div class="bgc-grey-100 peers ai-c jc-sb p-20 fxw-nw d-n@md+">
|
|
<div class="peer">
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="back-to-mailbox btn bgc-white bdrs-2 mR-3 cur-p">
|
|
<i class="ti-angle-left"></i>
|
|
</button>
|
|
<button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p" onclick="javascript:loadAllTickets();">
|
|
<i class="fa fa-refresh"></i>
|
|
</button>
|
|
<button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p">
|
|
<i class="ti-more-alt"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="peer">
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
|
|
<i class="ti-angle-left"></i>
|
|
</button>
|
|
<button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
|
|
<i class="ti-angle-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="email-content-wrapper">
|
|
<!-- Header -->
|
|
<div class="peers ai-c jc-sb pX-40 pY-30">
|
|
<div class="peers peer-greed">
|
|
<div class="peer mR-20">
|
|
<img id="ticketAuthorImg" class="bdrs-50p w-3r h-3r" alt="" src="" style="display: none; object-fit: cover;">
|
|
</div>
|
|
<div class="peer">
|
|
<small id="ticketTimestamp"></small>
|
|
<h5 id="ticketAuthor" class="c-grey-900 mB-5"></h5>
|
|
<div id="ticketBadges" style="display: none;"></div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="peer">
|
|
<div class="btn-group" role="group">
|
|
<button id="btnGroupDrop2" class="btn btn-danger c-white bdrs-50p p-15 lh-0" style="display: none;" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
<i class="ti-menu"></i>
|
|
</button>
|
|
<ul class="dropdown-menu fsz-sm" aria-labelledby="btnGroupDrop2">
|
|
test
|
|
</ul>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="bdT pX-40 pY-30">
|
|
|
|
<h4 id="ticketTitle"></h4>
|
|
<div id="ticketDesc"></div>
|
|
<!-- <h4>Title of this email goes here</h4>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
|
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
|
|
</p> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<div id="ticketModal" class="modal fade" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<form method="post">
|
|
|
|
{% csrf_token %}
|
|
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title fs-5">New Ticket</h3>
|
|
<button type="button" class="btn-close" data-bs-toggle="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label for="newTitle" class="form-label">Subject</label>
|
|
<input type="text" name="newTitle" id="newTitle" class="form-control" placeholder="Subject">
|
|
<small class="text-muted">Briefly describe the subject of the ticket.</small>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="newDesc" class="form-label">Description</label>
|
|
<div id="newDesc" class="form-control"></div>
|
|
<small class="text-muted">Describe your issue in detail here.</small>
|
|
<!-- class="form-control" -->
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="newPriority" class="form-label">Priority</label>
|
|
<select name="newPriority" id="newPriority" class="select-2">
|
|
{% for priority in priorities %}
|
|
<option value="{{ priority.uuid }}">{{ priority.title }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<small class="text-muted">How important is this ticket?</small>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="newTags" class="form-label">Tags</label>
|
|
<select name="newTags" id="newTags" class="select-2" multiple="multiple">
|
|
{% for tag in tags %}
|
|
<option value="{{ tag.uuid }}">{{ tag.title }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<small class="text-muted">Use tags to categorize this ticket.</small>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn btn-danger c-white">Submit</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock content %}
|
|
|
|
{% block javascripts %}
|
|
<!-- Define Variables -->
|
|
<script>
|
|
const URL_Tickets = "{% url 'api:tickets' %}";
|
|
const URL_NewTicket = "{% url 'ticket-new' %}";
|
|
const URL_FilterCounts = "{% url 'api:filter-counts' %}";
|
|
const CSRFMiddlewareToken = "{{ csrf_token }}";
|
|
const CurrentUserID = "{{ request.user.uuid }}";
|
|
</script>
|
|
<script src="{{ ASSETS_ROOT }}/js/tickets.js"></script>
|
|
{% endblock javascripts %}
|