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

1. Funcionalidad Principal: Auditoría General

Browse Source 
Se creó una nueva sección de "Auditoría" en la aplicación, diseñada para ser accedida por SuperAdmins.
Se implementó una página AuditoriaGeneralPage.tsx que actúa como un visor centralizado para el historial de cambios de múltiples entidades del sistema.
2. Backend:
Nuevo Controlador (AuditoriaController.cs): Centraliza los endpoints para obtener datos de las tablas de historial (_H).
Servicios y Repositorios Extendidos:
Se añadieron métodos GetHistorialAsync y ObtenerHistorialAsync a las capas de repositorio y servicio para cada una de las siguientes entidades, permitiendo consultar sus tablas _H con filtros:
Usuarios (gral_Usuarios_H)
Pagos de Distribuidores (cue_PagosDistribuidor_H)
Notas de Crédito/Débito (cue_CreditosDebitos_H)
Entradas/Salidas de Distribuidores (dist_EntradasSalidas_H)
Entradas/Salidas de Canillitas (dist_EntradasSalidasCanillas_H)
Novedades de Canillitas (dist_dtNovedadesCanillas_H)
Tipos de Pago (cue_dtTipopago_H)
Canillitas (Maestro) (dist_dtCanillas_H)
Distribuidores (Maestro) (dist_dtDistribuidores_H)
Empresas (Maestro) (dist_dtEmpresas_H)
Zonas (Maestro) (dist_dtZonas_H)
Otros Destinos (Maestro) (dist_dtOtrosDestinos_H)
Publicaciones (Maestro) (dist_dtPublicaciones_H)
Secciones de Publicación (dist_dtPubliSecciones_H)
Precios de Publicación (dist_Precios_H)
Recargos por Zona (dist_RecargoZona_H)
Porcentajes Pago Distribuidores (dist_PorcPago_H)
Porcentajes/Montos Canillita (dist_PorcMonPagoCanilla_H)
Control de Devoluciones (dist_dtCtrlDevoluciones_H)
Tipos de Bobina (bob_dtBobinas_H)
Estados de Bobina (bob_dtEstadosBobinas_H)
Plantas de Impresión (bob_dtPlantas_H)
Stock de Bobinas (bob_StockBobinas_H)
Tiradas (Registro Principal) (bob_RegTiradas_H)
Secciones de Tirada (bob_RegPublicaciones_H)
Cambios de Parada de Canillitas (dist_CambiosParadasCanillas_H)
Ajustes Manuales de Saldo (cue_SaldoAjustesHistorial)
DTOs de Historial: Se crearon DTOs específicos para cada tabla de historial (ej. UsuarioHistorialDto, PagoDistribuidorHistorialDto, etc.) para transferir los datos al frontend, incluyendo el nombre del usuario que realizó la modificación.
Corrección de Lógica de Saldos: Se revisó y corrigió la lógica de afectación de saldos en los servicios PagoDistribuidorService y NotaCreditoDebitoService para asegurar que los débitos y créditos se apliquen correctamente.
3. Frontend:
Nuevo Servicio (auditoriaService.ts): Contiene métodos para llamar a cada uno de los nuevos endpoints de auditoría del backend.
Nueva Página (AuditoriaGeneralPage.tsx):
Permite al SuperAdmin seleccionar el "Tipo de Entidad" a auditar desde un dropdown.
Ofrece filtros comunes (rango de fechas, usuario modificador, tipo de acción) y filtros específicos que aparecen dinámicamente según la entidad seleccionada.
Utiliza un DataGrid de Material-UI para mostrar el historial, con columnas que se adaptan dinámicamente al tipo de entidad consultada.
Nuevos DTOs en TypeScript: Se crearon las interfaces correspondientes a los DTOs de historial del backend.
Gestión de Permisos:
La sección de Auditoría en MainLayout.tsx y su ruta en AppRoutes.tsx están protegidas para ser visibles y accesibles solo por SuperAdmins.
Se añadió un permiso de ejemplo AU_GENERAL_VIEW para ser usado si se decide extender el acceso en el futuro.
Corrección de Errores Menores: Se solucionó el problema del "parpadeo" del selector de fecha en GestionarNovedadesCanillaPage al adoptar un patrón de carga de datos más controlado, similar a otras páginas funcionales.
This commit is contained in:
eldiadmolinari
2025-06-12 19:36:21 -03:00
parent 437b1e8864
commit b04a3b99bf
145 changed files with 5033 additions and 1070 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
Frontend/src/components/Modals/Contables/NotaCreditoDebitoFormModal.tsx
View File

@@ -229,7 +229,7 @@ const NotaCreditoDebitoFormModal: React.FC<NotaCreditoDebitoFormModalProps> = ({
margin="dense" fullWidth error={!!localErrors.fecha} helperText={localErrors.fecha || ''}
disabled={loading || isEditing} InputLabelProps={{ shrink: true }} autoFocus={!isEditing}
/>
<TextField label="Referencia (Opcional)" value={referencia}
<TextField label="Referencia Interna (Opcional)" value={referencia}
onChange={(e) => setReferencia(e.target.value)}
margin="dense" fullWidth disabled={loading || isEditing}
/>
@@ -244,10 +244,10 @@ const NotaCreditoDebitoFormModal: React.FC<NotaCreditoDebitoFormModalProps> = ({
<TextField label="Monto" type="number" value={monto} required
onChange={(e) => {setMonto(e.target.value); handleInputChange('monto');}}
margin="dense" fullWidth error={!!localErrors.monto} helperText={localErrors.monto || ''}
disabled={loading} inputProps={{step: "0.01", min:0.01, lang:"es-AR" }}
disabled={loading} inputProps={{step: "0.01", min:0.05, lang:"es-AR" }}
InputProps={{ startAdornment: <InputAdornment position="start">$</InputAdornment> }}
/>
<TextField label="Observaciones (Opcional)" value={observaciones}
<TextField label="Referencia (Opcional)" value={observaciones}
onChange={(e) => setObservaciones(e.target.value)}
margin="dense" fullWidth multiline rows={2} disabled={loading}
/>

2
Frontend/src/components/Modals/Contables/PagoDistribuidorFormModal.tsx
View File

@@ -210,7 +210,7 @@ const PagoDistribuidorFormModal: React.FC<PagoDistribuidorFormModalProps> = ({
<TextField label="Monto" type="number" value={monto} required
onChange={(e) => {setMonto(e.target.value); handleInputChange('monto');}}
margin="dense" fullWidth error={!!localErrors.monto} helperText={localErrors.monto || ''}
disabled={loading} inputProps={{step: "0.01", min:0.01, lang:"es-AR" }}
disabled={loading} inputProps={{step: "0.01", min:0.05, lang:"es-AR" }}
InputProps={{ startAdornment: <InputAdornment position="start">$</InputAdornment> }}
/>
<FormControl fullWidth margin="dense" error={!!localErrors.idTipoPago} required>

201
Frontend/src/components/Modals/Distribucion/PrecioFormModal.tsx
View File

@@ -1,25 +1,25 @@
import React, { useState, useEffect } from 'react';
import {
Modal, Box, Typography, TextField, Button, CircularProgress, Alert,
InputAdornment
// Quitar Grid si no se usa
Modal, Box, Typography, TextField, Button, CircularProgress, Alert,
InputAdornment
// Quitar Grid si no se usa
} from '@mui/material';
import type { PrecioDto } from '../../../models/dtos/Distribucion/PrecioDto';
import type { CreatePrecioDto } from '../../../models/dtos/Distribucion/CreatePrecioDto';
import type { UpdatePrecioDto } from '../../../models/dtos/Distribucion/UpdatePrecioDto';
const modalStyle = {
position: 'absolute' as 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: { xs: '95%', sm: '80%', md: '700px' },
bgcolor: 'background.paper',
border: '2px solid #000',
boxShadow: 24,
p: 4,
maxHeight: '90vh',
overflowY: 'auto'
position: 'absolute' as 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: { xs: '95%', sm: '80%', md: '700px' },
bgcolor: 'background.paper',
border: '2px solid #000',
boxShadow: 24,
p: 4,
maxHeight: '90vh',
overflowY: 'auto'
};
const diasSemana = ["Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado", "Domingo"] as const;
@@ -55,48 +55,50 @@ const PrecioFormModal: React.FC<PrecioFormModalProps> = ({
const isEditing = Boolean(initialData);
useEffect(() => {
if (open) {
setVigenciaD(initialData?.vigenciaD || '');
setVigenciaH(initialData?.vigenciaH || '');
const initialPrecios: Record<DiaSemana, string> = { Lunes: '', Martes: '', Miercoles: '', Jueves: '', Viernes: '', Sabado: '', Domingo: '' };
if (initialData) {
diasSemana.forEach(dia => {
const key = dia.toLowerCase() as keyof Omit<PrecioDto, 'idPrecio' | 'idPublicacion' | 'vigenciaD' | 'vigenciaH'>;
initialPrecios[dia] = initialData[key]?.toString() || '';
});
}
setPreciosDia(initialPrecios);
setLocalErrors({});
clearErrorMessage();
// Este efecto se ejecuta cuando el modal se abre o cuando los datos iniciales cambian
if (open) {
setVigenciaD(initialData?.vigenciaD || '');
setVigenciaH(initialData?.vigenciaH || '');
const initialPrecios: Record<DiaSemana, string> = { Lunes: '', Martes: '', Miercoles: '', Jueves: '', Viernes: '', Sabado: '', Domingo: '' };
if (initialData) {
diasSemana.forEach(dia => {
const key = dia.toLowerCase() as keyof Omit<PrecioDto, 'idPrecio' | 'idPublicacion' | 'vigenciaD' | 'vigenciaH'>;
initialPrecios[dia] = initialData[key]?.toString() || '';
});
}
}, [open, initialData, clearErrorMessage]);
setPreciosDia(initialPrecios);
setLocalErrors({});
// NO llamar a clearErrorMessage aquí automáticamente al abrir si ya hay un error de un intento previo.
// Solo limpiar si es una "nueva" apertura (ej, initialData cambió o se abrió desde cerrado)
}
}, [open, initialData]);
const validate = (): boolean => {
const errors: { [key: string]: string | null } = {};
if (!isEditing && !vigenciaD.trim()) {
errors.vigenciaD = 'La Vigencia Desde es obligatoria.';
errors.vigenciaD = 'La Vigencia Desde es obligatoria.';
} else if (vigenciaD.trim() && !/^\d{4}-\d{2}-\d{2}$/.test(vigenciaD)) {
errors.vigenciaD = 'Formato de fecha inválido (YYYY-MM-DD).';
errors.vigenciaD = 'Formato de fecha inválido (YYYY-MM-DD).';
}
if (vigenciaH.trim() && !/^\d{4}-\d{2}-\d{2}$/.test(vigenciaH)) {
errors.vigenciaH = 'Formato de fecha inválido (YYYY-MM-DD).';
errors.vigenciaH = 'Formato de fecha inválido (YYYY-MM-DD).';
} else if (vigenciaH.trim() && vigenciaD.trim() && new Date(vigenciaH) < new Date(vigenciaD)) {
errors.vigenciaH = 'Vigencia Hasta no puede ser anterior a Vigencia Desde.';
errors.vigenciaH = 'Vigencia Hasta no puede ser anterior a Vigencia Desde.';
}
let alMenosUnPrecio = false;
diasSemana.forEach(dia => {
const valor = preciosDia[dia];
if (valor.trim()) {
alMenosUnPrecio = true;
if (isNaN(parseFloat(valor)) || parseFloat(valor) < 0) {
errors[dia.toLowerCase()] = `Precio de ${dia} inválido.`;
}
const valor = preciosDia[dia];
if (valor.trim()) {
alMenosUnPrecio = true;
if (isNaN(parseFloat(valor)) || parseFloat(valor) < 0) {
errors[dia.toLowerCase()] = `Precio de ${dia} inválido.`;
}
}
});
if (!isEditing && !alMenosUnPrecio) {
errors.dias = 'Debe ingresar al menos un precio para un día de la semana.';
errors.dias = 'Debe ingresar al menos un precio para un día de la semana.';
}
setLocalErrors(errors);
@@ -106,53 +108,59 @@ const PrecioFormModal: React.FC<PrecioFormModalProps> = ({
const handlePrecioDiaChange = (dia: DiaSemana, value: string) => {
setPreciosDia(prev => ({ ...prev, [dia]: value }));
if (localErrors[dia.toLowerCase()] || localErrors.dias) {
setLocalErrors(prev => ({ ...prev, [dia.toLowerCase()]: null, dias: null }));
setLocalErrors(prev => ({ ...prev, [dia.toLowerCase()]: null, dias: null }));
}
if (errorMessage) clearErrorMessage();
};
const handleDateChange = (setter: React.Dispatch<React.SetStateAction<string>>, fieldName: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
setter(e.target.value);
if (localErrors[fieldName]) {
setLocalErrors(prev => ({ ...prev, [fieldName]: null }));
setLocalErrors(prev => ({ ...prev, [fieldName]: null }));
}
if (errorMessage) clearErrorMessage();
};
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
clearErrorMessage();
clearErrorMessage(); // Limpiar al inicio de un nuevo intento de submit
if (!validate()) return;
setLoading(true);
let success = false; // Bandera para controlar el cierre
try {
const preciosNumericos: Partial<Record<keyof Omit<PrecioDto, 'idPrecio'|'idPublicacion'|'vigenciaD'|'vigenciaH'>, number | null>> = {};
diasSemana.forEach(dia => {
const valor = preciosDia[dia].trim();
// Convertir el nombre del día a la clave correcta del DTO (ej. "Lunes" -> "lunes")
const key = dia.toLowerCase() as keyof typeof preciosNumericos;
preciosNumericos[key] = valor ? parseFloat(valor) : null;
});
diasSemana.forEach(dia => {
const valor = preciosDia[dia].trim();
const key = dia.toLowerCase() as keyof typeof preciosNumericos;
preciosNumericos[key] = valor ? parseFloat(valor) : null;
});
if (isEditing && initialData) {
const dataToSubmit: UpdatePrecioDto = {
vigenciaH: vigenciaH.trim() ? vigenciaH : null,
...preciosNumericos // Spread de los precios de los días
vigenciaH: vigenciaH.trim() ? vigenciaH.split('T')[0] : null,
...preciosNumericos
};
await onSubmit(dataToSubmit, initialData.idPrecio);
} else {
const dataToSubmit: CreatePrecioDto = {
idPublicacion,
vigenciaD,
...preciosNumericos
idPublicacion,
vigenciaD,
...preciosNumericos
};
await onSubmit(dataToSubmit);
}
onClose();
success = true; // Marcar como exitoso si no hubo excepciones
} catch (error: any) {
console.error("Error en submit de PrecioFormModal:", error);
// El error ya fue seteado en el padre (GestionarPreciosPublicacionPage)
// y se pasa como prop 'errorMessage' a este modal.
// No necesitamos setearlo aquí de nuevo.
console.error("Error propagado al submit de PrecioFormModal:", error);
success = false;
} finally {
setLoading(false);
setLoading(false);
if (success) {
onClose();
}
}
};
@@ -163,51 +171,52 @@ const PrecioFormModal: React.FC<PrecioFormModalProps> = ({
{isEditing ? 'Editar Período de Precio' : 'Agregar Nuevo Período de Precio'}
</Typography>
<Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
{/* Sección de Vigencias */}
<Box sx={{ display: 'flex', gap: 2, mb: 2, flexWrap: 'wrap' }}>
<TextField label="Vigencia Desde" type="date" value={vigenciaD} required={!isEditing}
onChange={handleDateChange(setVigenciaD, 'vigenciaD')} margin="dense"
error={!!localErrors.vigenciaD} helperText={localErrors.vigenciaD || ''}
disabled={loading || isEditing}
InputLabelProps={{ shrink: true }}
sx={{ flex: 1, minWidth: isEditing ? 'calc(50% - 8px)' : '100%' }}
autoFocus={!isEditing}
/>
{isEditing && (
<TextField label="Vigencia Hasta (Opcional)" type="date" value={vigenciaH}
onChange={handleDateChange(setVigenciaH, 'vigenciaH')} margin="dense"
error={!!localErrors.vigenciaH} helperText={localErrors.vigenciaH || ''}
disabled={loading}
InputLabelProps={{ shrink: true }}
sx={{ flex: 1, minWidth: 'calc(50% - 8px)' }}
/>
)}
</Box>
{/* Sección de Vigencias */}
<Box sx={{ display: 'flex', gap: 2, mb: 2, flexWrap: 'wrap' }}>
<TextField label="Vigencia Desde" type="date" value={vigenciaD} required={!isEditing}
onChange={handleDateChange(setVigenciaD, 'vigenciaD')} margin="dense"
error={!!localErrors.vigenciaD} helperText={localErrors.vigenciaD || ''}
disabled={loading || isEditing}
InputLabelProps={{ shrink: true }}
sx={{ flex: 1, minWidth: isEditing ? 'calc(50% - 8px)' : '100%' }}
autoFocus={!isEditing}
/>
{isEditing && (
<TextField label="Vigencia Hasta (Opcional)" type="date" value={vigenciaH}
onChange={handleDateChange(setVigenciaH, 'vigenciaH')} margin="dense"
error={!!localErrors.vigenciaH} helperText={localErrors.vigenciaH || ''}
disabled={loading}
InputLabelProps={{ shrink: true }}
sx={{ flex: 1, minWidth: 'calc(50% - 8px)' }}
/>
)}
</Box>
{/* Sección de Precios por Día con Flexbox */}
<Typography variant="subtitle1" sx={{mt: 2, mb: 1}}>Precios por Día:</Typography>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
{diasSemana.map(dia => (
<Box key={dia} sx={{ flexBasis: { xs: 'calc(50% - 8px)', sm: 'calc(33.33% - 11px)', md: 'calc(25% - 12px)' }, minWidth: '120px' }}>
{/* El ajuste de -Xpx en flexBasis es aproximado para compensar el gap.
{/* Sección de Precios por Día con Flexbox */}
<Typography variant="subtitle1" sx={{ mt: 2, mb: 1 }}>Precios por Día:</Typography>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
{diasSemana.map(dia => (
<Box key={dia} sx={{ flexBasis: { xs: 'calc(50% - 8px)', sm: 'calc(33.33% - 11px)', md: 'calc(25% - 12px)' }, minWidth: '120px' }}>
{/* El ajuste de -Xpx en flexBasis es aproximado para compensar el gap.
Para 3 columnas (33.33%): gap es 16px, se distribuye entre 2 espacios -> 16/2 * 2/3 = ~11px
Para 4 columnas (25%): gap es 16px, se distribuye entre 3 espacios -> 16/3 * 3/4 = 12px
*/}
<TextField label={dia} type="number"
value={preciosDia[dia]}
onChange={(e) => handlePrecioDiaChange(dia, e.target.value)}
margin="dense" fullWidth
error={!!localErrors[dia.toLowerCase()]} helperText={localErrors[dia.toLowerCase()] || ''}
disabled={loading}
InputProps={{ startAdornment: <InputAdornment position="start">$</InputAdornment> }}
inputProps={{ step: "0.01", lang:"es-AR" }}
/>
</Box>
))}
</Box>
{localErrors.dias && <Alert severity="error" sx={{width: '100%', mt:1}}>{localErrors.dias}</Alert>}
<TextField label={dia} type="number"
value={preciosDia[dia]}
onChange={(e) => handlePrecioDiaChange(dia, e.target.value)}
margin="dense" fullWidth
error={!!localErrors[dia.toLowerCase()]} helperText={localErrors[dia.toLowerCase()] || ''}
disabled={loading}
InputProps={{ startAdornment: <InputAdornment position="start">$</InputAdornment> }}
inputProps={{ step: "0.01", lang: "es-AR" }}
/>
</Box>
))}
</Box>
{localErrors.dias && <Alert severity="error" sx={{ width: '100%', mt: 1 }}>{localErrors.dias}</Alert>}
{/* Mostrar error de la API si existe (pasado desde el padre) */}
{errorMessage && <Alert severity="error" sx={{ mt: 2, width: '100%' }}>{errorMessage}</Alert>}
<Box sx={{ mt: 3, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>

46
Frontend/src/components/Modals/Distribucion/RecargoZonaFormModal.tsx
View File

@@ -1,3 +1,4 @@
// src/components/Modals/Distribucion/RecargoZonaFormModal.tsx
import React, { useState, useEffect } from 'react';
import {
Modal, Box, Typography, TextField, Button, CircularProgress, Alert,
@@ -6,10 +7,10 @@ import {
import type { RecargoZonaDto } from '../../../models/dtos/Distribucion/RecargoZonaDto';
import type { CreateRecargoZonaDto } from '../../../models/dtos/Distribucion/CreateRecargoZonaDto';
import type { UpdateRecargoZonaDto } from '../../../models/dtos/Distribucion/UpdateRecargoZonaDto';
import type { ZonaDto } from '../../../models/dtos/Zonas/ZonaDto'; // Para el dropdown de zonas
import zonaService from '../../../services/Distribucion/zonaService'; // Para cargar zonas
import type { ZonaDto } from '../../../models/dtos/Zonas/ZonaDto';
import zonaService from '../../../services/Distribucion/zonaService';
const modalStyle = { /* ... (mismo estilo) ... */
const modalStyle = {
position: 'absolute' as 'absolute',
top: '50%',
left: '50%',
@@ -28,7 +29,7 @@ interface RecargoZonaFormModalProps {
onClose: () => void;
onSubmit: (data: CreateRecargoZonaDto | UpdateRecargoZonaDto, idRecargo?: number) => Promise<void>;
idPublicacion: number;
initialData?: RecargoZonaDto | null; // Para editar
initialData?: RecargoZonaDto | null;
errorMessage?: string | null;
clearErrorMessage: () => void;
}
@@ -39,12 +40,12 @@ const RecargoZonaFormModal: React.FC<RecargoZonaFormModalProps> = ({
onSubmit,
idPublicacion,
initialData,
errorMessage,
errorMessage, // Esta prop viene del padre (GestionarRecargosPublicacionPage)
clearErrorMessage
}) => {
const [idZona, setIdZona] = useState<number | string>('');
const [vigenciaD, setVigenciaD] = useState(''); // "yyyy-MM-dd"
const [vigenciaH, setVigenciaH] = useState(''); // "yyyy-MM-dd"
const [vigenciaD, setVigenciaD] = useState('');
const [vigenciaH, setVigenciaH] = useState('');
const [valor, setValor] = useState<string>('');
const [zonas, setZonas] = useState<ZonaDto[]>([]);
@@ -58,7 +59,7 @@ const RecargoZonaFormModal: React.FC<RecargoZonaFormModalProps> = ({
const fetchZonas = async () => {
setLoadingZonas(true);
try {
const data = await zonaService.getAllZonas(); // Asume que devuelve zonas activas
const data = await zonaService.getAllZonas();
setZonas(data);
} catch (error) {
console.error("Error al cargar zonas", error);
@@ -75,11 +76,13 @@ const RecargoZonaFormModal: React.FC<RecargoZonaFormModalProps> = ({
setVigenciaH(initialData?.vigenciaH || '');
setValor(initialData?.valor?.toString() || '');
setLocalErrors({});
clearErrorMessage();
// No limpiar errorMessage aquí si queremos que persista un error de submit anterior
// clearErrorMessage(); // Se limpia al abrir desde la página o al inicio de un nuevo submit
}
}, [open, initialData, clearErrorMessage]);
}, [open, initialData]); // Quitar clearErrorMessage de aquí para que no limpie el error del padre en cada re-render por 'open'
const validate = (): boolean => {
// ... (lógica de validación sin cambios)
const errors: { [key: string]: string | null } = {};
if (!idZona) errors.idZona = 'Debe seleccionar una zona.';
if (!isEditing && !vigenciaD.trim()) {
@@ -102,38 +105,46 @@ const RecargoZonaFormModal: React.FC<RecargoZonaFormModalProps> = ({
const handleInputChange = (fieldName: string) => {
if (localErrors[fieldName]) setLocalErrors(prev => ({ ...prev, [fieldName]: null }));
if (errorMessage) clearErrorMessage();
if (errorMessage) clearErrorMessage(); // Limpiar error del padre si el usuario modifica un campo
};
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
clearErrorMessage();
clearErrorMessage(); // Limpiar errores del padre antes de un nuevo intento
if (!validate()) return;
setLoading(true);
let success = false; // Bandera para controlar el cierre del modal
try {
const valorNum = parseFloat(valor);
if (isEditing && initialData) {
const dataToSubmit: UpdateRecargoZonaDto = {
valor: valorNum,
vigenciaH: vigenciaH.trim() ? vigenciaH : null,
vigenciaH: vigenciaH.trim() ? vigenciaH.split('T')[0] : null, // Enviar solo fecha o null
};
await onSubmit(dataToSubmit, initialData.idRecargo);
} else {
const dataToSubmit: CreateRecargoZonaDto = {
idPublicacion,
idZona: Number(idZona),
vigenciaD,
vigenciaD: vigenciaD.split('T')[0], // Enviar solo fecha
valor: valorNum,
};
await onSubmit(dataToSubmit);
}
onClose();
success = true; // Marcar como exitoso si no hubo excepciones
} catch (error: any) {
console.error("Error en submit de RecargoZonaFormModal:", error);
// El error de la API ya fue seteado en la página padre (GestionarRecargosPublicacionPage)
// y se pasa a este modal a través de la prop 'errorMessage'.
// No necesitamos hacer setApiErrorMessage aquí.
console.error("Error propagado al submit de RecargoZonaFormModal:", error);
success = false; // Marcar como no exitoso
} finally {
setLoading(false);
if (success) { // Solo cerrar si la operación fue exitosa
onClose();
}
}
};
@@ -148,7 +159,7 @@ const RecargoZonaFormModal: React.FC<RecargoZonaFormModalProps> = ({
<InputLabel id="zona-recargo-select-label" required>Zona</InputLabel>
<Select labelId="zona-recargo-select-label" label="Zona" value={idZona}
onChange={(e) => {setIdZona(e.target.value as number); handleInputChange('idZona');}}
disabled={loading || loadingZonas || isEditing} // Zona no se edita
disabled={loading || loadingZonas || isEditing}
>
<MenuItem value="" disabled><em>Seleccione una zona</em></MenuItem>
{zonas.map((z) => (<MenuItem key={z.idZona} value={z.idZona}>{z.nombre}</MenuItem>))}
@@ -175,6 +186,7 @@ const RecargoZonaFormModal: React.FC<RecargoZonaFormModalProps> = ({
inputProps={{ step: "0.01", lang:"es-AR" }}
/>
{/* Este Alert mostrará el error de la API que viene de la página padre */}
{errorMessage && <Alert severity="error" sx={{ mt: 2, width: '100%' }}>{errorMessage}</Alert>}
{localErrors.zonas && <Alert severity="warning" sx={{ mt: 1 }}>{localErrors.zonas}</Alert>}

149
Frontend/src/components/Modals/Impresion/StockBobinaCambioEstadoModal.tsx
View File

@@ -1,3 +1,4 @@
// src/components/Modals/Impresion/StockBobinaCambioEstadoModal.tsx
import React, { useState, useEffect } from 'react';
import {
Modal, Box, Typography, TextField, Button, CircularProgress, Alert,
@@ -6,13 +7,14 @@ import {
import type { StockBobinaDto } from '../../../models/dtos/Impresion/StockBobinaDto';
import type { CambiarEstadoBobinaDto } from '../../../models/dtos/Impresion/CambiarEstadoBobinaDto';
import type { EstadoBobinaDto } from '../../../models/dtos/Impresion/EstadoBobinaDto';
import type { PublicacionDto } from '../../../models/dtos/Distribucion/PublicacionDto';
import type { PubliSeccionDto } from '../../../models/dtos/Distribucion/PubliSeccionDto'; // Asumiendo que tienes este DTO
import estadoBobinaService from '../../../services/Impresion/estadoBobinaService'; // Para cargar estados
import publicacionService from '../../../services/Distribucion/publicacionService'; // Para cargar publicaciones
import publiSeccionService from '../../../services/Distribucion/publiSeccionService'; // Para cargar secciones
// --- CAMBIO: Importar PublicacionDropdownDto ---
import type { PublicacionDropdownDto } from '../../../models/dtos/Distribucion/PublicacionDropdownDto';
import type { PubliSeccionDto } from '../../../models/dtos/Distribucion/PubliSeccionDto';
import estadoBobinaService from '../../../services/Impresion/estadoBobinaService';
import publicacionService from '../../../services/Distribucion/publicacionService';
import publiSeccionService from '../../../services/Distribucion/publiSeccionService';
const modalStyle = { /* ... (mismo estilo) ... */
const modalStyle = {
position: 'absolute' as 'absolute',
top: '50%',
left: '50%',
@@ -26,16 +28,15 @@ const modalStyle = { /* ... (mismo estilo) ... */
overflowY: 'auto'
};
// IDs de estados conocidos (ajusta según tu BD)
const ID_ESTADO_EN_USO = 2;
const ID_ESTADO_DISPONIBLE = 1;
const ID_ESTADO_EN_USO = 2; // Usaremos este consistentemente
const ID_ESTADO_DANADA = 3;
// const ID_ESTADO_DISPONIBLE = 1; // No se cambia a Disponible desde este modal
interface StockBobinaCambioEstadoModalProps {
open: boolean;
onClose: () => void;
onSubmit: (idBobina: number, data: CambiarEstadoBobinaDto) => Promise<void>;
bobinaActual: StockBobinaDto | null; // La bobina cuyo estado se va a cambiar
bobinaActual: StockBobinaDto | null;
errorMessage?: string | null;
clearErrorMessage: () => void;
}
@@ -55,36 +56,47 @@ const StockBobinaCambioEstadoModal: React.FC<StockBobinaCambioEstadoModalProps>
const [fechaCambioEstado, setFechaCambioEstado] = useState('');
const [estadosDisponibles, setEstadosDisponibles] = useState<EstadoBobinaDto[]>([]);
const [publicacionesDisponibles, setPublicacionesDisponibles] = useState<PublicacionDto[]>([]);
// --- CAMBIO: Usar PublicacionDropdownDto para el estado ---
const [publicacionesDisponibles, setPublicacionesDisponibles] = useState<PublicacionDropdownDto[]>([]);
const [seccionesDisponibles, setSeccionesDisponibles] = useState<PubliSeccionDto[]>([]);
const [loading, setLoading] = useState(false);
const [loadingDropdowns, setLoadingDropdowns] = useState(false);
const [localErrors, setLocalErrors] = useState<{ [key: string]: string | null }>({});
useEffect(() => {
useEffect(() => {
const fetchDropdownData = async () => {
if (!bobinaActual) return;
setLoadingDropdowns(true);
try {
const estadosData = await estadoBobinaService.getAllEstadosBobina();
// Filtrar estados: no se puede volver a "Disponible" o al mismo estado actual desde aquí.
// Y si está "Dañada", no se puede cambiar.
let estadosFiltrados = estadosData.filter(e => e.idEstadoBobina !== bobinaActual.idEstadoBobina && e.idEstadoBobina !== 1);
if (bobinaActual.idEstadoBobina === ID_ESTADO_DANADA) { // Si ya está dañada, no hay más cambios
estadosFiltrados = [];
} else if (bobinaActual.idEstadoBobina === ID_ESTADO_EN_USO) { // Si está en uso, solo puede pasar a Dañada
estadosFiltrados = estadosData.filter(e => e.idEstadoBobina === ID_ESTADO_DANADA);
}
const todosLosEstados = await estadoBobinaService.getAllEstadosBobina();
let estadosFiltrados: EstadoBobinaDto[];
if (bobinaActual.idEstadoBobina === ID_ESTADO_DANADA) {
estadosFiltrados = todosLosEstados.filter(e => e.idEstadoBobina === ID_ESTADO_DISPONIBLE);
} else if (bobinaActual.idEstadoBobina === ID_ESTADO_EN_USO) {
estadosFiltrados = todosLosEstados.filter(e => e.idEstadoBobina === ID_ESTADO_DANADA);
} else if (bobinaActual.idEstadoBobina === ID_ESTADO_DISPONIBLE) {
// --- CAMBIO: Usar ID_ESTADO_EN_USO ---
estadosFiltrados = todosLosEstados.filter(
e => e.idEstadoBobina === ID_ESTADO_EN_USO || e.idEstadoBobina === ID_ESTADO_DANADA
);
} else {
estadosFiltrados = todosLosEstados.filter(e => e.idEstadoBobina !== bobinaActual.idEstadoBobina);
}
setEstadosDisponibles(estadosFiltrados);
if (estadosFiltrados.some(e => e.idEstadoBobina === ID_ESTADO_EN_USO)) { // Solo cargar publicaciones si "En Uso" es una opción
const publicacionesData = await publicacionService.getAllPublicaciones(undefined, undefined, true); // Solo habilitadas
const sePuedePonerEnUso = estadosFiltrados.some(e => e.idEstadoBobina === ID_ESTADO_EN_USO);
if (sePuedePonerEnUso) {
// --- CAMBIO: La data es PublicacionDropdownDto[] ---
const publicacionesData: PublicacionDropdownDto[] = await publicacionService.getPublicacionesForDropdown(true);
setPublicacionesDisponibles(publicacionesData);
} else {
setPublicacionesDisponibles([]);
setIdPublicacion('');
setIdSeccion('');
}
} catch (error) {
@@ -98,42 +110,67 @@ const StockBobinaCambioEstadoModal: React.FC<StockBobinaCambioEstadoModalProps>
if (open && bobinaActual) {
fetchDropdownData();
setNuevoEstadoId('');
setIdPublicacion('');
setIdSeccion('');
setObs(bobinaActual.obs || ''); // Pre-cargar obs existente
setFechaCambioEstado(new Date().toISOString().split('T')[0]); // Default a hoy
// Pre-cargar basado en si la bobina actual está "En Uso"
if (bobinaActual.idEstadoBobina === ID_ESTADO_EN_USO) {
setIdPublicacion(bobinaActual.idPublicacion?.toString() || '');
// Solo pre-cargar sección si la publicación también estaba pre-cargada
if (bobinaActual.idPublicacion) {
setIdSeccion(bobinaActual.idSeccion?.toString() || '');
} else {
setIdSeccion('');
}
} else {
setIdPublicacion('');
setIdSeccion('');
}
setObs(bobinaActual.obs || '');
setFechaCambioEstado(new Date().toISOString().split('T')[0]);
setLocalErrors({});
clearErrorMessage();
}
}, [open, bobinaActual, clearErrorMessage]);
// Cargar secciones cuando cambia la publicación seleccionada y el estado es "En Uso"
useEffect(() => {
const fetchSecciones = async () => {
if (nuevoEstadoId === ID_ESTADO_EN_USO && idPublicacion) {
setLoadingDropdowns(true); // Podrías tener un loader específico para secciones
if (Number(nuevoEstadoId) === ID_ESTADO_EN_USO && idPublicacion) {
setLoadingDropdowns(true);
try {
const data = await publiSeccionService.getSeccionesPorPublicacion(Number(idPublicacion), true); // Solo activas
const data = await publiSeccionService.getSeccionesPorPublicacion(Number(idPublicacion), true);
setSeccionesDisponibles(data);
} catch (error) {
console.error("Error al cargar secciones:", error);
setLocalErrors(prev => ({ ...prev, secciones: 'Error al cargar secciones.'}));
setSeccionesDisponibles([]);
} finally {
setLoadingDropdowns(false);
}
} else {
setSeccionesDisponibles([]); // Limpiar secciones si no aplica
setSeccionesDisponibles([]);
// No es necesario setIdSeccion('') aquí si el useEffect de nuevoEstadoId ya lo hace.
}
};
fetchSecciones();
if (idPublicacion && Number(nuevoEstadoId) === ID_ESTADO_EN_USO) { // Solo fetchear si hay idPublicacion
fetchSecciones();
} else {
setSeccionesDisponibles([]); // Limpiar si no se cumplen condiciones
}
}, [nuevoEstadoId, idPublicacion]);
// Efecto para limpiar publicacion/seccion si el nuevo estado no es "En Uso"
useEffect(() => {
if (Number(nuevoEstadoId) !== ID_ESTADO_EN_USO) {
setIdPublicacion('');
setIdSeccion('');
}
}, [nuevoEstadoId]);
const validate = (): boolean => {
const errors: { [key: string]: string | null } = {};
if (!nuevoEstadoId) errors.nuevoEstadoId = 'Seleccione un nuevo estado.';
if (!fechaCambioEstado.trim()) errors.fechaCambioEstado = 'La fecha de cambio es obligatoria.';
if (!fechaCambioEstado.trim()) errors.fechaCambioEstado = 'La fecha es obligatoria.';
else if (!/^\d{4}-\d{2}-\d{2}$/.test(fechaCambioEstado)) errors.fechaCambioEstado = 'Formato de fecha inválido.';
if (Number(nuevoEstadoId) === ID_ESTADO_EN_USO) {
@@ -147,11 +184,9 @@ const StockBobinaCambioEstadoModal: React.FC<StockBobinaCambioEstadoModalProps>
const handleInputChange = (fieldName: string) => {
if (localErrors[fieldName]) setLocalErrors(prev => ({ ...prev, [fieldName]: null }));
if (errorMessage) clearErrorMessage();
if (fieldName === 'nuevoEstadoId') { // Si cambia el estado, resetear pub/secc
setIdPublicacion('');
setIdSeccion('');
}
if (fieldName === 'idPublicacion') { // Si cambia la publicación, resetear seccion
// La lógica de limpieza de pub/secc se movió a un useEffect dedicado a nuevoEstadoId
// y el de sección a un useEffect de idPublicacion
if (fieldName === 'idPublicacion') { // Si cambia la publicación, resetear seccion
setIdSeccion('');
}
};
@@ -163,11 +198,12 @@ const StockBobinaCambioEstadoModal: React.FC<StockBobinaCambioEstadoModalProps>
setLoading(true);
try {
const esEnUso = Number(nuevoEstadoId) === ID_ESTADO_EN_USO;
const dataToSubmit: CambiarEstadoBobinaDto = {
nuevoEstadoId: Number(nuevoEstadoId),
idPublicacion: Number(nuevoEstadoId) === ID_ESTADO_EN_USO ? Number(idPublicacion) : null,
idSeccion: Number(nuevoEstadoId) === ID_ESTADO_EN_USO ? Number(idSeccion) : null,
obs: obs || undefined,
idPublicacion: esEnUso && idPublicacion ? Number(idPublicacion) : null,
idSeccion: esEnUso && idPublicacion && idSeccion ? Number(idSeccion) : null,
obs: obs.trim() || null,
fechaCambioEstado,
};
await onSubmit(bobinaActual.idBobina, dataToSubmit);
@@ -192,10 +228,16 @@ const StockBobinaCambioEstadoModal: React.FC<StockBobinaCambioEstadoModalProps>
</Typography>
<Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
<FormControl fullWidth margin="dense" error={!!localErrors.nuevoEstadoId}>
<InputLabel id="nuevo-estado-select-label" required>Nuevo Estado</InputLabel>
<Select labelId="nuevo-estado-select-label" label="Nuevo Estado" value={nuevoEstadoId}
onChange={(e) => {setNuevoEstadoId(e.target.value as number); handleInputChange('nuevoEstadoId');}}
<FormControl fullWidth margin="dense" error={!!localErrors.nuevoEstadoId} required>
<InputLabel id="nuevo-estado-select-label">Nuevo Estado</InputLabel>
<Select
labelId="nuevo-estado-select-label"
label="Nuevo Estado"
value={nuevoEstadoId}
onChange={(e) => {
setNuevoEstadoId(e.target.value as number | string);
handleInputChange('nuevoEstadoId');
}}
disabled={loading || loadingDropdowns || estadosDisponibles.length === 0}
>
<MenuItem value="" disabled><em>Seleccione un estado</em></MenuItem>
@@ -206,24 +248,24 @@ const StockBobinaCambioEstadoModal: React.FC<StockBobinaCambioEstadoModalProps>
{Number(nuevoEstadoId) === ID_ESTADO_EN_USO && (
<>
<FormControl fullWidth margin="dense" error={!!localErrors.idPublicacion}>
<InputLabel id="publicacion-estado-select-label" required>Publicación</InputLabel>
<FormControl fullWidth margin="dense" error={!!localErrors.idPublicacion} required>
<InputLabel id="publicacion-estado-select-label">Publicación</InputLabel>
<Select labelId="publicacion-estado-select-label" label="Publicación" value={idPublicacion}
onChange={(e) => {setIdPublicacion(e.target.value as number); handleInputChange('idPublicacion');}}
disabled={loading || loadingDropdowns}
disabled={loading || loadingDropdowns || publicacionesDisponibles.length === 0}
>
<MenuItem value="" disabled><em>Seleccione publicación</em></MenuItem>
{publicacionesDisponibles.map((p) => (<MenuItem key={p.idPublicacion} value={p.idPublicacion}>{p.nombre}</MenuItem>))}
</Select>
{localErrors.idPublicacion && <Typography color="error" variant="caption">{localErrors.idPublicacion}</Typography>}
</FormControl>
<FormControl fullWidth margin="dense" error={!!localErrors.idSeccion}>
<InputLabel id="seccion-estado-select-label" required>Sección</InputLabel>
<FormControl fullWidth margin="dense" error={!!localErrors.idSeccion} required>
<InputLabel id="seccion-estado-select-label">Sección</InputLabel>
<Select labelId="seccion-estado-select-label" label="Sección" value={idSeccion}
onChange={(e) => {setIdSeccion(e.target.value as number); handleInputChange('idSeccion');}}
disabled={loading || loadingDropdowns || !idPublicacion || seccionesDisponibles.length === 0}
>
<MenuItem value="" disabled><em>{idPublicacion ? 'Seleccione sección' : 'Seleccione publicación primero'}</em></MenuItem>
<MenuItem value="" disabled><em>{idPublicacion ? (seccionesDisponibles.length > 0 ? 'Seleccione sección' : 'No hay secciones para esta pub.') : 'Seleccione publicación primero'}</em></MenuItem>
{seccionesDisponibles.map((s) => (<MenuItem key={s.idSeccion} value={s.idSeccion}>{s.nombre}</MenuItem>))}
</Select>
{localErrors.idSeccion && <Typography color="error" variant="caption">{localErrors.idSeccion}</Typography>}
@@ -248,7 +290,8 @@ const StockBobinaCambioEstadoModal: React.FC<StockBobinaCambioEstadoModalProps>
<Box sx={{ mt: 3, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
<Button onClick={onClose} color="secondary" disabled={loading}>Cancelar</Button>
<Button type="submit" variant="contained" disabled={loading || loadingDropdowns || estadosDisponibles.length === 0}>
<Button type="submit" variant="contained"
disabled={loading || loadingDropdowns || (estadosDisponibles.length === 0 && bobinaActual.idEstadoBobina === ID_ESTADO_EN_USO) }>
{loading ? <CircularProgress size={24} /> : 'Guardar Cambio de Estado'}
</Button>
</Box>

232
Frontend/src/components/Modals/Impresion/StockBobinaEditFormModal.tsx
View File

@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react';
import {
Modal, Box, Typography, TextField, Button, CircularProgress, Alert,
FormControl, InputLabel, Select, MenuItem
Modal, Box, Typography, TextField, Button, CircularProgress, Alert,
FormControl, InputLabel, Select, MenuItem
} from '@mui/material';
import type { StockBobinaDto } from '../../../models/dtos/Impresion/StockBobinaDto';
import type { UpdateStockBobinaDto } from '../../../models/dtos/Impresion/UpdateStockBobinaDto';
@@ -11,17 +11,17 @@ import tipoBobinaService from '../../../services/Impresion/tipoBobinaService';
import plantaService from '../../../services/Impresion/plantaService';
const modalStyle = { /* ... (mismo estilo que StockBobinaIngresoFormModal) ... */
position: 'absolute' as 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: { xs: '90%', sm: 550 },
bgcolor: 'background.paper',
border: '2px solid #000',
boxShadow: 24,
p: 4,
maxHeight: '90vh',
overflowY: 'auto'
position: 'absolute' as 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: { xs: '90%', sm: 550 },
bgcolor: 'background.paper',
border: '2px solid #000',
boxShadow: 24,
p: 4,
maxHeight: '90vh',
overflowY: 'auto'
};
interface StockBobinaEditFormModalProps {
@@ -56,34 +56,43 @@ const StockBobinaEditFormModal: React.FC<StockBobinaEditFormModalProps> = ({
useEffect(() => {
const fetchDropdownData = async () => {
setLoadingDropdowns(true);
try {
const [tiposData, plantasData] = await Promise.all([
tipoBobinaService.getAllTiposBobina(),
plantaService.getAllPlantas()
]);
setTiposBobina(tiposData);
setPlantas(plantasData);
} catch (error) {
console.error("Error al cargar datos para dropdowns (StockBobina Edit)", error);
setLocalErrors(prev => ({...prev, dropdowns: 'Error al cargar tipos/plantas.'}));
} finally {
setLoadingDropdowns(false);
}
setLoadingDropdowns(true); // Ya está arriba, pero por claridad
try {
// --- CAMBIO: Usar los servicios que devuelven DTOs de dropdown si los tienes ---
const [tiposData, plantasData] = await Promise.all([
tipoBobinaService.getAllTiposBobina(), // Asume que existe y devuelve TipoBobinaDropdownDto[]
plantaService.getAllPlantas() // Asume que existe y devuelve PlantaDropdownDto[]
]);
setTiposBobina(tiposData);
setPlantas(plantasData);
} catch (error) {
console.error("Error al cargar datos para dropdowns (StockBobina Edit)", error);
setLocalErrors(prev => ({ ...prev, dropdowns: 'Error al cargar tipos/plantas.' }));
} finally {
setLoadingDropdowns(false);
}
};
if (open && initialData) {
fetchDropdownData();
setIdTipoBobina(initialData.idTipoBobina || '');
setNroBobina(initialData.nroBobina || '');
setPeso(initialData.peso?.toString() || '');
setIdPlanta(initialData.idPlanta || '');
setRemito(initialData.remito || '');
setFechaRemito(initialData.fechaRemito || ''); // Asume yyyy-MM-dd del DTO
setLocalErrors({});
clearErrorMessage();
if (open) { // Solo fetchear si el modal está abierto
fetchDropdownData();
}
}, [open, initialData, clearErrorMessage]);
}, [open]);
useEffect(() => {
if (open && initialData && !loadingDropdowns) { // <<--- ESPERAR A QUE loadingDropdowns SEA FALSE
setIdTipoBobina(initialData.idTipoBobina || '');
setNroBobina(initialData.nroBobina || '');
setPeso(initialData.peso?.toString() || '');
setIdPlanta(initialData.idPlanta || '');
setRemito(initialData.remito || '');
setFechaRemito(initialData.fechaRemito ? initialData.fechaRemito.split('T')[0] : ''); // Formatear si es necesario
setLocalErrors({});
clearErrorMessage();
} else if (open && !initialData) { // Si se abre para crear (aunque este modal es de edición)
// Resetear o manejar como prefieras
setIdTipoBobina(''); setNroBobina(''); setPeso(''); setIdPlanta('');
setRemito(''); setFechaRemito(new Date().toISOString().split('T')[0]);
}
}, [open, initialData, loadingDropdowns, clearErrorMessage]); // Añadir loadingDropdowns
const validate = (): boolean => {
const errors: { [key: string]: string | null } = {};
@@ -111,12 +120,12 @@ const StockBobinaEditFormModal: React.FC<StockBobinaEditFormModalProps> = ({
setLoading(true);
try {
const dataToSubmit: UpdateStockBobinaDto = {
idTipoBobina: Number(idTipoBobina),
nroBobina,
peso: parseInt(peso, 10),
idPlanta: Number(idPlanta),
remito,
fechaRemito,
idTipoBobina: Number(idTipoBobina),
nroBobina,
peso: parseInt(peso, 10),
idPlanta: Number(idPlanta),
remito,
fechaRemito,
};
await onSubmit(initialData.idBobina, dataToSubmit);
onClose();
@@ -124,80 +133,91 @@ const StockBobinaEditFormModal: React.FC<StockBobinaEditFormModalProps> = ({
console.error("Error en submit de StockBobinaEditFormModal:", error);
// El error de API lo maneja la página que llama a este modal
} finally {
setLoading(false);
setLoading(false);
}
};
if (!initialData) return null; // No renderizar si no hay datos iniciales (aunque open lo controla)
if (!initialData && open) { // Si se abre sin initialData (no debería pasar para un modal de EDICIÓN)
return <Modal open={open} onClose={onClose}><Box sx={modalStyle}><Alert severity="error">Error: No se proporcionaron datos iniciales para editar.</Alert></Box></Modal>;
}
if (!open) return null; // No renderizar nada si no está abierto
return (
<Modal open={open} onClose={onClose}>
<Box sx={modalStyle}>
<Typography variant="h6" component="h2" gutterBottom>
Editar Datos de Bobina (ID: {initialData.idBobina})
Editar Datos de Bobina (ID: {initialData?.idBobina || 'N/A'}) {/* Usar initialData?.idBobina */}
</Typography>
<Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
<Box sx={{ display: 'flex', gap: 2, mb: 1, flexWrap: 'wrap' }}>
<FormControl fullWidth margin="dense" error={!!localErrors.idTipoBobina} sx={{flex:1, minWidth: '200px'}}>
<InputLabel id="edit-tipo-bobina-select-label" required>Tipo Bobina</InputLabel>
<Select labelId="edit-tipo-bobina-select-label" label="Tipo Bobina" value={idTipoBobina}
onChange={(e) => {setIdTipoBobina(e.target.value as number); handleInputChange('idTipoBobina');}}
disabled={loading || loadingDropdowns}
>
<MenuItem value="" disabled><em>Seleccione un tipo</em></MenuItem>
{tiposBobina.map((t) => (<MenuItem key={t.idTipoBobina} value={t.idTipoBobina}>{t.denominacion}</MenuItem>))}
</Select>
{localErrors.idTipoBobina && <Typography color="error" variant="caption">{localErrors.idTipoBobina}</Typography>}
</FormControl>
<TextField label="Nro. Bobina" value={nroBobina} required
onChange={(e) => {setNroBobina(e.target.value); handleInputChange('nroBobina');}}
margin="dense" fullWidth error={!!localErrors.nroBobina} helperText={localErrors.nroBobina || ''}
disabled={loading} sx={{flex:1, minWidth: '200px'}} autoFocus
/>
</Box>
<Box sx={{ display: 'flex', gap: 2, mb: 1, flexWrap: 'wrap' }}>
<TextField label="Peso (Kg)" type="number" value={peso} required
onChange={(e) => {setPeso(e.target.value); handleInputChange('peso');}}
margin="dense" fullWidth error={!!localErrors.peso} helperText={localErrors.peso || ''}
disabled={loading} sx={{flex:1, minWidth: '150px'}}
/>
<FormControl fullWidth margin="dense" error={!!localErrors.idPlanta} sx={{flex:1, minWidth: '200px'}}>
<InputLabel id="edit-planta-select-label" required>Planta Destino</InputLabel>
<Select labelId="edit-planta-select-label" label="Planta Destino" value={idPlanta}
onChange={(e) => {setIdPlanta(e.target.value as number); handleInputChange('idPlanta');}}
disabled={loading || loadingDropdowns}
>
<MenuItem value="" disabled><em>Seleccione una planta</em></MenuItem>
{plantas.map((p) => (<MenuItem key={p.idPlanta} value={p.idPlanta}>{p.nombre}</MenuItem>))}
</Select>
{localErrors.idPlanta && <Typography color="error" variant="caption">{localErrors.idPlanta}</Typography>}
</FormControl>
</Box>
<Box sx={{ display: 'flex', gap: 2, mb: 1, flexWrap: 'wrap' }}>
<TextField label="Nro. Remito" value={remito} required
onChange={(e) => {setRemito(e.target.value); handleInputChange('remito');}}
margin="dense" fullWidth error={!!localErrors.remito} helperText={localErrors.remito || ''}
disabled={loading} sx={{flex:1, minWidth: '200px'}}
/>
<TextField label="Fecha Remito" type="date" value={fechaRemito} required
onChange={(e) => {setFechaRemito(e.target.value); handleInputChange('fechaRemito');}}
margin="dense" fullWidth error={!!localErrors.fechaRemito} helperText={localErrors.fechaRemito || ''}
disabled={loading} InputLabelProps={{ shrink: true }} sx={{flex:1, minWidth: '200px'}}
/>
</Box>
{loadingDropdowns ? <Box sx={{ display: 'flex', justifyContent: 'center', my: 2 }}><CircularProgress /></Box> : (
<Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
<Box sx={{ display: 'flex', gap: 2, mb: 1, flexWrap: 'wrap' }}>
<FormControl fullWidth margin="dense" error={!!localErrors.idTipoBobina} sx={{ flex: 1, minWidth: '200px' }}>
<InputLabel id="edit-tipo-bobina-select-label" required>Tipo Bobina</InputLabel>
<Select
labelId="edit-tipo-bobina-select-label"
label="Tipo Bobina"
value={idTipoBobina} // MUI Select maneja bien number/string si los values de MenuItem son consistentes
onChange={(e) => { setIdTipoBobina(e.target.value as number | string); handleInputChange('idTipoBobina'); }}
disabled={loading || loadingDropdowns}
>
<MenuItem value="" disabled><em>Seleccione un tipo</em></MenuItem>
{tiposBobina.map((t) => (<MenuItem key={t.idTipoBobina} value={t.idTipoBobina}>{t.denominacion}</MenuItem>))}
</Select>
{localErrors.idTipoBobina && <Typography color="error" variant="caption">{localErrors.idTipoBobina}</Typography>}
</FormControl>
<TextField label="Nro. Bobina" value={nroBobina} required
onChange={(e) => { setNroBobina(e.target.value); handleInputChange('nroBobina'); }}
margin="dense" fullWidth error={!!localErrors.nroBobina} helperText={localErrors.nroBobina || ''}
disabled={loading} sx={{ flex: 1, minWidth: '200px' }} autoFocus
/>
</Box>
<Box sx={{ display: 'flex', gap: 2, mb: 1, flexWrap: 'wrap' }}>
<TextField label="Peso (Kg)" type="number" value={peso} required
onChange={(e) => { setPeso(e.target.value); handleInputChange('peso'); }}
margin="dense" fullWidth error={!!localErrors.peso} helperText={localErrors.peso || ''}
disabled={loading} sx={{ flex: 1, minWidth: '150px' }}
/>
<FormControl fullWidth margin="dense" error={!!localErrors.idPlanta} sx={{ flex: 1, minWidth: '200px' }}>
<InputLabel id="edit-planta-select-label" required>Planta Destino</InputLabel>
<Select
labelId="edit-planta-select-label"
label="Planta Destino"
value={idPlanta}
onChange={(e) => { setIdPlanta(e.target.value as number | string); handleInputChange('idPlanta'); }}
disabled={loading || loadingDropdowns}
>
<MenuItem value="" disabled><em>Seleccione una planta</em></MenuItem>
{plantas.map((p) => (<MenuItem key={p.idPlanta} value={p.idPlanta}>{p.nombre}</MenuItem>))}
</Select>
{localErrors.idPlanta && <Typography color="error" variant="caption">{localErrors.idPlanta}</Typography>}
</FormControl>
</Box>
<Box sx={{ display: 'flex', gap: 2, mb: 1, flexWrap: 'wrap' }}>
<TextField label="Nro. Remito" value={remito} required
onChange={(e) => { setRemito(e.target.value); handleInputChange('remito'); }}
margin="dense" fullWidth error={!!localErrors.remito} helperText={localErrors.remito || ''}
disabled={loading} sx={{ flex: 1, minWidth: '200px' }}
/>
<TextField label="Fecha Remito" type="date" value={fechaRemito} required
onChange={(e) => { setFechaRemito(e.target.value); handleInputChange('fechaRemito'); }}
margin="dense" fullWidth error={!!localErrors.fechaRemito} helperText={localErrors.fechaRemito || ''}
disabled={loading} InputLabelProps={{ shrink: true }} sx={{ flex: 1, minWidth: '200px' }}
/>
</Box>
</Box>
{errorMessage && <Alert severity="error" sx={{ mt: 2, width: '100%' }}>{errorMessage}</Alert>}
{localErrors.dropdowns && <Alert severity="warning" sx={{ mt: 1 }}>{localErrors.dropdowns}</Alert>}
{errorMessage && <Alert severity="error" sx={{ mt: 2, width: '100%' }}>{errorMessage}</Alert>}
{localErrors.dropdowns && <Alert severity="warning" sx={{ mt: 1 }}>{localErrors.dropdowns}</Alert>}
<Box sx={{ mt: 3, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
<Button onClick={onClose} color="secondary" disabled={loading}>Cancelar</Button>
<Button type="submit" variant="contained" disabled={loading || loadingDropdowns}>
{loading ? <CircularProgress size={24} /> : 'Guardar Cambios'}
</Button>
<Box sx={{ mt: 3, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
<Button onClick={onClose} color="secondary" disabled={loading}>Cancelar</Button>
<Button type="submit" variant="contained" disabled={loading || loadingDropdowns}>
{loading ? <CircularProgress size={24} /> : 'Guardar Cambios'}
</Button>
</Box>
</Box>
</Box>
)}
</Box>
</Modal>
);