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

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

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