corbz/PYRSS-Website
corbz/PYRSS-Website
1
0
Fork 0
Code Issues 21 Pull Requests Actions Releases 1 Wiki Activity

changes to sort dropdown

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-07-31 11:25:30 +01:00
parent 6a09385dc4
commit e975de87b9
1 changed files with 80 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
apps/static/js/table.js
View File

@ -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}">
<span class="me-3">${label}</span><i class="bi bi-chevron-up"></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 type="button" class="dropdown-item d-flex justify-content-between" data-sortkey="${sortKey}">
<span class="me-3">${label}</span><i class="bi bi-x"></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, " ");
id = key + "Filter";
let label = options[key].label;
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");
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);
});
}