Add row selection functionality with toggle and count updates in table view

templates/base.html

@@ -310,6 +310,118 @@
             });
 
         </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';
+            }
+        });
+    }
+
+    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();
+        }
+    });
+
+    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();
+            }
+        });
+    }
+
+    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>
     </body>