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

2026-01-29 07:53:23 +00:00 · 2025-05-20 20:22:58 +02:00
parent 56c223f3cc
commit eb7805e54e
7 changed files with 181 additions and 6 deletions
--- 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>
+  );
+}