Feature/185 edit educators and volunteer

src/components/AdminEditProfiles.js

@@ -0,0 +1,17 @@
+import '../styles/styles.css';
+import LayoutProfiles from '../components/LayoutProfiles';
+import UpdateProfile from '../components/UpdateProfile';
+import { useParams } from 'react-router-dom'; // Importa el hook useParams
+
+
+const AdminEditProfiles = () => {
+  const { id } = useParams(); // Extrae la ID de la URL
+
+  return (
+    <LayoutProfiles profile={'admin'} >
+      <UpdateProfile tipo={'admin'} id={id}/>
+    </LayoutProfiles>
+  );
+};
+
+export default AdminEditProfiles;

src/components/PersonCard.js

@@ -1,12 +1,16 @@
 import DeleteIcon from '@material-ui/icons/Delete';
+import EditIcon from '@material-ui/icons/Edit';
 import axios from 'axios';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import { Link } from "react-router-dom";
+import AdminEditProfiles from './AdminEditProfiles'
+
 const API_ENDPOINT = process.env.REACT_APP_API_ENDPOINT;
 
 function PersonCard({ person, personType, kids, request = false, trash = true }) {
 
-  const handleDescargar = async(person) => {
+  const handleDescargar = async (person) => {
     // Download the enrollment_document
     const documento = person.enrollment_document;
     const nombreArchivo = 'documento_de_enlistamiento.pdf'; // Puedes cambiar el nombre del archivo según lo necesites
@@ -23,69 +27,69 @@ function PersonCard({ person, personType, kids, request = false, trash = true })
     enlaceDescarga.click();
     toast.error("Se descarga vacio porque la api pasa enlaces en vez de archivos", {
       autoClose: 5000
-      });
+    });
   };
-  
+
   const handleAceptar = async (person) => {
     console.log(person)
     person.status = "ACEPTADO";
-    
-    const update = await axios.patch(`${API_ENDPOINT}volunteer/${person.id}/`,{
-        status: person.status        
+
+    const update = await axios.patch(`${API_ENDPOINT}volunteer/${person.id}/`, {
+      status: person.status
     });
-    console.log('update',update);
-    const {data} = update;
-    if (data.message){
-        toast.error("Error al actualizar", {
-          autoClose: 5000
-          });
-    }else{
-        toast.success("Usuario actualizado con éxito.", {
-          autoClose: 5000
-          })
+    console.log('update', update);
+    const { data } = update;
+    if (data.message) {
+      toast.error("Error al actualizar", {
+        autoClose: 5000
+      });
+    } else {
+      toast.success("Usuario actualizado con éxito.", {
+        autoClose: 5000
+      })
     }
     window.location.reload();
   }
-  
-  const handleRechazar = async(person) =>{
+
+  const handleRechazar = async (person) => {
     console.log(person)
     person.status = "RECHAZADO";
-    
-    const update = await axios.patch(`${API_ENDPOINT}volunteer/${person.id}/`,{
-        status: person.status        
+
+    const update = await axios.patch(`${API_ENDPOINT}volunteer/${person.id}/`, {
+      status: person.status
     });
-    console.log('update',update);
-    const {data} = update;
-    if (data.message){
-        toast.error("Error al actualizar", {
-          autoClose: 5000
-          });
-    }else{
-        toast.success("Usuario actualizado con éxito.", {
-          autoClose: 5000
-          })
+    console.log('update', update);
+    const { data } = update;
+    if (data.message) {
+      toast.error("Error al actualizar", {
+        autoClose: 5000
+      });
+    } else {
+      toast.success("Usuario actualizado con éxito.", {
+        autoClose: 5000
+      })
     }
     window.location.reload();
   }
 
-  const handleEliminar = async(person) =>{
-    if(!person.id || person.id <= 0){
-        toast.error('La id no es valida', {
-          autoClose: 5000
-          })
-    }else{
-      if(personType === 'Familias-solicitudes'){
+  const handleEliminar = async (person) => {
+    if (!person.id || person.id <= 0) {
+      toast.error('La id no es valida', {
+        autoClose: 5000
+      })
+    } else {
+      if (personType === 'Familias-solicitudes') {
         await axios.delete(`${API_ENDPOINT}student/${person.id}/`);
-      } else if(personType === 'Voluntarios'){
+      } else if (personType === 'Voluntarios') {
         console.log(person.id);
         await axios.delete(`${API_ENDPOINT}volunteer/${person.id}/`);
       } else {
         await axios.delete(`${API_ENDPOINT}user/${person.id}/`);
       }
-        toast.success("Persona eliminada correctamente", {
-          autoClose: 5000
-          })
-        window.location.reload(); // Recarga la ventana después de eliminar
+      toast.success("Persona eliminada correctamente", {
+        autoClose: 5000
+      })
+      window.location.reload(); // Recarga la ventana después de eliminar
     }
   }
 
@@ -97,11 +101,11 @@ function PersonCard({ person, personType, kids, request = false, trash = true })
           <p>{person.first_name}</p>
           <p><strong>{person.name}</strong></p>
           <p>Número de niños: {kids.filter(kid => kid.family === person.id).length}</p>
-        </div> 
+        </div>
         :
         <div className='family-request'>
           <img src={person.avatar} alt='placeholder' />
-          <div className='family-info' style={{ borderRight: 'none', borderBottom: 'none'}}>
+          <div className='family-info' style={{ borderRight: 'none', borderBottom: 'none' }}>
             {personType === 'Familias-solicitudes' ? <p><strong>{person.first_name}</strong></p> : <p>{person.first_name}</p>}
             <p>{person.last_name}</p>
           </div>
@@ -132,7 +136,15 @@ function PersonCard({ person, personType, kids, request = false, trash = true })
           </div>
         </div>
       }
-      {trash && <DeleteIcon className='trash' onClick={() => handleEliminar(person)} />}
+      {trash &&
+        <div className='buttons-acceptance'>
+          <DeleteIcon className='trash' style={{marginLeft:'87.5%'}} onClick={() => handleEliminar(person)} />
+          <EditIcon className='edit' style={{marginLeft:'87.5%'}} onClick={() => window.location.replace(`/admin/perfil/actualizar/${person.id}`) } />
+        </div>
+      }
+
+
+
     </div>
   );
 }

src/components/UpdateProfile.js

@@ -8,31 +8,33 @@ import {useNavigate} from 'react-router-dom';
 
 const API_ENDPOINT = process.env.REACT_APP_API_ENDPOINT;
 
-
-const UpdateProfile = ({tipo}) => {
-
-    const id = localStorage.getItem('userId');
-    const [avatar, setAvatar] = useState("");
+const UpdateProfile = ({tipo,id}) => {
+    console.log(id)
 
     const [valoresList, setValores] = useState([]);
 
     const navigate = useNavigate();
 
     //Traemos los datos del usuario
     useEffect(() => {
-
-      axios.get(`${API_ENDPOINT}user/`)
-        .then(response => {
-          setValores(response.data.find(x=>x.id==parseInt(id,10)));
-            console.log("name", name)
-            setAvatar(valoresList.avatar)
-        })
-        .catch(error => {
-          console.error(error);
-        });
-
+        const fetchData = async () => {
+            try {
+                let response;
+                if (id) {
+                    response = await axios.get(`${API_ENDPOINT}user/${id}/`);
+                } else {
+                    response = await axios.get(`${API_ENDPOINT}auth/users/me/`);
+                }
+                setValores(response.data);
+            } catch (error) {
+                console.error(error);
+            }
+        };
+
+        fetchData();
     }, []);
 
+
     //Atributos
     const [name, setName] = useState("");
     const [surname, setSurname] = useState("");
@@ -71,13 +73,20 @@ const UpdateProfile = ({tipo}) => {
                 user_permissions: valoresList.user_permissions,
 
             };
+            const updateEndpoint = id ? `${API_ENDPOINT}user/${id}/` : `${API_ENDPOINT}auth/users/me/`;
+            const update = await axios.put(updateEndpoint, updatedData);
 
-            const update = await axios.put(`${API_ENDPOINT}user/${id}/`, updatedData);
 
             const { data } = update;
             if (data.message) {
                 window.alert(data.message);
-            } else {
+            }else if(id && valoresList.role !== "EDUCADOR"){
+                navigate(`/admin/${valoresList.role + "S"}`);
+
+            }else if(id && valoresList.role === "EDUCADOR"){
+                navigate(`/admin/${valoresList.role + "ES"}`)
+             }
+             else {
                 navigate(`/${tipo}/perfil`);
             }
         } catch (error) {
@@ -103,33 +112,34 @@ const UpdateProfile = ({tipo}) => {
                     defaultValue={name} //defaultValue es como value, pero permite el cambio
                     onChange={(e) => setName(e.target.value)}
                     type='text'
-                    placeholder='Nombre'
+                    placeholder={valoresList.first_name}
                 ></input>
 
                 <p>Apellido</p>
                 <input 
                     defaultValue={surname}
                     onChange={(e) => setSurname(e.target.value)}
                     type='text'
-                    placeholder='Primer Apellido'
+                    placeholder={valoresList.last_name}
                 ></input>
 
                 <p>DNI/NIE/Pasaporte</p>
                 <input 
                     defaultValue={id_number}
                     onChange={(e) => setId_number(e.target.value)}
                     type='text'
-                    placeholder='DNI/NIE/Pasaporte'
+                    placeholder={valoresList.id_number}
                 ></input>
 
                 <p>Número de teléfono</p>
                 <input 
                     defaultValue={phone}
                     onChange={(e) => setPhone(e.target.value)}
                     type='tel'
-                    placeholder='Número de teléfono'
+                    placeholder={valoresList.phone}
                 ></input>
-
+                {id? <></>:
+                <>
                 <p>Correo electrónico</p>
                 <input 
                     defaultValue={email}
@@ -138,15 +148,20 @@ const UpdateProfile = ({tipo}) => {
                     placeholder='ejemplo@gmail.com'
                 ></input>
 
-                <p>Contraseña</p>
+
+                <p style={{textAlign:'center'}}>
+                <img src='https://www.pngall.com/wp-content/uploads/8/Red-Warning.png' style={{ width: '3.5%' }} alt='' />
+                Contraseña (obligatorio)
+                <img src='https://www.pngall.com/wp-content/uploads/8/Red-Warning.png' style={{ width: '3.5%' }} alt='' />
+                </p>
                 <input 
                     defaultValue={password}
                     onChange={(e) => setPassword(e.target.value)}
                     type='password'
-                    placeholder='Contraseña'
+                    placeholder='Contraseña de tu cuenta'
                 ></input>
-
-
+                </>
+            }
                 <button onClick={updateAdmin} className='register-button admin' >
                     Actualizar perfil
                 </button>

src/screens/App.js

@@ -40,6 +40,8 @@ import AdminLessonsCreate from './admin/AdminLessonsCreate';
 import AdminLessonsEdit from './admin/AdminLessonsEdit';
 import AdminSuggestions from './admin/AdminSuggestions';
 import AdminTransparency from './admin/AdminTransparency';
+import AdminEditProfiles from '../components/AdminEditProfiles';
+
 
 // EDUCATORS
 import EducatorProfile from './educators/EducatorProfile';
@@ -101,6 +103,8 @@ function App() {
             {/* ADMIN ROUTES */}
             <Route path="/admin/perfil" exact={true} element={<AdminProfile />} />
             <Route path="/admin/perfil/actualizar" exact={true} element={<AdminProfileUpdate />} />
+            <Route path="/admin/perfil/actualizar/:id" exact={true} element={<AdminEditProfiles />} />
+
 
             <Route path="/admin/voluntarios" element={<AdminVolunteers />} />
             <Route path="/admin/voluntarios/solicitudes" exact={true} element={<AdminVolunteersRequests />} />

src/styles/styles.css

@@ -1576,6 +1576,28 @@ tbody tr:nth-child(odd) {
   box-shadow: 0 6px 10px 0 #7c7c7c, 0 7px 25px 0 #7c7c7c;
 }
 
+.button-edit {
+  background-color: #a7e6b3;
+  border-radius: 10px;
+  height: 40%;
+  width: 40%;
+  text-align: center;
+  margin-left: 100px;
+  margin-bottom: 10%;
+  font-size: 15px;
+  font-weight: 500;
+  padding: 3% 5% 3% 5%;
+  color: #ffffff;
+  font-family: "Poppins", Helvetica;
+  border: 2px solid #a7e6b3;
+}
+
+.button-decline:hover {
+  cursor: pointer;
+  background-color: #ff3c32;
+  box-shadow: 0 6px 10px 0 #7c7c7c, 0 7px 25px 0 #7c7c7c;
+}
+