Remove row selection controls from case and question table views for cleaner UI

atlas/templates/atlas/case_view.html

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

sbas/tables.py

@@ -55,7 +55,7 @@ class QuestionTable(SelectionTable):
             "edit"
         )
         sequence = ("view", "stem", "answers")#, "exams")
-        attrs = {"class": "table"}
+        #`attrs = {"class": "table"}
         order_by = "-created_date"
 
     def __init__(self, data=None, *args, **kwargs):

templates/base.html

@@ -316,24 +316,24 @@ document.addEventListener('DOMContentLoaded', function() {
     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');
+        //var ancestor = elem.closest('div, section, main, article, form, body');
-        while (ancestor) {
+        //while (ancestor) {
-            // Prefer explicit selectable class
+        //    // Prefer explicit selectable class
-            var tbl = ancestor.querySelector && ancestor.querySelector('table.js-row-selectable');
+        //    var tbl = ancestor.querySelector && ancestor.querySelector('table.js-row-selectable');
-            if (tbl) return tbl;
+        //    if (tbl) return tbl;
-            // Otherwise look for any table in this ancestor that contains a
+        //    // Otherwise look for any table in this ancestor that contains a
-            // checkbox input named 'selection' (or any checkbox as a fallback).
+        //    // checkbox input named 'selection' (or any checkbox as a fallback).
-            var tables = ancestor.querySelectorAll && ancestor.querySelectorAll('table');
+        //    var tables = ancestor.querySelectorAll && ancestor.querySelectorAll('table');
-            if (tables && tables.length) {
+        //    if (tables && tables.length) {
-                for (var i = 0; i < tables.length; i++) {
+        //        for (var i = 0; i < tables.length; i++) {
-                    var t = tables[i];
+        //            var t = tables[i];
-                    if (t.querySelector && (t.querySelector('input[name="selection"]') || t.querySelector('input[type="checkbox"]'))) return t;
+        //            if (t.querySelector && (t.querySelector('input[name="selection"]') || t.querySelector('input[type="checkbox"]'))) return t;
-                }
+        //        }
-            }
+        //    }
-            ancestor = ancestor.parentElement;
+        //    ancestor = ancestor.parentElement;
-        }
+        //}
         // 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"]')); });
+        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;
     }
 
@@ -342,6 +342,45 @@ document.addEventListener('DOMContentLoaded', function() {
         return token ? idBase + '-' + token : idBase;
     }
 
+    // Ensure every selectable table has a row-selection control block. If the
+    // page author didn't render the controls, create them automatically and
+    // insert them before the table so the behavior is available out-of-the-box.
+    function ensureControlsForTable(table) {
+        if (!table) return;
+        // detect an existing nearby toggle button
+        var existing = table.previousElementSibling && table.previousElementSibling.querySelector && table.previousElementSibling.querySelector('[id^="toggle-row-selection"]');
+        if (existing) return; // already present
+
+        // generate a short token for unique IDs
+        var token = (Date.now().toString(16) + Math.floor(Math.random()*0xffff).toString(16));
+
+        var wrapper = document.createElement('div');
+        wrapper.className = 'row-selection-controls-wrapper';
+        wrapper.innerHTML = '<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-' + token + '" type="button">Enable row selection</button>'
+            + '    <div id="selection-controls-' + token + '" class="btn-group ms-2" role="group" style="display:none;">'
+            + '      <button class="btn btn-sm btn-outline-primary" id="select-all-' + token + '">Select all</button>'
+            + '      <button class="btn btn-sm btn-outline-secondary" id="clear-selection-' + token + '">Clear</button>'
+            + '    </div>'
+            + '  </div>'
+            + '  <div>'
+            + '    <small class="text-muted">Selected: <span id="selected-count-' + token + '">0</span></small>'
+            + '  </div>'
+            + '</div>';
+
+        // Insert the controls immediately before the table (or its responsive wrapper)
+        var container = table.closest('.table-responsive') || table;
+        container.parentNode.insertBefore(wrapper, container);
+    }
+
+    // Create controls for any table that looks selectable but lacks a control block
+    Array.from(document.querySelectorAll('table')).forEach(function(t){
+        if (t.querySelector && (t.querySelector('input[name="selection"]') || t.querySelector('input[type="checkbox"]'))) {
+            ensureControlsForTable(t);
+        }
+    });
+
     // 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)

templates/question_table_view.html

@@ -30,7 +30,6 @@
                 <div id="action-result" class="mt-2 mt-md-0"></div>
             </div>
 
-            {{ table.row_selection_controls|safe }}
             <div class="table-responsive">
                 {% render_table table %}
             </div>