Add select feature

docker/ploughshares/templates/pending_approval.html

@@ -2,6 +2,23 @@
 
 {% block title %}Transactions Pending Approval - Project Ploughshares{% endblock %}
 
+{% block styles %}
+<style>
+    .items-selected {
+        display: flex;
+        background-color: var(--ploughshares-blue);
+        padding: 10px;
+        border-radius: 5px;
+        color: white;
+    }
+
+    .items-selected p {
+        flex: 1;
+        margin: 0;
+    }
+</style>
+{% endblock %}
+
 {% block content %}
 <div class="container-fluid mt-4">
     <div class="card">
@@ -17,6 +34,11 @@
             </div>
         </div>
         <div class="card-body">
+            <div class="items-selected">
+                <p><span>0</span> items selected</p>
+                <button>approve</button>
+                <button>reject</button>
+            </div>
             {% if transactions %}
                 <div class="table-responsive">
                     <table class="table table-hover">
@@ -31,6 +53,7 @@
                                 <th>Created At</th>
                                 <th>Documents</th>
                                 <th>Actions</th>
+                                <th>Select</th>
                             </tr>
                         </thead>
                         <tbody>
@@ -120,6 +143,7 @@
                                         </div>
                                     </div>
                                 </td>
+                                <td><input type="checkbox" class="transaction-checkbox" data-transaction-id="{{ transaction['id'] }}"></td>
                             </tr>
                             {% endfor %}
                         </tbody>
@@ -137,6 +161,16 @@
 
 {% block scripts %}
 <script nonce="{{ csp_nonce() }}">
+    const checkedTransactions = [];
+    const counter = document.querySelector(".items-selected span");
+
+    function handleCheck(transactionId, checked) {
+        const index = checkedTransactions.findIndex(x=>x===transactionId);
+        if (index >= 0) checkedTransactions.splice(index, 1);
+        if (checked) checkedTransactions.push(transactionId);
+        counter.textContent = checkedTransactions.length;
+    }
+
     document.addEventListener('DOMContentLoaded', function() {
         // Refresh button functionality
         const refreshBtn = document.getElementById('refreshBtn');
@@ -189,6 +223,15 @@
             });
         });
 
+        // Attach event listeners to checkboxes
+        document.querySelectorAll('.transaction-checkbox').forEach(function(checkbox) {
+            const transactionId = checkbox.getAttribute("data-transaction-id");
+            handleCheck(transactionId, checkbox.checked);
+            checkbox.addEventListener('change', e => {
+                handleCheck(transactionId, e.target.checked);
+            });
+        });
+        
         // Helper function to check if user is typing in an input field
         function isUserTyping() {
             const activeElement = document.activeElement;