Working on sorting and filters for tables js
This commit is contained in:
parent
f0a4c7d8c0
commit
eae1a682fa
@ -54,9 +54,8 @@ async function loadChannels(guildId) {
|
||||
|
||||
// Subscriptions
|
||||
|
||||
async function getSubscriptions(guildId, page=1, pageSize=10) {
|
||||
const url = `/api/subscription/?guild_id=${guildId}&page=${page}&page_size=${pageSize}`;
|
||||
console.debug(url);
|
||||
async function getSubscriptions(guildId, page=1, pageSize=10, search="") {
|
||||
const url = `/api/subscription/?guild_id=${guildId}&page=${page}&page_size=${pageSize}&search=${search}`;
|
||||
return await ajaxRequest(url, "GET");
|
||||
}
|
||||
|
||||
@ -76,6 +75,10 @@ async function editSubscription(id, formData) {
|
||||
return await ajaxRequest(`/api/subscription/${id}/`, "PUT", formData);
|
||||
}
|
||||
|
||||
async function getSubscriptionOptions() {
|
||||
return await ajaxRequest("/api/subscription/", "OPTIONS")
|
||||
}
|
||||
|
||||
|
||||
// SubChannels
|
||||
|
||||
@ -102,8 +105,9 @@ async function deleteSubChannels(subscriptionId) {
|
||||
|
||||
// Filters
|
||||
|
||||
async function getFilters(guildId) {
|
||||
return await ajaxRequest(`/api/filter/?guild_id=${guildId}`, "GET");
|
||||
async function getFilters(guildId, page=1, pageSize=10, search="") {
|
||||
const url = `/api/filter/?guild_id=${guildId}&page=${page}&page_size=${pageSize}&search=${search}`;
|
||||
return await ajaxRequest(url, "GET");
|
||||
}
|
||||
|
||||
async function getFilter(id) {
|
||||
@ -129,8 +133,8 @@ async function getFilterOptions() {
|
||||
|
||||
// Tracked Content
|
||||
|
||||
async function getTrackedContent(guildId, subscriptionId=null, page=1, pageSize=10) {
|
||||
var url = `/api/tracked-content/?subscription__guild_id=${guildId}&page=${page}&page_size=${pageSize}&ordering=-creation_datetime`;
|
||||
async function getTrackedContent(guildId, subscriptionId=null, page=1, pageSize=10, search="") {
|
||||
var url = `/api/tracked-content/?subscription__guild_id=${guildId}&page=${page}&page_size=${pageSize}&search=${search}&ordering=-creation_datetime`;
|
||||
if (subscriptionId)
|
||||
url += `&subscription=${subscriptionId}`;
|
||||
|
||||
@ -142,6 +146,10 @@ async function deleteTrackedContent(guid) {
|
||||
return await ajaxRequest(`/api/tracked-content/${encodedGuid}/`, "DELETE");
|
||||
}
|
||||
|
||||
async function getTrackedContentOptions() {
|
||||
return await ajaxRequest("/api/tracked-content/", "OPTIONS")
|
||||
}
|
||||
|
||||
// Mutators
|
||||
|
||||
async function getMutators() {
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
var contentTable;
|
||||
contentOptions = null;
|
||||
|
||||
async function initContentTable() {
|
||||
await initTable("#contentTabPane", "contentTable", loadContent);
|
||||
contentOptions = await getTrackedContentOptions();
|
||||
await initTable("#contentTabPane", "contentTable", loadContent, contentOptions);
|
||||
|
||||
contentTable = $("#contentTable").DataTable({
|
||||
info: false,
|
||||
@ -108,14 +110,12 @@ function handleDiscordChannelNames() {
|
||||
return;
|
||||
|
||||
$("#contentTable tr td.content-channel-id").each(function() {
|
||||
console.debug("row")
|
||||
let tracked = contentTable.row($(this).closest("tr")).data();
|
||||
channel = discordChannels.find(item => item.value === tracked.channel_id);
|
||||
|
||||
if (!channel)
|
||||
return;
|
||||
|
||||
console.debug("inserting")
|
||||
$(this).text("").append(
|
||||
$("<a>")
|
||||
.attr("href", `https://discord.com/channels/${getCurrentlyActiveServer().guild_id}/${channel.value}/${tracked.message_id}`)
|
||||
@ -169,7 +169,7 @@ $("#refreshContentBtn").on("click", async function() {
|
||||
loadContent(getCurrentlyActiveServer().guild_id);
|
||||
});
|
||||
|
||||
async function loadContent(guildId, page=1, pageSize=null) {
|
||||
async function loadContent(guildId, page=1, pageSize=null, search=null) {
|
||||
|
||||
if (!guildId)
|
||||
return;
|
||||
@ -177,11 +177,14 @@ async function loadContent(guildId, page=1, pageSize=null) {
|
||||
if (!pageSize)
|
||||
pageSize = $("#contentTablePageSize").val();
|
||||
|
||||
if (!search)
|
||||
search = $("#contentTabPane .table-searchbar").val();
|
||||
|
||||
$("#deleteSelectedContentBtn").prop("disabled", true);
|
||||
clearExistingContentRows();
|
||||
|
||||
try {
|
||||
const content = await getTrackedContent(guildId, null, page, pageSize);
|
||||
const content = await getTrackedContent(guildId, null, page, pageSize, search);
|
||||
contentTable.rows.add(content.results).draw(false);
|
||||
|
||||
updateTablePagination("#contentTabPane .table-pagination", page, pageSize, content.count, content.next, content.previous);
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
var filtersTable;
|
||||
filterOptions = null;
|
||||
|
||||
// Create filters table
|
||||
async function initFiltersTable() {
|
||||
await initTable("#filtersTabPane", "filtersTable", loadFilters);
|
||||
filterOptions = await getFilterOptions();
|
||||
await initTable("#filtersTabPane", "filtersTable", loadFilters, filterOptions);
|
||||
|
||||
filtersTable = $("#filtersTable").DataTable({
|
||||
info: false,
|
||||
@ -170,7 +172,7 @@ $("#refreshFilterBtn").on("click", async function() {
|
||||
loadFilters(getCurrentlyActiveServer().guild_id);
|
||||
});
|
||||
|
||||
async function loadFilters(guildId, page=1, pageSize=null) {
|
||||
async function loadFilters(guildId, page=1, pageSize=null, search=null) {
|
||||
|
||||
if (!guildId)
|
||||
return;
|
||||
@ -178,11 +180,14 @@ async function loadFilters(guildId, page=1, pageSize=null) {
|
||||
if (!pageSize)
|
||||
pageSize = $("#filtersTablePageSize").val();
|
||||
|
||||
if (!search)
|
||||
search = $("#filtersTabPane .table-searchbar").val();
|
||||
|
||||
$("#deleteSelectedFiltersBtn").prop("disabled", true);
|
||||
clearExistingFilterRows();
|
||||
|
||||
try {
|
||||
const filters = await getFilters(guildId);
|
||||
const filters = await getFilters(guildId, page, pageSize, search);
|
||||
filtersTable.rows.add(filters.results).draw(false);
|
||||
|
||||
updateTablePagination("#filtersTabPane .table-pagination", page, pageSize, filters.count, filters.next, filters.previous);
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
var subTable = null;
|
||||
discordChannels = [];
|
||||
subSearchTimeout = null;
|
||||
subOptions = null;
|
||||
|
||||
// Create subscription table
|
||||
async function initSubscriptionTable() {
|
||||
await initTable("#subscriptionsTabPane", "subTable", loadSubscriptions);
|
||||
subOptions = await getSubscriptionOptions();
|
||||
await initTable("#subscriptionsTabPane", "subTable", loadSubscriptions, subOptions);
|
||||
|
||||
subTable = $("#subTable").DataTable({
|
||||
info: false,
|
||||
@ -121,7 +124,7 @@ async function initSubscriptionTable() {
|
||||
bindTableCheckboxes("#subTable", subTable, "#deleteSelectedSubscriptionsBtn");
|
||||
}
|
||||
|
||||
$(document).on("change", ".sub-toggle-active", async function () {
|
||||
$("#subscriptionsTabPane").on("change", ".sub-toggle-active", async function () {
|
||||
|
||||
/*
|
||||
Lock all toggles to soft-prevent spam.
|
||||
@ -336,7 +339,7 @@ $("#refreshSubscriptionBtn").on("click", async function() {
|
||||
loadSubscriptions(getCurrentlyActiveServer().guild_id);
|
||||
});
|
||||
|
||||
async function loadSubscriptions(guildId, page=1, pageSize=null) {
|
||||
async function loadSubscriptions(guildId, page=1, pageSize=null, search=null) {
|
||||
|
||||
if (!guildId)
|
||||
return;
|
||||
@ -344,11 +347,14 @@ async function loadSubscriptions(guildId, page=1, pageSize=null) {
|
||||
if (!pageSize)
|
||||
pageSize = $("#subTablePageSize").val();
|
||||
|
||||
if (!search)
|
||||
search = $("#subscriptionsTabPane .table-searchbar").val();
|
||||
|
||||
$("#deleteSelectedSubscriptionsBtn").prop("disabled", true);
|
||||
clearExistingSubRows();
|
||||
|
||||
try {
|
||||
const subscriptions = await getSubscriptions(guildId, page, pageSize);
|
||||
const subscriptions = await getSubscriptions(guildId, page, pageSize, search);
|
||||
subTable.rows.add(subscriptions.results).draw(false);
|
||||
|
||||
updateTablePagination("#subscriptionsTabPane .table-pagination", page, pageSize, subscriptions.count, subscriptions.next, subscriptions.previous);
|
||||
@ -634,7 +640,9 @@ function subSetHexColour(hexString) {
|
||||
$("#subEmbedColourText").val(hexString);
|
||||
}
|
||||
|
||||
$(document).ready(() => {$("#subResetEmbedColour").click();});
|
||||
$(document).ready(async () => {$("#subResetEmbedColour").click() });
|
||||
// let options = await getSubscriptionOptions();
|
||||
// console.log(JSON.stringify(options.actions.GET.creation_datetime));
|
||||
|
||||
$("#subResetEmbedColour").on("click", function() {
|
||||
subSetHexColour("#3498db");
|
||||
|
||||
@ -1,13 +1,105 @@
|
||||
var timeouts = {};
|
||||
|
||||
async function initTable(containingSelector, tableId, loadDataFunc) {
|
||||
async function initTable(containingSelector, tableId, loadDataFunc, options=null) {
|
||||
let pageSizeId = tableId + "PageSize";
|
||||
searchId = tableId + "SearchBar";
|
||||
sortDropdownId = tableId + "SortDropdown";
|
||||
filterDropdownId = tableId + "FilterDropdown";
|
||||
|
||||
createSearchRow(containingSelector, searchId, sortDropdownId, filterDropdownId, options);
|
||||
createTable(containingSelector, tableId);
|
||||
createTableControls(containingSelector, pageSizeId);
|
||||
|
||||
await bindSearchBar(searchId, loadDataFunc);
|
||||
await bindTablePagination(`${containingSelector} .table-pagination`, loadDataFunc);
|
||||
await bindTablePaginationResizer(`${containingSelector} .table-page-sizer`, loadDataFunc);
|
||||
}
|
||||
|
||||
function createSearchRow(containingSelector, searchId, sortDropdownId, filterDropdownId, options) {
|
||||
$(containingSelector).append(`
|
||||
<div class="row my-3 px-3 table-search-row">
|
||||
<div class="col-lg-4">
|
||||
<div class="input-group mb-lg-0 mb-3 rounded-1">
|
||||
<span class="input-group-text">
|
||||
<i class="bi bi-search"></i>
|
||||
</span>
|
||||
<input type="search" id="${searchId}" name="${searchId}" class="form-control table-searchbar" placeholder="Search">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
if (!options || !options.sort)
|
||||
return;
|
||||
|
||||
$(`${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>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
options.sort.forEach(sortKey => {
|
||||
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}">
|
||||
<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>
|
||||
</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>
|
||||
}
|
||||
|
||||
async function bindSearchBar(searchBarSelector, loadDataFunc) {
|
||||
searchBar = $("#" + searchBarSelector)
|
||||
searchBar.on("input", async function() {
|
||||
clearTimeout(timeouts[searchBarSelector]);
|
||||
searchString = $(this).val();
|
||||
timeouts[searchBarSelector] = setTimeout(async function() {
|
||||
await loadDataFunc(getCurrentlyActiveServer().guild_id, 1, null, searchString);
|
||||
}, 300);
|
||||
});
|
||||
}
|
||||
|
||||
function createTable(containingSelector, tableId) {
|
||||
$(containingSelector).append(`
|
||||
<div class="table-responsive my-3 px-3">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user