ross/penracourses
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add conditional preview generation for CID group types in user details

Browse Source
This commit is contained in:
Ross
2025-12-22 10:38:45 +00:00
parent 7163e51335
commit d3d0e865c3
2 changed files with 77 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
generic/templates/generic/cid_group_view_detail.html
+2
View File
@@ -37,6 +37,7 @@
</div> </div>
</div> </div>
{% if group_type == 'cid' %}
<div class="mb-2"> <div class="mb-2">
<form method="post" hx-post="{% url 'generic:cid_group_generate_preview' group.pk %}" hx-target="#cid-generate-preview" hx-swap="innerHTML"> <form method="post" hx-post="{% url 'generic:cid_group_generate_preview' group.pk %}" hx-target="#cid-generate-preview" hx-swap="innerHTML">
{% csrf_token %} {% csrf_token %}
@@ -48,6 +49,7 @@
</form> </form>
<div id="cid-generate-preview"></div> <div id="cid-generate-preview"></div>
</div> </div>
{% endif %}
<div id="group-users-wrap"> <div id="group-users-wrap">
{% if users %} {% if users %}
generic/templates/generic/partials/group_users_list.html
+75 -75
View File
@@ -48,89 +48,89 @@
</ul> </ul>
<!-- Modal: Group users table / CSV export --> <!-- Modal: Group users table / CSV export -->
<div class="modal fade" id="groupUsersModal" tabindex="-1" aria-hidden="true"> <div class="modal fade" id="groupUsersModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-scrollable"> <div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Group users</h5> <h5 class="modal-title">Group users</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-sm" id="group-users-table"> <table class="table table-sm" id="group-users-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Email</th> <th>Email</th>
<th>Username / CID</th> <th>Username / CID</th>
<th>Passcode</th> <th>Passcode</th>
</tr> </tr>
</thead> </thead>
<tbody></tbody> <tbody></tbody>
</table> </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>
<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> </div>
</div>
<script> <script>
document.addEventListener('DOMContentLoaded', function(){ document.addEventListener('DOMContentLoaded', function(){
const showBtn = document.querySelector('.show-group-table-btn'); const showBtn = document.querySelector('.show-group-table-btn');
const modalEl = document.getElementById('groupUsersModal'); const modalEl = document.getElementById('groupUsersModal');
if(!showBtn || !modalEl) return; if(!showBtn || !modalEl) return;
const bsModal = new bootstrap.Modal(modalEl); const bsModal = new bootstrap.Modal(modalEl);
function buildTable(){ function buildTable(){
const tbody = modalEl.querySelector('#group-users-table tbody'); const tbody = modalEl.querySelector('#group-users-table tbody');
tbody.innerHTML = ''; tbody.innerHTML = '';
const items = document.querySelectorAll('#group-users-list > li'); const items = document.querySelectorAll('#group-users-list > li');
items.forEach(function(li){ items.forEach(function(li){
const name = li.dataset.name || ''; const name = li.dataset.name || '';
const email = li.dataset.email || ''; const email = li.dataset.email || '';
const username = li.dataset.username || ''; const username = li.dataset.username || '';
const cid = li.dataset.cid || ''; const cid = li.dataset.cid || '';
const passcode = li.dataset.passcode || ''; const passcode = li.dataset.passcode || '';
const userCell = cid ? cid : username; const userCell = cid ? cid : username;
const tr = document.createElement('tr'); const tr = document.createElement('tr');
tr.innerHTML = `<td>${escapeHtml(name)}</td><td>${escapeHtml(email)}</td><td>${escapeHtml(userCell)}</td><td>${escapeHtml(passcode)}</td>`; tr.innerHTML = `<td>${escapeHtml(name)}</td><td>${escapeHtml(email)}</td><td>${escapeHtml(userCell)}</td><td>${escapeHtml(passcode)}</td>`;
tbody.appendChild(tr); 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(){ function escapeHtml(s){
const rows = []; if(!s) return '';
const header = ['Name','Email','Username/CID','Passcode']; return s.toString().replace(/&/g, '&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
rows.push(header); }
document.querySelectorAll('#group-users-table tbody tr').forEach(function(tr){
const cols = Array.from(tr.children).map(td => td.textContent || ''); showBtn.addEventListener('click', function(){
rows.push(cols); buildTable();
}); bsModal.show();
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); document.getElementById('download-group-csv-btn').addEventListener('click', function(){
const a = document.createElement('a'); const rows = [];
a.href = url; const header = ['Name','Email','Username/CID','Passcode'];
const ts = new Date().toISOString().replace(/[:.]/g,'-'); rows.push(header);
a.download = `group-users-${ts}.csv`; document.querySelectorAll('#group-users-table tbody tr').forEach(function(tr){
document.body.appendChild(a); const cols = Array.from(tr.children).map(td => td.textContent || '');
a.click(); rows.push(cols);
a.remove();
URL.revokeObjectURL(url);
}); });
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> </script>