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

search controls

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/static/js/home/subscriptions.js
View File

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

80
apps/static/js/table.js
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"> <input type="search" id="${searchId}" name="${searchId}" class="form-control table-searchbar" placeholder="Search">
</div> </div>
</div> </div>
<div class="col-lg-8 text-end table-search-buttons"></div>
</div> </div>
`); `);
if (!options || !options.sort) $(`${containingSelector} .table-search-row .table-search-buttons`).append(`
return; <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(` if (options.sort) {
<div class="col-lg-8 text-end"> $(`${containingSelector} .table-search-row .table-search-buttons`).append(`
<div class="d-inline-block me-3"> <div class="d-inline-block ms-3">
<div id=${sortDropdownId} class="dropdown table-sort-dropdown"> <div id=${sortDropdownId} class="dropdown table-sort-dropdown">
<button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown"> <button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown">
<i class="bi bi-sort-alpha-up"></i> <i class="bi bi-sort-alpha-up"></i>
</button> </button>
<ul class="dropdown-menu dropdown-menu-end"> <ul class="dropdown-menu dropdown-menu-end">
<li><h6 class="dropdown-header">Sort By</h6></li> <li><h6 class="dropdown-header">Sort By</h6></li>
</ul> </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>
</div> </div>
</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, " ") let label = sortKey.replace(/_/g, " ")
$(`#${sortDropdownId} .dropdown-menu`).append(` $(`#${sortDropdownId} .dropdown-menu`).append(`
<li> <li>
@ -72,23 +87,10 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
</li> </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) { async function bindSearchBar(searchBarSelector, loadDataFunc) {
searchBar = $("#" + searchBarSelector) searchBar = $("#" + searchBarSelector)
searchBar.on("input", async function() { searchBar.on("input", async function() {