Implement row selection controls in templates and refactor related JavaScript functionality
This commit is contained in:
Ross
+1
-1
@@ -174,7 +174,7 @@ class CaseTable(SelectionTable):
|
||||
"atlas:case_delete", text="Delete", args=[A("pk")], orderable=False
|
||||
)
|
||||
|
||||
selection = tables.CheckBoxColumn(accessor="pk", orderable=False)
|
||||
#selection = tables.CheckBoxColumn(accessor="pk", orderable=False)
|
||||
|
||||
class Meta:
|
||||
model = Case
|
||||
|
||||
@@ -77,6 +77,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
{{ table.row_selection_controls|safe }}
|
||||
{% render_table table %}
|
||||
</form>
|
||||
|
||||
|
||||
@@ -57,6 +57,36 @@ class SelectionTable(tables.Table):
|
||||
# Defensive: don't break table rendering if introspection fails
|
||||
pass
|
||||
|
||||
@property
|
||||
def row_selection_controls(self):
|
||||
"""Return HTML for the row-selection control bar.
|
||||
|
||||
Usage: render in template with `{{ table.row_selection_controls|safe }}`
|
||||
|
||||
The control IDs are suffixed with a small per-instance token to
|
||||
avoid collisions when multiple tables are present on the same page.
|
||||
"""
|
||||
token = format(id(self), 'x')
|
||||
|
||||
html = (
|
||||
"<div class=\"d-flex justify-content-between align-items-center mb-2\">"
|
||||
" <div>"
|
||||
" <button class=\"btn btn-outline-secondary btn-sm\" id=\"toggle-row-selection-{}\" type=\"button\">Enable row selection</button>"
|
||||
" <div id=\"selection-controls-{}\" class=\"btn-group ms-2\" role=\"group\" style=\"display:none;\">"
|
||||
" <button class=\"btn btn-sm btn-outline-primary\" id=\"select-all-{}\">Select all</button>"
|
||||
" <button class=\"btn btn-sm btn-outline-secondary\" id=\"clear-selection-{}\">Clear</button>"
|
||||
" </div>"
|
||||
" </div>"
|
||||
" <div>"
|
||||
" <small class=\"text-muted\">Selected: <span id=\"selected-count-{}\">0</span></small>"
|
||||
" </div>"
|
||||
"</div>"
|
||||
).format(token, token, token, token, token)
|
||||
|
||||
# Also include a small data attribute so client scripts can locate the
|
||||
# controls by selection name if they prefer.
|
||||
return format_html(html)
|
||||
|
||||
class SingleImageColumn(tables.Column):
|
||||
def render(self, value):
|
||||
try:
|
||||
|
||||
+117
-100
@@ -312,113 +312,130 @@
|
||||
</script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const toggleBtn = document.getElementById('toggle-row-selection');
|
||||
const selectionControls = document.getElementById('selection-controls');
|
||||
const selectAllBtn = document.getElementById('select-all');
|
||||
const clearBtn = document.getElementById('clear-selection');
|
||||
const selectedCountSpan = document.getElementById('selected-count');
|
||||
const table = document.querySelector('.table-responsive table');
|
||||
let selectionEnabled = false;
|
||||
|
||||
function findRowCheckboxes() {
|
||||
if (!table) return [];
|
||||
return Array.from(table.querySelectorAll('input[type="checkbox"]'));
|
||||
}
|
||||
|
||||
function updateSelectedCount() {
|
||||
const checks = findRowCheckboxes();
|
||||
const count = checks.filter(c => c.checked).length;
|
||||
selectedCountSpan.textContent = count;
|
||||
// update row highlight based on checkbox state
|
||||
checks.forEach(cb => {
|
||||
const tr = cb.closest('tr');
|
||||
if (tr) tr.classList.toggle('table-active', cb.checked);
|
||||
});
|
||||
}
|
||||
|
||||
function setCheckboxesDisabled(disabled) {
|
||||
findRowCheckboxes().forEach(cb => {
|
||||
cb.disabled = disabled;
|
||||
});
|
||||
}
|
||||
|
||||
function hideSelectionColumn() {
|
||||
if (!table) return;
|
||||
// hide any th/td that contains the selection checkbox
|
||||
table.querySelectorAll('th, td').forEach(function(cell) {
|
||||
if (cell.querySelector && cell.querySelector('input[type="checkbox"]')) {
|
||||
cell.style.display = 'none';
|
||||
// Wire up all row-selection control blocks to the nearest .js-row-selectable table.
|
||||
function findTableForControl(elem) {
|
||||
// Walk up ancestors and look for a table that either has the
|
||||
// `js-row-selectable` class or contains a checkbox named 'selection'.
|
||||
var ancestor = elem.closest('div, section, main, article, form, body');
|
||||
while (ancestor) {
|
||||
// Prefer explicit selectable class
|
||||
var tbl = ancestor.querySelector && ancestor.querySelector('table.js-row-selectable');
|
||||
if (tbl) return tbl;
|
||||
// Otherwise look for any table in this ancestor that contains a
|
||||
// checkbox input named 'selection' (or any checkbox as a fallback).
|
||||
var tables = ancestor.querySelectorAll && ancestor.querySelectorAll('table');
|
||||
if (tables && tables.length) {
|
||||
for (var i = 0; i < tables.length; i++) {
|
||||
var t = tables[i];
|
||||
if (t.querySelector && (t.querySelector('input[name="selection"]') || t.querySelector('input[type="checkbox"]'))) return t;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function showSelectionColumn() {
|
||||
if (!table) return;
|
||||
table.querySelectorAll('th, td').forEach(function(cell) {
|
||||
if (cell.querySelector && cell.querySelector('input[type="checkbox"]')) {
|
||||
cell.style.display = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// disable checkboxes by default and hide the selection column
|
||||
setCheckboxesDisabled(true);
|
||||
hideSelectionColumn();
|
||||
|
||||
// row click toggling
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!selectionEnabled) return;
|
||||
// ignore clicks on inputs, anchors, buttons
|
||||
const tag = e.target.tagName.toLowerCase();
|
||||
if (['input','a','button','select','textarea','label'].includes(tag)) return;
|
||||
const tr = e.target.closest('tr');
|
||||
if (!tr || !table || !table.contains(tr)) return;
|
||||
const cb = tr.querySelector('input[type="checkbox"]');
|
||||
if (cb && !cb.disabled) {
|
||||
cb.checked = !cb.checked;
|
||||
// reflect highlight immediately
|
||||
tr.classList.toggle('table-active', cb.checked);
|
||||
updateSelectedCount();
|
||||
ancestor = ancestor.parentElement;
|
||||
}
|
||||
});
|
||||
|
||||
if (toggleBtn) {
|
||||
toggleBtn.addEventListener('click', function() {
|
||||
selectionEnabled = !selectionEnabled;
|
||||
if (selectionEnabled) {
|
||||
toggleBtn.textContent = 'Disable row selection';
|
||||
selectionControls.style.display = '';
|
||||
setCheckboxesDisabled(false);
|
||||
showSelectionColumn();
|
||||
} else {
|
||||
toggleBtn.textContent = 'Enable row selection';
|
||||
selectionControls.style.display = 'none';
|
||||
setCheckboxesDisabled(true);
|
||||
hideSelectionColumn();
|
||||
// clear any selected checkboxes
|
||||
findRowCheckboxes().forEach(cb => cb.checked = false);
|
||||
updateSelectedCount();
|
||||
}
|
||||
});
|
||||
// fallback to any table on the page that looks like it has selection
|
||||
var any = document.querySelector('table.js-row-selectable') || Array.from(document.querySelectorAll('table')).find(function(t){ return t.querySelector && (t.querySelector('input[name="selection"]') || t.querySelector('input[type="checkbox"]')); });
|
||||
return any || null;
|
||||
}
|
||||
|
||||
if (selectAllBtn) {
|
||||
selectAllBtn.addEventListener('click', function() {
|
||||
findRowCheckboxes().forEach(cb => { if (!cb.disabled) cb.checked = true; });
|
||||
updateSelectedCount();
|
||||
});
|
||||
// Helper to build id with optional token
|
||||
function suffixed(idBase, token) {
|
||||
return token ? idBase + '-' + token : idBase;
|
||||
}
|
||||
|
||||
if (clearBtn) {
|
||||
clearBtn.addEventListener('click', function() {
|
||||
findRowCheckboxes().forEach(cb => { if (!cb.disabled) cb.checked = false; });
|
||||
updateSelectedCount();
|
||||
});
|
||||
}
|
||||
// For every toggle button (supports both unsuffixed and suffixed IDs)
|
||||
document.querySelectorAll('button[id^="toggle-row-selection"]').forEach(function(toggleBtn) {
|
||||
// derive token (empty for unsuffixed)
|
||||
var token = '';
|
||||
if (toggleBtn.id !== 'toggle-row-selection') token = toggleBtn.id.replace('toggle-row-selection-', '');
|
||||
|
||||
// Keep count updated if checkboxes are toggled directly
|
||||
document.addEventListener('change', function(e) {
|
||||
if (e.target && e.target.matches('input[type="checkbox"]')) updateSelectedCount();
|
||||
var controlsEl = document.getElementById(suffixed('selection-controls', token));
|
||||
var selectAllBtn = document.getElementById(suffixed('select-all', token));
|
||||
var clearBtn = document.getElementById(suffixed('clear-selection', token));
|
||||
var selectedCountSpan = document.getElementById(suffixed('selected-count', token));
|
||||
|
||||
var table = findTableForControl(toggleBtn);
|
||||
if (!table) return; // nothing to do
|
||||
|
||||
var selectionEnabled = false;
|
||||
|
||||
function findRowCheckboxes() {
|
||||
if (!table) return [];
|
||||
// prefer named selection inputs but fall back to any checkbox
|
||||
var checks = Array.from(table.querySelectorAll('input[type="checkbox"][name="selection"]'));
|
||||
if (!checks.length) checks = Array.from(table.querySelectorAll('input[type="checkbox"]'));
|
||||
return checks;
|
||||
}
|
||||
|
||||
function updateSelectedCount() {
|
||||
if (!selectedCountSpan) return;
|
||||
var checks = findRowCheckboxes();
|
||||
var count = checks.filter(function(c){ return c.checked; }).length;
|
||||
selectedCountSpan.textContent = count;
|
||||
checks.forEach(function(cb){ var tr = cb.closest('tr'); if (tr) tr.classList.toggle('table-active', cb.checked); });
|
||||
}
|
||||
|
||||
function setCheckboxesDisabled(disabled) {
|
||||
findRowCheckboxes().forEach(function(cb){ cb.disabled = disabled; });
|
||||
}
|
||||
|
||||
function hideSelectionColumn() {
|
||||
if (!table) return;
|
||||
table.querySelectorAll('th, td').forEach(function(cell){ if (cell.querySelector && cell.querySelector('input[type="checkbox"][name="selection"]')) cell.style.display = 'none'; });
|
||||
}
|
||||
|
||||
function showSelectionColumn() {
|
||||
if (!table) return;
|
||||
table.querySelectorAll('th, td').forEach(function(cell){ if (cell.querySelector && cell.querySelector('input[type="checkbox"][name="selection"]')) cell.style.display = ''; });
|
||||
}
|
||||
|
||||
// initialise state
|
||||
setCheckboxesDisabled(true);
|
||||
hideSelectionColumn();
|
||||
|
||||
// row click toggling (attach to table to avoid global handlers)
|
||||
table.addEventListener('click', function(e){
|
||||
if (!selectionEnabled) return;
|
||||
var tag = (e.target.tagName || '').toLowerCase();
|
||||
if (['input','a','button','select','textarea','label'].indexOf(tag) !== -1) return;
|
||||
var tr = e.target.closest('tr');
|
||||
if (!tr || !table.contains(tr)) return;
|
||||
var cb = tr.querySelector('input[type="checkbox"][name="selection"]') || tr.querySelector('input[type="checkbox"]');
|
||||
if (cb && !cb.disabled) { cb.checked = !cb.checked; tr.classList.toggle('table-active', cb.checked); updateSelectedCount(); }
|
||||
}, true);
|
||||
|
||||
// listen for changes within the table to keep counts in sync
|
||||
table.addEventListener('change', function(e){ if (e.target && e.target.matches && e.target.matches('input[type="checkbox"]')) updateSelectedCount(); }, true);
|
||||
|
||||
// wire controls
|
||||
if (toggleBtn) {
|
||||
toggleBtn.addEventListener('click', function() {
|
||||
selectionEnabled = !selectionEnabled;
|
||||
if (selectionEnabled) {
|
||||
toggleBtn.textContent = 'Disable row selection';
|
||||
if (controlsEl) controlsEl.style.display = '';
|
||||
setCheckboxesDisabled(false);
|
||||
showSelectionColumn();
|
||||
} else {
|
||||
toggleBtn.textContent = 'Enable row selection';
|
||||
if (controlsEl) controlsEl.style.display = 'none';
|
||||
setCheckboxesDisabled(true);
|
||||
hideSelectionColumn();
|
||||
findRowCheckboxes().forEach(function(cb){ cb.checked = false; });
|
||||
updateSelectedCount();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (selectAllBtn) {
|
||||
selectAllBtn.addEventListener('click', function(){ findRowCheckboxes().forEach(function(cb){ if (!cb.disabled) cb.checked = true; }); updateSelectedCount(); });
|
||||
}
|
||||
|
||||
if (clearBtn) {
|
||||
clearBtn.addEventListener('click', function(){ findRowCheckboxes().forEach(function(cb){ if (!cb.disabled) cb.checked = false; }); updateSelectedCount(); });
|
||||
}
|
||||
|
||||
// initial count
|
||||
updateSelectedCount();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -29,19 +29,8 @@
|
||||
</div>
|
||||
<div id="action-result" class="mt-2 mt-md-0"></div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<div>
|
||||
<button class="btn btn-outline-secondary btn-sm" id="toggle-row-selection" type="button">Enable row selection</button>
|
||||
<div id="selection-controls" class="btn-group ms-2" role="group" style="display:none;">
|
||||
<button class="btn btn-sm btn-outline-primary" id="select-all">Select all</button>
|
||||
<button class="btn btn-sm btn-outline-secondary" id="clear-selection">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Selected: <span id="selected-count">0</span></small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ table.row_selection_controls|safe }}
|
||||
<div class="table-responsive">
|
||||
{% render_table table %}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user