working on tickets modal
This commit is contained in:
parent
a59baefd8f
commit
16de4e50a6
@ -17,7 +17,7 @@ def create_tags(app, schema_editor):
|
||||
{"title": "Software", "colour": "#FFA500"},
|
||||
{"title": "Hardware", "colour": "#808080"},
|
||||
{"title": "Question", "colour": "#FFFF00"},
|
||||
{"title": "Require's Help", "colour": "#00FF00"},
|
||||
{"title": "Requires Help", "colour": "#00FF00"},
|
||||
{"title": "Issue", "colour": "#FF0000"}
|
||||
]
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@ urlpatterns = [
|
||||
path('tickets/', include([
|
||||
path('', views.tickets, name="tickets"),
|
||||
path('new/', views.new_ticket, name="ticket-new"),
|
||||
path('get/<uuid:ticket_id>', views.get_ticket, name="ticket-get"),
|
||||
path('get/', views.get_ticket, name="ticket-get"),
|
||||
])),
|
||||
|
||||
# Matches any html file
|
||||
|
||||
@ -38,13 +38,19 @@ def tickets(request):
|
||||
return render(request, "home/tickets.html", context)
|
||||
|
||||
|
||||
@login_required
|
||||
@require_POST
|
||||
def get_ticket(request, ticket_id: int):
|
||||
ticket = Ticket.objects.get(id=ticket_id)
|
||||
def get_ticket(request):
|
||||
ticket = Ticket.objects.get(id=request.POST.get("ticket_id"))
|
||||
data = {"ticket": ticket.serialize()}
|
||||
return JsonResponse(data)
|
||||
|
||||
|
||||
@login_required
|
||||
@require_POST
|
||||
def get_tickets(request, filters: dict):
|
||||
pass
|
||||
|
||||
|
||||
@login_required()
|
||||
def new_ticket(request):
|
||||
|
||||
@ -69078,3 +69078,43 @@ table.dataTable.no-footer {
|
||||
*/
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
|
||||
/* .select2 {
|
||||
width: 100% !important;
|
||||
} */
|
||||
|
||||
.select2-container {
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
.select2-selection__choice {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 3px !important;
|
||||
}
|
||||
|
||||
.select2-selection__choice > button {
|
||||
border: none;
|
||||
background-color: var(--bs-white-rgb);
|
||||
}
|
||||
|
||||
.select2-results__option--selected { display: none; }
|
||||
|
||||
.ck-editor .ck.ck-editor__top .ck-toolbar {
|
||||
border-top-left-radius: 0.375rem !important;
|
||||
border-top-right-radius: 0.375rem !important;
|
||||
}
|
||||
|
||||
.ck-editor .ck.ck-editor__main {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ck-editor .ck.ck-editor__main > div {
|
||||
border-bottom-left-radius: 0.375rem !important;
|
||||
border-bottom-right-radius: 0.375rem !important;
|
||||
}
|
||||
|
||||
.ck-editor__editable[role="textbox"] {
|
||||
/* editing area */
|
||||
min-height: 200px;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
7
apps/static/assets/css/select2-bootstrap.min.css
vendored
Normal file
7
apps/static/assets/css/select2-bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -1,9 +1,12 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %} Tickets {% endblock title %}
|
||||
|
||||
<!-- Specific CSS goes HERE -->
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
{% block stylesheets %}
|
||||
<link rel="stylesheet" href="{{ ASSETS_ROOT }}/css/select2-bootstrap.min.css">
|
||||
{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
@ -297,11 +300,7 @@
|
||||
<div class="peer">
|
||||
<small id="ticketTimestamp"></small>
|
||||
<h5 id="ticketAuthor" class="c-grey-900 mB-5"></h5>
|
||||
<div id="ticketBadges" style="display: none;">
|
||||
<div class="badge bgc-pink-300">Urgent</div>
|
||||
<div class="badge bgc-deep-purple-400">IT</div>
|
||||
<div class="badge bgc-green-300">Open</div>
|
||||
</div>
|
||||
<div id="ticketBadges" style="display: none;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peer">
|
||||
@ -350,19 +349,53 @@
|
||||
</main>
|
||||
|
||||
<div id="ticketModal" class="modal fade" aria-hidden="true">
|
||||
<div class="modal-dialog modal-fullscreen">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title fs-5">Modal</h3>
|
||||
<button type="button" class="btn-close" data-bs-toggle="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="modal-dialog">
|
||||
<form method="post">
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
{% 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.id }}">{{ priority.title }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<small class="text-muted">How important is this ticket?</small>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="newTagss" class="form-label">Tags</label>
|
||||
<select name="newTags" id="newTags" class="select-2" multiple="multiple">
|
||||
{% for tag in tags %}
|
||||
<option value="{{ tag.id }}">{{ 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>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -378,7 +411,13 @@
|
||||
displayTicket(this);
|
||||
});
|
||||
|
||||
|
||||
ClassicEditor
|
||||
.create( document.getElementById("newDesc"), {
|
||||
|
||||
})
|
||||
.catch( error => {
|
||||
console.error(error)
|
||||
});
|
||||
});
|
||||
|
||||
function displayTicket(ticketElement) {
|
||||
@ -408,11 +447,12 @@
|
||||
displayedTicketID = ticketID;
|
||||
|
||||
$.ajax({
|
||||
url: `/tickets/get/${ticketID}`,
|
||||
url: `/tickets/get/`,
|
||||
type: 'POST',
|
||||
dataType: 'json',
|
||||
data: {
|
||||
csrfmiddlewaretoken: '{{ csrf_token }}'
|
||||
csrfmiddlewaretoken: '{{ csrf_token }}',
|
||||
ticket_id: ticketID
|
||||
},
|
||||
success: function (data) {
|
||||
console.log(JSON.stringify(data, null, 4));
|
||||
@ -430,7 +470,7 @@
|
||||
$("#btnGroupDrop2").show();
|
||||
$("#ticketBadges").show();
|
||||
|
||||
$("#ticketBadges").append($(`<div class="badge me-1" style="background-color: ${priority.colour};">${priority.title}</div>`));
|
||||
$("#ticketBadges").append($(`<div class="badge me-1" style="background-color: ${priority.colour};">${priority.title} Priority</div>`));
|
||||
|
||||
if (department != null) {
|
||||
$("#ticketBadges").append($(`<div class="badge bgc-deep-purple-500 me-1">${department.title}</div>`));
|
||||
|
||||
@ -16,6 +16,8 @@
|
||||
/>
|
||||
<link type="text/css" href="{{ ASSETS_ROOT }}/css/index.css" rel="stylesheet">
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
|
||||
|
||||
<!-- Specific Page CSS goes HERE -->
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
@ -73,7 +75,15 @@
|
||||
|
||||
<!-- Specific Page JS goes HERE -->
|
||||
{% block javascripts %}{% endblock javascripts %}
|
||||
<script src="https://cdn.ckeditor.com/ckeditor5/40.2.0/classic/ckeditor.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$(".select-2").select2({
|
||||
theme: "bootstrap",
|
||||
minimumResultsForSearch: -1
|
||||
});
|
||||
});
|
||||
// $(document).ready(function() {
|
||||
// (function(){
|
||||
// var nativeAddClass = jQuery.fn.addClass;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user