Gestion de l'affichage des appréciations individuelles dans le tableau de bord

main/templates/resultat_appreciations.html

@@ -69,6 +69,24 @@ body, .bg-light {
                 color: #23272b !important;
                 border: 1px solid #444c56 !important;
             }
+            .btn-outline-primary, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary:hover {
+                color: #23272b !important;
+                background-color: #ffe082 !important;
+                border-color: #ffe082 !important;
+                box-shadow: none !important;
+            }
+            .btn-outline-primary:disabled, .btn-outline-primary.disabled {
+                color: #bdbdbd !important;
+                background-color: #444c56 !important;
+                border-color: #444c56 !important;
+            }
+        }
+        #bulletinModal .modal-content, #bulletinModal .modal-body, #bulletinModal .modal-header {
+            background-color: #fff !important;
+            color: #23272b !important;
+        }
+        #bulletinModal .modal-title {
+            color: #23272b !important;
         }
     </style>
 </head>
@@ -108,7 +126,7 @@ body, .bg-light {
                             </div>
                             <div class="mb-3 d-flex gap-2">
                                 <button id="generation-toggle" class="btn btn-primary mb-3">Lancer la génération</button>
-                                <button id="export-pdf" class="btn btn-secondary mb-3" type="button" onclick="exportTableToPDF()">Exporter en PDF</button>
+                                <button id="export-pdf" class="btn btn-primary mb-3" type="button" onclick="exportTableToPDF()">Exporter en PDF</button>
                             </div>
                             <div id="credit-alert" class="alert alert-danger d-none" role="alert">
                                 Vous n'avez plus de crédits pour générer des appréciations.
@@ -127,7 +145,12 @@ body, .bg-light {
                                             <tr>
                                                 <td class="eleve" style="width:1%; white-space:nowrap;">{{ appreciation.eleve }}</td>
                                                 <td class="appreciation"></td>
-                                            <td style="width:1%; text-align:center;"><button class="btn btn-outline-primary btn-sm action-generate" type="button">Générer</button></td>
+                                                <td style="width:1%; text-align:center; vertical-align:middle;">
+                                                    <div class="d-flex justify-content-center gap-2">
+                                                        <button class="btn btn-outline-primary btn-sm action-generate w-100" type="button">Générer</button>
+                                                        <button class="btn btn-outline-primary btn-sm action-bulletin w-100" type="button" data-eleve="{{ appreciation.eleve }}">Bulletin</button>
+                                                    </div>
+                                                </td>
                                             </tr>
                                         {% endfor %}
                                     {% else %}
@@ -137,6 +160,23 @@ body, .bg-light {
                                     {% endif %}
                                 </tbody>
                             </table>
+                            <!-- Injection des appréciations dans une variable JS globale pour accès rapide -->
+                            <script id="appreciations-data" type="application/json">
+                                {{ appreciations_json|safe }}
+                            </script>
+                            <script>
+                                window.allAppreciations = {};
+                                try {
+                                    const appreciationsList = JSON.parse(document.getElementById('appreciations-data').textContent);
+                                    appreciationsList.forEach(eleve => {
+                                        let appreciations = eleve.appreciations;
+                                        if (typeof appreciations === 'string') {
+                                            try { appreciations = JSON.parse(appreciations); } catch (e) { appreciations = []; }
+                                        }
+                                        window.allAppreciations[eleve.eleve] = appreciations;
+                                    });
+                                } catch (e) { window.allAppreciations = {}; }
+                            </script>
                             <script>
                                 let stopGeneration = false;
                                 let enCours = false;
@@ -282,6 +322,44 @@ document.addEventListener('DOMContentLoaded', function() {
                                         });
                                     });
 
+                                    // Action individuelle sur bouton Bulletin
+                                    document.querySelectorAll('.action-bulletin').forEach(btn => {
+                                        btn.addEventListener('click', function() {
+                                            const eleve = btn.getAttribute('data-eleve');
+                                            fetch("{% url 'get_bulletin_eleve' %}", {
+                                                method: 'POST',
+                                                headers: {
+                                                    'Content-Type': 'application/json',
+                                                    'X-CSRFToken': '{{ csrf_token }}'
+                                                },
+                                                body: JSON.stringify({eleve: eleve})
+                                            })
+                                            .then(response => response.json())
+                                            .then(data => {
+                                                // Mettre le titre dans le header du modal
+                                                const modalTitle = document.getElementById('bulletinModalLabel');
+                                                if (modalTitle) {
+                                                    modalTitle.textContent = `Bulletin de l'élève ${eleve}`;
+                                                }
+                                                // Mettre uniquement les appréciations dans le body
+                                                let message = '';
+                                                if (Array.isArray(data.appreciations) && data.appreciations.length > 0) {
+                                                    message += data.appreciations.map(app => `<div style='margin-bottom:8px;'><strong>${app.matiere} :</strong><br>${app.appreciation}</div>`).join('');
+                                                } else {
+                                                    message += '<em>Aucune appréciation trouvée dans le bulletin.</em>';
+                                                }
+                                                showBulletinModal(message);
+                                            })
+                                            .catch(() => {
+                                                const modalTitle = document.getElementById('bulletinModalLabel');
+                                                if (modalTitle) {
+                                                    modalTitle.textContent = `Bulletin`;
+                                                }
+                                                showBulletinModal('<em>Erreur lors de la récupération du bulletin.</em>');
+                                            });
+                                        });
+                                    });
+
                                     setButtonState('lancer');
                                     updateActionButtons();
                                 });
@@ -335,6 +413,28 @@ function exportTableToPDF() {
                                     doc.save('appreciations.pdf');
                                 }
                             </script>
+                            <script>
+                                function showBulletinModal(html) {
+                                    const modalBody = document.getElementById('bulletinModalBody');
+                                    if (modalBody) {
+                                        modalBody.innerHTML = html;
+                                        const modal = new bootstrap.Modal(document.getElementById('bulletinModal'));
+                                        modal.show();
+                                    }
+                                }
+                            </script>
+                            <!-- Modal Bulletin -->
+                            <div class="modal fade" id="bulletinModal" tabindex="-1" aria-labelledby="bulletinModalLabel" aria-hidden="true">
+                                <div class="modal-dialog modal-dialog-centered" style="max-width:80vw; width:80vw;">
+                                    <div class="modal-content">
+                                        <div class="modal-header">
+                                            <h5 class="modal-title" id="bulletinModalLabel">Bulletin</h5>
+                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
+                                        </div>
+                                        <div class="modal-body" id="bulletinModalBody" style="font-size:1.1rem; line-height:1.5; word-break:break-word;"></div>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>

main/urls.py

@@ -1,5 +1,5 @@
 from django.urls import path
-from .views import login_view, generation, resultat_appreciations, logout_view, generer_appreciation_ajax
+from .views import login_view, generation, resultat_appreciations, logout_view, generer_appreciation_ajax, get_bulletin_eleve
 
 urlpatterns = [
     path('login/', login_view, name='login'),
@@ -7,4 +7,5 @@ urlpatterns = [
     path('resultat/', resultat_appreciations, name='resultat_appreciations'),
     path('logout/', logout_view, name='logout'),
     path('generer_appreciation_ajax/', generer_appreciation_ajax, name='generer_appreciation_ajax'),
+    path('get_bulletin_eleve/', get_bulletin_eleve, name='get_bulletin_eleve'),
 ]

main/views.py

@@ -10,6 +10,7 @@ from main.models import UserCredit, Modele
 import os
 import uuid
 import json
+from django.views.decorators.csrf import csrf_exempt
 
 def login_view(request):
     if request.method == 'POST':
@@ -76,6 +77,25 @@ def generer_appreciation_ajax(request):
             return JsonResponse({'appreciation': 'Crédit épuisé', 'credit': 0, 'stop': True})
     return JsonResponse({'error': 'Méthode non autorisée'}, status=405)
 
+@login_required(login_url='/login/')
+def get_bulletin_eleve(request):
+    if request.method == 'POST':
+        data = json.loads(request.body)
+        eleve_nom = data.get('eleve')
+        appreciations_json = request.session.get('appreciations_json', [])
+        appreciations = []
+        for eleve in appreciations_json:
+            if eleve.get('eleve') == eleve_nom:
+                appreciations = eleve.get('appreciations', [])
+                if isinstance(appreciations, str):
+                    try:
+                        appreciations = json.loads(appreciations)
+                    except Exception:
+                        appreciations = []
+                break
+        return JsonResponse({'appreciations': appreciations})
+    return JsonResponse({'error': 'Méthode non autorisée'}, status=405)
+
 def logout_view(request):
     logout(request)
     return redirect('login')