tomh104/nat-as-server
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

improved assign clients page ux
Some checks failed
PHPUnit / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Tom Hempel
2026-06-12 20:43:18 +02:00
parent cceec525c1
commit 59ea2cd667
2 changed files with 42 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
website/js/pages/assignments.js
View File

@ -10,8 +10,6 @@ let filterCoachSearch = '';
let clientsByCoach = {};
let clientPage = 0;
let selectedClientCodes = new Set();
let assignResizeObserver = null;
let assignClientRowHeight = 0;
export async function assignmentsPage() {
selectedCoachID = null;
@ -76,7 +74,6 @@ function renderAssignments() {
<div class="assign-panel-body">
<ul class="coach-list" id="coachList" role="listbox" aria-label="Filter by counselor"></ul>
</div>
<div class="assign-panel-footer assign-panel-footer--align" aria-hidden="true"></div>
</aside>
<section class="card assign-clients-card" aria-label="Clients">
@ -199,78 +196,6 @@ function renderAssignments() {
renderCoachList();
renderClientRows();
setupAssignPanelHeightSync();
}
function setupAssignPanelHeightSync() {
assignResizeObserver?.disconnect();
assignResizeObserver = null;
const clientCard = document.querySelector('.assign-clients-card');
if (!clientCard || typeof ResizeObserver === 'undefined') {
syncAssignLayoutHeights();
return;
}
assignResizeObserver = new ResizeObserver(() => syncAssignLayoutHeights());
assignResizeObserver.observe(clientCard);
syncAssignLayoutHeights();
}
function syncAssignClientTableHeight() {
const wrapper = document.querySelector('.assign-table-panel .table-wrapper');
const table = wrapper?.querySelector('table.data-table');
if (!wrapper || !table) return;
const headerH = table.querySelector('thead')?.offsetHeight ?? 40;
const bodyRows = [...table.querySelectorAll('tbody tr')];
const dataRows = bodyRows.filter(tr => !tr.querySelector('td[colspan]'));
let rowH = assignClientRowHeight;
if (dataRows.length) {
rowH = dataRows[0].offsetHeight;
assignClientRowHeight = rowH;
} else if (bodyRows.length) {
rowH = bodyRows[0].offsetHeight;
} else if (!rowH) {
rowH = 44;
}
const rowCount = dataRows.length || 1;
const bodyH = rowH * Math.min(rowCount, CLIENT_PAGE_SIZE);
const maxH = rowH * CLIENT_PAGE_SIZE;
wrapper.style.height = `${headerH + bodyH}px`;
wrapper.style.maxHeight = `${headerH + maxH}px`;
wrapper.style.overflowY = 'auto';
}
function syncAssignCoachPanelHeight() {
const coachCard = document.querySelector('.assign-coaches');
const clientCard = document.querySelector('.assign-clients-card');
const coachBody = document.querySelector('.assign-coaches .assign-panel-body');
const clientTablePanel = document.querySelector('.assign-table-panel');
const coachFooter = document.querySelector('.assign-coaches .assign-panel-footer--align');
const clientFooter = document.querySelector('.assign-clients-footer');
if (clientFooter && coachFooter) {
coachFooter.style.height = `${clientFooter.offsetHeight}px`;
}
if (coachBody && clientTablePanel) {
const h = clientTablePanel.offsetHeight;
coachBody.style.height = `${h}px`;
coachBody.style.maxHeight = `${h}px`;
}
if (coachCard && clientCard) {
coachCard.style.minHeight = `${clientCard.offsetHeight}px`;
}
}
function syncAssignLayoutHeights() {
requestAnimationFrame(() => {
syncAssignClientTableHeight();
requestAnimationFrame(() => syncAssignCoachPanelHeight());
});
}
function getFilteredCoaches() {
@ -424,7 +349,6 @@ function renderClientRows() {
});
syncSelectAllCb();
updateSelectionInfo();
syncAssignCoachPanelHeight();
return;
}
@ -460,7 +384,6 @@ function renderClientRows() {
});
syncSelectAllCb(slice.map(c => c.clientCode));
updateSelectionInfo();
syncAssignLayoutHeights();
}
function getSelectedCodes() {
@ -488,7 +411,6 @@ function updateSelectionInfo() {
const sel = document.getElementById('targetCoachSelect');
if (sel) sel.value = selectedCoachID;
}
syncAssignLayoutHeights();
}
async function doAssign() {