Add modal for group users table and CSV export functionality

generic/templates/generic/partials/group_users_list.html

@@ -1,10 +1,18 @@
 {% comment %} Partial: renders the users <ul> for group detail pages {% endcomment %}
+<div class="d-flex align-items-center mb-2">
+    <div class="me-auto"></div>
+    <div>
+        <button type="button" class="btn btn-sm btn-outline-secondary show-group-table-btn">Show table</button>
+    </div>
+</div>
+
 <ul id="group-users-list" class="list-group list-group-flush">
     {% for user in users %}
         <li class="list-group-item bg-transparent border-0 py-2"
             data-username="{% if group_type == 'cid' %}{{ user.cid|default:''|escape }}{% else %}{{ user.username|default:''|escape }}{% endif %}"
             data-name="{% if group_type == 'cid' %}{{ user.name|default:''|escape }}{% else %}{{ user.get_full_name|default:user.username|escape }}{% endif %}"
-            data-email="{{ user.email|default:''|escape }}">
+            data-email="{{ user.email|default:''|escape }}"
+            {% if group_type == 'cid' %}data-cid="{{ user.cid|default:''|escape }}" data-passcode="{{ user.passcode|default:''|escape }}"{% endif %}>
             {% if group_type == "cid" %}
                 <div class="d-flex align-items-start">
                     <div>
@@ -38,3 +46,91 @@
         </li>
     {% endfor %}
 </ul>
+
+    <!-- Modal: Group users table / CSV export -->
+    <div class="modal fade" id="groupUsersModal" tabindex="-1" aria-hidden="true">
+        <div class="modal-dialog modal-lg modal-dialog-scrollable">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Group users</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="table-responsive">
+                        <table class="table table-sm" id="group-users-table">
+                            <thead>
+                                <tr>
+                                    <th>Name</th>
+                                    <th>Email</th>
+                                    <th>Username / CID</th>
+                                    <th>Passcode</th>
+                                </tr>
+                            </thead>
+                            <tbody></tbody>
+                        </table>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-sm btn-outline-primary" id="download-group-csv-btn">Download CSV</button>
+                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+    document.addEventListener('DOMContentLoaded', function(){
+            const showBtn = document.querySelector('.show-group-table-btn');
+            const modalEl = document.getElementById('groupUsersModal');
+            if(!showBtn || !modalEl) return;
+            const bsModal = new bootstrap.Modal(modalEl);
+
+            function buildTable(){
+                    const tbody = modalEl.querySelector('#group-users-table tbody');
+                    tbody.innerHTML = '';
+                    const items = document.querySelectorAll('#group-users-list > li');
+                    items.forEach(function(li){
+                            const name = li.dataset.name || '';
+                            const email = li.dataset.email || '';
+                            const username = li.dataset.username || '';
+                            const cid = li.dataset.cid || '';
+                            const passcode = li.dataset.passcode || '';
+                            const userCell = cid ? cid : username;
+                            const tr = document.createElement('tr');
+                            tr.innerHTML = `<td>${escapeHtml(name)}</td><td>${escapeHtml(email)}</td><td>${escapeHtml(userCell)}</td><td>${escapeHtml(passcode)}</td>`;
+                            tbody.appendChild(tr);
+                    });
+            }
+
+            function escapeHtml(s){
+                    if(!s) return '';
+                    return s.toString().replace(/&/g, '&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+            }
+
+            showBtn.addEventListener('click', function(){
+                    buildTable();
+                    bsModal.show();
+            });
+
+            document.getElementById('download-group-csv-btn').addEventListener('click', function(){
+                    const rows = [];
+                    const header = ['Name','Email','Username/CID','Passcode'];
+                    rows.push(header);
+                    document.querySelectorAll('#group-users-table tbody tr').forEach(function(tr){
+                            const cols = Array.from(tr.children).map(td => td.textContent || '');
+                            rows.push(cols);
+                    });
+                    const csv = rows.map(r => r.map(cell => `"${(cell||'').toString().replace(/"/g,'""')}"`).join(',')).join('\n');
+                    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+                    const url = URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.href = url;
+                    const ts = new Date().toISOString().replace(/[:.]/g,'-');
+                    a.download = `group-users-${ts}.csv`;
+                    document.body.appendChild(a);
+                    a.click();
+                    a.remove();
+                    URL.revokeObjectURL(url);
+            });
+    });
+    </script>