diff --git a/apps/static/js/table.js b/apps/static/js/table.js
index add52c4..adde62c 100644
--- a/apps/static/js/table.js
+++ b/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 = $(`
-
-
-
-
`);
+ 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, " ");
- id = key + "Filter";
+ let label = options[key].label;
+ id = key + "FilterOption";
$elem = null;
switch (options[key].type) {
case ("boolean"):
$elem = $(`
-
+
-
+
`);
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($("").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");
-
- switch (state) {
- case true:
- state = false;
- break;
- case false:
- state = null;
- break;
- case null:
- default:
- state = true;
- break;
- }
-
+ state = determineState(state);
$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);
});
}