Implemented Searchbox filter

apps/api/views.py

@@ -2,6 +2,7 @@
 
 import logging
 from typing import Any
+from functools import reduce
 
 from django.db.models import Q
 from django.http import HttpRequest
@@ -41,7 +42,9 @@ class TicketListApiView(APIView):
     permission_classes = [permissions.IsAuthenticated]
     pagination_class = TicketPaginiation
 
-    ALLOWED_FILTERS = ("uuid__in", "priority__in", "tags__in", "author__department__in", "title__contains")
+    ALLOWED_FILTERS = (
+        "uuid__in", "priority__in", "tags__in", "author__department__in", "search"
+    )
     MATCHER_MAP = {
         "contains": lambda k, v: {k: v[0]},
         "in": lambda k, v: {k: v}
@@ -101,12 +104,19 @@ class TicketListApiView(APIView):
             if key not in self.ALLOWED_FILTERS:
                 raise KeyError(key)
 
-            if "all" in values:
-                continue
-
             if not key.endswith("__in"):
                 values = values[0]
 
+            if key == "search":
+                queryset = queryset.filter(
+                    Q(**{"title__contains": values}) |
+                    Q(**{"description__contains": values})
+                )
+                continue
+
+            if "all" in values:
+                continue
+
             filter_kwargs = {key: values}
             queryset = queryset.filter(Q(**filter_kwargs))
 

apps/static/assets/js/tickets.js

@@ -18,10 +18,6 @@ const formControls = [
 ];
 
 $(document).ready(function() {
-    // $(".email-list-item").on("click", function() {
-    //     displayTicket(this);
-    // });
-
     ClassicEditor
         .create( document.getElementById("newDesc"), {})
         .then( newEditor => {
@@ -34,13 +30,17 @@ $(document).ready(function() {
     $("#searchTickets").keyup(() => {
         clearTimeout(searchTimeout);
         searchTimeout = setTimeout(() => {
+            console.debug("searching");
             value = $("#searchTickets").val();
             if (value === "") {
-                delete filters["title__contains"];
+                console.debug("deleted search filters");
-                return;
+                delete filters["search"];
+            }
+            else {
+                console.debug("updated search filters");
+                filters["search"] = value;
             }
 
-            filters["title__contains"] = value;
             loadAllTickets();
         }, 500);
     })
@@ -59,12 +59,14 @@ function setupFilter(selector, key) {
         var uuid = input.val();
 
         input.on("change", function () {
+
             if (input.is(":checkbox")) {
+
                 if ($(this).is(":checked")) {
                     filters[key] = filters[key] || [];
                     filters[key].push(uuid);
-                } else {
+                }
-                    // filters[key].splice(filters[key].indexOf(uuid), 1);
+                else {
                     filters[key] = filters[key].filter(id => id !== uuid);
                     if (filters[key].length === 0) {
                         delete filters[key];
@@ -75,7 +77,7 @@ function setupFilter(selector, key) {
                 filters[key] = [uuid];
             }
 
-            console.log(JSON.stringify(filters, null, 4));
+            console.debug(`Filter applied '${key}' as '${uuid}'`)
             loadAllTickets();
         });
     });
@@ -158,17 +160,14 @@ function loadFilterCounts() {
         url: URL_FilterCounts,
         type: "GET",
         success: function(data) {
-            console.log(JSON.stringify(data, null, 4));
-
             updateFilterCounts('priority', data);
             updateFilterCounts('tag', data);
             updateFilterCounts('department', data);
             $("#filterPriorityAll .badge").text(data.ticket_count);
-            $("#ticketCount").text(data.ticket_count)
+            $("#ticketCounts .total").text(data.ticket_count)
-
         },
         error: function(data) {
-            alert(JSON.stringify(data, null, 4))
+            console.error(JSON.stringify(data, null, 4))
         }
     });
 }
@@ -191,6 +190,8 @@ function loadAllTickets() {
             loadingTickets = false;
             console.log(JSON.stringify(data, null, 4))
 
+            $("#ticketCounts .current").text(data.length);
+
             data.forEach(function(ticket) {
                 var timestamp = new Date(ticket.timestamp);
                 var formattedTime;

apps/templates/home/tickets.html

@@ -137,7 +137,7 @@
                             </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>
@@ -150,8 +150,14 @@
                     </div>
                 </div>
                 <div class="layer w-100">
-                    <div class="bdT bdB">
+                    <div class="bdT bdB peers d-flex flex-nowrap">
-                        <input type="text" id="searchTickets" class="form-control m-0 bdw-0 pY-15 pX-20 bdrs-0" placeholder="Search...">
+                        <label for="searchTickets" class="peer my-auto mX-15">
+                            <i class="ti-search"></i>
+                        </label>
+                        <input type="text" id="searchTickets" class="form-control m-0 bdw-0 pY-15 pR-20 pL-0 bdrs-0 peer-greed shadow-none" placeholder="Search...">
+                        <label for="searchTickets" id="ticketCounts" class="peer my-auto mX-15">
+                            <span class="current fw-bolder"></span>/<span class="total fw-bolder"></span>
+                        </label>
                     </div>
                 </div>