Separar formulario de nuevo registro en un modal propio y cambiar etiqueta Categoría a Tipo de Determinación
This commit is contained in:
@@ -1063,10 +1063,10 @@ function SeccionLaboratorios({ lab, otrosLaboratorios = [], patientId, internaci
|
||||
};
|
||||
|
||||
const [otrosDialog, setOtrosDialog] = useState(false);
|
||||
const [nuevoOtroDialog, setNuevoOtroDialog] = useState(false);
|
||||
const [nuevaObsFecha, setNuevaObsFecha] = useState(getLocalToday());
|
||||
const [nuevaObsTexto, setNuevaObsTexto] = useState('');
|
||||
const [nuevaObsCategoria, setNuevaObsCategoria] = useState<string>('Otros');
|
||||
const [mostrarNuevoFormOtros, setMostrarNuevoFormOtros] = useState<boolean>(false);
|
||||
|
||||
const [editOtrosDialog, setEditOtrosDialog] = useState(false);
|
||||
const [editOtrosItem, setEditOtrosItem] = useState<{ id: string; fecha: string; hora: string; observaciones: string; categoria?: string; source: 'lab' | 'otros' } | null>(null);
|
||||
@@ -1807,102 +1807,29 @@ function SeccionLaboratorios({ lab, otrosLaboratorios = [], patientId, internaci
|
||||
<Dialog open={otrosDialog} onOpenChange={setOtrosDialog}>
|
||||
<DialogContent className="sm:max-w-2xl max-h-[85vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Otros / Observaciones de Laboratorio</DialogTitle>
|
||||
<DialogTitle>Otras Determinaciones - Laboratorio</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 my-2">
|
||||
|
||||
{canEdit && (
|
||||
<div className="flex justify-between items-center bg-gray-50 dark:bg-gray-800/60 p-3 rounded-lg border border-gray-200 dark:border-gray-700">
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
¿Desea agregar una nueva observación?
|
||||
</span>
|
||||
<div className="flex justify-between items-center pb-2 border-b">
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">Registros Existentes</h4>
|
||||
{canEdit && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant={mostrarNuevoFormOtros ? "outline" : "default"}
|
||||
onClick={() => setMostrarNuevoFormOtros(!mostrarNuevoFormOtros)}
|
||||
onClick={() => {
|
||||
setNuevaObsFecha(getLocalToday());
|
||||
setNuevaObsTexto('');
|
||||
setNuevaObsCategoria('Otros');
|
||||
setNuevoOtroDialog(true);
|
||||
}}
|
||||
>
|
||||
{mostrarNuevoFormOtros ? (
|
||||
<>
|
||||
<X className="h-4 w-4 mr-1.5" /> Ocultar Formulario
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Plus className="h-4 w-4 mr-1.5" /> Nuevo Registro
|
||||
</>
|
||||
)}
|
||||
<Plus className="h-4 w-4 mr-1.5" /> Nuevo Registro
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{canEdit && mostrarNuevoFormOtros && (
|
||||
<div className="bg-blue-50/40 dark:bg-gray-900 p-4 rounded-lg border border-blue-200 dark:border-gray-700 space-y-3 mb-4 animate-in fade-in duration-200">
|
||||
<div className="flex justify-between items-center">
|
||||
<h4 className="text-sm font-semibold text-gray-800 dark:text-gray-200">Agregar Nuevo Registro</h4>
|
||||
<Button size="icon" variant="ghost" className="h-6 w-6 text-gray-500 hover:text-gray-700" onClick={() => setMostrarNuevoFormOtros(false)}>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<Label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Categoría</Label>
|
||||
<Select value={nuevaObsCategoria} onValueChange={setNuevaObsCategoria}>
|
||||
<SelectTrigger className="h-9 bg-white dark:bg-gray-800">
|
||||
<SelectValue placeholder="Seleccionar categoría" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{CATEGORIAS_OTROS.map(cat => (
|
||||
<SelectItem key={cat} value={cat}>{cat}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Fecha</Label>
|
||||
<Input type="date" className="h-9 bg-white dark:bg-gray-800" value={nuevaObsFecha} onChange={e => setNuevaObsFecha(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Observaciones / Determinaciones</Label>
|
||||
<Textarea
|
||||
placeholder="Ingrese los detalles, resultados, etc..."
|
||||
value={nuevaObsTexto}
|
||||
onChange={e => setNuevaObsTexto(e.target.value)}
|
||||
className="min-h-[80px] bg-white dark:bg-gray-800"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-1">
|
||||
<Button variant="outline" size="sm" onClick={() => setMostrarNuevoFormOtros(false)}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button size="sm" onClick={() => {
|
||||
if (addOtroLaboratorio && nuevaObsTexto.trim() !== '') {
|
||||
addOtroLaboratorio({
|
||||
pacienteId: patientId,
|
||||
internacionId,
|
||||
fecha: nuevaObsFecha,
|
||||
hora: new Date().toTimeString().slice(0, 5),
|
||||
observaciones: nuevaObsTexto,
|
||||
categoria: nuevaObsCategoria
|
||||
});
|
||||
setNuevaObsTexto('');
|
||||
setNuevaObsFecha(getLocalToday());
|
||||
setNuevaObsCategoria('Otros');
|
||||
setMostrarNuevoFormOtros(false);
|
||||
toast.success('Registro guardado correctamente');
|
||||
}
|
||||
}} disabled={!nuevaObsTexto.trim()}>
|
||||
<Save className="h-4 w-4 mr-1.5" /> Guardar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 border-b pb-2">Registros</h4>
|
||||
<div className="space-y-3 max-h-[45vh] overflow-y-auto pr-2">
|
||||
<div className="space-y-3 max-h-[50vh] overflow-y-auto pr-2">
|
||||
{[
|
||||
...labsConObservaciones.map(l => ({ id: l.id, fecha: l.fecha, hora: l.hora, observaciones: l.observaciones, categoria: 'Obs. de Lab', source: 'lab' as const })),
|
||||
...(otrosLaboratorios || []).filter(o => o.pacienteId === patientId).map(o => ({ id: o.id, fecha: o.fecha, hora: o.hora, observaciones: o.observaciones, categoria: o.categoria || 'Otros', source: 'otros' as const }))
|
||||
@@ -1947,6 +1874,66 @@ function SeccionLaboratorios({ lab, otrosLaboratorios = [], patientId, internaci
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={nuevoOtroDialog} onOpenChange={setNuevoOtroDialog}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Nuevo Registro - Otras Determinaciones</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 my-2">
|
||||
<div>
|
||||
<Label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Tipo de Determinación</Label>
|
||||
<Select value={nuevaObsCategoria} onValueChange={setNuevaObsCategoria}>
|
||||
<SelectTrigger className="h-9">
|
||||
<SelectValue placeholder="Seleccionar tipo" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{CATEGORIAS_OTROS.map(cat => (
|
||||
<SelectItem key={cat} value={cat}>{cat}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Fecha</Label>
|
||||
<Input type="date" className="h-9" value={nuevaObsFecha} onChange={e => setNuevaObsFecha(e.target.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Observaciones / Determinaciones</Label>
|
||||
<Textarea
|
||||
placeholder="Ingrese los detalles, resultados, etc..."
|
||||
value={nuevaObsTexto}
|
||||
onChange={e => setNuevaObsTexto(e.target.value)}
|
||||
className="min-h-[100px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 mt-2">
|
||||
<Button variant="outline" onClick={() => setNuevoOtroDialog(false)}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button onClick={() => {
|
||||
if (addOtroLaboratorio && nuevaObsTexto.trim() !== '') {
|
||||
addOtroLaboratorio({
|
||||
pacienteId: patientId,
|
||||
internacionId,
|
||||
fecha: nuevaObsFecha,
|
||||
hora: new Date().toTimeString().slice(0, 5),
|
||||
observaciones: nuevaObsTexto,
|
||||
categoria: nuevaObsCategoria
|
||||
});
|
||||
setNuevaObsTexto('');
|
||||
setNuevaObsFecha(getLocalToday());
|
||||
setNuevaObsCategoria('Otros');
|
||||
setNuevoOtroDialog(false);
|
||||
toast.success('Registro guardado correctamente');
|
||||
}
|
||||
}} disabled={!nuevaObsTexto.trim()}>
|
||||
<Save className="h-4 w-4 mr-1.5" /> Guardar
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={editOtrosDialog} onOpenChange={setEditOtrosDialog}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
@@ -1955,10 +1942,10 @@ function SeccionLaboratorios({ lab, otrosLaboratorios = [], patientId, internaci
|
||||
<div className="space-y-4 my-2">
|
||||
{editOtrosItem?.source === 'otros' && (
|
||||
<div>
|
||||
<Label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Categoría</Label>
|
||||
<Label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Tipo de Determinación</Label>
|
||||
<Select value={editOtrosCategoria} onValueChange={setEditOtrosCategoria}>
|
||||
<SelectTrigger className="h-9">
|
||||
<SelectValue placeholder="Seleccionar categoría" />
|
||||
<SelectValue placeholder="Seleccionar tipo" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{CATEGORIAS_OTROS.map(cat => (
|
||||
|
||||
Reference in New Issue
Block a user