feat: Implementación módulos Empresas, Plantas, Tipos y Estados Bobina
Backend API: - Implementado CRUD completo para Empresas (DE001-DE004): - EmpresaRepository, EmpresaService, EmpresasController. - Lógica de creación/eliminación de saldos iniciales en EmpresaService. - Transacciones y registro en tablas _H. - Verificación de permisos específicos. - Implementado CRUD completo para Plantas de Impresión (IP001-IP004): - PlantaRepository, PlantaService, PlantasController. - Transacciones y registro en tablas _H. - Verificación de permisos. - Implementado CRUD completo para Tipos de Bobina (IB006-IB009): - TipoBobinaRepository, TipoBobinaService, TiposBobinaController. - Transacciones y registro en tablas _H. - Verificación de permisos. - Implementado CRUD completo para Estados de Bobina (IB010-IB013): - EstadoBobinaRepository, EstadoBobinaService, EstadosBobinaController. - Transacciones y registro en tablas _H. - Verificación de permisos. Frontend React: - Módulo Empresas: - empresaService.ts para interactuar con la API. - EmpresaFormModal.tsx para crear/editar empresas. - GestionarEmpresasPage.tsx con tabla, filtro, paginación y menú de acciones. - Integración con el hook usePermissions para control de acceso. - Módulo Plantas de Impresión: - plantaService.ts. - PlantaFormModal.tsx. - GestionarPlantasPage.tsx con tabla, filtro, paginación y acciones. - Integración con usePermissions. - Módulo Tipos de Bobina: - tipoBobinaService.ts. - TipoBobinaFormModal.tsx. - GestionarTiposBobinaPage.tsx con tabla, filtro, paginación y acciones. - Integración con usePermissions. - Módulo Estados de Bobina: - estadoBobinaService.ts. - EstadoBobinaFormModal.tsx. - GestionarEstadosBobinaPage.tsx con tabla, filtro, paginación y acciones. - Integración con usePermissions. - Navegación: - Añadidas sub-pestañas y rutas para los nuevos módulos dentro de "Distribución" (Empresas) e "Impresión" (Plantas, Tipos Bobina, Estados Bobina). - Creado ImpresionIndexPage.tsx para la navegación interna del módulo de Impresión. Correcciones: - Corregido el uso de CommitAsync/RollbackAsync a Commit/Rollback síncronos en PlantaService.cs debido a que IDbTransaction no los soporta asíncronamente.
This commit is contained in:
142
Frontend/src/components/Modals/EmpresaFormModal.tsx
Normal file
142
Frontend/src/components/Modals/EmpresaFormModal.tsx
Normal file
@@ -0,0 +1,142 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Modal, Box, Typography, TextField, Button, CircularProgress, Alert } from '@mui/material';
|
||||
import type { EmpresaDto } from '../../models/dtos/Empresas/EmpresaDto';
|
||||
import type { CreateEmpresaDto } from '../../models/dtos/Empresas/CreateEmpresaDto';
|
||||
import type { UpdateEmpresaDto } from '../../models/dtos/Empresas/UpdateEmpresaDto'; // Necesitamos Update DTO también
|
||||
|
||||
const modalStyle = {
|
||||
position: 'absolute' as 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 400,
|
||||
bgcolor: 'background.paper',
|
||||
border: '2px solid #000',
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
};
|
||||
|
||||
interface EmpresaFormModalProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
// El tipo de dato enviado depende si es creación o edición
|
||||
onSubmit: (data: CreateEmpresaDto | (UpdateEmpresaDto & { idEmpresa: number })) => Promise<void>;
|
||||
initialData?: EmpresaDto | null; // Para editar
|
||||
errorMessage?: string | null; // Error de la API pasado desde el padre
|
||||
clearErrorMessage: () => void; // Función para limpiar el error en el padre
|
||||
}
|
||||
|
||||
const EmpresaFormModal: React.FC<EmpresaFormModalProps> = ({
|
||||
open,
|
||||
onClose,
|
||||
onSubmit,
|
||||
initialData,
|
||||
errorMessage,
|
||||
clearErrorMessage
|
||||
}) => {
|
||||
const [nombre, setNombre] = useState('');
|
||||
const [detalle, setDetalle] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [localError, setLocalError] = useState<string | null>(null); // Para validaciones locales (ej: campo requerido)
|
||||
|
||||
const isEditing = Boolean(initialData);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
// Poblar formulario si es edición, limpiar si es creación
|
||||
setNombre(initialData?.nombre || '');
|
||||
setDetalle(initialData?.detalle || '');
|
||||
setLocalError(null); // Limpiar error local al abrir/cambiar
|
||||
clearErrorMessage(); // Limpiar error API del padre
|
||||
}
|
||||
// No necesitamos limpiar al cerrar, ya que el useEffect se ejecuta al abrir `open = true`
|
||||
}, [open, initialData, clearErrorMessage]);
|
||||
|
||||
// Limpia errores cuando el usuario empieza a escribir
|
||||
const handleInputChange = () => {
|
||||
if (localError) setLocalError(null);
|
||||
if (errorMessage) clearErrorMessage();
|
||||
};
|
||||
|
||||
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
setLocalError(null);
|
||||
clearErrorMessage(); // Limpiar errores antes de enviar
|
||||
|
||||
// Validación local simple
|
||||
if (!nombre.trim()) {
|
||||
setLocalError('El nombre es obligatorio.');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
// Preparar datos según sea creación o edición
|
||||
const dataToSubmit = { nombre, detalle: detalle || undefined }; // Usa undefined si detalle está vacío
|
||||
|
||||
if (isEditing && initialData) {
|
||||
// Si es edición, combina los datos del formulario con el ID existente
|
||||
await onSubmit({ ...dataToSubmit, idEmpresa: initialData.idEmpresa });
|
||||
} else {
|
||||
// Si es creación, envía solo los datos del formulario
|
||||
await onSubmit(dataToSubmit as CreateEmpresaDto);
|
||||
}
|
||||
onClose(); // Cierra el modal SOLO si onSubmit fue exitoso
|
||||
} catch (error: any) {
|
||||
// El error de la API será manejado por el componente padre y mostrado vía 'errorMessage'
|
||||
// No necesitamos setear localError aquí a menos que sea un error específico del submit no cubierto por la API
|
||||
console.error("Error en submit de EmpresaFormModal:", error);
|
||||
// El componente padre es responsable de poner setLoading(false) si onSubmit falla
|
||||
} finally {
|
||||
// Asegúrate de que el loading se detenga incluso si hay un error no capturado por el padre
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal open={open} onClose={onClose}>
|
||||
<Box sx={modalStyle}>
|
||||
<Typography variant="h6" component="h2">
|
||||
{isEditing ? 'Editar Empresa' : 'Agregar Nueva Empresa'}
|
||||
</Typography>
|
||||
<Box component="form" onSubmit={handleSubmit} sx={{ mt: 2 }}>
|
||||
<TextField
|
||||
label="Nombre"
|
||||
fullWidth
|
||||
required // HTML5 required
|
||||
value={nombre}
|
||||
onChange={(e) => {setNombre(e.target.value); handleInputChange();} }
|
||||
margin="normal"
|
||||
error={!!localError} // Mostrar error si localError tiene un mensaje
|
||||
helperText={localError ? localError : ''} // Mostrar el mensaje de error local
|
||||
disabled={loading}
|
||||
autoFocus // Poner el foco en el primer campo
|
||||
/>
|
||||
<TextField
|
||||
label="Detalle (Opcional)"
|
||||
fullWidth
|
||||
value={detalle}
|
||||
onChange={(e) => {setDetalle(e.target.value); handleInputChange();}}
|
||||
margin="normal"
|
||||
multiline
|
||||
rows={3}
|
||||
disabled={loading}
|
||||
/>
|
||||
{/* Mostrar error de la API si existe */}
|
||||
{errorMessage && <Alert severity="error" sx={{ mt: 1 }}>{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} /> : (isEditing ? 'Guardar Cambios' : 'Agregar')}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmpresaFormModal;
|
||||
128
Frontend/src/components/Modals/EstadoBobinaFormModal.tsx
Normal file
128
Frontend/src/components/Modals/EstadoBobinaFormModal.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Modal, Box, Typography, TextField, Button, CircularProgress, Alert } from '@mui/material';
|
||||
import type { EstadoBobinaDto } from '../../models/dtos/Impresion/EstadoBobinaDto';
|
||||
import type { CreateEstadoBobinaDto } from '../../models/dtos/Impresion/CreateEstadoBobinaDto';
|
||||
import type { UpdateEstadoBobinaDto } from '../../models/dtos/Impresion/UpdateEstadoBobinaDto';
|
||||
|
||||
const modalStyle = {
|
||||
position: 'absolute' as 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 400,
|
||||
bgcolor: 'background.paper',
|
||||
border: '2px solid #000',
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
};
|
||||
|
||||
interface EstadoBobinaFormModalProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: (data: CreateEstadoBobinaDto | (UpdateEstadoBobinaDto & { idEstadoBobina: number })) => Promise<void>;
|
||||
initialData?: EstadoBobinaDto | null;
|
||||
errorMessage?: string | null;
|
||||
clearErrorMessage: () => void;
|
||||
}
|
||||
|
||||
const EstadoBobinaFormModal: React.FC<EstadoBobinaFormModalProps> = ({
|
||||
open,
|
||||
onClose,
|
||||
onSubmit,
|
||||
initialData,
|
||||
errorMessage,
|
||||
clearErrorMessage
|
||||
}) => {
|
||||
const [denominacion, setDenominacion] = useState('');
|
||||
const [obs, setObs] = useState(''); // Observación
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [localErrorDenominacion, setLocalErrorDenominacion] = useState<string | null>(null);
|
||||
|
||||
const isEditing = Boolean(initialData);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setDenominacion(initialData?.denominacion || '');
|
||||
setObs(initialData?.obs || ''); // Inicializar obs
|
||||
setLocalErrorDenominacion(null);
|
||||
clearErrorMessage();
|
||||
}
|
||||
}, [open, initialData, clearErrorMessage]);
|
||||
|
||||
const handleInputChange = () => {
|
||||
if (localErrorDenominacion) setLocalErrorDenominacion(null);
|
||||
if (errorMessage) clearErrorMessage();
|
||||
};
|
||||
|
||||
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
setLocalErrorDenominacion(null);
|
||||
clearErrorMessage();
|
||||
|
||||
if (!denominacion.trim()) {
|
||||
setLocalErrorDenominacion('La denominación es obligatoria.');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const dataToSubmit = { denominacion, obs: obs || undefined }; // Enviar obs si tiene valor
|
||||
|
||||
if (isEditing && initialData) {
|
||||
await onSubmit({ ...dataToSubmit, idEstadoBobina: initialData.idEstadoBobina });
|
||||
} else {
|
||||
await onSubmit(dataToSubmit as CreateEstadoBobinaDto);
|
||||
}
|
||||
onClose();
|
||||
} catch (error: any) {
|
||||
console.error("Error en submit de EstadoBobinaFormModal:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal open={open} onClose={onClose}>
|
||||
<Box sx={modalStyle}>
|
||||
<Typography variant="h6" component="h2">
|
||||
{isEditing ? 'Editar Estado de Bobina' : 'Agregar Nuevo Estado de Bobina'}
|
||||
</Typography>
|
||||
<Box component="form" onSubmit={handleSubmit} sx={{ mt: 2 }}>
|
||||
<TextField
|
||||
label="Denominación"
|
||||
fullWidth
|
||||
required
|
||||
value={denominacion}
|
||||
onChange={(e) => { setDenominacion(e.target.value); handleInputChange(); }}
|
||||
margin="normal"
|
||||
error={!!localErrorDenominacion}
|
||||
helperText={localErrorDenominacion || ''}
|
||||
disabled={loading}
|
||||
autoFocus
|
||||
/>
|
||||
<TextField
|
||||
label="Observación (Opcional)"
|
||||
fullWidth
|
||||
value={obs}
|
||||
onChange={(e) => setObs(e.target.value)} // No necesita handleInputChange si no tiene validación local
|
||||
margin="normal"
|
||||
multiline
|
||||
rows={3}
|
||||
disabled={loading}
|
||||
/>
|
||||
{errorMessage && <Alert severity="error" sx={{ mt: 1 }}>{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} /> : (isEditing ? 'Guardar Cambios' : 'Agregar')}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default EstadoBobinaFormModal;
|
||||
144
Frontend/src/components/Modals/PlantaFormModal.tsx
Normal file
144
Frontend/src/components/Modals/PlantaFormModal.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Modal, Box, Typography, TextField, Button, CircularProgress, Alert } from '@mui/material';
|
||||
import type { PlantaDto } from '../../models/dtos/Impresion/PlantaDto';
|
||||
import type { CreatePlantaDto } from '../../models/dtos/Impresion/CreatePlantaDto';
|
||||
import type { UpdatePlantaDto } from '../../models/dtos/Impresion/UpdatePlantaDto';
|
||||
|
||||
const modalStyle = { /* ... (mismo estilo que otros modales) ... */
|
||||
position: 'absolute' as 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 400,
|
||||
bgcolor: 'background.paper',
|
||||
border: '2px solid #000',
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
};
|
||||
|
||||
interface PlantaFormModalProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: (data: CreatePlantaDto | (UpdatePlantaDto & { idPlanta: number })) => Promise<void>;
|
||||
initialData?: PlantaDto | null;
|
||||
errorMessage?: string | null;
|
||||
clearErrorMessage: () => void;
|
||||
}
|
||||
|
||||
const PlantaFormModal: React.FC<PlantaFormModalProps> = ({
|
||||
open,
|
||||
onClose,
|
||||
onSubmit,
|
||||
initialData,
|
||||
errorMessage,
|
||||
clearErrorMessage
|
||||
}) => {
|
||||
const [nombre, setNombre] = useState('');
|
||||
const [detalle, setDetalle] = useState(''); // Detalle es string, no opcional según la BD
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [localErrorNombre, setLocalErrorNombre] = useState<string | null>(null);
|
||||
const [localErrorDetalle, setLocalErrorDetalle] = useState<string | null>(null);
|
||||
|
||||
const isEditing = Boolean(initialData);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setNombre(initialData?.nombre || '');
|
||||
setDetalle(initialData?.detalle || ''); // Inicializar detalle
|
||||
setLocalErrorNombre(null);
|
||||
setLocalErrorDetalle(null);
|
||||
clearErrorMessage();
|
||||
}
|
||||
}, [open, initialData, clearErrorMessage]);
|
||||
|
||||
const handleInputChange = (field: 'nombre' | 'detalle') => {
|
||||
if (field === 'nombre' && localErrorNombre) setLocalErrorNombre(null);
|
||||
if (field === 'detalle' && localErrorDetalle) setLocalErrorDetalle(null);
|
||||
if (errorMessage) clearErrorMessage();
|
||||
};
|
||||
|
||||
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
setLocalErrorNombre(null);
|
||||
setLocalErrorDetalle(null);
|
||||
clearErrorMessage();
|
||||
|
||||
let hasError = false;
|
||||
if (!nombre.trim()) {
|
||||
setLocalErrorNombre('El nombre es obligatorio.');
|
||||
hasError = true;
|
||||
}
|
||||
if (!detalle.trim()) { // Detalle también es requerido según la BD
|
||||
setLocalErrorDetalle('El detalle es obligatorio.');
|
||||
hasError = true;
|
||||
}
|
||||
|
||||
if (hasError) return;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const dataToSubmit = { nombre, detalle }; // Detalle siempre se envía
|
||||
|
||||
if (isEditing && initialData) {
|
||||
await onSubmit({ ...dataToSubmit, idPlanta: initialData.idPlanta });
|
||||
} else {
|
||||
await onSubmit(dataToSubmit as CreatePlantaDto);
|
||||
}
|
||||
onClose();
|
||||
} catch (error: any) {
|
||||
console.error("Error en submit de PlantaFormModal:", error);
|
||||
// El error API se muestra vía 'errorMessage'
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal open={open} onClose={onClose}>
|
||||
<Box sx={modalStyle}>
|
||||
<Typography variant="h6" component="h2">
|
||||
{isEditing ? 'Editar Planta de Impresión' : 'Agregar Nueva Planta de Impresión'}
|
||||
</Typography>
|
||||
<Box component="form" onSubmit={handleSubmit} sx={{ mt: 2 }}>
|
||||
<TextField
|
||||
label="Nombre"
|
||||
fullWidth
|
||||
required
|
||||
value={nombre}
|
||||
onChange={(e) => { setNombre(e.target.value); handleInputChange('nombre'); }}
|
||||
margin="normal"
|
||||
error={!!localErrorNombre}
|
||||
helperText={localErrorNombre || ''}
|
||||
disabled={loading}
|
||||
autoFocus
|
||||
/>
|
||||
<TextField
|
||||
label="Detalle" // Ya no es opcional
|
||||
fullWidth
|
||||
required // Marcar como requerido
|
||||
value={detalle}
|
||||
onChange={(e) => { setDetalle(e.target.value); handleInputChange('detalle'); }}
|
||||
margin="normal"
|
||||
multiline
|
||||
rows={3}
|
||||
error={!!localErrorDetalle} // Añadir manejo de error para detalle
|
||||
helperText={localErrorDetalle || ''} // Mostrar error de detalle
|
||||
disabled={loading}
|
||||
/>
|
||||
{errorMessage && <Alert severity="error" sx={{ mt: 1 }}>{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} /> : (isEditing ? 'Guardar Cambios' : 'Agregar')}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default PlantaFormModal;
|
||||
117
Frontend/src/components/Modals/TipoBobinaFormModal.tsx
Normal file
117
Frontend/src/components/Modals/TipoBobinaFormModal.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Modal, Box, Typography, TextField, Button, CircularProgress, Alert } from '@mui/material';
|
||||
import type { TipoBobinaDto } from '../../models/dtos/Impresion/TipoBobinaDto';
|
||||
import type { CreateTipoBobinaDto } from '../../models/dtos/Impresion/CreateTipoBobinaDto';
|
||||
import type { UpdateTipoBobinaDto } from '../../models/dtos/Impresion/UpdateTipoBobinaDto';
|
||||
|
||||
const modalStyle = { /* ... (mismo estilo que otros modales) ... */
|
||||
position: 'absolute' as 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 400,
|
||||
bgcolor: 'background.paper',
|
||||
border: '2px solid #000',
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
};
|
||||
|
||||
interface TipoBobinaFormModalProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: (data: CreateTipoBobinaDto | (UpdateTipoBobinaDto & { idTipoBobina: number })) => Promise<void>;
|
||||
initialData?: TipoBobinaDto | null;
|
||||
errorMessage?: string | null;
|
||||
clearErrorMessage: () => void;
|
||||
}
|
||||
|
||||
const TipoBobinaFormModal: React.FC<TipoBobinaFormModalProps> = ({
|
||||
open,
|
||||
onClose,
|
||||
onSubmit,
|
||||
initialData,
|
||||
errorMessage,
|
||||
clearErrorMessage
|
||||
}) => {
|
||||
const [denominacion, setDenominacion] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [localError, setLocalError] = useState<string | null>(null);
|
||||
|
||||
const isEditing = Boolean(initialData);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setDenominacion(initialData?.denominacion || '');
|
||||
setLocalError(null);
|
||||
clearErrorMessage();
|
||||
}
|
||||
}, [open, initialData, clearErrorMessage]);
|
||||
|
||||
const handleInputChange = () => {
|
||||
if (localError) setLocalError(null);
|
||||
if (errorMessage) clearErrorMessage();
|
||||
};
|
||||
|
||||
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
setLocalError(null);
|
||||
clearErrorMessage();
|
||||
|
||||
if (!denominacion.trim()) {
|
||||
setLocalError('La denominación es obligatoria.');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const dataToSubmit = { denominacion };
|
||||
|
||||
if (isEditing && initialData) {
|
||||
await onSubmit({ ...dataToSubmit, idTipoBobina: initialData.idTipoBobina });
|
||||
} else {
|
||||
await onSubmit(dataToSubmit as CreateTipoBobinaDto);
|
||||
}
|
||||
onClose();
|
||||
} catch (error: any) {
|
||||
console.error("Error en submit de TipoBobinaFormModal:", error);
|
||||
// El error API se muestra vía 'errorMessage'
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal open={open} onClose={onClose}>
|
||||
<Box sx={modalStyle}>
|
||||
<Typography variant="h6" component="h2">
|
||||
{isEditing ? 'Editar Tipo de Bobina' : 'Agregar Nuevo Tipo de Bobina'}
|
||||
</Typography>
|
||||
<Box component="form" onSubmit={handleSubmit} sx={{ mt: 2 }}>
|
||||
<TextField
|
||||
label="Denominación"
|
||||
fullWidth
|
||||
required
|
||||
value={denominacion}
|
||||
onChange={(e) => { setDenominacion(e.target.value); handleInputChange(); }}
|
||||
margin="normal"
|
||||
error={!!localError}
|
||||
helperText={localError || ''}
|
||||
disabled={loading}
|
||||
autoFocus
|
||||
/>
|
||||
{errorMessage && <Alert severity="error" sx={{ mt: 1 }}>{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} /> : (isEditing ? 'Guardar Cambios' : 'Agregar')}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default TipoBobinaFormModal;
|
||||
128
Frontend/src/components/Modals/ZonaFormModal.tsx
Normal file
128
Frontend/src/components/Modals/ZonaFormModal.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Modal, Box, Typography, TextField, Button, CircularProgress, Alert } from '@mui/material';
|
||||
import type { ZonaDto } from '../../models/dtos/Zonas/ZonaDto'; // Usamos el DTO de la API para listar
|
||||
import type { CreateZonaDto } from '../../models/dtos/Zonas/CreateZonaDto';
|
||||
|
||||
const modalStyle = {
|
||||
position: 'absolute' as 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 400,
|
||||
bgcolor: 'background.paper',
|
||||
border: '2px solid #000',
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
};
|
||||
|
||||
|
||||
interface ZonaFormModalProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: (data: CreateZonaDto | (CreateZonaDto & { idZona: number })) => Promise<void>;
|
||||
initialData?: ZonaDto | null; // Puede recibir una Zona para editar
|
||||
errorMessage?: string | null;
|
||||
clearErrorMessage: () => void;
|
||||
}
|
||||
|
||||
const ZonaFormModal: React.FC<ZonaFormModalProps> = ({
|
||||
open,
|
||||
onClose,
|
||||
onSubmit,
|
||||
initialData,
|
||||
errorMessage,
|
||||
clearErrorMessage
|
||||
}) => {
|
||||
const [nombre, setNombre] = useState('');
|
||||
const [descripcion, setDescripcion] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [localError, setLocalError] = useState<string | null>(null);
|
||||
|
||||
const isEditing = Boolean(initialData);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setNombre(initialData?.nombre || '');
|
||||
setDescripcion(initialData?.descripcion || '');
|
||||
setLocalError(null);
|
||||
clearErrorMessage();
|
||||
}
|
||||
}, [open, initialData, clearErrorMessage]);
|
||||
|
||||
const handleInputChange = () => {
|
||||
if (localError) setLocalError(null);
|
||||
if (errorMessage) clearErrorMessage();
|
||||
};
|
||||
|
||||
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
setLocalError(null);
|
||||
clearErrorMessage();
|
||||
|
||||
if (!nombre.trim()) {
|
||||
setLocalError('El nombre es obligatorio.');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const dataToSubmit: CreateZonaDto = { nombre, descripcion: descripcion || undefined };
|
||||
if (isEditing && initialData) {
|
||||
await onSubmit({ ...dataToSubmit, idZona: initialData.idZona }); // Añadir idZona si es edición
|
||||
} else {
|
||||
await onSubmit(dataToSubmit);
|
||||
}
|
||||
onClose(); // Cerrar en éxito
|
||||
} catch (error: any) {
|
||||
console.error("Error en submit de ZonaFormModal:", error);
|
||||
// El error API se muestra a través de errorMessage
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal open={open} onClose={onClose}>
|
||||
<Box sx={modalStyle}>
|
||||
<Typography variant="h6" component="h2">
|
||||
{isEditing ? 'Editar Zona' : 'Agregar Nueva Zona'}
|
||||
</Typography>
|
||||
<Box component="form" onSubmit={handleSubmit} sx={{ mt: 2 }}>
|
||||
<TextField
|
||||
label="Nombre"
|
||||
fullWidth
|
||||
required
|
||||
value={nombre}
|
||||
onChange={(e) => { setNombre(e.target.value); handleInputChange(); }}
|
||||
margin="normal"
|
||||
error={!!localError && !nombre.trim()}
|
||||
helperText={localError && !nombre.trim() ? localError : ''}
|
||||
disabled={loading}
|
||||
autoFocus
|
||||
/>
|
||||
<TextField
|
||||
label="Descripción (Opcional)"
|
||||
fullWidth
|
||||
value={descripcion}
|
||||
onChange={(e) => { setDescripcion(e.target.value); handleInputChange();}}
|
||||
margin="normal"
|
||||
multiline
|
||||
rows={3}
|
||||
disabled={loading}
|
||||
/>
|
||||
{errorMessage && <Alert severity="error" sx={{ mt: 1 }}>{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} /> : (isEditing ? 'Guardar Cambios' : 'Agregar')}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ZonaFormModal;
|
||||
Reference in New Issue
Block a user