240 lines
8.5 KiB
JavaScript
240 lines
8.5 KiB
JavaScript
import { apiGet, apiPost, apiDelete } from '../api.js';
|
|
import { showToast } from '../app.js';
|
|
|
|
let clientsList = [];
|
|
let coachesList = [];
|
|
|
|
export async function clientsPage() {
|
|
const app = document.getElementById('app');
|
|
|
|
app.innerHTML = `
|
|
<div class="page-header">
|
|
<h1>Clients</h1>
|
|
<div class="actions">
|
|
<button class="btn btn-sm" id="exportAllBtn">Download all client data</button>
|
|
<button class="btn btn-primary" id="showCreateFormBtn">+ Create Client</button>
|
|
</div>
|
|
</div>
|
|
<div id="createClientWrapper" style="display:none"></div>
|
|
<div id="clientsContent"><div class="spinner"></div></div>
|
|
`;
|
|
|
|
document.getElementById('exportAllBtn').addEventListener('click', () => downloadClientExport('clients/export_all'));
|
|
|
|
document.getElementById('showCreateFormBtn').addEventListener('click', () => {
|
|
const wrapper = document.getElementById('createClientWrapper');
|
|
if (wrapper.style.display === 'none') {
|
|
showCreateForm();
|
|
} else {
|
|
hideCreateForm();
|
|
}
|
|
});
|
|
|
|
await loadClients();
|
|
}
|
|
|
|
async function loadClients() {
|
|
try {
|
|
const [clientsData, assignData] = await Promise.all([
|
|
apiGet('clients.php'),
|
|
apiGet('assignments.php'),
|
|
]);
|
|
clientsList = clientsData.clients || [];
|
|
coachesList = assignData.coaches || [];
|
|
renderClients();
|
|
} catch (e) {
|
|
showToast(e.message, 'error');
|
|
document.getElementById('clientsContent').innerHTML =
|
|
`<p class="error-text" style="padding:16px">${esc(e.message)}</p>`;
|
|
}
|
|
}
|
|
|
|
function renderClients() {
|
|
const container = document.getElementById('clientsContent');
|
|
|
|
if (!clientsList.length) {
|
|
container.innerHTML = `
|
|
<div class="card">
|
|
<div class="empty-state">
|
|
<h3>No clients found</h3>
|
|
<p>Create the first client above.</p>
|
|
</div>
|
|
</div>`;
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = `
|
|
<div class="card">
|
|
<div class="table-wrapper">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Client Code</th>
|
|
<th>Current Coach</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${clientsList.map(c => clientRowHTML(c)).join('')}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>`;
|
|
|
|
container.querySelectorAll('.delete-client-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => deleteClient(btn.dataset.code));
|
|
});
|
|
container.querySelectorAll('.download-client-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => downloadClientExport(`clients/export?clientCode=${encodeURIComponent(btn.dataset.code)}`));
|
|
});
|
|
}
|
|
|
|
async function downloadClientExport(endpoint) {
|
|
try {
|
|
const token = localStorage.getItem('qdb_token');
|
|
const res = await fetch(`../api/${endpoint}`, {
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
});
|
|
if (!res.ok) {
|
|
const err = await res.json().catch(() => ({ error: { message: 'Download failed' } }));
|
|
throw new Error(err.error?.message || err.error || 'Download failed');
|
|
}
|
|
const blob = await res.blob();
|
|
const disposition = res.headers.get('Content-Disposition') || '';
|
|
const match = disposition.match(/filename="([^"]+)"/);
|
|
const filename = match ? match[1] : 'client_export.csv';
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = filename;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
showToast('Download started', 'success');
|
|
} catch (e) {
|
|
showToast(e.message, 'error');
|
|
}
|
|
}
|
|
|
|
function clientRowHTML(c) {
|
|
const coach = c.coachUsername
|
|
? `<strong>${esc(c.coachUsername)}</strong>`
|
|
: `<span style="color:var(--text-secondary);font-style:italic">Unassigned</span>`;
|
|
|
|
return `
|
|
<tr>
|
|
<td><strong>${esc(c.clientCode)}</strong></td>
|
|
<td>${coach}</td>
|
|
<td>
|
|
<button class="btn btn-sm download-client-btn" data-code="${esc(c.clientCode)}">Download</button>
|
|
<button class="btn btn-sm btn-danger delete-client-btn" data-code="${esc(c.clientCode)}">Delete</button>
|
|
</td>
|
|
</tr>`;
|
|
}
|
|
|
|
async function deleteClient(clientCode) {
|
|
if (!confirm(`Delete client "${clientCode}"? This will also remove all their answers and results. This cannot be undone.`)) return;
|
|
try {
|
|
await apiDelete('clients.php', { clientCode });
|
|
clientsList = clientsList.filter(c => c.clientCode !== clientCode);
|
|
showToast(`Client "${clientCode}" deleted`, 'success');
|
|
renderClients();
|
|
} catch (e) {
|
|
showToast(e.message, 'error');
|
|
}
|
|
}
|
|
|
|
function showCreateForm() {
|
|
if (!coachesList.length) {
|
|
showToast('No coaches available. Create a coach first.', 'error');
|
|
return;
|
|
}
|
|
|
|
const wrapper = document.getElementById('createClientWrapper');
|
|
wrapper.style.display = '';
|
|
wrapper.innerHTML = `
|
|
<div class="inline-form-card" style="margin-bottom:20px">
|
|
<h4>Create New Client</h4>
|
|
<div class="form-row">
|
|
<div class="form-group" style="flex:2">
|
|
<label>Client Code</label>
|
|
<input type="text" id="cc_code" autocomplete="off" placeholder="Enter unique client code">
|
|
</div>
|
|
<div class="form-group" style="flex:2">
|
|
<label>Assign to Coach</label>
|
|
<select id="cc_coach">
|
|
<option value="">— select coach —</option>
|
|
${coachesList.map(c =>
|
|
`<option value="${c.coachID}">${esc(c.username)}${c.supervisorUsername ? ` (${esc(c.supervisorUsername)})` : ''}</option>`
|
|
).join('')}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;gap:8px">
|
|
<button class="btn btn-primary btn-sm" id="cc_submit">Create Client</button>
|
|
<button class="btn btn-sm" id="cc_cancel">Cancel</button>
|
|
</div>
|
|
<p id="cc_error" class="error-text" style="display:none;margin-top:8px"></p>
|
|
</div>
|
|
`;
|
|
|
|
const input = document.getElementById('cc_code');
|
|
input.focus();
|
|
wrapper.querySelectorAll('input').forEach(inp => {
|
|
inp.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter') submitCreateClient();
|
|
if (e.key === 'Escape') hideCreateForm();
|
|
});
|
|
});
|
|
|
|
document.getElementById('cc_submit').addEventListener('click', submitCreateClient);
|
|
document.getElementById('cc_cancel').addEventListener('click', hideCreateForm);
|
|
}
|
|
|
|
function hideCreateForm() {
|
|
const wrapper = document.getElementById('createClientWrapper');
|
|
if (wrapper) { wrapper.style.display = 'none'; wrapper.innerHTML = ''; }
|
|
}
|
|
|
|
async function submitCreateClient() {
|
|
const errEl = document.getElementById('cc_error');
|
|
errEl.style.display = 'none';
|
|
|
|
const clientCode = document.getElementById('cc_code').value.trim();
|
|
const coachID = document.getElementById('cc_coach').value;
|
|
|
|
if (!clientCode) { showError(errEl, 'Client code is required'); return; }
|
|
if (!coachID) { showError(errEl, 'Please select a coach'); return; }
|
|
|
|
const btn = document.getElementById('cc_submit');
|
|
btn.disabled = true;
|
|
btn.textContent = 'Creating...';
|
|
|
|
try {
|
|
const data = await apiPost('clients.php', { clientCode, coachID });
|
|
const coach = coachesList.find(c => c.coachID === coachID);
|
|
clientsList.push({
|
|
clientCode: data.clientCode,
|
|
coachID: coachID,
|
|
coachUsername: coach?.username ?? null,
|
|
});
|
|
showToast(`Client "${data.clientCode}" created`, 'success');
|
|
hideCreateForm();
|
|
renderClients();
|
|
} catch (e) {
|
|
showError(errEl, e.message);
|
|
btn.disabled = false;
|
|
btn.textContent = 'Create Client';
|
|
}
|
|
}
|
|
|
|
function showError(el, msg) {
|
|
el.textContent = msg;
|
|
el.style.display = '';
|
|
}
|
|
|
|
function esc(s) {
|
|
const d = document.createElement('div');
|
|
d.textContent = s ?? '';
|
|
return d.innerHTML;
|
|
}
|