fix: replace deprecated HTML attributes and reduce JS nesting

- Replace email layout tables with CSS divs in base.html.twig
- Replace deprecated width/align attributes with CSS styles in PDF templates
- Add role="presentation" to email layout tables
- Convert td to th[scope=row] in profil and attestation verify tables
- Reduce function nesting in app.js by extracting renderHit/performSearch

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Serreau Jovann
2026-04-01 19:36:42 +02:00
parent 5f144ba4d2
commit 242f8337e1
10 changed files with 67 additions and 85 deletions

View File

@@ -4,27 +4,18 @@ import "./app.scss"
document.addEventListener('DOMContentLoaded', () => {
const memberCheckbox = document.querySelector('input[value="gp_member"]');
const adminCheckbox = document.querySelector('input[value="super_admin_asso"]');
const otherGroupCheckboxes = () =>
[...document.querySelectorAll('input[name="groups[]"]')].filter(cb => cb !== memberCheckbox);
if (memberCheckbox && adminCheckbox) {
memberCheckbox.addEventListener('change', () => {
if (memberCheckbox.checked) {
document.querySelectorAll('input[name="groups[]"]').forEach(cb => {
if (cb !== memberCheckbox) {
cb.checked = false;
}
});
}
if (memberCheckbox.checked) otherGroupCheckboxes().forEach(cb => { cb.checked = false; });
});
adminCheckbox.addEventListener('change', () => {
if (adminCheckbox.checked) {
memberCheckbox.checked = false;
document.querySelectorAll('input[name="groups[]"]').forEach(cb => {
if (cb !== memberCheckbox) {
cb.checked = true;
}
});
}
if (!adminCheckbox.checked) return;
memberCheckbox.checked = false;
otherGroupCheckboxes().forEach(cb => { cb.checked = true; });
});
}
@@ -105,6 +96,22 @@ document.addEventListener('DOMContentLoaded', () => {
});
// Search (customers & revendeurs)
const renderHit = (h, linkPrefix) =>
`<a href="${linkPrefix}${h.id}" class="block px-4 py-2 hover:bg-gray-50 border-b border-gray-100 text-xs">
<span class="font-bold">${h.fullName || h.raisonSociale || (h.firstName + ' ' + h.lastName)}</span>
${h.email ? `<span class="text-gray-400 ml-2">${h.email}</span>` : ''}
${h.codeRevendeur ? `<span class="ml-2 px-1 py-0.5 bg-gray-900 text-[#fabf04] text-[9px] font-bold">${h.codeRevendeur}</span>` : ''}
</a>`;
const performSearch = async (searchUrl, linkPrefix, results, q) => {
const resp = await fetch(`${searchUrl}?q=${encodeURIComponent(q)}`);
const hits = await resp.json();
results.innerHTML = hits.length === 0
? '<div class="px-4 py-3 text-xs text-gray-400">Aucun resultat.</div>'
: hits.map(h => renderHit(h, linkPrefix)).join('');
results.classList.remove('hidden');
};
const setupSearch = (inputId, resultsId, searchUrl, linkPrefix) => {
const input = document.getElementById(inputId);
const results = document.getElementById(resultsId);
@@ -119,22 +126,7 @@ document.addEventListener('DOMContentLoaded', () => {
results.innerHTML = '';
return;
}
debounce = setTimeout(async () => {
const resp = await fetch(`${searchUrl}?q=${encodeURIComponent(q)}`);
const hits = await resp.json();
if (hits.length === 0) {
results.innerHTML = '<div class="px-4 py-3 text-xs text-gray-400">Aucun resultat.</div>';
} else {
results.innerHTML = hits.map(h =>
`<a href="${linkPrefix}${h.id}" class="block px-4 py-2 hover:bg-gray-50 border-b border-gray-100 text-xs">
<span class="font-bold">${h.fullName || h.raisonSociale || (h.firstName + ' ' + h.lastName)}</span>
${h.email ? `<span class="text-gray-400 ml-2">${h.email}</span>` : ''}
${h.codeRevendeur ? `<span class="ml-2 px-1 py-0.5 bg-gray-900 text-[#fabf04] text-[9px] font-bold">${h.codeRevendeur}</span>` : ''}
</a>`
).join('');
}
results.classList.remove('hidden');
}, 300);
debounce = setTimeout(() => performSearch(searchUrl, linkPrefix, results, q), 300);
});
document.addEventListener('click', (e) => {