Implement CORS-fields in views & HTML, improve list rendering & selection

eveai_app/templates/user/view_users.html

@@ -1,5 +1,5 @@
 {% extends 'base.html' %}
-{% from "macros.html" import render_field %}
+{% from "macros.html" import render_selectable_table %}
 
 {% block title %}View Users{% endblock %}
 
@@ -7,49 +7,43 @@
 {% block content_description %}Select the user you'd like to action upon{% endblock %}
 
 {% block content %}
-<h3>Users for Selected Tenant</h3>
 <form action="{{ url_for('user_bp.handle_user_action') }}" method="POST">
-    <table id="usersTable" class="display" style="width:100%">
-        <thead>
-            <tr>
-                <th>Select</th>
-                <th>User ID</th>
-                <th>Name</th>
-                <th>Email</th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for user in users %}
-            <tr>
-                <td><input type="radio" name="user_id" value="{{ user.id }}" required></td>
-                <td>{{ user.id }}</td>
-                <td>{{ user.name }}</td>
-                <td>{{ user.email }}</td>
-            </tr>
-            {% endfor %}
-        </tbody>
-    </table>
+    {{ render_selectable_table(headers=["User ID", "User Name", "Email"], rows=users, selectable=True, id="usersTable") }}
     <div class="form-group mt-3">
         <button type="submit" name="action" value="edit_user" class="btn btn-primary">Edit Selected User</button>
         <!-- Additional buttons can be added here for other actions -->
     </div>
 </form>
-<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
-<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
+{% endblock %}
+{% block scripts %}
 <script>
 $(document).ready(function() {
     $('#usersTable').DataTable({
-        'columnDefs': [{
-            'targets': 0,
-            'searchable': false,
-            'orderable': false,
-            'className': 'dt-body-center',
-            'render': function (data, type, full, meta){
-                return '<input type="radio" name="user_id" value="' + $('<div/>').text(data).html() + '">';
+        'columnDefs': [
+            {
+                'targets': 0,
+                'searchable': false,
+                'orderable': false,
+                'className': 'dt-body-center',
+                'render': function (data, type, full, meta) {
+                    return '<input type="radio" name="user_id" value="' + $('<div/>').text(data).html() + '">';
+                }
+            },
+            {
+                'targets': 1,
+                'orderable': true,
+            },
+            {
+                'targets': 2,
+                'orderable': true,
+            },
+            {
+                'targets': 3,
+                'orderable': true,
             }
-        }],
+        ],
         'order': [[1, 'asc']]
     });
 });
 </script>
-{% endblock %}
+{% endblock %}