feat: Ajout d'un système de notation par classe et par matière et par élève [N3WTS-6]

Front-End/src/components/Evaluation/EvaluationForm.js

@@ -0,0 +1,158 @@
+'use client';
+import React, { useState, useEffect } from 'react';
+import InputText from '@/components/Form/InputText';
+import SelectChoice from '@/components/Form/SelectChoice';
+import Button from '@/components/Form/Button';
+import { Plus, Save, X } from 'lucide-react';
+
+export default function EvaluationForm({
+  specialities,
+  period,
+  schoolClassId,
+  establishmentId,
+  initialValues,
+  onSubmit,
+  onCancel,
+}) {
+  const isEditing = !!initialValues;
+  
+  const [form, setForm] = useState({
+    name: '',
+    speciality: '',
+    date: '',
+    max_score: '20',
+    coefficient: '1',
+    description: '',
+  });
+
+  useEffect(() => {
+    if (initialValues) {
+      setForm({
+        name: initialValues.name || '',
+        speciality: initialValues.speciality?.toString() || '',
+        date: initialValues.date || '',
+        max_score: initialValues.max_score?.toString() || '20',
+        coefficient: initialValues.coefficient?.toString() || '1',
+        description: initialValues.description || '',
+      });
+    }
+  }, [initialValues]);
+
+  const [errors, setErrors] = useState({});
+
+  const validate = () => {
+    const newErrors = {};
+    if (!form.name.trim()) newErrors.name = 'Le nom est requis';
+    if (!form.speciality) newErrors.speciality = 'La matière est requise';
+    return newErrors;
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const validationErrors = validate();
+    if (Object.keys(validationErrors).length > 0) {
+      setErrors(validationErrors);
+      return;
+    }
+
+    onSubmit({
+      name: form.name,
+      speciality: Number(form.speciality),
+      school_class: schoolClassId,
+      establishment: establishmentId,
+      period: period,
+      date: form.date || null,
+      max_score: parseFloat(form.max_score) || 20,
+      coefficient: parseFloat(form.coefficient) || 1,
+      description: form.description,
+    });
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="space-y-4 p-4 bg-white rounded-lg border border-gray-200 shadow-sm"
+    >
+      <div className="flex items-center justify-between">
+        <h3 className="font-semibold text-lg text-gray-800">
+          {isEditing ? 'Modifier l\'évaluation' : 'Nouvelle évaluation'}
+        </h3>
+        <button
+          type="button"
+          onClick={onCancel}
+          className="p-1 hover:bg-gray-100 rounded"
+        >
+          <X size={20} className="text-gray-500" />
+        </button>
+      </div>
+
+      <InputText
+        name="name"
+        label="Nom de l'évaluation"
+        placeholder="Ex: Contrôle de mathématiques"
+        value={form.name}
+        onChange={(e) => setForm({ ...form, name: e.target.value })}
+        errorMsg={errors.name}
+        required
+      />
+
+      <SelectChoice
+        name="speciality"
+        label="Matière"
+        placeHolder="Sélectionner une matière"
+        choices={specialities.map((s) => ({ value: s.id, label: s.name }))}
+        selected={form.speciality}
+        callback={(e) => setForm({ ...form, speciality: e.target.value })}
+        errorMsg={errors.speciality}
+        required
+      />
+
+      <InputText
+        name="date"
+        type="date"
+        label="Date de l'évaluation"
+        value={form.date}
+        onChange={(e) => setForm({ ...form, date: e.target.value })}
+      />
+
+      <div className="flex gap-4">
+        <div className="flex-1">
+          <InputText
+            name="max_score"
+            type="number"
+            label="Note maximale"
+            value={form.max_score}
+            onChange={(e) => setForm({ ...form, max_score: e.target.value })}
+          />
+        </div>
+        <div className="flex-1">
+          <InputText
+            name="coefficient"
+            type="number"
+            label="Coefficient"
+            value={form.coefficient}
+            onChange={(e) => setForm({ ...form, coefficient: e.target.value })}
+          />
+        </div>
+      </div>
+
+      <InputText
+        name="description"
+        label="Description (optionnel)"
+        placeholder="Détails de l'évaluation..."
+        value={form.description}
+        onChange={(e) => setForm({ ...form, description: e.target.value })}
+      />
+
+      <div className="flex gap-2 pt-2">
+        <Button
+          primary
+          type="submit"
+          text={isEditing ? 'Enregistrer' : 'Créer l\'évaluation'}
+          icon={isEditing ? <Save size={16} /> : <Plus size={16} />}
+        />
+        <Button type="button" text="Annuler" onClick={onCancel} />
+      </div>
+    </form>
+  );
+}