feat: Champ de recherche de l'élève [#16]

2026-01-28 23:43:22 +00:00 · 2025-05-20 20:22:58 +02:00
parent 56c223f3cc
commit eb7805e54e
7 changed files with 181 additions and 6 deletions
--- a/Back-End/Subscriptions/urls.py
+++ b/Back-End/Subscriptions/urls.py
@ -19,7 +19,8 @@ from .views import (
    AbsenceManagementListCreateView,
    AbsenceManagementDetailView,
    StudentCompetencyListCreateView,
-    StudentCompetencySimpleView
+    StudentCompetencySimpleView,
+    search_students
 )

 from .views import RegistrationFileGroupView, RegistrationFileGroupSimpleView, get_registration_files_by_group
@ -38,6 +39,7 @@ urlpatterns = [
    re_path(r'^students$', StudentListView.as_view(), name="students"),
    # Page de formulaire d'inscription - ELEVE
    re_path(r'^students/(?P<id>[0-9]+)$', StudentView.as_view(), name="students"),
+    re_path(r'^search-students', search_students, name='search_students'),
    # Page PARENT - Liste des children
    re_path(r'^children/(?P<id>[0-9]+)$', ChildrenListView.as_view(), name="children"),

--- a/Back-End/Subscriptions/views/init.py
+++ b/Back-End/Subscriptions/views/init.py
@ -10,7 +10,7 @@ from .registration_file_views import (
    RegistrationParentFileTemplateView
 )
 from .registration_file_group_views import RegistrationFileGroupView, RegistrationFileGroupSimpleView, get_registration_files_by_group
-from .student_views import StudentView, StudentListView, ChildrenListView
+from .student_views import StudentView, StudentListView, ChildrenListView, search_students
 from .guardian_views import GuardianView, DissociateGuardianView
 from .absences_views import AbsenceManagementDetailView, AbsenceManagementListCreateView
 from .student_competencies_views import StudentCompetencyListCreateView, StudentCompetencySimpleView
@ -42,5 +42,6 @@ __all__ = [
    'AbsenceManagementDetailView',
    'AbsenceManagementListCreateView',
    'StudentCompetencyListCreateView',
-    'StudentCompetencySimpleView'
+    'StudentCompetencySimpleView',
+    'search_students'
 ]
--- a/Back-End/Subscriptions/views/student_views.py
+++ b/Back-End/Subscriptions/views/student_views.py
@ -3,6 +3,7 @@ from rest_framework.views import APIView
 from rest_framework import status
 from drf_yasg.utils import swagger_auto_schema
 from drf_yasg import openapi
+from django.db.models import Q

 from Subscriptions.serializers import StudentByRFCreationSerializer, RegistrationFormByParentSerializer, StudentSerializer
 from Subscriptions.models import Student, RegistrationForm
@ -115,3 +116,37 @@ class ChildrenListView(APIView):
        ).distinct()
        students_serializer = RegistrationFormByParentSerializer(students, many=True)
        return JsonResponse(students_serializer.data, safe=False)
+
+def search_students(request):
+    """
+    API pour rechercher des étudiants en fonction d'un terme de recherche (nom/prénom) et d'un établissement.
+    """
+    query = request.GET.get('q', '').strip()
+    establishment_id = request.GET.get('establishment_id', None)
+
+    if not query:
+        return JsonResponse([], safe=False)
+
+    if not establishment_id:
+        return JsonResponse({'error': 'establishment_id est requis'}, safe=False, status=status.HTTP_400_BAD_REQUEST)
+
+    # Recherche sur Student (nom ou prénom) et filtrage par établissement via RegistrationForm
+    students = Student.objects.filter(
+        Q(last_name__icontains=query) | Q(first_name__icontains=query),
+        registrationform__establishment_id=establishment_id
+    ).distinct()
+
+    # Sérialisation simple (adapte selon ton besoin)
+    results = [
+        {
+            'id': student.id,
+            'first_name': student.first_name,
+            'last_name': student.last_name,
+            'level': getattr(student.level, 'name', ''),
+            'associated_class_name': student.associated_class.atmosphere_name if student.associated_class else '',
+            'photo': student.photo.url if student.photo else None,
+        }
+        for student in students
+    ]
+
+    return JsonResponse(results, safe=False)
--- a/Front-End/src/app/[locale]/admin/grades/page.js
+++ b/Front-End/src/app/[locale]/admin/grades/page.js
@ -16,9 +16,11 @@ import { useRouter } from 'next/navigation';
 import {
  fetchStudents,
  fetchStudentCompetencies,
+  searchStudents,
 } from '@/app/actions/subscriptionAction';
 import { useEstablishment } from '@/context/EstablishmentContext';
 import { useClasses } from '@/context/ClassesContext';
+import StudentInput from '@/components/Grades/StudentInput';

 export default function Page() {
  const router = useRouter();
@ -147,7 +149,19 @@ export default function Page() {
        <h2 className="text-xl font-semibold mb-4">Sélectionner un élève</h2>
        <div className="flex flex-col sm:flex-row sm:items-end gap-4">
          <div className="flex-1">
-            <SelectChoice
+            <StudentInput
+              label="Recherche élève"
+              selectedStudent={
+                students.find((s) => s.id === formData.selectedStudent) || null
+              }
+              setSelectedStudent={(student) =>
+                handleChange('selectedStudent', student?.id || '')
+              }
+              searchStudents={searchStudents}
+              establishmentId={selectedEstablishmentId}
+              required
+            />
+            {/* <SelectChoice
              name="selectedStudent"
              label="Élève"
              placeHolder="Sélectionnez un élève"
@ -155,10 +169,12 @@ export default function Page() {
              callback={(e) => handleChange('selectedStudent', e.target.value)}
              choices={students.map((student) => ({
                value: student.id,
-                label: `${student.last_name} ${student.first_name} - ${getNiveauLabel(student.level)} (${student.associated_class_name})`,
+                label: `${student.last_name} ${student.first_name} - ${getNiveauLabel(
+                  student.level
+                )} (${student.associated_class_name})`,
              }))}
              required
-            />
+            /> */}
          </div>
          <Button
            text="Réaliser le bilan de compétences"
--- a/Front-End/src/app/actions/subscriptionAction.js
+++ b/Front-End/src/app/actions/subscriptionAction.js
@ -5,6 +5,7 @@ import {
  BE_SUBSCRIPTION_LAST_GUARDIAN_ID_URL,
  BE_SUBSCRIPTION_ABSENCES_URL,
  BE_SUBSCRIPTION_STUDENT_COMPETENCIES_URL,
+  BE_SUBSCRIPTION_SEARCH_STUDENTS_URL,
 } from '@/utils/Url';

 import { CURRENT_YEAR_FILTER } from '@/utils/constants';
@ -128,6 +129,18 @@ export const archiveRegisterForm = (id) => {
    .catch(errorHandler);
 };

+export const searchStudents = (establishmentId, query) => {
+  const url = `${BE_SUBSCRIPTION_SEARCH_STUDENTS_URL}/?establishment_id=${establishmentId}&q=${encodeURIComponent(query)}`;
+  return fetch(url, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+    .then(requestResponseHandler)
+    .catch(errorHandler);
+};
+
 export const fetchStudents = (establishment, id = null, status = null) => {
  let url;
  if (id) {
--- a/Front-End/src/components/Grades/StudentInput.js
+++ b/Front-End/src/components/Grades/StudentInput.js
@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+import { BASE_URL } from '@/utils/Url';
+
+export default function StudentInput({
+  label,
+  selectedStudent,
+  setSelectedStudent,
+  searchStudents,
+  establishmentId,
+  required = false,
+}) {
+  const [inputValue, setInputValue] = useState('');
+  const [suggestions, setSuggestions] = useState([]);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+
+  const handleInputChange = async (e) => {
+    const value = e.target.value;
+    setInputValue(value);
+
+    if (value.trim() !== '') {
+      try {
+        const results = await searchStudents(establishmentId, value);
+        setSuggestions(results);
+      } catch {
+        setSuggestions([]);
+      }
+    } else {
+      setSuggestions([]);
+    }
+  };
+
+  const handleSuggestionClick = (student) => {
+    setSelectedStudent(student);
+    setInputValue(
+      `${student.last_name} ${student.first_name} (${student.level}) - ${student.associated_class_name}`
+    );
+    setSuggestions([]);
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      if (selectedIndex >= 0 && selectedIndex < suggestions.length) {
+        handleSuggestionClick(suggestions[selectedIndex]);
+      }
+    } else if (e.key === 'ArrowDown') {
+      setSelectedIndex((prev) =>
+        prev < suggestions.length - 1 ? prev + 1 : 0
+      );
+    } else if (e.key === 'ArrowUp') {
+      setSelectedIndex((prev) =>
+        prev > 0 ? prev - 1 : suggestions.length - 1
+      );
+    }
+  };
+
+  return (
+    <div>
+      <label className="block text-sm font-medium text-gray-700">
+        {label}
+        {required && <span className="text-red-500 ml-1">*</span>}
+      </label>
+      <input
+        type="text"
+        value={inputValue}
+        onChange={handleInputChange}
+        onKeyDown={handleKeyDown}
+        placeholder="Rechercher un élève"
+        className="mt-1 px-3 py-2 block w-full border rounded-md"
+        required={required}
+      />
+      {suggestions.length > 0 && (
+        <ul className="border rounded mt-2 bg-white shadow">
+          {suggestions.map((student, idx) => (
+            <li
+              key={student.id}
+              className={`flex items-center gap-2 p-2 cursor-pointer transition-colors ${
+                idx === selectedIndex
+                  ? 'bg-emerald-100 text-emerald-800'
+                  : 'hover:bg-emerald-50'
+              }`}
+              onClick={() => handleSuggestionClick(student)}
+              onMouseEnter={() => setSelectedIndex(idx)}
+            >
+              {student.photo ? (
+                <img
+                  src={`${BASE_URL}${student.photo}`}
+                  alt={`${student.first_name} ${student.last_name}`}
+                  className="w-8 h-8 object-cover rounded-full border"
+                />
+              ) : (
+                <div className="w-8 h-8 flex items-center justify-center bg-gray-200 rounded-full text-gray-500 font-semibold">
+                  {student.first_name?.[0]}
+                  {student.last_name?.[0]}
+                </div>
+              )}
+              <span>
+                {student.last_name} {student.first_name} ({student.level}) -{' '}
+                {student.associated_class_name}
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
--- a/Front-End/src/utils/Url.js
+++ b/Front-End/src/utils/Url.js
@ -23,6 +23,7 @@ export const BE_AUTH_INFO_SESSION = `${BASE_URL}/Auth/infoSession`;

 // GESTION INSCRIPTION
 export const BE_SUBSCRIPTION_STUDENTS_URL = `${BASE_URL}/Subscriptions/students`; // Récupère la liste des élèves inscrits ou en cours d'inscriptions
+export const BE_SUBSCRIPTION_SEARCH_STUDENTS_URL = `${BASE_URL}/Subscriptions/search-students`;
 export const BE_SUBSCRIPTION_CHILDRENS_URL = `${BASE_URL}/Subscriptions/children`; // Récupère la liste des élèves d'un profil
 export const BE_SUBSCRIPTION_REGISTERFORMS_URL = `${BASE_URL}/Subscriptions/registerForms`;
 export const BE_SUBSCRIPTION_REGISTRATIONFILE_GROUPS_URL = `${BASE_URL}/Subscriptions/registrationFileGroups`;