dmolinari
5212e31a03
All checks were successful
Optimized Build and Deploy / remote-build-and-deploy (push) Successful in 8m32s
242 lines
11 KiB
TypeScript
242 lines
11 KiB
TypeScript
// src/pages/Distribucion/GestionarDistribuidoresPage.tsx
|
|
import React, { useState, useEffect, useCallback } from 'react';
|
|
import {
|
|
Box, Typography, TextField, Button, Paper, IconButton, Menu, MenuItem, Switch,
|
|
Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TablePagination,
|
|
CircularProgress, Alert, Chip, FormControlLabel, ListItemIcon, ListItemText
|
|
} from '@mui/material';
|
|
import AddIcon from '@mui/icons-material/Add';
|
|
import EditIcon from '@mui/icons-material/Edit';
|
|
import TrashIcon from '@mui/icons-material/Delete';
|
|
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
|
import ToggleOnIcon from '@mui/icons-material/ToggleOn';
|
|
import ToggleOffIcon from '@mui/icons-material/ToggleOff';
|
|
import distribuidorService from '../../services/Distribucion/distribuidorService';
|
|
import type { DistribuidorDto } from '../../models/dtos/Distribucion/DistribuidorDto';
|
|
import type { CreateDistribuidorDto } from '../../models/dtos/Distribucion/CreateDistribuidorDto';
|
|
import type { UpdateDistribuidorDto } from '../../models/dtos/Distribucion/UpdateDistribuidorDto';
|
|
import DistribuidorFormModal from '../../components/Modals/Distribucion/DistribuidorFormModal';
|
|
import { usePermissions } from '../../hooks/usePermissions';
|
|
import axios from 'axios';
|
|
|
|
|
|
const GestionarDistribuidoresPage: React.FC = () => {
|
|
const [distribuidores, setDistribuidores] = useState<DistribuidorDto[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [filtroNombre, setFiltroNombre] = useState('');
|
|
const [filtroNroDoc, setFiltroNroDoc] = useState('');
|
|
const [filtroSoloActivos, setFiltroSoloActivos] = useState<boolean | undefined>(true);
|
|
|
|
const [modalOpen, setModalOpen] = useState(false);
|
|
const [editingDistribuidor, setEditingDistribuidor] = useState<DistribuidorDto | null>(null);
|
|
const [apiErrorMessage, setApiErrorMessage] = useState<string | null>(null);
|
|
|
|
const [page, setPage] = useState(0);
|
|
const [rowsPerPage, setRowsPerPage] = useState(25);
|
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
|
const [selectedDistribuidorRow, setSelectedDistribuidorRow] = useState<DistribuidorDto | null>(null);
|
|
|
|
const { tienePermiso, isSuperAdmin } = usePermissions();
|
|
|
|
const puedeVer = isSuperAdmin || tienePermiso("DG001");
|
|
const puedeCrear = isSuperAdmin || tienePermiso("DG002");
|
|
const puedeModificar = isSuperAdmin || tienePermiso("DG003");
|
|
const puedeEliminar = isSuperAdmin || tienePermiso("DG005");
|
|
|
|
const cargarDistribuidores = useCallback(async () => {
|
|
if (!puedeVer) {
|
|
setError("No tiene permiso para ver esta sección.");
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
setLoading(true); setError(null); setApiErrorMessage(null);
|
|
try {
|
|
const data = await distribuidorService.getAllDistribuidores(filtroNombre, filtroNroDoc, filtroSoloActivos);
|
|
setDistribuidores(data);
|
|
} catch (err) {
|
|
console.error(err); setError('Error al cargar los distribuidores.');
|
|
} finally { setLoading(false); }
|
|
}, [filtroNombre, filtroNroDoc, filtroSoloActivos, puedeVer]);
|
|
|
|
useEffect(() => { cargarDistribuidores(); }, [cargarDistribuidores]);
|
|
|
|
const handleOpenModal = (distribuidor?: DistribuidorDto) => {
|
|
setEditingDistribuidor(distribuidor || null); setApiErrorMessage(null); setModalOpen(true);
|
|
};
|
|
const handleCloseModal = () => {
|
|
setModalOpen(false); setEditingDistribuidor(null);
|
|
};
|
|
|
|
const handleSubmitModal = async (data: CreateDistribuidorDto | UpdateDistribuidorDto, id?: number) => {
|
|
setApiErrorMessage(null);
|
|
try {
|
|
if (id && editingDistribuidor) {
|
|
await distribuidorService.updateDistribuidor(id, data as UpdateDistribuidorDto);
|
|
} else {
|
|
await distribuidorService.createDistribuidor(data as CreateDistribuidorDto);
|
|
}
|
|
cargarDistribuidores();
|
|
} catch (err: any) {
|
|
const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al guardar el distribuidor.';
|
|
setApiErrorMessage(message); throw err;
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (id: number) => {
|
|
if (window.confirm(`¿Está seguro de eliminar este distribuidor (ID: ${id})?`)) {
|
|
setApiErrorMessage(null);
|
|
try {
|
|
await distribuidorService.deleteDistribuidor(id);
|
|
cargarDistribuidores();
|
|
} catch (err: any) {
|
|
const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : 'Error al eliminar el distribuidor.';
|
|
setApiErrorMessage(message);
|
|
}
|
|
}
|
|
handleMenuClose();
|
|
};
|
|
|
|
const handleToggleBaja = async (distribuidor: DistribuidorDto) => {
|
|
setApiErrorMessage(null);
|
|
const accion = distribuidor.baja ? "reactivar" : "dar de baja";
|
|
if (window.confirm(`¿Está seguro de que desea ${accion} a ${distribuidor.nombre}?`)) {
|
|
try {
|
|
await distribuidorService.toggleBajaDistribuidor(distribuidor.idDistribuidor, { darDeBaja: !distribuidor.baja, fechaBaja: !distribuidor.baja ? new Date().toISOString() : null });
|
|
cargarDistribuidores();
|
|
} catch (err: any) {
|
|
const message = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : `Error al ${accion} el distribuidor.`;
|
|
setApiErrorMessage(message);
|
|
}
|
|
}
|
|
handleMenuClose();
|
|
};
|
|
|
|
const handleMenuOpen = (event: React.MouseEvent<HTMLElement>, distribuidor: DistribuidorDto) => {
|
|
setAnchorEl(event.currentTarget); setSelectedDistribuidorRow(distribuidor);
|
|
};
|
|
const handleMenuClose = () => {
|
|
setAnchorEl(null); setSelectedDistribuidorRow(null);
|
|
};
|
|
|
|
const handleChangePage = (_event: unknown, newPage: number) => setPage(newPage);
|
|
const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
setRowsPerPage(parseInt(event.target.value, 10)); setPage(0);
|
|
};
|
|
const displayData = distribuidores.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
|
|
|
|
if (!loading && !puedeVer) {
|
|
return <Box sx={{ p: 2 }}><Alert severity="error">{error || "No tiene permiso."}</Alert></Box>;
|
|
}
|
|
|
|
return (
|
|
<Box sx={{ p: 1 }}>
|
|
<Typography variant="h5" gutterBottom>Gestionar Distribuidores</Typography>
|
|
<Paper sx={{ p: 2, mb: 2 }}>
|
|
<Box sx={{ display: 'flex', gap: 2, mb: 2, flexWrap: 'wrap' }}>
|
|
<TextField
|
|
label="Filtrar por Nombre"
|
|
variant="outlined"
|
|
size="small"
|
|
value={filtroNombre}
|
|
onChange={(e) => setFiltroNombre(e.target.value)}
|
|
sx={{ flexGrow: 1, minWidth: '200px' }}
|
|
/>
|
|
<TextField
|
|
label="Filtrar por Nro. Doc."
|
|
variant="outlined"
|
|
size="small"
|
|
value={filtroNroDoc}
|
|
onChange={(e) => setFiltroNroDoc(e.target.value)}
|
|
sx={{ flexGrow: 1, minWidth: '200px' }}
|
|
/>
|
|
<FormControlLabel
|
|
control={
|
|
<Switch
|
|
checked={filtroSoloActivos === undefined ? true : filtroSoloActivos}
|
|
onChange={(e) => setFiltroSoloActivos(e.target.checked)}
|
|
size="small"
|
|
/>
|
|
}
|
|
label="Ver Activos"
|
|
sx={{ flexShrink: 0 }}
|
|
/>
|
|
</Box>
|
|
{puedeCrear && (
|
|
<Button variant="contained" startIcon={<AddIcon />} onClick={() => handleOpenModal()} sx={{ mb: 2 }}>Agregar Distribuidor</Button>
|
|
)}
|
|
</Paper>
|
|
|
|
{loading && <Box sx={{ display: 'flex', justifyContent: 'center', my: 2 }}><CircularProgress /></Box>}
|
|
{error && !loading && <Alert severity="error" sx={{my: 2}}>{error}</Alert>}
|
|
{apiErrorMessage && <Alert severity="error" sx={{my: 2}}>{apiErrorMessage}</Alert>}
|
|
|
|
{!loading && !error && puedeVer && (
|
|
<TableContainer component={Paper}>
|
|
<Table size="small">
|
|
<TableHead><TableRow>
|
|
<TableCell>Nombre</TableCell><TableCell>Nro. Doc.</TableCell>
|
|
<TableCell>Contacto</TableCell><TableCell>Zona</TableCell>
|
|
<TableCell>Teléfono</TableCell><TableCell>Localidad</TableCell>
|
|
<TableCell>Estado</TableCell>
|
|
{(puedeModificar || puedeEliminar) && <TableCell align="right">Acciones</TableCell>}
|
|
</TableRow></TableHead>
|
|
<TableBody>
|
|
{displayData.length === 0 ? (
|
|
<TableRow><TableCell colSpan={7} align="center">No se encontraron distribuidores.</TableCell></TableRow>
|
|
) : (
|
|
displayData.map((d) => (
|
|
<TableRow key={d.idDistribuidor} hover sx={{ backgroundColor: d.baja ? '#ffebee' : 'inherit' }}>
|
|
<TableCell>{d.nombre}</TableCell><TableCell>{d.nroDoc}</TableCell>
|
|
<TableCell>{d.contacto || '-'}</TableCell><TableCell>{d.nombreZona || '-'}</TableCell>
|
|
<TableCell>{d.telefono || '-'}</TableCell><TableCell>{d.localidad || '-'}</TableCell>
|
|
<TableCell>{d.baja ? <Chip label="Baja" color="error" size="small" /> : <Chip label="Activo" color="success" size="small" />}</TableCell>
|
|
{(puedeModificar || puedeEliminar) && (
|
|
<TableCell align="right">
|
|
<IconButton onClick={(e) => handleMenuOpen(e, d)} disabled={!puedeModificar && !puedeEliminar}><MoreVertIcon /></IconButton>
|
|
</TableCell>
|
|
)}
|
|
</TableRow>
|
|
)))}
|
|
</TableBody>
|
|
</Table>
|
|
<TablePagination
|
|
rowsPerPageOptions={[25, 50, 100]} component="div" count={distribuidores.length}
|
|
rowsPerPage={rowsPerPage} page={page} onPageChange={handleChangePage}
|
|
onRowsPerPageChange={handleChangeRowsPerPage} labelRowsPerPage="Filas por página:"
|
|
/>
|
|
</TableContainer>
|
|
)}
|
|
|
|
<Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose}>
|
|
{puedeModificar && selectedDistribuidorRow && (
|
|
<MenuItem onClick={() => { handleOpenModal(selectedDistribuidorRow); handleMenuClose(); }}>
|
|
<ListItemIcon><EditIcon fontSize="small" /></ListItemIcon>
|
|
<ListItemText>Modificar</ListItemText>
|
|
</MenuItem>
|
|
)}
|
|
{puedeEliminar && selectedDistribuidorRow && (
|
|
<MenuItem onClick={() => handleToggleBaja(selectedDistribuidorRow)}>
|
|
<ListItemIcon>{selectedDistribuidorRow.baja ? <ToggleOnIcon fontSize="small" /> : <ToggleOffIcon fontSize="small" />}</ListItemIcon>
|
|
<ListItemText>{selectedDistribuidorRow.baja ? 'Reactivar' : 'Dar de Baja'}</ListItemText>
|
|
</MenuItem>
|
|
)}
|
|
{puedeEliminar && selectedDistribuidorRow && (
|
|
<MenuItem onClick={() => handleDelete(selectedDistribuidorRow.idDistribuidor)}>
|
|
<ListItemIcon><TrashIcon fontSize="small" /></ListItemIcon>
|
|
<ListItemText>Eliminar (Físico)</ListItemText>
|
|
</MenuItem>
|
|
)}
|
|
{(!puedeModificar && !puedeEliminar) && <MenuItem disabled>Sin acciones</MenuItem>}
|
|
</Menu>
|
|
|
|
<DistribuidorFormModal
|
|
open={modalOpen} onClose={handleCloseModal} onSubmit={handleSubmitModal}
|
|
initialData={editingDistribuidor} errorMessage={apiErrorMessage}
|
|
clearErrorMessage={() => setApiErrorMessage(null)}
|
|
/>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default GestionarDistribuidoresPage; |