From da454447a96bc39f65a77aed7b5411731b75c630 Mon Sep 17 00:00:00 2001 From: Kevin Rosales Date: Thu, 21 Aug 2025 12:11:50 -0600 Subject: [PATCH] cambios en datastage --- src/api/datastage.js | 7 ++ src/components/SuccessModal.jsx | 121 ++++++++++++++++++++++++++++++-- src/pages/Datastage.jsx | 12 +++- 3 files changed, 130 insertions(+), 10 deletions(-) diff --git a/src/api/datastage.js b/src/api/datastage.js index b15329d..06419a2 100644 --- a/src/api/datastage.js +++ b/src/api/datastage.js @@ -1,3 +1,10 @@ +// Consultar el estado de un task por task_id +export async function fetchTaskStatus(task_id) { + const url = `${import.meta.env.VITE_EFC_API_URL}/datastage/datastages/task-status/?task_id=${encodeURIComponent(task_id)}`; + const res = await getWithAuth(url); + if (!res.ok) throw new Error('Error al consultar el estado del task'); + return res.json(); +} import.meta.env; import { getWithAuth, postWithAuth, patchWithAuth, deleteWithAuth } from '../fetchWithAuth'; diff --git a/src/components/SuccessModal.jsx b/src/components/SuccessModal.jsx index 81f4d6e..5d5b5fe 100644 --- a/src/components/SuccessModal.jsx +++ b/src/components/SuccessModal.jsx @@ -1,17 +1,124 @@ -import React from 'react'; +import React, { useState } from 'react'; +import { fetchTaskStatus } from '../api/datastage.js'; export default function SuccessModal({ open, onClose, message = 'Descarga exitosa' }) { if (!open) return null; + + // Detectar si es mensaje de procesamiento iniciado + let isProcessing = false; + let taskId = ''; + if (typeof message === 'string' && message.includes('Procesamiento iniciado.') && message.includes('Task ID:')) { + isProcessing = true; + // Extraer taskId + const match = message.match(/Task ID: ([\w-]+)/); + if (match) taskId = match[1]; + } + + // Estado para mostrar status del task + const [taskStatus, setTaskStatus] = useState(null); + const [loadingStatus, setLoadingStatus] = useState(false); + const [errorStatus, setErrorStatus] = useState(''); + // Estado para subtasks + const [subtaskStatus, setSubtaskStatus] = useState({}); // { subtaskId: { loading, error, data } } + + const handleCheckStatus = async () => { + setLoadingStatus(true); + setErrorStatus(''); + try { + const res = await fetchTaskStatus(taskId); + setTaskStatus(res); + } catch (e) { + setErrorStatus('Error al consultar el estado'); + } + setLoadingStatus(false); + }; + + const handleSubtaskClick = async (subId) => { + setSubtaskStatus(prev => ({ ...prev, [subId]: { loading: true, error: '', data: null } })); + try { + const res = await fetchTaskStatus(subId); + setSubtaskStatus(prev => ({ ...prev, [subId]: { loading: false, error: '', data: res } })); + } catch (e) { + setSubtaskStatus(prev => ({ ...prev, [subId]: { loading: false, error: 'Error al consultar el estado', data: null } })); + } + }; + return (
-
- - - -

{message}

+
+ {isProcessing ? ( + <> + {/* Header decorativo */} +
+
+ + + + + +
+
+

Procesamiento iniciado

+
+
+
+
+ Task ID: + {taskId} + {loadingStatus &&
Consultando estado...
} + {errorStatus &&
{errorStatus}
} + {taskStatus && ( + <> +
Estado: {taskStatus.status}
+ {taskStatus.result && ( +
+
Group ID: {taskStatus.result.group_id}
+
Subtask IDs: +
    + {Array.isArray(taskStatus.result.subtask_ids) && taskStatus.result.subtask_ids.map(id => ( +
  • handleSubtaskClick(id)}> + {id} + {subtaskStatus[id]?.loading && Consultando...} + {subtaskStatus[id]?.error &&
    {subtaskStatus[id].error}
    } + {subtaskStatus[id]?.data && ( +
    +
    Estado: {subtaskStatus[id].data.status}
    + {subtaskStatus[id].data.result && ( +
    Resultado: {typeof subtaskStatus[id].data.result === 'object' ? JSON.stringify(subtaskStatus[id].data.result) : subtaskStatus[id].data.result}
    + )} +
    + )} +
    • + ))} +
+
+ {taskStatus.result.detail && ( +
Detalle: {taskStatus.result.detail}
+ )} +
+ )} + + )} +
+
+ + ) : ( + <> + + + +

{message}

+ + )} diff --git a/src/pages/Datastage.jsx b/src/pages/Datastage.jsx index 2860b1a..691f230 100644 --- a/src/pages/Datastage.jsx +++ b/src/pages/Datastage.jsx @@ -84,6 +84,8 @@ async function procesarDatastage(item, setDatastages, setSuccess, setError, setR } else { setSuccess('Procesado correctamente'); } + // El modal de éxito se debe mostrar en el componente principal después de setSuccess + // No se llama aquí if (data && data.registros_cargados) { setRegistrosCargados(data.registros_cargados); setShowRegistrosModal(true); @@ -136,6 +138,10 @@ export default function Datastage() { useLayoutEffect(() => { setShowAnimation(true); }, []); useEffect(() => { if (showAnimation && !hasAnimated) setTimeout(() => setHasAnimated(true), 800); }, [showAnimation, hasAnimated]); + // Mostrar modal de éxito cuando cambia el mensaje de success + useEffect(() => { + if (success) setShowSuccessModal(true); + }, [success]); // Cargar lista const load = async () => { setLoading(true); @@ -409,9 +415,9 @@ export default function Datastage() {