Implement row selection controls in templates and refactor related JavaScript functionality

atlas/tables.py

@@ -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

atlas/templates/atlas/case_view.html

@@ -77,6 +77,7 @@
                     </div>
                 </div>
             </details>
+            {{ table.row_selection_controls|safe }}
             {% render_table table %}
         </form>
 

generic/tables.py

@@ -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:

templates/base.html

@@ -312,113 +312,130 @@
         </script>
 <script>
 document.addEventListener('DOMContentLoaded', function() {
-    const toggleBtn = document.getElementById('toggle-row-selection');
+    // Wire up all row-selection control blocks to the nearest .js-row-selectable table.
-    const selectionControls = document.getElementById('selection-controls');
+    function findTableForControl(elem) {
-    const selectAllBtn = document.getElementById('select-all');
+        // Walk up ancestors and look for a table that either has the
-    const clearBtn = document.getElementById('clear-selection');
+        // `js-row-selectable` class or contains a checkbox named 'selection'.
-    const selectedCountSpan = document.getElementById('selected-count');
+        var ancestor = elem.closest('div, section, main, article, form, body');
-    const table = document.querySelector('.table-responsive table');
+        while (ancestor) {
-    let selectionEnabled = false;
+            // Prefer explicit selectable class
-
+            var tbl = ancestor.querySelector && ancestor.querySelector('table.js-row-selectable');
-    function findRowCheckboxes() {
+            if (tbl) return tbl;
-        if (!table) return [];
+            // Otherwise look for any table in this ancestor that contains a
-        return Array.from(table.querySelectorAll('input[type="checkbox"]'));
+            // checkbox input named 'selection' (or any checkbox as a fallback).
-    }
+            var tables = ancestor.querySelectorAll && ancestor.querySelectorAll('table');
-
+            if (tables && tables.length) {
-    function updateSelectedCount() {
+                for (var i = 0; i < tables.length; i++) {
-        const checks = findRowCheckboxes();
+                    var t = tables[i];
-        const count = checks.filter(c => c.checked).length;
+                    if (t.querySelector && (t.querySelector('input[name="selection"]') || t.querySelector('input[type="checkbox"]'))) return t;
-        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';
             }
-        });
+            ancestor = ancestor.parentElement;
-    }
-
-    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();
         }
-    });
+        // 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"]')); });
-    if (toggleBtn) {
+        return any || null;
-        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();
-            }
-        });
     }
 
-    if (selectAllBtn) {
+    // Helper to build id with optional token
-        selectAllBtn.addEventListener('click', function() {
+    function suffixed(idBase, token) {
-            findRowCheckboxes().forEach(cb => { if (!cb.disabled) cb.checked = true; });
+        return token ? idBase + '-' + token : idBase;
-            updateSelectedCount();
-        });
     }
 
-    if (clearBtn) {
+    // For every toggle button (supports both unsuffixed and suffixed IDs)
-        clearBtn.addEventListener('click', function() {
+    document.querySelectorAll('button[id^="toggle-row-selection"]').forEach(function(toggleBtn) {
-            findRowCheckboxes().forEach(cb => { if (!cb.disabled) cb.checked = false; });
+        // derive token (empty for unsuffixed)
-            updateSelectedCount();
+        var token = '';
-        });
+        if (toggleBtn.id !== 'toggle-row-selection') token = toggleBtn.id.replace('toggle-row-selection-', '');
-    }
 
-    // Keep count updated if checkboxes are toggled directly
+        var controlsEl = document.getElementById(suffixed('selection-controls', token));
-    document.addEventListener('change', function(e) {
+        var selectAllBtn = document.getElementById(suffixed('select-all', token));
-        if (e.target && e.target.matches('input[type="checkbox"]')) updateSelectedCount();
+        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>

templates/question_table_view.html

@@ -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>