changes to sort dropdown

apps/static/js/table.js

@@ -131,18 +131,18 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
 function populateSortDropdown(sortDropdownId, sortOptions) {
     sortOptions.forEach(sortKey => {
         let label = sortKey.replace(/_/g, " ");
-        $(`#${sortDropdownId} .dropdown-menu`).append(`
+            $elem = null;
+
+        $elem = $(`
             <li>
-                <button type="button" class="dropdown-item text-capitalize d-flex justify-content-between" data-sortkey="${sortKey}">
+                <button type="button" class="dropdown-item d-flex justify-content-between" data-sortkey="${sortKey}">
-                    <span class="me-3">${label}</span><i class="bi bi-chevron-up"></i>
+                    <span class="me-3">${label}</span><i class="bi bi-x"></i>
-                </button>
-            </li>
-            <li>
-                <button type="button" class="dropdown-item text-capitalize d-flex justify-content-between" data-sortKey="-${sortKey}">
-                    <span class="me-3">${label}</span><i class="bi bi-chevron-down"></i>
                 </button>
             </li>
         `);
+        bindSortBoolean($elem);
+        $(`#${sortDropdownId} .dropdown-menu`).append($elem);
+        updateSortCheckboxState($elem);
     });
 }
 
@@ -151,66 +151,99 @@ function populateFilterDropdown(filterDropdownId, options, filterKeys) {
         if (!filterKeys.includes(key))
             continue;
 
-        let label = options[key].label; // key.replace(/_/g, " ");
+        let label = options[key].label;
-            id = key + "Filter";
+            id = key + "FilterOption";
             $elem = null;
 
         switch (options[key].type) {
             case ("boolean"):
                 $elem = $(`
-                    <div>
+                    <li>
                         <input type="checkbox" name="${id}" id="${id}" class="btn-check" autocomplete="off" data-key="${key}">
                         <label for="${id}" class="dropdown-item d-flex justify-content-between" role="button">
                             <span>${label}</span>
                             <i class="bi bi-x"></i>
                         </label>
-                    </div>
+                    </li>
                 `);
                 bindFilterBoolean($elem);
                 $elem.find('input[type="checkbox"]').prop("checked", options[key].default ? true : false).trigger("change");
-                updateCheckboxState($elem);
+                updateFilterCheckboxState($elem);
                 break
 
             default:
                 continue;
         }
 
-        $(`#${filterDropdownId} .dropdown-menu`).append($("<li>").append($elem));
+        $(`#${filterDropdownId} .dropdown-menu`).append($elem);
     }
 
     // Reset the controls
     $(document).on("selectedServerChange", async function() {
         $(`#${filterDropdownId} .dropdown-menu input[type="checkbox"]`).each(function() {
             $(this).data("state", null);
-            updateCheckboxState($(this).parent());
+            updateFilterCheckboxState($(this).parent());
         });
     });
 }
 
+function bindSortBoolean($elem) {
+    $elem.find("button").on("click", function() {
+
+        // Reset sibling buttons
+        $(this).parent().siblings("li").each(function() {
+            $(this).find("button").data("state", null);
+            updateSortCheckboxState($(this));
+        });
+
+        let state = $(this).data("state");
+        state = determineState(state);
+        $(this).data("state", state);
+        updateSortCheckboxState($elem)
+    });
+}
+
 function bindFilterBoolean($elem) {
     $elem.find('label').on("click", function() {
         let $input = $elem.find('input[type="checkbox"]');
         let state = $input.data("state");
-
+        state = determineState(state);
-        switch (state) {
-            case true:
-                state = false;
-                break;
-            case false:
-                state = null;
-                break;
-            case null:
-            default:
-                state = true;
-                break;
-        }
-
         $input.data("state", state);
-        updateCheckboxState($elem);
+        updateFilterCheckboxState($elem);
     });
 }
 
-function updateCheckboxState($elem) {
+function determineState(state) {
+    switch (state) {
+        case true:
+            return false;
+        case false:
+            return null;
+        case null:
+        default:
+            return true;
+    }
+}
+
+function updateSortCheckboxState($elem) {
+    let state = $elem.find("button").data("state");
+    let $icon = $elem.find(".bi");
+    $icon.removeClass();
+
+    switch (state) {
+        case true:
+            $icon.addClass("bi bi-chevron-up")
+            break;
+        case false:
+            $icon.addClass("bi bi-chevron-down");
+            break;
+        case null:
+        default:
+            $icon.addClass("bi bi-dash")
+    }
+}
+
+function updateFilterCheckboxState($elem) {
     let state = $elem.find('input[type="checkbox"]').data("state");
     let $icon = $elem.find(".bi");
 
@@ -253,7 +286,22 @@ async function bindFilterDropdown(tableId, filterDropdownId, loadDataFunc) {
 
 async function bindSortDropdown(tableId, sortDropdownId, loadDataFunc) {
     $(`#${sortDropdownId} .dropdown-menu`).on("click", "button", async function() {
-        setTableSorts(tableId, $(this).attr("data-sortkey"))
+        let state = $(this).data("state");
+            sortKey = "";
+
+        switch(state) {
+            case true:
+                sortKey = $(this).attr("data-sortkey")
+                break;
+            case false:
+                sortKey = "-" + $(this).attr("data-sortkey")
+                break;
+            case null:
+            default:
+                sortKey = ""
+        }
+
+        setTableSorts(tableId, sortKey);
         await loadDataFunc(getCurrentlyActiveServer().guild_id);
     });
 }