TioSam77
72 lines
2.2 KiB
JavaScript
72 lines
2.2 KiB
JavaScript
import React, { useState } from 'react';
|
|
import '../App.css';
|
|
|
|
const CardEditProfesor = ({ profesor, edificioNombre, onDelete }) => {
|
|
const [showDialog, setShowDialog] = useState(false);
|
|
const [confirmText, setConfirmText] = useState('');
|
|
|
|
const handleDeleteClick = () => {
|
|
setShowDialog(true);
|
|
};
|
|
|
|
const handleConfirmDelete = async () => {
|
|
if (confirmText.toLowerCase() === 'aceptar') {
|
|
await fetchDelete(profesor.id_profesor);
|
|
setShowDialog(false);
|
|
setConfirmText('');
|
|
//window.location.reload();
|
|
}
|
|
};
|
|
|
|
const handleEditClick = () => {
|
|
window.location.href = `/Profesor/editar/${profesor.id_profesor}`;
|
|
};
|
|
|
|
const fetchDelete = async (id_profesor) => {
|
|
try {
|
|
const response = await fetch(`http://localhost:3000/profesor/${id_profesor}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
});
|
|
if (response.ok) {
|
|
onDelete(id_profesor);
|
|
} else {
|
|
console.error('Error al eliminar el profesor');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="card m-3">
|
|
<img src={profesor.fotografia} alt="Profesor img" className="imgProfe" />
|
|
<div className="card-content">
|
|
<h2>{profesor.nombre}</h2>
|
|
<h4>{edificioNombre}</h4>
|
|
<div className="button-group">
|
|
<button className="edit-button" onClick={handleEditClick} style={{ backgroundColor: 'green' }}>Editar</button>
|
|
<button className="delete-button" onClick={handleDeleteClick} style={{ backgroundColor: 'red' }}>Borrar</button>
|
|
</div>
|
|
</div>
|
|
{showDialog && (
|
|
<div className="dialog">
|
|
<p>¿Deseas eliminar al profesor {profesor.nombre}?</p>
|
|
<p>Para borrar al profesor, escribe "aceptar".</p>
|
|
<input
|
|
type="text"
|
|
value={confirmText}
|
|
onChange={(e) => setConfirmText(e.target.value)}
|
|
/>
|
|
<button onClick={handleConfirmDelete} disabled={confirmText.toLowerCase() !== 'aceptar'}>Confirmar</button>
|
|
<button onClick={() => setShowDialog(false)}>Cancelar</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CardEditProfesor;
|