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

enable/disable table controls

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-09-29 19:06:19 +01:00
parent 019d6be9f5
commit 67ae103676
3 changed files with 46 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
apps/home/static/home/js/tables.js
View File

@ -75,7 +75,7 @@ $(document).on("selectedServerChange", function() {
});
// region Data Control
// region Load & Clear Data
function wipeTable(tableId) {
$(`${tableId} thead .table-select-all`).prop("checked", false).prop("indeterminate", false);
@ -90,18 +90,20 @@ function populateTable(tableId, data) {
async function loadTableData(tableId, url, method) {
fixTablePagination(tableId);
disableTableControls(tableId);
// Create querystring for filtering against the API
let filters = getTableFilters(tableId);
let ordering = getTableOrdering(tableId);
let querystring = makeQuerystring(filters, ordering);
const filters = getTableFilters(tableId);
const ordering = getTableOrdering(tableId);
const querystring = makeQuerystring(filters, ordering);
// API request
let data = await ajaxRequest(url + querystring, method);
const data = await ajaxRequest(url + querystring, method);
// Update table with new data
wipeTable(tableId);
populateTable(tableId, data);
enableTableControls(tableId);
}
@ -143,7 +145,7 @@ function fixTablePagination(tableId) {
function updateTablePagination(tableId, data) {
let filters = getTableFilters(tableId);
let $paginationArea = $("#subTable").closest('.js-tableBody').siblings('.js-tableControls').find('.pagination');
let $paginationArea = $(tableId).closest('.js-tableBody').siblings('.js-tableControls').find('.pagination');
$paginationArea.data("page", filters.page); // store the page for later
// Remove existing buttons for specific pages
@ -242,12 +244,14 @@ function bindTablePageSizer(tableId) {
_searchTimeouts = {};
function bindTableSearch(tableId) {
let $tableFilters = $(tableId).closest('.js-tableBody').siblings('.js-tableFilters');
const $tableFilters = $(tableId).closest('.js-tableBody').siblings('.js-tableFilters');
$tableFilters.on("input", ".table-search-input", function() {
$(this).data("was-focused", true);
clearTimeout(_searchTimeouts[tableId]);
let searchString = $(this).val();
const searchString = $(this).val();
setTableFilter(tableId, "search", searchString);
setTableFilter(tableId, "page", 1); // back to first page, as desired page no. might not exist after filtering
_searchTimeouts[tableId] = setTimeout(function() {
$(tableId).trigger("doDataLoad");
@ -303,5 +307,31 @@ function determineSelectAllState(tableId) {
$checkbox.prop("checked", doCheck);
$checkbox.prop("indeterminate", doIndeterminate);
// TODO: disable/enable delete button here
$(tableId).closest(".js-tableBody").siblings(".js-tableFilters").find(".table-del-btn").prop("disabled", !doCheck && !doIndeterminate);
}
// region On/Off Controls
function enableTableControls(tableId) {
setTableControlsUsability(tableId, false);
}
function disableTableControls(tableId) {
setTableControlsUsability(tableId, true);
}
function setTableControlsUsability(tableId, disabled) {
const $table = $(tableId);
const $tableBody = $table.closest(".js-tableBody");
const $tableFilters = $tableBody.siblings(".js-tableFilters");
const $tableControls = $tableBody.siblings(".tableControls");
$tableBody.find(".disable-while-loading").prop("disabled", disabled);
$tableFilters.find(".disable-while-loading").prop("disabled", disabled);
$tableControls.find(".disable-while-loading").prop("disabled", disabled);
// Re-focus search bar if used
const $search = $tableFilters.find(".disable-while-loading[type=search]");
$search.data("was-focused") ? $search.focus() : null;
}

2
apps/home/templates/home/tabs/styles.html
View File

@ -39,7 +39,7 @@
</button>
</div>
<div class="d-inline-block">
<button type="button" class="table-del-btn btn btn-danger rounded-1">
<button type="button" class="table-del-btn btn btn-danger rounded-1" disabled>
<i class="bi bi-trash3"></i>
</button>
</div>

11
apps/home/templates/home/tabs/subs.html
View File

@ -4,7 +4,7 @@
<label for="searchForSubscription" class="table-search-label">
<i class="bi bi-search"></i>
</label>
<input type="search" id="searchForSubscription" class="table-search-input" placeholder="search">
<input type="search" id="searchForSubscription" class="table-search-input disable-while-loading" placeholder="search">
</div>
</div>
<div class="col-md-6 col-lg-7 col-xl-8 col-xxl-9 text-md-end table-search-buttons">
@ -34,12 +34,12 @@
</div>
</div>
<div class="d-inline-block">
<button type="button" class="table-refresh-btn btn btn-outline-secondary rounded-1">
<button type="button" class="table-refresh-btn btn btn-outline-secondary rounded-1 disable-while-loading">
<i class="bi bi-arrow-clockwise"></i>
</button>
</div>
<div class="d-inline-block">
<button type="button" class="table-del-btn btn btn-danger rounded-1">
<button type="button" class="table-del-btn btn btn-danger rounded-1" disabled>
<i class="bi bi-trash3"></i>
</button>
</div>
@ -50,7 +50,7 @@
</div>
<div class="js-tableControls row px-sm-3 mb-4">
<div class="col-lg-6">
<nav class="table-pagination mb-4 mb-lg-0">
<nav class="table-pagination mb-4 mb-lg-0 table-pagination-group"> <!-- TODO: continue here -->
<ul class="pagination mb-0">
<li class="page-item">
<button type="button" class="page-link page-prev rounded-start-1">
@ -67,7 +67,8 @@
</div>
<div class="col-lg-6 d-flex align-items-center justify-content-lg-end">
<label for="subTablePageSizer" class="form-label align-self-center mb-0 me-2">Show</label>
<select name="subTablePageSizer" id="subTablePageSizer" class="select-2 table-page-sizer">
<select name="subTablePageSizer" id="subTablePageSizer" class="select-2 table-page-sizer disable-while-loading">
<option value="1">1&emsp;</option>
<option value="10" selected>10&emsp;</option>
<option value="15">15&emsp;</option>
<option value="20">20&emsp;</option>