working on tickets modal

apps/home/migrations/default_tags.py

@@ -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"}
     ]
 

apps/home/urls.py

@@ -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

apps/home/views.py

@@ -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):
+def get_ticket(request):
-    ticket = Ticket.objects.get(id=ticket_id)
+    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):

apps/static/assets/css/index.css

@@ -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;
+}

apps/templates/home/tickets.html

@@ -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 id="ticketBadges" style="display: none;"></div>
-                                <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>
                         </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-dialog">
-            <div class="modal-content">
+            <form method="post">
-                <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>
+                {% csrf_token %}
-                <div class="modal-footer">
 
+                <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>`));

apps/templates/layouts/base.html

@@ -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;