feat: improve focus mode
This commit is contained in:
@@ -538,25 +538,8 @@ class AutoSaveManager {
|
||||
}
|
||||
|
||||
bindManualSaveButtons() {
|
||||
const saveButtons = document.querySelectorAll('[data-save-manual]');
|
||||
const finalizeButtons = document.querySelectorAll('[data-finalize]');
|
||||
|
||||
saveButtons.forEach(button => {
|
||||
const studentId = button.dataset.saveManual;
|
||||
button.addEventListener('click', () => {
|
||||
const textarea = document.querySelector(`[data-appreciation-textarea][data-student-id="${studentId}"]`);
|
||||
if (textarea) {
|
||||
this.queueSave(studentId, textarea.value, true);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
finalizeButtons.forEach(button => {
|
||||
const studentId = button.dataset.finalize;
|
||||
button.addEventListener('click', () => {
|
||||
this.finalizeAppreciation(studentId);
|
||||
});
|
||||
});
|
||||
// Boutons supprimés de l'interface - auto-sauvegarde uniquement
|
||||
console.log('📝 Auto-sauvegarde activée - Pas de boutons manuels');
|
||||
}
|
||||
|
||||
setupCharacterCounter(textarea, studentId) {
|
||||
@@ -1077,6 +1060,18 @@ class FocusManager {
|
||||
detailsSection.classList.remove('hidden');
|
||||
detailsSection.style.height = 'auto';
|
||||
detailsSection.style.opacity = '1';
|
||||
detailsSection.style.flex = '1';
|
||||
detailsSection.style.display = 'block';
|
||||
detailsSection.style.overflowY = 'auto';
|
||||
|
||||
// S'assurer que le contenu interne utilise Flexbox
|
||||
const innerContent = detailsSection.querySelector('.px-6.py-6.space-y-6');
|
||||
if (innerContent) {
|
||||
innerContent.style.display = 'flex';
|
||||
innerContent.style.flexDirection = 'column';
|
||||
innerContent.style.height = '100%';
|
||||
innerContent.style.gap = '1.5rem';
|
||||
}
|
||||
}
|
||||
|
||||
// Ajouter une classe spéciale pour le mode focus
|
||||
@@ -1094,6 +1089,9 @@ class FocusManager {
|
||||
// Réattacher TOUS les événements pour le nouvel élément focus
|
||||
this.bindFocusStudentEvents(clonedStudent, studentId);
|
||||
|
||||
// Assurer que toutes les sections sont visibles
|
||||
this.ensureAllSectionsVisible(clonedStudent);
|
||||
|
||||
// Focus automatique sur le textarea de l'appréciation
|
||||
this.focusAppreciationTextarea(clonedStudent);
|
||||
|
||||
@@ -1133,36 +1131,49 @@ class FocusManager {
|
||||
this.parent.autoSaveManager.setupCharacterCounter(textarea, studentId);
|
||||
}
|
||||
|
||||
// 2. Boutons de sauvegarde manuelle
|
||||
const saveButton = clonedStudent.querySelector(`[data-save-manual="${studentId}"]`);
|
||||
if (saveButton) {
|
||||
saveButton.addEventListener('click', () => {
|
||||
const textareaValue = clonedStudent.querySelector(`[data-appreciation-textarea][data-student-id="${studentId}"]`)?.value || '';
|
||||
console.log(`💾 Sauvegarde manuelle en focus pour élève ${studentId}`);
|
||||
this.saveFocusAppreciation(studentId, textareaValue, true);
|
||||
});
|
||||
}
|
||||
|
||||
// 3. Bouton de finalisation
|
||||
const finalizeButton = clonedStudent.querySelector(`[data-finalize="${studentId}"]`);
|
||||
if (finalizeButton) {
|
||||
finalizeButton.addEventListener('click', () => {
|
||||
const textareaValue = clonedStudent.querySelector(`[data-appreciation-textarea][data-student-id="${studentId}"]`)?.value || '';
|
||||
if (!textareaValue.trim()) {
|
||||
this.parent.showToast('Veuillez saisir une appréciation avant de finaliser', 'warning');
|
||||
return;
|
||||
}
|
||||
if (confirm('Finaliser cette appréciation ? Elle ne pourra plus être modifiée.')) {
|
||||
console.log(`✅ Finalisation en focus pour élève ${studentId}`);
|
||||
this.saveFocusAppreciation(studentId, textareaValue, true);
|
||||
}
|
||||
});
|
||||
}
|
||||
// 2. Boutons supprimés - auto-sauvegarde uniquement
|
||||
console.log(`🔧 Mode focus: Auto-sauvegarde configurée pour élève ${studentId}`);
|
||||
|
||||
// 4. Gestion des barres de progression
|
||||
this.setupProgressBars(clonedStudent);
|
||||
}
|
||||
|
||||
ensureAllSectionsVisible(clonedStudent) {
|
||||
console.log('🔍 Vérification de la visibilité de toutes les sections en mode focus');
|
||||
|
||||
// S'assurer que les sections compétences/domaines sont visibles
|
||||
const competenceSection = clonedStudent.querySelector('.competence-domain-section');
|
||||
if (competenceSection) {
|
||||
competenceSection.style.display = 'block';
|
||||
competenceSection.style.minHeight = '200px';
|
||||
competenceSection.style.flexShrink = '0';
|
||||
console.log('✅ Section compétences/domaines visible');
|
||||
}
|
||||
|
||||
// S'assurer que les barres de progression sont configurées
|
||||
const progressBars = clonedStudent.querySelectorAll('.progress-bar-container');
|
||||
progressBars.forEach(bar => {
|
||||
bar.style.display = 'block';
|
||||
});
|
||||
|
||||
// Section info supprimée - maintenant intégrée dans la zone d'appréciation
|
||||
console.log('✅ Informations intégrées dans la zone d\'appréciation');
|
||||
|
||||
// S'assurer que les résultats d'évaluation sont visibles
|
||||
const evaluationResults = clonedStudent.querySelector('.evaluation-results');
|
||||
if (evaluationResults) {
|
||||
evaluationResults.style.display = 'block';
|
||||
console.log('✅ Section résultats d\'évaluation visible');
|
||||
}
|
||||
|
||||
// S'assurer que la section progress-bars est visible
|
||||
const progressBarsSection = clonedStudent.querySelector('.progress-bars');
|
||||
if (progressBarsSection) {
|
||||
progressBarsSection.style.display = 'block';
|
||||
console.log('✅ Section barres de progression visible');
|
||||
}
|
||||
}
|
||||
|
||||
setupProgressBars(clonedStudent) {
|
||||
// Configure les interactions avec les barres de progression des compétences et domaines
|
||||
|
||||
@@ -1746,16 +1757,41 @@ class FocusManager {
|
||||
const student = focusContainer.querySelector('.focus-mode-student');
|
||||
if (!student) return;
|
||||
|
||||
// Calculer la hauteur disponible
|
||||
const windowHeight = window.innerHeight;
|
||||
const headerHeight = 200; // Approximation header + navigation + contrôles
|
||||
const maxHeight = windowHeight - headerHeight;
|
||||
|
||||
// Ajuster la hauteur de la carte
|
||||
student.style.maxHeight = `${maxHeight}px`;
|
||||
// Forcer explicitement la hauteur complète
|
||||
student.style.height = '100%';
|
||||
student.style.minHeight = '100%';
|
||||
student.style.maxHeight = 'none';
|
||||
student.style.display = 'flex';
|
||||
student.style.flexDirection = 'column';
|
||||
student.style.overflow = 'hidden';
|
||||
|
||||
// S'assurer que le header garde sa taille et ne grandit pas
|
||||
const headerContainer = student.querySelector('.px-6.py-4');
|
||||
if (headerContainer) {
|
||||
headerContainer.style.flexShrink = '0';
|
||||
headerContainer.style.flex = 'none';
|
||||
}
|
||||
|
||||
// S'assurer que la section détails utilise tout l'espace restant
|
||||
const detailsSection = student.querySelector('[data-student-details]');
|
||||
if (detailsSection) {
|
||||
detailsSection.style.flex = '1 1 0';
|
||||
detailsSection.style.height = '0'; // Force flexbox
|
||||
detailsSection.style.display = 'block';
|
||||
detailsSection.style.overflowY = 'auto';
|
||||
detailsSection.style.minHeight = '0';
|
||||
}
|
||||
|
||||
// Scroll vers le haut si nécessaire
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
// Debug des hauteurs
|
||||
const containerHeight = focusContainer.offsetHeight;
|
||||
const studentHeight = student.offsetHeight;
|
||||
console.log(`🎯 Mode focus optimisé:`);
|
||||
console.log(` Container height: ${containerHeight}px`);
|
||||
console.log(` Student height: ${studentHeight}px`);
|
||||
console.log(` Window height: ${window.innerHeight}px`);
|
||||
}
|
||||
|
||||
preserveJsonDataBeforeCloning(originalStudent) {
|
||||
|
||||
Reference in New Issue
Block a user