Add conditional preview generation for CID group types in user details
This commit is contained in:
Ross
@@ -37,6 +37,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if group_type == 'cid' %}
|
||||
<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">
|
||||
{% csrf_token %}
|
||||
@@ -48,6 +49,7 @@
|
||||
</form>
|
||||
<div id="cid-generate-preview"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div id="group-users-wrap">
|
||||
{% if users %}
|
||||
|
||||
@@ -48,89 +48,89 @@
|
||||
</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 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>
|
||||
<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);
|
||||
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, '&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
|
||||
}
|
||||
|
||||
showBtn.addEventListener('click', function(){
|
||||
buildTable();
|
||||
bsModal.show();
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
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);
|
||||
function escapeHtml(s){
|
||||
if(!s) return '';
|
||||
return s.toString().replace(/&/g, '&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
|
||||
}
|
||||
|
||||
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>
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user