feat: Gestion des profils des enseignants / Visualisation d'une classe [#4]

2026-01-29 07:53:23 +00:00 · 2024-11-23 20:02:51 +01:00
parent af0cd1c840
commit 81d1dfa9a7
26 changed files with 792 additions and 178 deletions
--- a/Front-End/src/components/AffectationClasseForm.js
+++ b/Front-End/src/components/AffectationClasseForm.js
@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+
+const AffectationClasseForm = ({ eleve, onSubmit, classes }) => {
+
+  const [formData, setFormData] = useState({
+    classeAssocie_id: eleve.classeAssocie_id || null,
+  });
+
+  const handleChange = (e) => {
+    const { name, value, type } = e.target;
+    setFormData((prevState) => ({
+      ...prevState,
+      [name]: parseInt(value, 10),
+    }));
+  };
+
+  const handleSubmit = () => {
+    onSubmit({
+      eleve: {
+          ...formData
+      },
+      etat:5
+  });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div>
+        <label className="block text-sm font-medium text-gray-700">
+          Classes
+        </label>
+        <div className="mt-2 grid grid-cols-1 gap-4">
+          {classes.map(classe => (
+            <div key={classe.id} className="flex items-center">
+              <input
+                  type="radio"
+                  id={`classe-${classe.id}`}
+                  name="classeAssocie_id"
+                  value={classe.id}
+                  checked={formData.classeAssocie_id === classe.id}
+                  onChange={handleChange}
+                  className="form-radio h-3 w-3 text-emerald-600 focus:ring-emerald-500 hover:ring-emerald-400 checked:bg-emerald-600 checked:h-3 checked:w-3"
+              />
+              <label htmlFor={`classe-${classe.id}`} className="ml-2 block text-sm text-gray-900 flex items-center">
+                {classe.nom_ambiance}
+              </label>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="flex justify-end mt-4 space-x-4">
+        <button
+            onClick={handleSubmit}
+            className={`px-4 py-2 rounded-md shadow-sm focus:outline-none ${
+                (!formData.classeAssocie_id )
+                    ? "bg-gray-300 text-gray-700 cursor-not-allowed"
+                    : "bg-emerald-500 text-white hover:bg-emerald-600"
+            }`}
+            disabled={(!formData.classeAssocie_id)}
+        >
+            Associer
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default AffectationClasseForm;