67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { Modal, Box, Typography, TextField, Button } from '@mui/material';
|
|
import type { Titular } from '../types';
|
|
|
|
const style = {
|
|
position: 'absolute' as 'absolute',
|
|
top: '50%',
|
|
left: '50%',
|
|
transform: 'translate(-50%, -50%)',
|
|
width: 400,
|
|
bgcolor: 'background.paper',
|
|
boxShadow: 24,
|
|
p: 4,
|
|
};
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
onSave: (id: number, texto: string, viñeta: string) => void;
|
|
titular: Titular | null;
|
|
}
|
|
|
|
const EditarTitularModal = ({ open, onClose, onSave, titular }: Props) => {
|
|
const [texto, setTexto] = useState('');
|
|
const [viñeta, setViñeta] = useState('');
|
|
|
|
useEffect(() => {
|
|
if (titular) {
|
|
setTexto(titular.texto);
|
|
// Usamos el valor real, incluso si es solo espacios o una cadena vacía.
|
|
setViñeta(titular.viñeta ?? '');
|
|
}
|
|
}, [titular]);
|
|
|
|
const handleSave = () => {
|
|
// Verificamos que el titular exista y que el texto principal no esté vacío.
|
|
if (titular && texto.trim()) {
|
|
const textoLimpio = texto.trim();
|
|
const viñetaSinLimpiar = viñeta;
|
|
onSave(titular.id, textoLimpio, viñetaSinLimpiar);
|
|
onClose();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Modal open={open} onClose={onClose}>
|
|
<Box sx={style}>
|
|
<Typography variant="h6" component="h2">Editar Titular</Typography>
|
|
<TextField
|
|
fullWidth autoFocus margin="normal" label="Texto del titular"
|
|
value={texto} onChange={(e) => setTexto(e.target.value)}
|
|
/>
|
|
<TextField
|
|
fullWidth margin="normal" label="Viñeta (ej: •, !, o dejar vacío)"
|
|
value={viñeta} onChange={(e) => setViñeta(e.target.value)}
|
|
onKeyDown={(e) => e.key === 'Enter' && handleSave()}
|
|
/>
|
|
<Box sx={{ mt: 2, display: 'flex', justifyContent: 'flex-end' }}>
|
|
<Button onClick={onClose} sx={{ mr: 1 }}>Cancelar</Button>
|
|
<Button variant="contained" onClick={handleSave}>Guardar Cambios</Button>
|
|
</Box>
|
|
</Box>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default EditarTitularModal; |