feat: Ajout de la configuration des tarifs de l'école [#18]

Front-End/src/app/[locale]/admin/subscriptions/components/DraggableFileUpload.js

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { Upload } from 'lucide-react';
+
+export default function DraggableFileUpload({ fileName, onFileSelect }) {
+  const [dragActive, setDragActive] = useState(false);
+
+
+  const handleDragOver = (event) => {
+    event.preventDefault();
+    setDragActive(true);
+  };
+
+  const handleDragLeave = () => {
+    setDragActive(false);
+  };
+
+  const handleFileChosen = (selectedFile) => {
+    onFileSelect && onFileSelect(selectedFile);
+  };
+
+  const handleDrop = (event) => {
+    event.preventDefault();
+    setDragActive(false);
+    const droppedFile = event.dataTransfer.files[0];
+    handleFileChosen(droppedFile);
+  };
+
+  const handleFileChange = (event) => {
+    const selectedFile = event.target.files[0];
+    handleFileChosen(selectedFile);
+  };
+
+  return (
+    <div>
+      <div
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        className={`border-2 border-dashed p-8 rounded-md ${dragActive ? 'border-blue-500' : 'border-gray-300'} flex flex-col items-center justify-center`}
+        style={{ height: '200px' }}
+      >
+        <input type="file" onChange={handleFileChange} className="hidden" id="fileInput" />
+        <label htmlFor="fileInput" className="cursor-pointer flex flex-col items-center">
+          <Upload size={48} className="text-gray-400 mb-2" />
+          <p className="text-center">{fileName || 'Glissez et déposez un fichier ici ou cliquez ici pour sélectionner un fichier'}</p>
+        </label>
+      </div>
+    </div>
+  );
+}

Front-End/src/app/[locale]/admin/subscriptions/components/FileUpload.js

@@ -1,61 +1,47 @@
-import React, { useState } from 'react';
-import { Upload } from 'lucide-react';
+import React, { useState, useEffect } from 'react';
+import ToggleSwitch from '@/components/ToggleSwitch'; // Import du composant ToggleSwitch
+import DraggableFileUpload from './DraggableFileUpload';
 
-export default function FileUpload({ onFileUpload }) {
-  const [dragActive, setDragActive] = useState(false);
+export default function FileUpload({ onFileUpload, fileToEdit = null }) {
   const [fileName, setFileName] = useState('');
   const [file, setFile] = useState(null);
+  const [isRequired, setIsRequired] = useState(false); // État pour le toggle isRequired
+  const [order, setOrder] = useState(0);
 
-  const handleDragOver = (event) => {
-    event.preventDefault();
-    setDragActive(true);
-  };
-
-  const handleDragLeave = () => {
-    setDragActive(false);
-  };
-
-  const handleDrop = (event) => {
-    event.preventDefault();
-    setDragActive(false);
-    const droppedFile = event.dataTransfer.files[0];
-    setFile(droppedFile);
-    setFileName(droppedFile.name.replace(/\.[^/.]+$/, ""));
-  };
-
-  const handleFileChange = (event) => {
-    const selectedFile = event.target.files[0];
-    setFile(selectedFile);
-    setFileName(selectedFile.name.replace(/\.[^/.]+$/, ""));
-  };
+  useEffect(() => {
+    if (fileToEdit) {
+      setFileName(fileToEdit.name || '');
+      setIsRequired(fileToEdit.is_required || false);
+      setOrder(fileToEdit.fusion_order || 0);
+    }
+  }, [fileToEdit]);
 
   const handleFileNameChange = (event) => {
     setFileName(event.target.value);
   };
 
   const handleUpload = () => {
-
-      onFileUpload(file, fileName);
-      setFile(null);
-      setFileName('');
-
+    onFileUpload({
+      file,
+      name: fileName,
+      is_required: isRequired,
+      order: parseInt(order, 10),
+    });
+    setFile(null);
+    setFileName('');
+    setIsRequired(false);
+    setOrder(0);
   };
 
   return (
     <div>
-      <div
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
-        onDrop={handleDrop}
-        className={`border-2 border-dashed p-8 rounded-md ${dragActive ? 'border-blue-500' : 'border-gray-300'} flex flex-col items-center justify-center`}
-        style={{ height: '200px' }}
-      >
-        <input type="file" onChange={handleFileChange} className="hidden" id="fileInput" />
-        <label htmlFor="fileInput" className="cursor-pointer flex flex-col items-center">
-          <Upload size={48} className="text-gray-400 mb-2" />
-          <p className="text-center">{fileName || 'Glissez et déposez un fichier ici ou cliquez ici pour sélectionner un fichier'}</p>
-        </label>
-      </div>
+      <DraggableFileUpload
+        fileName={fileName}
+        onFileSelect={(selectedFile) => {
+          setFile(selectedFile);
+          setFileName(selectedFile.name.replace(/\.[^/.]+$/, ""));
+        }}
+      />
       <div className="flex mt-2">
         <input
           type="text"
@@ -64,14 +50,28 @@ export default function FileUpload({ onFileUpload }) {
           onChange={handleFileNameChange}
           className="flex-grow p-2 border border-gray-200 rounded-md"
         />
+        <input
+          type="number"
+          value={order}
+          onChange={(e) => setOrder(e.target.value)}
+          placeholder="Ordre de fusion"
+          className="p-2 border border-gray-200 rounded-md ml-2 w-20"
+        />
         <button
           onClick={handleUpload}
-          className={`p-2 rounded-md shadow transition duration-200 ml-2 ${fileName!="" ? 'bg-emerald-600 text-white hover:bg-emerald-900' : 'bg-gray-300 text-gray-500 cursor-not-allowed'}`}
-          disabled={fileName==""}
+          className={`p-2 rounded-md shadow transition duration-200 ml-2 ${fileName !== "" ? 'bg-emerald-600 text-white hover:bg-emerald-900' : 'bg-gray-300 text-gray-500 cursor-not-allowed'}`}
+          disabled={fileName === ""}
         >
           Ajouter
         </button>
       </div>
+      <div className="flex items-center mt-4">
+        <ToggleSwitch
+          label="Fichier à remplir obligatoirement"
+          checked={isRequired}
+          onChange={() => setIsRequired(!isRequired)}
+        />
+      </div>
     </div>
   );
 }

Front-End/src/app/[locale]/admin/subscriptions/editInscription/page.js

@@ -17,6 +17,7 @@ export default function Page() {
 
     const [initialData, setInitialData] = useState(null);
     const [isLoading, setIsLoading] = useState(true);
+    const [formErrors, setFormErrors] = useState({});
     const csrfToken = useCsrfToken();
 
     useEffect(() => {
@@ -55,9 +56,8 @@ export default function Page() {
             console.error('Error:', error.message);
             if (error.details) {
                 console.error('Form errors:', error.details);
-                // Handle form errors (e.g., display them to the user)
+                setFormErrors(error.details);
             }
-            alert('Une erreur est survenue lors de la mise à jour des données');
         });
 
     };
@@ -69,6 +69,7 @@ export default function Page() {
             onSubmit={handleSubmit}
             cancelUrl={FE_ADMIN_SUBSCRIPTIONS_URL}
             isLoading={isLoading}
+            errors={formErrors}
         />
     );
 }

Front-End/src/app/[locale]/admin/subscriptions/page.js

@@ -28,6 +28,7 @@ import {
   fetchRegisterFormFileTemplate,
   deleteRegisterFormFileTemplate,
   createRegistrationFormFileTemplate,
+  editRegistrationFormFileTemplate,
   fetchStudents,
   editRegisterForm } from "@/app/lib/subscriptionAction"
 
@@ -40,6 +41,7 @@ import {
 
 import DjangoCSRFToken from '@/components/DjangoCSRFToken'
 import useCsrfToken from '@/hooks/useCsrfToken';
+import { formatDate } from '@/utils/Date';
 
 const useFakeData = process.env.NEXT_PUBLIC_USE_FAKE_DATA === 'true';
 
@@ -69,6 +71,9 @@ export default function Page({ params: { locale } }) {
   const [classes, setClasses] = useState([]);
   const [students, setEleves] = useState([]);
   const [reloadFetch, setReloadFetch] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [fileToEdit, setFileToEdit] = useState(null);
 
   const csrfToken = useCsrfToken();
 
@@ -185,7 +190,11 @@ const registerFormArchivedDataHandler = (data) => {
         .then(registerFormArchivedDataHandler)
         .catch(requestErrorHandler)
         fetchRegisterFormFileTemplate()
-        .then((data)=> {setFichiers(data)})
+        .then((data)=> {
+          console.log(data);
+
+          setFichiers(data)
+          })
         .catch((err)=>{ err = err.message; console.log(err);});
       } else {
         setTimeout(() => {
@@ -548,9 +557,17 @@ const handleFileDelete = (fileId) => {
     });
 };
 
+const handleFileEdit = (file) => {
+  setIsEditing(true);
+  setFileToEdit(file);
+  setIsModalOpen(true);
+};
+
 const columnsFiles = [
   { name: 'Nom du fichier', transform: (row) => row.name },
-  { name: 'Date de création', transform: (row) => row.last_update },
+  { name: 'Date de création', transform: (row) =>  formatDate(new Date (row.date_added),"DD/MM/YYYY hh:mm:ss") },
+  { name: 'Fichier Obligatoire', transform: (row) => row.is_required ? 'Oui' : 'Non' },
+  { name: 'Ordre de fusion', transform: (row) => row.order },
   { name: 'Actions', transform: (row) => (
     <div className="flex items-center justify-center gap-2">
       {
@@ -559,6 +576,9 @@ const columnsFiles = [
         <Download size={16} />
       </a>)
       }
+      <button onClick={() => handleFileEdit(row)} className="text-blue-500 hover:text-blue-700">
+        <Edit size={16} />
+      </button>
       <button onClick={() => handleFileDelete(row.id)} className="text-red-500 hover:text-red-700">
         <Trash2 size={16} />
       </button>
@@ -566,27 +586,43 @@ const columnsFiles = [
   ) },
 ];
 
-const handleFileUpload = (file, fileName) => {
-  if ( !fileName) {
+const handleFileUpload = ({file, name, is_required, order}) => {
+  if (!name) {
     alert('Veuillez entrer un nom de fichier.');
     return;
   }
 
-
   const formData = new FormData();
   if(file){
     formData.append('file', file);
   }
-  formData.append('name', fileName);
-    createRegistrationFormFileTemplate(formData,csrfToken)
-    .then(data => {
-      console.log('Success:', data);
-      setFichiers([...fichiers, data]);
-      closeUploadModal();
-    })
-    .catch(error => {
-      console.error('Error uploading file:', error);
-    });
+  formData.append('name', name);
+  formData.append('is_required', is_required);
+  formData.append('order', order);
+
+  if (isEditing && fileToEdit) {
+    editRegistrationFormFileTemplate(fileToEdit.id, formData, csrfToken)
+      .then(data => {
+        setFichiers(prevFichiers =>
+          prevFichiers.map(f => f.id === fileToEdit.id ? data : f)
+        );
+        setIsModalOpen(false);
+        setFileToEdit(null);
+        setIsEditing(false);
+      })
+      .catch(error => {
+        console.error('Error editing file:', error);
+      });
+  } else {
+    createRegistrationFormFileTemplate(formData, csrfToken)
+      .then(data => {
+        setFichiers([...fichiers, data]);
+        setIsModalOpen(false);
+      })
+      .catch(error => {
+        console.error('Error uploading file:', error);
+      });
+  }
 };
 
   if (isLoading) {
@@ -699,7 +735,23 @@ const handleFileUpload = (file, fileName) => {
            {/*SI STATE == subscribeFiles */}
             {activeTab === 'subscribeFiles' && (
               <div>
-                <FileUpload onFileUpload={handleFileUpload} className="mb-4" />
+                <button
+                onClick={() => { setIsModalOpen(true); setIsEditing(false); }}
+                className="flex items-center bg-emerald-600 text-white p-2 rounded-full shadow hover:bg-emerald-900 transition duration-200 ml-4"
+              >
+                <Plus className="w-5 h-5" />
+              </button>
+                <Modal
+                  isOpen={isModalOpen}
+                  setIsOpen={setIsModalOpen}
+                  title={isEditing ? 'Modifier un fichier' : 'Ajouter un fichier'}
+                  ContentComponent={() => (
+                    <FileUpload
+                      onFileUpload={handleFileUpload}
+                      fileToEdit={fileToEdit}
+                    />
+                  )}
+                />
                 <div className="mt-8">
                   <Table
                     data={fichiers}