dmolinari/TitularesApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Mejora 3: Cambio en alto de filas

Browse Source
This commit is contained in:
dmolinari
2025-10-29 13:18:39 -03:00
parent c76a5681ac
commit 66e3a0af99
1 changed files with 33 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/src/components/TablaTitulares.tsx
View File

@@ -1,7 +1,7 @@
// frontend/src/components/TablaTitulares.tsx
import { useState } from 'react';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Chip, IconButton, Typography, Link, TextField } from '@mui/material';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Chip, IconButton, Typography, Link, TextField, Tooltip } from '@mui/material'; // <-- Añadir Tooltip
import DeleteIcon from '@mui/icons-material/Delete';
import DragHandleIcon from '@mui/icons-material/DragHandle';
import EditIcon from '@mui/icons-material/Edit';
@@ -49,11 +49,24 @@ const SortableRow = ({ titular, onDelete, onSave, onEdit }: SortableRowProps) =>
}
return (
<TableRow ref={setNodeRef} style={style} {...attributes} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
<TableCell sx={{ cursor: 'grab', verticalAlign: 'middle' }} {...listeners}>
<DragHandleIcon sx={{ color: 'text.secondary' }} />
<TableRow
ref={setNodeRef}
style={style}
{...attributes}
sx={{
'&:hover': {
backgroundColor: 'action.hover'
},
// Oculta el borde de la última fila
'&:last-child td, &:last-child th': { border: 0 },
}}
>
<TableCell sx={{ padding: '8px 16px', cursor: 'grab', verticalAlign: 'middle' }} {...listeners}>
<Tooltip title="Arrastrar para reordenar" placement="top">
<DragHandleIcon sx={{ color: 'text.secondary' }} />
</Tooltip>
</TableCell>
<TableCell sx={{ verticalAlign: 'middle' }} onClick={() => setIsEditing(true)}>
<TableCell sx={{ padding: '8px 16px', verticalAlign: 'middle' }} onClick={() => setIsEditing(true)}>
{isEditing ? (
<TextField
fullWidth
@@ -69,10 +82,10 @@ const SortableRow = ({ titular, onDelete, onSave, onEdit }: SortableRowProps) =>
<Typography variant="body2">{titular.texto}</Typography>
)}
</TableCell>
<TableCell sx={{ verticalAlign: 'middle' }}>
<TableCell sx={{ padding: '8px 16px', verticalAlign: 'middle' }}>
<Chip label={titular.tipo || 'Scraped'} color={getChipColor(titular.tipo)} size="small" />
</TableCell>
<TableCell sx={{ verticalAlign: 'middle' }}>
<TableCell sx={{ padding: '8px 16px', verticalAlign: 'middle' }}>
{titular.urlFuente ? (
<Link href={titular.urlFuente} target="_blank" rel="noopener noreferrer" underline="hover" color="primary.light">
{formatFuente(titular.fuente)}
@@ -81,13 +94,17 @@ const SortableRow = ({ titular, onDelete, onSave, onEdit }: SortableRowProps) =>
formatFuente(titular.fuente)
)}
</TableCell>
<TableCell sx={{ verticalAlign: 'middle', textAlign: 'right' }}>
<IconButton size="small" onClick={(e) => { e.stopPropagation(); onEdit(titular); }}>
<EditIcon fontSize="small" />
</IconButton>
<IconButton size="small" onClick={(e) => { e.stopPropagation(); onDelete(titular.id); }} sx={{ color: '#ef4444' }}>
<DeleteIcon />
</IconButton>
<TableCell sx={{ padding: '8px 16px', verticalAlign: 'middle', textAlign: 'right' }}>
<Tooltip title="Editar viñeta" placement="top">
<IconButton size="small" onClick={(e) => { e.stopPropagation(); onEdit(titular); }}>
<EditIcon fontSize="small" />
</IconButton>
</Tooltip>
<Tooltip title="Eliminar titular" placement="top">
<IconButton size="small" onClick={(e) => { e.stopPropagation(); onDelete(titular.id); }} sx={{ color: '#ef4444' }}>
<DeleteIcon />
</IconButton>
</Tooltip>
</TableCell>
</TableRow>
);
@@ -128,7 +145,7 @@ const TablaTitulares = ({ titulares, onReorder, onDelete, onEdit, onSave }: Tabl
<SortableContext items={titulares.map(t => t.id)} strategy={verticalListSortingStrategy}>
<Table>
<TableHead>
<TableRow sx={{ '& .MuiTableCell-root': { borderBottom: '1px solid rgba(255, 255, 255, 0.12)' } }}>
<TableRow sx={{ '& .MuiTableCell-root': { padding: '6px 16px', borderBottom: '1px solid rgba(255, 255, 255, 0.12)' } }}>
<TableCell sx={{ width: 50 }} />
<TableCell sx={{ textTransform: 'uppercase', color: 'text.secondary', letterSpacing: '0.05em' }}>Texto del Titular</TableCell>
<TableCell sx={{ textTransform: 'uppercase', color: 'text.secondary', letterSpacing: '0.05em' }}>Tipo</TableCell>
@@ -136,7 +153,7 @@ const TablaTitulares = ({ titulares, onReorder, onDelete, onEdit, onSave }: Tabl
<TableCell sx={{ textTransform: 'uppercase', color: 'text.secondary', letterSpacing: '0.05em', textAlign: 'right' }}>Acciones</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableBody sx={{ '& .MuiTableRow-root:nth-of-type(odd)': { backgroundColor: 'action.focus' } }}>
{titulares.map((titular) => (
<SortableRow key={titular.id} titular={titular} onDelete={onDelete} onEdit={onEdit} onSave={onSave} />
))}