lmasi/pta
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modification page "A valider" pour regrouper les créneaux des agents

Browse Source
This commit is contained in:
PTA
2026-08-21 11:44:08 +02:00
parent 94e7f09eb4
commit b3e53f83b8
7 changed files with 260 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
assets/js/pending-validation.js
View File

@@ -1,13 +1,22 @@
/**
* File des plannings à valider (`PTA.modules.pendingValidation`), écran pending.php.
*
* Liste les brouillons NON VIDES, du plus ancien au plus récent — l'ordre de
* traitement attendu, garanti par l'API. Cliquer sur une ligne ouvre l'écran de
* saisie positionné sur ce planning, défilé jusqu'aux boutons d'action.
* L'API renvoie un brouillon NON VIDE par ligne, du plus ancien au plus récent
* — l'ordre de traitement attendu. Le module REGROUPE ces lignes PAR AGENT :
* une ligne par agent (nom, lieu d'affectation, nombre de semaines), dépliable
* sur le détail semaine par semaine. C'est le seul niveau de regroupement :
* un agent planifié sur plusieurs lieux la même période reste une seule ligne,
* la colonne « lieu » énumère alors ses lieux.
*
* L'ordre des agents suit celui de l'API : le premier agent est celui qui porte
* le brouillon le plus ancien. Ouvrir une semaine ouvre l'écran de saisie
* positionné sur ce planning, défilé jusqu'aux boutons d'action.
*
* Ce module est aussi rafraîchi en mode silencieux par l'éditeur de planning
* après chaque enregistrement ou validation, et alimente la pastille « À
* valider » de la barre de navigation.
* valider » de la barre de navigation. Les agents dépliés le restent d'un
* rafraîchissement à l'autre (`expandedAgents`), sans quoi une validation
* refermerait la liste sous les yeux de l'utilisateur.
*
* Deux totaux distincts sont affichés : les heures SAISIES et les heures
* DÉCOMPTÉES du quota. Congés et absences non décomptées figurent au planning
@@ -25,6 +34,7 @@
const badge = document.querySelector('#pending-validation-tab-badge');
const refreshButton = document.querySelector('#refresh-pending-validation');
const countElement = document.querySelector('#pending-validation-count');
const agentsElement = document.querySelector('#pending-validation-agents');
const hoursElement = document.querySelector('#pending-validation-hours');
const countedHoursElement = document.querySelector('#pending-validation-counted-hours');
const loadingElement = document.querySelector('#pending-validation-loading');
@@ -34,7 +44,10 @@
const messageElement = document.querySelector('#pending-validation-message');
let items = [];
let groups = [];
let loading = false;
/** Agents dépliés, conservés entre deux rendus. */
const expandedAgents = new Set();
/** Recompose « 2026-W08 » depuis l'année et le numéro de semaine. */
function weekValue(item) {
@@ -76,14 +89,139 @@
messageElement.textContent = text;
}
/**
* Regroupe les plannings par agent en conservant l'ordre d'arrivée : le
* premier groupe est donc celui du brouillon le plus ancien, et à
* l'intérieur d'un groupe les semaines restent chronologiques.
*/
function groupByAgent(list) {
const byAgent = new Map();
list.forEach((item) => {
const agentId = Number(item.id_agent);
let group = byAgent.get(agentId);
if (!group) {
group = {
id_agent: agentId,
agent_nom: item.agent_nom,
agent_prenom: item.agent_prenom,
matricule: item.matricule || '',
structures: new Map(),
plannings: [],
total_minutes: 0,
minutes_decomptees: 0,
nombre_creneaux: 0,
date_modification: null,
};
byAgent.set(agentId, group);
}
group.plannings.push(item);
group.total_minutes += Number(item.total_minutes || 0);
group.minutes_decomptees += Number(item.minutes_decomptees || 0);
group.nombre_creneaux += Number(item.nombre_creneaux || 0);
if (!group.structures.has(Number(item.id_structure))) {
group.structures.set(Number(item.id_structure), {
nom: item.structure_nom,
type: item.structure_type_affectation,
});
}
if (!group.date_modification || String(item.date_modification) > String(group.date_modification)) {
group.date_modification = item.date_modification;
}
});
return [...byAgent.values()];
}
/** Colonne « lieu » : le lieu unique, ou l'énumération des lieux concernés. */
function structureCell(group) {
const structures = [...group.structures.values()];
if (structures.length === 1) {
return `<strong>${escapeHtml(structures[0].nom)}</strong>
<small>${escapeHtml(structureTypeLabel(structures[0].type))}</small>`;
}
return `<strong>${structures.length} lieux</strong>
<small>${escapeHtml(structures.map((structure) => structure.nom).join(' · '))}</small>`;
}
/** Une semaine du détail déplié. */
function weekRow(item) {
const week = weekValue(item);
const rowId = Number(item.id_planning);
return `
<li class="pending-week-item" data-planning-id="${rowId}">
<div class="pending-week-main">
<strong>Semaine ${Number(item.numero_semaine)}</strong>
<small>${formatDate(item.date_debut)} → ${formatDate(item.date_fin_ouvrable || item.date_fin)}</small>
</div>
<div class="pending-week-structure">
<strong>${escapeHtml(item.structure_nom)}</strong>
<small>${escapeHtml(structureTypeLabel(item.structure_type_affectation))}</small>
</div>
<div class="pending-week-volume">
<strong>${formatDuration(Number(item.total_minutes || 0))}</strong>
<small>${Number(item.nombre_creneaux)} créneau(x) · ${formatDuration(Number(item.minutes_decomptees || 0))} décomptées</small>
</div>
<div class="pending-week-modified">
<small>Modifié le ${formatDateTime(item.date_modification)}</small>
</div>
<div class="pending-week-action">
<button class="button button-success open-pending-planning" type="button" data-planning-id="${rowId}"
aria-label="Ouvrir le planning de ${escapeHtml(item.agent_prenom)} ${escapeHtml(item.agent_nom)} pour la semaine ${escapeHtml(week)}">Consulter et valider</button>
</div>
</li>`;
}
/** Ligne d'agent + ligne de détail associée (masquée si l'agent est replié). */
function agentRows(group) {
const expanded = expandedAgents.has(group.id_agent);
const weeks = group.plannings.length;
const identite = `${escapeHtml(group.agent_prenom)} ${escapeHtml(group.agent_nom)}`;
return `
<tr class="pending-validation-row${expanded ? ' is-expanded' : ''}" data-agent-id="${group.id_agent}"
tabindex="0" role="button" aria-expanded="${expanded ? 'true' : 'false'}"
aria-label="${expanded ? 'Replier' : 'Déplier'} les ${weeks} semaine(s) à valider de ${identite}">
<td>
<strong>${identite}</strong>
<small>${escapeHtml(group.matricule)}</small>
</td>
<td>${structureCell(group)}</td>
<td>
<span class="pending-count-chip">${weeks}</span>
<small>${group.nombre_creneaux} créneau(x)</small>
</td>
<td>
<strong>${formatDuration(group.total_minutes)}</strong>
<small>${formatDuration(group.minutes_decomptees)} décomptées</small>
</td>
<td>${formatDateTime(group.date_modification)}</td>
<td class="pending-validation-action-cell">
<span class="pending-toggle-hint">${expanded ? 'Masquer le détail' : 'Voir le détail'}</span>
<span class="pending-toggle-chevron" aria-hidden="true">${expanded ? '▲' : '▼'}</span>
</td>
</tr>
<tr class="pending-validation-detail-row" data-agent-detail-id="${group.id_agent}"${expanded ? '' : ' hidden'}>
<td colspan="6">
<ul class="pending-week-list">${group.plannings.map(weekRow).join('')}</ul>
</td>
</tr>`;
}
/** Rend le tableau de la file et ses compteurs de synthèse. */
function render(data) {
items = Array.isArray(data.plannings) ? data.plannings : [];
groups = groupByAgent(items);
const summary = data.summary || {};
const count = Number(summary.count ?? items.length);
// Un agent replié entre-temps ne doit pas rester dans le jeu d'agents
// dépliés : ses plannings ont pu être validés depuis.
const presents = new Set(groups.map((group) => group.id_agent));
[...expandedAgents].forEach((agentId) => {
if (!presents.has(agentId)) expandedAgents.delete(agentId);
});
setBadge(count);
if (countElement) countElement.textContent = String(count);
if (agentsElement) agentsElement.textContent = String(groups.length);
if (hoursElement) hoursElement.textContent = formatDuration(Number(summary.total_minutes || 0));
if (countedHoursElement) countedHoursElement.textContent = formatDuration(Number(summary.counted_minutes || 0));
@@ -92,34 +230,7 @@
if (contentElement) contentElement.hidden = items.length === 0;
if (!bodyElement) return;
bodyElement.innerHTML = items.map((item) => {
const week = weekValue(item);
const rowId = Number(item.id_planning);
return `
<tr class="pending-validation-row" data-planning-id="${rowId}" tabindex="0" role="button" aria-label="Ouvrir le planning de ${escapeHtml(item.agent_prenom)} ${escapeHtml(item.agent_nom)} pour la semaine ${escapeHtml(week)}">
<td>
<strong>${escapeHtml(item.agent_prenom)} ${escapeHtml(item.agent_nom)}</strong>
<small>${escapeHtml(item.matricule || '')}</small>
</td>
<td>
<strong>${escapeHtml(item.structure_nom)}</strong>
<small>${escapeHtml(structureTypeLabel(item.structure_type_affectation))}</small>
</td>
<td>
<strong>Semaine ${Number(item.numero_semaine)}</strong>
<small>${formatDate(item.date_debut)} → ${formatDate(item.date_fin_ouvrable || item.date_fin)}</small>
</td>
<td><span class="pending-count-chip">${Number(item.nombre_creneaux)}</span></td>
<td>
<strong>${formatDuration(Number(item.total_minutes || 0))}</strong>
<small>${formatDuration(Number(item.minutes_decomptees || 0))} décomptées</small>
</td>
<td>${formatDateTime(item.date_modification)}</td>
<td class="pending-validation-action-cell">
<button class="button button-success open-pending-planning" type="button" data-planning-id="${rowId}">Consulter et valider</button>
</td>
</tr>`;
}).join('');
bodyElement.innerHTML = groups.map(agentRows).join('');
}
/**
@@ -169,9 +280,29 @@
window.location.href = `planning.php?${params.toString()}`;
}
/** Déplie ou replie un agent, sans recharger la file. */
function toggleAgent(agentId, row) {
const expanded = expandedAgents.has(agentId);
if (expanded) expandedAgents.delete(agentId);
else expandedAgents.add(agentId);
const group = groups.find((candidate) => candidate.id_agent === agentId);
const identite = group ? `${group.agent_prenom} ${group.agent_nom}` : '';
const weeks = group ? group.plannings.length : 0;
row.classList.toggle('is-expanded', !expanded);
row.setAttribute('aria-expanded', expanded ? 'false' : 'true');
row.setAttribute('aria-label', `${expanded ? 'Déplier' : 'Replier'} les ${weeks} semaine(s) à valider de ${identite}`);
const hint = row.querySelector('.pending-toggle-hint');
if (hint) hint.textContent = expanded ? 'Voir le détail' : 'Masquer le détail';
const chevron = row.querySelector('.pending-toggle-chevron');
if (chevron) chevron.textContent = expanded ? '▼' : '▲';
const detail = bodyElement?.querySelector(`[data-agent-detail-id="${agentId}"]`);
if (detail) detail.hidden = expanded;
}
/**
* Retrouve le planning correspondant à l'élément cliqué, via le
* `data-planning-id` porté par la ligne. Support de la délégation
* `data-planning-id` porté par la semaine. Support de la délégation
* d'événements sur le corps du tableau.
*/
function findItemFromEventTarget(target) {
@@ -185,7 +316,12 @@
refreshButton?.addEventListener('click', () => refresh());
bodyElement?.addEventListener('click', (event) => {
const item = findItemFromEventTarget(event.target);
if (item) openPlanning(item);
if (item) {
openPlanning(item);
return;
}
const row = event.target.closest('.pending-validation-row');
if (row) toggleAgent(Number(row.dataset.agentId), row);
});
bodyElement?.addEventListener('keydown', (event) => {
if (!['Enter', ' '].includes(event.key)) return;
@@ -193,8 +329,7 @@
const row = event.target.closest('.pending-validation-row');
if (!row) return;
event.preventDefault();
const item = findItemFromEventTarget(row);
if (item) openPlanning(item);
toggleAgent(Number(row.dataset.agentId), row);
});
refresh({ silent: true });