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

also gracefully display filters

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-07-24 22:50:31 +01:00
parent aafbedb08a
commit 74dd3de762
2 changed files with 94 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/api/serializers.py
View File

@ -143,6 +143,7 @@ class SubscriptionSerializer_GET(DynamicModelSerializer):
article_title_mutators = ArticleMutatorSerializer(many=True)
article_desc_mutators = ArticleMutatorSerializer(many=True)
active = serializers.BooleanField(initial=True)
class Meta:
model = Subscription

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

@ -11,6 +11,8 @@ async function initTable(containingSelector, tableId, loadDataFunc, newRowFunc,
createTableControls(containingSelector, pageSizeId);
await bindSearchBar(searchId, loadDataFunc);
// await bindSortDropdown(sortDropdownId, loadDataFunc);
await bindFilterDropdown(filterDropdownId, loadDataFunc);
await bindTablePagination(`${containingSelector} .table-pagination`, loadDataFunc);
await bindTablePaginationResizer(`${containingSelector} .table-page-sizer`, loadDataFunc);
}
@ -50,8 +52,8 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
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">
<div id="${sortDropdownId}" class="dropdown table-sort-dropdown">
<button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown" data-bs-auto-close="outside">
<i class="bi bi-sort-alpha-up"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
@ -63,11 +65,11 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
populateSortDropdown(sortDropdownId, options.sort);
}
if (options.actions.GET) {
if (options.filter && 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">
<div id="${filterDropdownId}" class="dropdown table-filter-dropdown">
<button type="button" class="btn btn-secondary rounded-1" data-bs-toggle="dropdown" data-bs-auto-close="outside">
<i class="bi bi-funnel"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
@ -76,7 +78,7 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
</div>
</div>
`);
populateFilterDropdown();
populateFilterDropdown(filterDropdownId, options.actions.GET, options.filter);
}
if (deleteSelectedFunc) {
@ -93,7 +95,7 @@ function createSearchRow(containingSelector, searchId, sortDropdownId, filterDro
function populateSortDropdown(sortDropdownId, sortOptions) {
sortOptions.forEach(sortKey => {
let label = sortKey.replace(/_/g, " ")
let label = sortKey.replace(/_/g, " ");
$(`#${sortDropdownId} .dropdown-menu`).append(`
<li>
<button type="button" class="dropdown-item text-capitalize d-flex justify-content-between" data-sortkey="${sortKey}">
@ -109,19 +111,101 @@ function populateSortDropdown(sortDropdownId, sortOptions) {
});
}
function populateFilterDropdown() { }
function populateFilterDropdown(filterDropdownId, options, filterKeys) {
for (key in options) {
if (!filterKeys.includes(key))
continue;
let label = options[key].label; // key.replace(/_/g, " ");
id = key + "Filter";
$elem = null;
switch (options[key].type) {
case ("boolean"):
$elem = $(`
<div>
<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>
`);
bindFilterBoolean($elem);
$elem.find('input[type="checkbox"]').prop("checked", options[key].default ? true : false).trigger("change");
updateCheckboxState($elem);
break
default:
continue;
}
$(`#${filterDropdownId} .dropdown-menu`).append($("<li>").append($elem));
}
}
function bindFilterBoolean($elem) {
$elem.find('label').on("click", function(event) {
event.preventDefault();
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;
}
$input.data("state", state);
updateCheckboxState($elem);
});
}
function updateCheckboxState($elem) {
let state = $elem.find('input[type="checkbox"]').data("state");
let $icon = $elem.find(".bi");
switch (state) {
case true:
$elem.find('input[type="checkbox"]').prop("checked", true);
$icon.removeClass().addClass("bi bi-check");
break;
case false:
$elem.find('input[type="checkbox"]').prop("checked", false);
$icon.removeClass().addClass("bi bi-x");
break;
case null:
default:
$elem.find('input[type="checkbox"]').prop("checked", false);
$icon.removeClass().addClass("bi bi-dash");
break;
}
}
async function bindSearchBar(searchBarSelector, loadDataFunc) {
searchBar = $("#" + searchBarSelector)
searchBar.on("input", async function() {
clearTimeout(timeouts[searchBarSelector]);
searchString = $(this).val();
var searchString = $(this).val();
timeouts[searchBarSelector] = setTimeout(async function() {
await loadDataFunc(getCurrentlyActiveServer().guild_id, 1, null, searchString);
}, 300);
});
}
async function bindFilterDropdown(filterDropdownId, loadDataFunc) {
$(`#${filterDropdownId} input`).on("change", function() {
alert($(this).attr("data-key"));
});
}
function createTable(containingSelector, tableId) {
$(containingSelector).append(`
<div class="table-responsive my-3 px-3">