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

Feat: Edición y Manejo de Titulares, entre otros.

Browse Source
This commit is contained in:
dmolinari
2025-10-28 14:12:05 -03:00
parent 3c12a89f76
commit 5b3dede4d5
12 changed files with 216 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,14 +9,16 @@ import { DndContext, closestCenter, PointerSensor, useSensor, useSensors, type D
import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import type { Titular } from '../types';
import EditIcon from '@mui/icons-material/Edit';
// La prop `onDelete` se añade para comunicar el evento al componente padre
interface SortableRowProps {
titular: Titular;
onDelete: (id: number) => void;
onEdit: (titular: Titular) => void;
}
const SortableRow = ({ titular, onDelete }: SortableRowProps) => {
const SortableRow = ({ titular, onDelete, onEdit }: SortableRowProps) => {
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: titular.id });
const style = {
@@ -42,7 +44,9 @@ const SortableRow = ({ titular, onDelete }: SortableRowProps) => {
</TableCell>
<TableCell>{titular.fuente}</TableCell>
<TableCell>
{/* Usamos un stopPropagation para que el clic no active el arrastre */}
<IconButton size="small" onClick={(e) => { e.stopPropagation(); onEdit(titular); }}>
<EditIcon fontSize="small" />
</IconButton>
<IconButton size="small" onClick={(e) => { e.stopPropagation(); onDelete(titular.id); }}>
<DeleteIcon />
</IconButton>
@@ -55,9 +59,10 @@ interface TablaTitularesProps {
titulares: Titular[];
onReorder: (titulares: Titular[]) => void;
onDelete: (id: number) => void;
onEdit: (titular: Titular) => void;
}
const TablaTitulares = ({ titulares, onReorder, onDelete }: TablaTitularesProps) => {
const TablaTitulares = ({ titulares, onReorder, onDelete, onEdit }: TablaTitularesProps) => {
const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } })); // Evita activar el drag con un simple clic
const handleDragEnd = (event: DragEndEvent) => {
@@ -95,7 +100,7 @@ const TablaTitulares = ({ titulares, onReorder, onDelete }: TablaTitularesProps)
</TableHead>
<TableBody>
{titulares.map((titular) => (
<SortableRow key={titular.id} titular={titular} onDelete={onDelete} />
<SortableRow key={titular.id} titular={titular} onDelete={onDelete} onEdit={onEdit} />
))}
</TableBody>
</Table>