dmolinari
bc19e184aa
All checks were successful
Optimized Build and Deploy / remote-build-and-deploy (push) Successful in 2m13s
Se introduce una nueva funcionalidad para el ingreso masivo de bobinas a partir de un único remito. Esto agiliza significativamente la carga de datos y reduce errores al evitar la repetición de la planta, número y fecha de remito. La implementación incluye: - Un modal maestro-detalle de dos pasos que primero verifica el remito y luego permite la carga de las bobinas. - Lógica de autocompletado de fecha y feedback al usuario si el remito ya existe. - Un nuevo endpoint en el backend para procesar el lote de forma transaccional.
89 lines
3.5 KiB
TypeScript
89 lines
3.5 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Modal, Box, Typography, TextField, Button, CircularProgress, Alert } from '@mui/material';
|
|
import type { StockBobinaDto } from '../../../models/dtos/Impresion/StockBobinaDto';
|
|
import type { UpdateFechaRemitoLoteDto } from '../../../models/dtos/Impresion/UpdateFechaRemitoLoteDto';
|
|
|
|
const modalStyle = {
|
|
position: 'absolute' as 'absolute',
|
|
top: '50%', left: '50%',
|
|
transform: 'translate(-50%, -50%)',
|
|
width: { xs: '90%', sm: 450 },
|
|
bgcolor: 'background.paper',
|
|
border: '2px solid #000', boxShadow: 24, p: 4
|
|
};
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
onSubmit: (data: UpdateFechaRemitoLoteDto) => Promise<void>;
|
|
bobinaContexto: StockBobinaDto | null;
|
|
errorMessage: string | null;
|
|
clearErrorMessage: () => void;
|
|
}
|
|
|
|
const StockBobinaFechaRemitoModal: React.FC<Props> = ({ open, onClose, onSubmit, bobinaContexto, errorMessage, clearErrorMessage }) => {
|
|
const [nuevaFecha, setNuevaFecha] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const [localError, setLocalError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (open && bobinaContexto) {
|
|
setNuevaFecha(bobinaContexto.fechaRemito.split('T')[0]); // Iniciar con la fecha actual
|
|
setLocalError(null);
|
|
clearErrorMessage();
|
|
}
|
|
}, [open, bobinaContexto, clearErrorMessage]);
|
|
|
|
if (!bobinaContexto) return null;
|
|
|
|
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
if (!nuevaFecha) {
|
|
setLocalError('Debe seleccionar una nueva fecha.');
|
|
return;
|
|
}
|
|
setLoading(true);
|
|
try {
|
|
const data: UpdateFechaRemitoLoteDto = {
|
|
idPlanta: bobinaContexto.idPlanta,
|
|
remito: bobinaContexto.remito,
|
|
fechaRemitoActual: bobinaContexto.fechaRemito.split('T')[0],
|
|
nuevaFechaRemito: nuevaFecha
|
|
};
|
|
await onSubmit(data);
|
|
onClose();
|
|
} catch (err) {
|
|
// El error de la API es manejado por el prop `errorMessage`
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Modal open={open} onClose={onClose}>
|
|
<Box sx={modalStyle}>
|
|
<Typography variant="h6" component="h2">Corregir Fecha de Remito</Typography>
|
|
<Typography variant="body2" sx={{ mt: 1 }}>
|
|
Esto cambiará la fecha para <strong>todas</strong> las bobinas del remito <strong>{bobinaContexto.remito}</strong> en la planta <strong>{bobinaContexto.nombrePlanta}</strong>.
|
|
</Typography>
|
|
<Box component="form" onSubmit={handleSubmit} sx={{ mt: 2 }}>
|
|
<TextField label="Fecha Actual" value={new Date(bobinaContexto.fechaRemito).toLocaleDateString('es-AR', { timeZone: 'UTC' })} disabled fullWidth margin="normal" />
|
|
<TextField label="Nueva Fecha de Remito" type="date" value={nuevaFecha}
|
|
onChange={e => { setNuevaFecha(e.target.value); setLocalError(null); }}
|
|
required fullWidth margin="normal" InputLabelProps={{ shrink: true }}
|
|
error={!!localError} helperText={localError} autoFocus
|
|
/>
|
|
{errorMessage && <Alert severity="error" sx={{ mt: 2 }}>{errorMessage}</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}>
|
|
{loading ? <CircularProgress size={24} /> : 'Guardar Nueva Fecha'}
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default StockBobinaFechaRemitoModal; |