search controls

This commit is contained in:
Corban-Lee Jones 2024-07-23 10:47:31 +01:00
parent 12eb9e74c7
commit adb14ddb7e
2 changed files with 42 additions and 40 deletions

View File

@ -337,7 +337,7 @@ function clearExistingSubRows() {
subTable.clear().draw(false);
}
$("#refreshSubscriptionBtn").on("click", async function() {
$("#subscriptionsTabPane").on("click", ".table-refresh-btn", async function() {
loadSubscriptions(getCurrentlyActiveServer().guild_id);
});

View File

@ -26,38 +26,53 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
<input type="search" id="${searchId}" name="${searchId}" class="form-control table-searchbar" placeholder="Search">
</div>
</div>
<div class="col-lg-8 text-end table-search-buttons"></div>
</div>
`);
if (!options || !options.sort)
return;
$(`${containingSelector} .table-search-row .table-search-buttons`).append(`
<div class="d-inline-block ms-3">
<button type="button" class="table-refresh-btn btn btn-outline-secondary rounded-1">
<i class="bi bi-arrow-clockwise"></i>
</button>
</div>
`);
$(`${containingSelector} .table-search-row`).append(`
<div class="col-lg-8 text-end">
<div class="d-inline-block me-3">
<div id=${sortDropdownId} class="dropdown table-sort-dropdown">
<button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown">
<i class="bi bi-sort-alpha-up"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><h6 class="dropdown-header">Sort By</h6></li>
</ul>
</div>
</div>
<div class="d-inline-block">
<div id=${filterDropdownId} class="dropdown table-filter-dropdown">
<button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown">
<i class="bi bi-funnel"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><h6 class="dropdown-header">Filter By</h6></li>
</ul>
</div>
if (options.sort) {
$(`${containingSelector} .table-search-row .table-search-buttons`).append(`
<div class="d-inline-block ms-3">
<div id=${sortDropdownId} class="dropdown table-sort-dropdown">
<button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown">
<i class="bi bi-sort-alpha-up"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><h6 class="dropdown-header">Sort By</h6></li>
</ul>
</div>
</div>
`);
populateSortDropdown(sortDropdownId, options.sort);
}
options.sort.forEach(sortKey => {
if (options.actions.GET) {
$(`${containingSelector} .table-search-row .table-search-buttons`).append(`
<div class="d-inline-block ms-3">
<div id=${filterDropdownId} class="dropdown table-filter-dropdown">
<button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown">
<i class="bi bi-funnel"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><h6 class="dropdown-header">Filter By</h6></li>
</ul>
</div>
</div>
`);
populateFilterDropdown();
}
}
function populateSortDropdown(sortDropdownId, sortOptions) {
sortOptions.forEach(sortKey => {
let label = sortKey.replace(/_/g, " ")
$(`#${sortDropdownId} .dropdown-menu`).append(`
<li>
@ -72,23 +87,10 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
</li>
`);
});
// <div class="d-block text-end">
// <div id=${sortDropdownId} class="dropdown d-inline">
// <button type="button" class="btn btn-secondary rounded-1 me-3" data-bs-toggle="dropdown">
// <i class="bi bi-sort-alpha-up"></i>
// </button>
// <div class="dropdown-menu dropdown-menu-end"></div>
// </div>
// <div id=${filterDropdownId} class="dropdown d-inline">
// <button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown">
// <i class="bi bi-funnel"></i>
// </button>
// <div class="dropdown-menu dropdown-menu-end"></div>
// </div>
// </div>
}
function populateFilterDropdown() { }
async function bindSearchBar(searchBarSelector, loadDataFunc) {
searchBar = $("#" + searchBarSelector)
searchBar.on("input", async function() {