205 lines
9.1 KiB
JavaScript
205 lines
9.1 KiB
JavaScript
/**
|
|
* 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.
|
|
*
|
|
* 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.
|
|
*
|
|
* 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
|
|
* sans peser sur le quota annuel.
|
|
*/
|
|
(() => {
|
|
'use strict';
|
|
|
|
const PTA = window.PTA;
|
|
if (!PTA) throw new Error('PTA core doit être chargé avant pending-validation.js');
|
|
|
|
const { utils } = PTA;
|
|
const { readJsonResponse, apiErrorMessage, escapeHtml, formatDuration, formatDate } = utils;
|
|
|
|
const badge = document.querySelector('#pending-validation-tab-badge');
|
|
const refreshButton = document.querySelector('#refresh-pending-validation');
|
|
const countElement = document.querySelector('#pending-validation-count');
|
|
const hoursElement = document.querySelector('#pending-validation-hours');
|
|
const countedHoursElement = document.querySelector('#pending-validation-counted-hours');
|
|
const loadingElement = document.querySelector('#pending-validation-loading');
|
|
const emptyElement = document.querySelector('#pending-validation-empty');
|
|
const contentElement = document.querySelector('#pending-validation-content');
|
|
const bodyElement = document.querySelector('#pending-validation-body');
|
|
const messageElement = document.querySelector('#pending-validation-message');
|
|
|
|
let items = [];
|
|
let loading = false;
|
|
|
|
/** Recompose « 2026-W08 » depuis l'année et le numéro de semaine. */
|
|
function weekValue(item) {
|
|
return `${item.annee}-W${String(item.numero_semaine).padStart(2, '0')}`;
|
|
}
|
|
|
|
/**
|
|
* Horodatage SQL → date et heure en français.
|
|
* Le remplacement de l'espace par « T » rend la chaîne conforme à ISO 8601 ;
|
|
* une valeur non analysable est renvoyée telle quelle, échappée.
|
|
*/
|
|
function formatDateTime(value) {
|
|
if (!value) return '—';
|
|
const normalized = String(value).replace(' ', 'T');
|
|
const date = new Date(normalized);
|
|
if (Number.isNaN(date.getTime())) return escapeHtml(value);
|
|
return date.toLocaleString('fr-FR', {
|
|
day: '2-digit', month: '2-digit', year: 'numeric',
|
|
hour: '2-digit', minute: '2-digit',
|
|
});
|
|
}
|
|
|
|
/** Libellé du type de lieu. */
|
|
function structureTypeLabel(value) {
|
|
return value === 'EXTRASCOLAIRE' ? 'Extrascolaire' : 'Périscolaire';
|
|
}
|
|
|
|
/** Pastille de navigation, masquée quand la file est vide. */
|
|
function setBadge(count) {
|
|
if (!badge) return;
|
|
badge.textContent = String(count);
|
|
badge.hidden = count === 0;
|
|
badge.setAttribute('aria-label', `${count} planning${count > 1 ? 's' : ''} en attente de validation`);
|
|
}
|
|
|
|
function setMessage(text = '', type = 'info') {
|
|
if (!messageElement) return;
|
|
messageElement.className = text ? `message message-${type}` : 'message';
|
|
messageElement.textContent = text;
|
|
}
|
|
|
|
/** Rend le tableau de la file et ses compteurs de synthèse. */
|
|
function render(data) {
|
|
items = Array.isArray(data.plannings) ? data.plannings : [];
|
|
const summary = data.summary || {};
|
|
const count = Number(summary.count ?? items.length);
|
|
|
|
setBadge(count);
|
|
if (countElement) countElement.textContent = String(count);
|
|
if (hoursElement) hoursElement.textContent = formatDuration(Number(summary.total_minutes || 0));
|
|
if (countedHoursElement) countedHoursElement.textContent = formatDuration(Number(summary.counted_minutes || 0));
|
|
|
|
if (loadingElement) loadingElement.hidden = true;
|
|
if (emptyElement) emptyElement.hidden = items.length !== 0;
|
|
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('');
|
|
}
|
|
|
|
/**
|
|
* Recharge la file d'attente.
|
|
* @param {{silent?: boolean}} options `silent` pour les rafraîchissements
|
|
* déclenchés par un autre module, sans indicateur de chargement.
|
|
*/
|
|
async function refresh(options = {}) {
|
|
if (loading) return;
|
|
loading = true;
|
|
if (!options.silent) setMessage('');
|
|
if (loadingElement) {
|
|
loadingElement.hidden = false;
|
|
if (emptyElement) emptyElement.hidden = true;
|
|
if (contentElement) contentElement.hidden = true;
|
|
}
|
|
if (refreshButton) refreshButton.disabled = true;
|
|
|
|
try {
|
|
const response = await fetch('api/pending_plannings.php', { headers: { Accept: 'application/json' } });
|
|
const data = await readJsonResponse(response);
|
|
if (!response.ok) throw new Error(apiErrorMessage(data, 'Impossible de charger les plannings en attente de validation.'));
|
|
render(data);
|
|
} catch (error) {
|
|
if (loadingElement) loadingElement.hidden = true;
|
|
setMessage(error.message, 'error');
|
|
} finally {
|
|
loading = false;
|
|
if (refreshButton) refreshButton.disabled = false;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Ouvre l'écran de saisie sur ce planning.
|
|
* `focus=validation` fait défiler jusqu'aux boutons d'action : l'utilisateur
|
|
* vient pour valider, pas pour saisir.
|
|
*/
|
|
function openPlanning(item) {
|
|
if (!item) return;
|
|
const params = new URLSearchParams({
|
|
structure_id: String(item.id_structure),
|
|
agent_id: String(item.id_agent),
|
|
week: weekValue(item),
|
|
focus: 'validation',
|
|
notice: `Planning de ${item.agent_prenom} ${item.agent_nom} chargé depuis la file de validation.`,
|
|
});
|
|
window.location.href = `planning.php?${params.toString()}`;
|
|
}
|
|
|
|
/**
|
|
* Retrouve le planning correspondant à l'élément cliqué, via le
|
|
* `data-planning-id` porté par la ligne. Support de la délégation
|
|
* d'événements sur le corps du tableau.
|
|
*/
|
|
function findItemFromEventTarget(target) {
|
|
const trigger = target.closest('[data-planning-id]');
|
|
if (!trigger) return null;
|
|
const id = Number(trigger.dataset.planningId);
|
|
return items.find((item) => Number(item.id_planning) === id) || null;
|
|
}
|
|
|
|
function init() {
|
|
refreshButton?.addEventListener('click', () => refresh());
|
|
bodyElement?.addEventListener('click', (event) => {
|
|
const item = findItemFromEventTarget(event.target);
|
|
if (item) openPlanning(item);
|
|
});
|
|
bodyElement?.addEventListener('keydown', (event) => {
|
|
if (!['Enter', ' '].includes(event.key)) return;
|
|
if (event.target.closest('button')) return;
|
|
const row = event.target.closest('.pending-validation-row');
|
|
if (!row) return;
|
|
event.preventDefault();
|
|
const item = findItemFromEventTarget(row);
|
|
if (item) openPlanning(item);
|
|
});
|
|
|
|
refresh({ silent: true });
|
|
}
|
|
|
|
PTA.modules.pendingValidation = { init, refresh, openPlanning };
|
|
})();
|