timeline histo
This commit is contained in:
parent
dde9503e07
commit
e545165450
@ -143,3 +143,267 @@
|
|||||||
max-width: 300px !important;
|
max-width: 300px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========================================
|
||||||
|
Timeline pour historique bénéficiaire
|
||||||
|
======================================== */
|
||||||
|
|
||||||
|
.crvi-timeline {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding-left: 80px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event {
|
||||||
|
background: #f8f9fa;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 15px 30px -6px rgba(50, 50, 93, 0.15),
|
||||||
|
0 9px 18px -9px rgba(0, 0, 0, 0.2);
|
||||||
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 20px 40px -8px rgba(50, 50, 93, 0.2),
|
||||||
|
0 12px 24px -12px rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ligne verticale qui connecte les événements */
|
||||||
|
.crvi-timeline__event:after {
|
||||||
|
content: "";
|
||||||
|
width: 3px;
|
||||||
|
height: 100%;
|
||||||
|
background: #dee2e6;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: -57px;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cercle sur la ligne pour chaque événement */
|
||||||
|
.crvi-timeline__event:before {
|
||||||
|
content: "";
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
position: absolute;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 100%;
|
||||||
|
left: -82px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
border: 3px solid #dee2e6;
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Masquer la ligne après le dernier élément */
|
||||||
|
.crvi-timeline__event--last:after {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section icône/date à gauche */
|
||||||
|
.crvi-timeline__event__icon {
|
||||||
|
border-radius: 8px 0 0 8px;
|
||||||
|
background: #e9ecef;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-width: 120px;
|
||||||
|
padding: 20px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event__icon i {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #6c757d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event__date {
|
||||||
|
color: #495057;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contenu de l'événement */
|
||||||
|
.crvi-timeline__event__content {
|
||||||
|
padding: 20px;
|
||||||
|
flex-grow: 1;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 0 8px 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event__title {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #495057;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event__description {
|
||||||
|
color: #525f7f;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Type d'événement : Par défaut (gris clair) */
|
||||||
|
.crvi-timeline__event--default {
|
||||||
|
background: #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event--default:before {
|
||||||
|
background: #e9ecef;
|
||||||
|
border-color: #adb5bd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event--default:after {
|
||||||
|
background: #adb5bd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event--default .crvi-timeline__event__icon {
|
||||||
|
background: #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event--default .crvi-timeline__event__icon i {
|
||||||
|
color: #6c757d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event--default .crvi-timeline__event__date {
|
||||||
|
color: #495057;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event--default .crvi-timeline__event__title {
|
||||||
|
color: #495057;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Type d'événement : Prévu (bleu) */
|
||||||
|
.crvi-timeline__event--prevu {
|
||||||
|
background: #e7f1ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event--prevu:before {
|
||||||
|
background: #cfe2ff;
|
||||||
|
border-color: #0d6efd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event--prevu:after {
|
||||||
|
background: #0d6efd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event--prevu .crvi-timeline__event__icon {
|
||||||
|
background: #0d6efd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event--prevu .crvi-timeline__event__icon i {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event--prevu .crvi-timeline__event__date {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event--prevu .crvi-timeline__event__title {
|
||||||
|
color: #0d6efd;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Type d'événement : Présent (vert) */
|
||||||
|
.crvi-timeline__event--present {
|
||||||
|
background: #d1f4e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event--present:before {
|
||||||
|
background: #a3e7c2;
|
||||||
|
border-color: #198754;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event--present:after {
|
||||||
|
background: #198754;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event--present .crvi-timeline__event__icon {
|
||||||
|
background: #198754;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event--present .crvi-timeline__event__icon i {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event--present .crvi-timeline__event__date {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event--present .crvi-timeline__event__title {
|
||||||
|
color: #198754;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Type d'événement : Incident/Absence (rouge) */
|
||||||
|
.crvi-timeline__event--incident {
|
||||||
|
background: #ffe5e5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event--incident:before {
|
||||||
|
background: #ffccd5;
|
||||||
|
border-color: #dc3545;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event--incident:after {
|
||||||
|
background: #dc3545;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event--incident .crvi-timeline__event__icon {
|
||||||
|
background: #dc3545;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event--incident .crvi-timeline__event__icon i {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event--incident .crvi-timeline__event__date {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event--incident .crvi-timeline__event__title {
|
||||||
|
color: #dc3545;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.crvi-timeline {
|
||||||
|
padding-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event__icon {
|
||||||
|
border-radius: 8px 8px 0 0;
|
||||||
|
min-width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event__content {
|
||||||
|
border-radius: 0 0 8px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event:before {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
left: -42px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crvi-timeline__event:after {
|
||||||
|
left: -27px;
|
||||||
|
width: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,7 +1,7 @@
|
|||||||
// Module de gestion des boutons de la modale
|
// Module de gestion des boutons de la modale
|
||||||
// Contient les gestionnaires d'événements pour tous les boutons de la modale
|
// Contient les gestionnaires d'événements pour tous les boutons de la modale
|
||||||
|
|
||||||
import { deleteEvent, changeEventStatus } from './agenda-api.js';
|
import { deleteEvent, changeEventStatus, apiFetch } from './agenda-api.js';
|
||||||
import { notifyError, notifySuccess } from './agenda-notifications.js';
|
import { notifyError, notifySuccess } from './agenda-notifications.js';
|
||||||
import { populateSelects } from './agenda-modal-select.js';
|
import { populateSelects } from './agenda-modal-select.js';
|
||||||
import { fillFormWithEvent, clearFormErrors, handleEventFormSubmit } from './agenda-modal-forms.js';
|
import { fillFormWithEvent, clearFormErrors, handleEventFormSubmit } from './agenda-modal-forms.js';
|
||||||
@ -414,6 +414,140 @@ export function initializeReportIncidentButton(getCurrentEventData, openSubModal
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Charge l'historique des 3 derniers rendez-vous d'un bénéficiaire
|
||||||
|
* @param {number} beneficiaireId - ID du bénéficiaire
|
||||||
|
* @returns {Promise<Array>} Tableau des rendez-vous avec leurs incidents
|
||||||
|
*/
|
||||||
|
async function loadBeneficiaireHistorique(beneficiaireId) {
|
||||||
|
try {
|
||||||
|
const historique = await apiFetch(`beneficiaires/${beneficiaireId}/historique`);
|
||||||
|
return historique || [];
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erreur lors du chargement de l\'historique:', error);
|
||||||
|
notifyError('Erreur lors du chargement de l\'historique du bénéficiaire');
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Affiche l'historique sous forme de ligne du temps verticale
|
||||||
|
* @param {Array} historiqueData - Tableau des rendez-vous avec leurs incidents
|
||||||
|
*/
|
||||||
|
function displayHistoriqueTimeline(historiqueData) {
|
||||||
|
const timelineContainer = document.getElementById('historiqueTimeline');
|
||||||
|
if (!timelineContainer) {
|
||||||
|
console.error('Conteneur de timeline non trouvé');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!historiqueData || historiqueData.length === 0) {
|
||||||
|
timelineContainer.innerHTML = `
|
||||||
|
<div class="alert alert-info text-center">
|
||||||
|
<i class="fas fa-info-circle me-2"></i>
|
||||||
|
Aucun rendez-vous trouvé pour ce bénéficiaire.
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let html = '<div class="crvi-timeline">';
|
||||||
|
|
||||||
|
historiqueData.forEach((rdv, index) => {
|
||||||
|
const date = new Date(rdv.date_rdv + 'T' + rdv.heure_rdv);
|
||||||
|
const dateFormatted = date.toLocaleDateString('fr-FR', {
|
||||||
|
day: '2-digit',
|
||||||
|
month: '2-digit',
|
||||||
|
year: 'numeric'
|
||||||
|
});
|
||||||
|
const heureFormatted = date.toLocaleTimeString('fr-FR', {
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit'
|
||||||
|
});
|
||||||
|
|
||||||
|
const intervenantNom = rdv.intervenant
|
||||||
|
? `${rdv.intervenant.nom || ''} ${rdv.intervenant.prenom || ''}`.trim()
|
||||||
|
: 'Non renseigné';
|
||||||
|
|
||||||
|
const typeInterventionNom = rdv.type_intervention?.nom || 'Non renseigné';
|
||||||
|
|
||||||
|
// Déterminer le type d'événement et la couleur
|
||||||
|
const hasIncident = rdv.incident && rdv.incident.id;
|
||||||
|
const statutLower = rdv.statut ? rdv.statut.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "") : '';
|
||||||
|
|
||||||
|
let eventType = 'default';
|
||||||
|
let icon = 'fa-calendar-alt';
|
||||||
|
|
||||||
|
if (hasIncident || statutLower.includes('absence') || statutLower.includes('absent')) {
|
||||||
|
eventType = 'incident'; // Rouge
|
||||||
|
icon = 'fa-exclamation-triangle';
|
||||||
|
} else if (statutLower.includes('present')) {
|
||||||
|
eventType = 'present'; // Vert
|
||||||
|
icon = 'fa-check-circle';
|
||||||
|
} else if (statutLower.includes('prevu')) {
|
||||||
|
eventType = 'prevu'; // Bleu
|
||||||
|
icon = 'fa-clock';
|
||||||
|
} else {
|
||||||
|
eventType = 'default'; // Gris clair
|
||||||
|
icon = 'fa-calendar-alt';
|
||||||
|
}
|
||||||
|
|
||||||
|
const isLastItem = index === historiqueData.length - 1;
|
||||||
|
|
||||||
|
html += `
|
||||||
|
<div class="crvi-timeline__event crvi-timeline__event--${eventType} ${isLastItem ? 'crvi-timeline__event--last' : ''}">
|
||||||
|
<div class="crvi-timeline__event__icon">
|
||||||
|
<i class="fas ${icon}"></i>
|
||||||
|
<div class="crvi-timeline__event__date">
|
||||||
|
${dateFormatted}<br>${heureFormatted}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="crvi-timeline__event__content">
|
||||||
|
<div class="crvi-timeline__event__title">
|
||||||
|
${hasIncident ? '<i class="fas fa-exclamation-triangle me-2"></i>' : ''}
|
||||||
|
${rdv.type || 'Rendez-vous'}
|
||||||
|
</div>
|
||||||
|
<div class="crvi-timeline__event__description">
|
||||||
|
<div class="mb-2">
|
||||||
|
<strong><i class="fas fa-user-md me-2"></i>Intervenant:</strong> ${intervenantNom}
|
||||||
|
</div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<strong><i class="fas fa-tools me-2"></i>Type d'intervention:</strong> ${typeInterventionNom}
|
||||||
|
</div>
|
||||||
|
${rdv.statut ? `
|
||||||
|
<div class="mb-2">
|
||||||
|
<strong><i class="fas fa-info-circle me-2"></i>Statut:</strong>
|
||||||
|
<span class="badge bg-${eventType === 'present' ? 'success' : eventType === 'prevu' ? 'primary' : eventType === 'incident' ? 'danger' : 'secondary'}">${rdv.statut}</span>
|
||||||
|
</div>
|
||||||
|
` : ''}
|
||||||
|
${rdv.commentaire ? `
|
||||||
|
<div class="mb-2">
|
||||||
|
<strong><i class="fas fa-comment me-2"></i>Commentaire:</strong> ${rdv.commentaire}
|
||||||
|
</div>
|
||||||
|
` : ''}
|
||||||
|
${hasIncident ? `
|
||||||
|
<div class="alert alert-danger mt-3 mb-0">
|
||||||
|
<strong><i class="fas fa-exclamation-triangle me-2"></i>Incident signalé</strong>
|
||||||
|
<div class="mt-2">
|
||||||
|
<strong>Résumé:</strong> ${rdv.incident.resume_incident || 'Non renseigné'}
|
||||||
|
</div>
|
||||||
|
${rdv.incident.commentaire_incident ? `
|
||||||
|
<div class="mt-2">
|
||||||
|
<strong>Commentaire:</strong> ${rdv.incident.commentaire_incident}
|
||||||
|
</div>
|
||||||
|
` : ''}
|
||||||
|
</div>
|
||||||
|
` : ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
|
||||||
|
html += '</div>';
|
||||||
|
timelineContainer.innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Initialise le bouton "Historique bénéficiaire"
|
* Initialise le bouton "Historique bénéficiaire"
|
||||||
* @param {Function} getCurrentEventData - Fonction pour obtenir les données de l'événement
|
* @param {Function} getCurrentEventData - Fonction pour obtenir les données de l'événement
|
||||||
@ -450,8 +584,21 @@ export function initializeHistoriqueButton(getCurrentEventData, openSubModal) {
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Charger l'historique (la fonction doit être importée depuis agenda-modal.js)
|
// Charger l'historique
|
||||||
// Pour l'instant on laisse vide, le chargement sera fait dans le modal principal
|
try {
|
||||||
|
const historiqueData = await loadBeneficiaireHistorique(parseInt(beneficiaireId));
|
||||||
|
displayHistoriqueTimeline(historiqueData);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erreur lors du chargement de l\'historique:', error);
|
||||||
|
if (timelineContainer) {
|
||||||
|
timelineContainer.innerHTML = `
|
||||||
|
<div class="alert alert-danger">
|
||||||
|
<i class="fas fa-exclamation-triangle me-2"></i>
|
||||||
|
Erreur lors du chargement de l'historique.
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
(subModal) => {
|
(subModal) => {
|
||||||
// Nettoyer après fermeture
|
// Nettoyer après fermeture
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user