Add row selection functionality to question table view; enhance user interaction

sbas/templates/sbas/question_view.html

@@ -3,6 +3,7 @@
 {% block css %}
 {% endblock %}
 
+
 {% block content %}
 
     <div id="view-filter-options">

templates/question_table_view.html

@@ -29,6 +29,18 @@
                 </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>
 
             <div class="table-responsive">
                 {% render_table table %}
@@ -204,3 +216,89 @@
         .filter-card label { color: #e6eef6; }
     </style>
 {% endblock %}
+
+{% block js %}
+<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;
+    }
+
+    function setCheckboxesDisabled(disabled) {
+        findRowCheckboxes().forEach(cb => {
+            cb.disabled = disabled;
+        });
+    }
+
+    // disable checkboxes by default
+    setCheckboxesDisabled(true);
+
+    // 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;
+            updateSelectedCount();
+        }
+    });
+
+    if (toggleBtn) {
+        toggleBtn.addEventListener('click', function() {
+            selectionEnabled = !selectionEnabled;
+            if (selectionEnabled) {
+                toggleBtn.textContent = 'Disable row selection';
+                selectionControls.style.display = '';
+                setCheckboxesDisabled(false);
+            } else {
+                toggleBtn.textContent = 'Enable row selection';
+                selectionControls.style.display = 'none';
+                setCheckboxesDisabled(true);
+                // clear any selected checkboxes
+                findRowCheckboxes().forEach(cb => cb.checked = false);
+                updateSelectedCount();
+            }
+        });
+    }
+
+    if (selectAllBtn) {
+        selectAllBtn.addEventListener('click', function() {
+            findRowCheckboxes().forEach(cb => { if (!cb.disabled) cb.checked = true; });
+            updateSelectedCount();
+        });
+    }
+
+    if (clearBtn) {
+        clearBtn.addEventListener('click', function() {
+            findRowCheckboxes().forEach(cb => { if (!cb.disabled) cb.checked = false; });
+            updateSelectedCount();
+        });
+    }
+
+    // Keep count updated if checkboxes are toggled directly
+    document.addEventListener('change', function(e) {
+        if (e.target && e.target.matches('input[type="checkbox"]')) updateSelectedCount();
+    });
+});
+</script>
+{% endblock %}