Mejoras integrales en UI, lógica de negocio y auditoría
Este commit introduce una serie de mejoras significativas en toda la aplicación, abordando la experiencia de usuario, la consistencia de los datos, la robustez del backend y la implementación de un historial de cambios completo. ✨ **Funcionalidades y Mejoras (Features & Enhancements)** * **Historial de Auditoría Completo:** * Se implementa el registro en el historial para todas las acciones CRUD manuales: creación de equipos, adición y eliminación de discos, RAM y usuarios. * Los cambios de campos simples (IP, Hostname, etc.) ahora también se registran detalladamente. * **Consistencia de Datos Mejorada:** * **RAM:** La selección de RAM en el modal de "Añadir RAM" y la vista de "Administración" ahora agrupan los módulos por especificaciones (Fabricante, Tamaño, Velocidad), eliminando las entradas duplicadas causadas por diferentes `part_number`. * **Arquitectura:** El campo de edición para la arquitectura del equipo se ha cambiado de un input de texto a un selector con las opciones fijas "32 bits" y "64 bits". * **Experiencia de Usuario (UX) Optimizada:** * El botón de "Wake On Lan" (WOL) ahora se deshabilita visualmente si el equipo no tiene una dirección MAC registrada. * Se corrige el apilamiento de modales: los sub-modales (Añadir Disco/RAM/Usuario) ahora siempre aparecen por encima del modal principal de detalles y bloquean su cierre. * El historial de cambios se actualiza en tiempo real en la interfaz después de añadir o eliminar un componente, sin necesidad de cerrar y reabrir el modal. 🐛 **Correcciones (Bug Fixes)** * **Actualización de Estado en Vivo:** Al añadir/eliminar un módulo de RAM, los campos "RAM Instalada" y "Última Actualización" ahora se recalculan en el backend y se actualizan instantáneamente en el frontend. * **Historial de Sectores Legible:** Se corrige el registro del historial para que al cambiar un sector se guarde el *nombre* del sector (ej. "Técnica") en lugar de su ID numérico. * **Formulario de Edición:** El dropdown de "Sector" en el modo de edición ahora preselecciona correctamente el sector asignado actualmente al equipo. * **Error Crítico al Añadir RAM:** Se soluciona un error del servidor (`Sequence contains more than one element`) que ocurría al añadir manualmente un tipo de RAM que ya existía con múltiples `part_number`. Se reemplazó `QuerySingleOrDefaultAsync` por `QueryFirstOrDefaultAsync` para mayor robustez. * **Eliminación Segura:** Se impide la eliminación de un sector si este tiene equipos asignados, protegiendo la integridad de los datos. ♻️ **Refactorización (Refactoring)** * **Servicio de API Centralizado:** Toda la lógica de llamadas `fetch` del frontend ha sido extraída de los componentes y centralizada en un único servicio (`apiService.ts`), mejorando drásticamente la mantenibilidad y organización del código. * **Optimización de Renders:** Se ha optimizado el rendimiento de los modales mediante el uso del hook `useCallback` para memorizar funciones que se pasan como props. * **Nulabilidad en C#:** Se han resuelto múltiples advertencias de compilación (`CS8620`) en el backend al especificar explícitamente los tipos de referencia anulables (`string?`), mejorando la seguridad de tipos del código.
This commit is contained in:
@@ -1,40 +1,100 @@
|
||||
// frontend/src/components/ModalAnadirRam.tsx
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useCallback, useEffect } from 'react';
|
||||
import styles from './SimpleTable.module.css';
|
||||
import AutocompleteInput from './AutocompleteInput';
|
||||
import { memoriaRamService } from '../services/apiService';
|
||||
import type { MemoriaRam } from '../types/interfaces';
|
||||
|
||||
interface Props {
|
||||
onClose: () => void;
|
||||
onSave: (ram: { slot: string, tamano: number, fabricante?: string, velocidad?: number }) => void;
|
||||
onSave: (ram: { slot: string, tamano: number, fabricante?: string, velocidad?: number, partNumber?: string }) => void;
|
||||
}
|
||||
|
||||
const ModalAnadirRam: React.FC<Props> = ({ onClose, onSave }) => {
|
||||
const [ram, setRam] = useState({ slot: '', tamano: '', fabricante: '', velocidad: '' });
|
||||
const [ram, setRam] = useState({
|
||||
slot: '',
|
||||
tamano: '',
|
||||
fabricante: '',
|
||||
velocidad: '',
|
||||
partNumber: ''
|
||||
});
|
||||
|
||||
const [allRamModules, setAllRamModules] = useState<MemoriaRam[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
memoriaRamService.getAll()
|
||||
.then(setAllRamModules)
|
||||
.catch(err => console.error("No se pudieron cargar los módulos de RAM", err));
|
||||
}, []);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setRam(prev => ({ ...prev, [e.target.name]: e.target.value }));
|
||||
const { name, value } = e.target;
|
||||
setRam(prev => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const fetchRamSuggestions = useCallback(async () => {
|
||||
return allRamModules.map(r =>
|
||||
`${r.fabricante || 'Desconocido'} | ${r.tamano}GB | ${r.velocidad ? r.velocidad + 'MHz' : 'N/A'}`
|
||||
);
|
||||
}, [allRamModules]);
|
||||
|
||||
useEffect(() => {
|
||||
const selectedSuggestion = ram.partNumber;
|
||||
|
||||
const match = allRamModules.find(s =>
|
||||
`${s.fabricante || 'Desconocido'} | ${s.tamano}GB | ${s.velocidad ? s.velocidad + 'MHz' : 'N/A'}` === selectedSuggestion
|
||||
);
|
||||
|
||||
if (match) {
|
||||
setRam(prev => ({
|
||||
...prev,
|
||||
fabricante: match.fabricante || '',
|
||||
tamano: match.tamano.toString(),
|
||||
velocidad: match.velocidad?.toString() || '',
|
||||
partNumber: match.partNumber || ''
|
||||
}));
|
||||
}
|
||||
}, [ram.partNumber, allRamModules]);
|
||||
|
||||
|
||||
const handleSave = () => {
|
||||
onSave({
|
||||
slot: ram.slot,
|
||||
tamano: parseInt(ram.tamano, 10),
|
||||
fabricante: ram.fabricante || undefined,
|
||||
velocidad: ram.velocidad ? parseInt(ram.velocidad, 10) : undefined,
|
||||
partNumber: ram.partNumber || undefined,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.modalOverlay}>
|
||||
<div className={`${styles.modalOverlay} ${styles['modalOverlay--nested']}`}>
|
||||
<div className={styles.modal}>
|
||||
<h3>Añadir Módulo de RAM</h3>
|
||||
|
||||
<label>Slot (Requerido)</label>
|
||||
<input type="text" name="slot" value={ram.slot} onChange={handleChange} className={styles.modalInput} placeholder="Ej: DIMM0" />
|
||||
|
||||
<label>Buscar Módulo Existente (Opcional)</label>
|
||||
<AutocompleteInput
|
||||
mode="static"
|
||||
name="partNumber"
|
||||
value={ram.partNumber}
|
||||
onChange={handleChange}
|
||||
className={styles.modalInput}
|
||||
fetchSuggestions={fetchRamSuggestions}
|
||||
placeholder="Clic para ver todos o escribe para filtrar"
|
||||
/>
|
||||
|
||||
<label>Tamaño (GB) (Requerido)</label>
|
||||
<input type="number" name="tamano" value={ram.tamano} onChange={handleChange} className={styles.modalInput} placeholder="Ej: 8" />
|
||||
<label>Fabricante (Opcional)</label>
|
||||
|
||||
<label>Fabricante</label>
|
||||
<input type="text" name="fabricante" value={ram.fabricante} onChange={handleChange} className={styles.modalInput} />
|
||||
<label>Velocidad (MHz) (Opcional)</label>
|
||||
|
||||
<label>Velocidad (MHz)</label>
|
||||
<input type="number" name="velocidad" value={ram.velocidad} onChange={handleChange} className={styles.modalInput} />
|
||||
|
||||
<div className={styles.modalActions}>
|
||||
<button onClick={handleSave} className={`${styles.btn} ${styles.btnPrimary}`} disabled={!ram.slot || !ram.tamano}>Guardar</button>
|
||||
<button onClick={onClose} className={`${styles.btn} ${styles.btnSecondary}`}>Cancelar</button>
|
||||
|
||||
Reference in New Issue
Block a user