From 4647236e20a455e6dcef40b306c9bd94ad0c1be3 Mon Sep 17 00:00:00 2001
From: corbz <corbz.jones@gmail.com>
Date: Sun, 21 Jan 2024 22:52:11 +0000
Subject: [PATCH] Clear filter button & item priority indicator

---
 apps/static/css/index.css        |   5 ++
 apps/static/js/tickets.js        |  32 +++++++++-
 apps/templates/home/tickets.html | 105 ++++++++++++++++++-------------
 3 files changed, 97 insertions(+), 45 deletions(-)

diff --git a/apps/static/css/index.css b/apps/static/css/index.css
index 6b4d4cf..9e95908 100644
--- a/apps/static/css/index.css
+++ b/apps/static/css/index.css
@@ -114,6 +114,11 @@ body {
     background-color: var(--bs-tertiary-bg);
 }
 
+.ticket-item .ticket-item-indicator {
+    width: 5px;
+    height: 100%;
+}
+
 .ticket-item .ticket-item-icon {
     width: 2rem;
     height: 2rem;
diff --git a/apps/static/js/tickets.js b/apps/static/js/tickets.js
index ebc0ebb..32c7c24 100644
--- a/apps/static/js/tickets.js
+++ b/apps/static/js/tickets.js
@@ -10,6 +10,21 @@ $(document).ready(function() {
     setupFilter("#filterSidebar .filter-tags", "tags");
     setupFilter("#filterSidebar .filter-priority", "priority");
 
+    // alert($(".deselect-radio-filters").length);
+
+    // $(".deselect-radio-filters").on("change", function() {
+    //     const checked = $(this).prop("checked");
+    //     alert(checked);
+        
+    //     if (checked) {
+    //         const name = $(this).prop("name");
+    
+    //         $(`[name='${name}']`).each(function(elem) {
+    //             alert($(elem).prop("id"));
+    //         });
+    //     }
+    // });
+
     loadFilterCounts();
     loadTicketItems();
 });
@@ -91,6 +106,13 @@ function setupFilter(selector, key) {
             else if (input.is(":radio") && input.is(":checked")) {
                 if (uuid === "all") delete filters[key];
                 else filters[key] = [uuid];
+
+                const deselectOption = $(`[name='${input.prop("name")}'].deselect-radio-filters`);
+
+                if (deselectOption.length) {
+                    if (deselectOption.prop("checked")) deselectOption.parent().hide();
+                    else deselectOption.parent().show();
+                }
             }
 
             console.debug(`Filter applied '${key}' as '${uuid}'`)
@@ -143,9 +165,9 @@ function loadFilterCounts() {
             updateFilterCounts('tags', data);
             updateFilterCounts('department', data);
 
-            $("#filterPriorityAll .badge").text(data.tickets);
-            $("#filterDepartmentAll .badge").text(data.tickets)
-            // $("#ticketCounts .total").text(data.tickets)
+            // $("#filterPriorityAll .badge").text(data.tickets);
+            // $("#filterDepartmentAll .badge").text(data.tickets);
+            // $("#ticketCounts .total").text(data.tickets);
         },
         error: function(data) {
             console.error(JSON.stringify(data, null, 4))
@@ -273,6 +295,10 @@ function loadTicketItems(page=1) {
                 template.find(".ticket-item-tags").append(tagTemplate);
             });
 
+            var priorityElem = template.find(".ticket-item-indicator");
+            priorityElem.css("background-color", ticket.priority.backgroundcolour);
+            priorityElem.attr("data-title", ticket.priority.title + " Priority");
+
             // Add the priority using the badge template
             var priorityTemplate = $($("#ticketContentBadgeTemplate").html());
             priorityTemplate.find(".ticket-content-badge-text").text(ticket.priority.title + " Priority");
diff --git a/apps/templates/home/tickets.html b/apps/templates/home/tickets.html
index 0d88473..c8c29b2 100644
--- a/apps/templates/home/tickets.html
+++ b/apps/templates/home/tickets.html
@@ -25,22 +25,16 @@
 
                     {% if priorities %}
 
-                        <li class="nav-item mT-10">
-                            <h6 class="mx-3">Priorities</h6>
-                        </li>
-
-                        <li id="filterPriorityAll" class="nav-item filter-priority">
-                            <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">
-                                        <span class="badge rounded-pill bgc-green-50 c-green-700">0</span>
-                                    </div> -->
-                                </div>
-                            </label>
+                        <li class="nav-item mT-10 filter-priority">
+                            <h6 class="peers ai-c jc-sb mb-2 px-3">
+                                <span class="peer-greed">Priorities</span>
+                                <label for="filterPriority-all" class="nav-link text-reset actived p-0 cur-p" style="display: none">
+                                    <input type="radio" id="filterPriority-all" name="filterPriorities" class="btn-check deselect-radio-filters" checked="checked" value="all">
+                                    <span class="text-body badge small bg-none border-none py-0">
+                                        <i class="ti-close"></i>
+                                    </span>
+                                </label>
+                            </h6>
                         </li>
 
                         {% for priority in priorities %}
@@ -60,6 +54,18 @@
                             </li>
 
                         {% endfor %}
+<!-- 
+                        <li id="filterPriorityAll" class="nav-item filter-priority">
+                            <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="btn-check" checked="checked" value="all">
+                                        <span class="btn btn-sm btn-secondary">Remove Filter</span>
+                                    </div>
+                           
+                                </div>
+                            </label>
+                        </li> -->
 
                     {% endif %}
 
@@ -127,23 +133,33 @@
 
                     {% if departments %}
 
-                        <li class="nav-item">
+                        <!-- <li class="nav-item">
                             <h6 class="px-3">Departments</h6>
-                        </li>
+                        </li> -->
 
                         <li id="filterDepartmentAll" class="nav-item filter-department">
+                            <h6 class="peers ai-c jc-sb mb-2 px-3">
+                                <span class="peer-greed">Departments</span>
+                                <label for="filterDepartment-all" class="nav-link text-reset actived p-0 cur-p" style="display: none">
+                                    <input type="radio" id="filterDepartment-all" name="filterDepartment" class="btn-check deselect-radio-filters" checked="checked" value="all">
+                                    <span class="text-body badge small bg-none border-none py-0">
+                                        <i class="ti-close"></i>
+                                    </span>
+                                </label>
+                            </h6>
+                        </li>
+
+                        <!-- <li id="filterDepartmentAll" class="nav-item filter-department">
                             <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">
-                                        <span class="badge rounded-pill bgc-green-50 c-green-700">0</span>
-                                    </div> -->
+                         
                                 </div>
                             </label>
-                        </li>
+                        </li> -->
 
                         {% for department in departments %}
 
@@ -182,7 +198,7 @@
                                     <i class="ti-tag"></i>
                                 </button> -->
                                 <button type="button" class="btn bg-body bdrs-2 mR-3" onclick="javascript:loadTicketItems();">
-                                    <i class="fa fa-refresh"></i>
+                                    <i class="ti-reload"></i>
                                 </button>
                             </div>
                         </div>
@@ -297,7 +313,7 @@
                                     <i class="ti-angle-left"></i>
                                 </button>
                                 <button type="button" class="btn bg-body bdrs-2 mR-3" onclick="javascript:reloadCurrentTicket();">
-                                    <i class="fa fa-refresh"></i>
+                                    <i class="ti-reload"></i>
                                 </button>
                                 <button type="button" class="btn bg-body bdrs-2 mR-3">
                                     <i class="ti-more-alt"></i>
@@ -423,24 +439,29 @@
 {% block javascripts %}
 <!-- Ticket Item Template -->
 <script id="ticketItemTemplate" type="text/template">
-    <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 class="ticket-item peers fxw-nw bdB" data-uuid="-1">
+        <div class="peer align-self-stretch">
+            <div class="ticket-item-indicator"></div>
         </div>
-        <div class="peer peer-greed ov-h">
-            <div class="peers ai-c mb-2">
-                <div class="peer peer-greed">
-                    <h6 class="ticket-item-author"></h6>
-                </div>
-                <div class="peer">
-                    <small class="ticket-item-datetime"></small>
-                </div>
+        <div class="peer peer-greed peers fxw-nw p-20 w-100">
+            <div class="peer mR-10">
+                <img src="" alt="" class="ticket-item-icon me-2">
             </div>
-            <h5 class="ticket-item-title mb-0"></h5>
-            <div class="ticket-item-desc mt-2"></div>
-            <div class="peers">
-                <div class="ticket-item-priority pe-5 peer peer-greed"></div>
-                <div class="ticket-item-tags peer d-flex flex-wrap mw-100"></div>
+            <div class="peer peer-greed ov-h">
+                <div class="peers ai-c mb-2">
+                    <div class="peer peer-greed">
+                        <h6 class="ticket-item-author"></h6>
+                    </div>
+                    <div class="peer">
+                        <small class="ticket-item-datetime"></small>
+                    </div>
+                </div>
+                <h5 class="ticket-item-title mb-0"></h5>
+                <div class="ticket-item-desc mt-2"></div>
+                <div class="peers">
+                    <!-- <div class="ticket-item-priority pe-5 peer peer-greed"></div> -->
+                    <div class="ticket-item-tags peer d-flex flex-wrap mw-100" data-bs-toggle="tooltip"></div>
+                </div>
             </div>
         </div>
     </div>
@@ -457,7 +478,7 @@
                 </div>
                 <div class="peer">
                     <small class="ticket-content-datetime"></small>
-                    <h5 class="ticket-content-author"></h5>
+                    <h5 class="ticket-content-author mb-0"></h5>
                     <div class="ticket-content-badges"></div>
                 </div>
             </div>
@@ -473,7 +494,7 @@
 
 <!-- Ticket Content Badge Template -->
 <script id="ticketContentBadgeTemplate" type=text/template>
-    <div class="ticket-content-badge badge rounded-pill mT-15 me-2">
+    <div class="ticket-content-badge badge rounded mt-2 me-2">
         <span class="ticket-content-badge-text"></span>
         <i class="ticket-content-badge-icon"></i>
     </div>