EFC/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Solucion de paginacion de datastage

Browse Source
This commit is contained in:
Kevin Rosales
2025-08-22 23:48:26 -06:00
parent c401bb7889
commit 6309bc1b96
2 changed files with 25 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/api/datastage.js
View File

@@ -10,14 +10,12 @@ import.meta.env;
import { getWithAuth, postWithAuth, patchWithAuth, deleteWithAuth } from '../fetchWithAuth'; import { getWithAuth, postWithAuth, patchWithAuth, deleteWithAuth } from '../fetchWithAuth';
const API_BASE = `${import.meta.env.VITE_EFC_API_URL}/datastage/datastages/`; const API_BASE = `${import.meta.env.VITE_EFC_API_URL}/datastage/datastages/`;
export async function fetchDatastages() { export async function fetchDatastages(page = 1, page_size = 10) {
const res = await getWithAuth(API_BASE); const url = `${API_BASE}?page=${page}&page_size=${page_size}`;
const res = await getWithAuth(url);
if (!res.ok) throw new Error('Error al obtener datastages'); if (!res.ok) throw new Error('Error al obtener datastages');
const data = await res.json(); const data = await res.json();
// Si la respuesta es paginada, devolver results // Si la respuesta es paginada, devolver el objeto completo
if (data && Array.isArray(data.results)) return data.results;
// Si la respuesta no es un array, devolver array vacío
if (!Array.isArray(data)) return [];
return data; return data;
} }

30
src/pages/Datastage.jsx
View File

@@ -116,7 +116,8 @@ function downloadDatastageFile(id, filename) {
export default function Datastage() { export default function Datastage() {
const focusKeeperRef = useRef(null); const focusKeeperRef = useRef(null);
const [datastages, setDatastages] = useState([]); // datastages will hold the full API response object (with .results and .count)
const [datastages, setDatastages] = useState({ results: [], count: 0 });
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage, setItemsPerPage] = useState(10); const [itemsPerPage, setItemsPerPage] = useState(10);
const [selected, setSelected] = useState(null); const [selected, setSelected] = useState(null);
@@ -150,9 +151,17 @@ export default function Datastage() {
setError(null); setError(null);
try { try {
const data = await fetchDatastages(); const data = await fetchDatastages();
// Defensive: if data is not the expected object, fallback to empty
if (data && Array.isArray(data.results)) {
setDatastages(data); setDatastages(data);
} else if (Array.isArray(data)) {
setDatastages({ results: data, count: data.length });
} else {
setDatastages({ results: [], count: 0 });
}
} catch (e) { } catch (e) {
setError(e.message); setError(e.message);
setDatastages({ results: [], count: 0 });
} }
setLoading(false); setLoading(false);
}; };
@@ -280,7 +289,7 @@ export default function Datastage() {
<div className="flex-1"> <div className="flex-1">
<h1 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-white tracking-tight mb-1 flex flex-col sm:flex-row sm:items-center gap-2"> <h1 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-white tracking-tight mb-1 flex flex-col sm:flex-row sm:items-center gap-2">
Datastage Datastage
<span className="inline-block bg-white/20 backdrop-blur-sm text-white text-xs font-semibold px-3 py-1 rounded-full animate-fade-in">{datastages.length}</span> <span className="inline-block bg-white/20 backdrop-blur-sm text-white text-xs font-semibold px-3 py-1 rounded-full animate-fade-in">{datastages.count}</span>
</h1> </h1>
<p className="text-sm sm:text-base lg:text-lg text-blue-100 font-medium">Gestiona y visualiza la información de Datastage.</p> <p className="text-sm sm:text-base lg:text-lg text-blue-100 font-medium">Gestiona y visualiza la información de Datastage.</p>
</div> </div>
@@ -349,7 +358,7 @@ export default function Datastage() {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{datastages.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage).map(item => ( {(Array.isArray(datastages.results) ? datastages.results : []).map(item => (
<tr key={item.id} className="hover:bg-slate-50 transition-colors"> <tr key={item.id} className="hover:bg-slate-50 transition-colors">
<td className="border px-2 py-2 text-center">{item.id}</td> <td className="border px-2 py-2 text-center">{item.id}</td>
<td className="border px-2 py-2 max-w-xs truncate"> <td className="border px-2 py-2 max-w-xs truncate">
@@ -431,10 +440,10 @@ export default function Datastage() {
</tbody> </tbody>
</table> </table>
{/* Paginación */} {/* Paginación */}
{datastages.length > itemsPerPage && ( {datastages.count > itemsPerPage && (
<div className="flex flex-col sm:flex-row items-center justify-between gap-2 px-4 py-4 border-t border-gray-200"> <div className="flex flex-col sm:flex-row items-center justify-between gap-2 px-4 py-4 border-t border-gray-200">
<div className="text-xs text-gray-700"> <div className="text-xs text-gray-700">
Mostrando <span className="font-medium">{((currentPage - 1) * itemsPerPage) + 1}</span> a <span className="font-medium">{Math.min(currentPage * itemsPerPage, datastages.length)}</span> de <span className="font-medium">{datastages.length}</span> registros Mostrando <span className="font-medium">{((currentPage - 1) * itemsPerPage) + 1}</span> a <span className="font-medium">{Math.min(currentPage * itemsPerPage, datastages.count)}</span> de <span className="font-medium">{datastages.count}</span> registros
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<button <button
@@ -442,7 +451,7 @@ export default function Datastage() {
disabled={currentPage === 1} disabled={currentPage === 1}
className="px-2 py-1 rounded border text-xs bg-white hover:bg-blue-50 disabled:opacity-50" className="px-2 py-1 rounded border text-xs bg-white hover:bg-blue-50 disabled:opacity-50"
>Anterior</button> >Anterior</button>
{Array.from({ length: Math.ceil(datastages.length / itemsPerPage) }, (_, i) => i + 1).map(pageNum => ( {Array.from({ length: Math.ceil(datastages.count / itemsPerPage) }, (_, i) => i + 1).map(pageNum => (
<button <button
key={pageNum} key={pageNum}
onClick={() => setCurrentPage(pageNum)} onClick={() => setCurrentPage(pageNum)}
@@ -450,8 +459,8 @@ export default function Datastage() {
>{pageNum}</button> >{pageNum}</button>
))} ))}
<button <button
onClick={() => setCurrentPage(p => Math.min(Math.ceil(datastages.length / itemsPerPage), p + 1))} onClick={() => setCurrentPage(p => Math.min(Math.ceil(datastages.count / itemsPerPage), p + 1))}
disabled={currentPage === Math.ceil(datastages.length / itemsPerPage)} disabled={currentPage === Math.ceil(datastages.count / itemsPerPage)}
className="px-2 py-1 rounded border text-xs bg-white hover:bg-blue-50 disabled:opacity-50" className="px-2 py-1 rounded border text-xs bg-white hover:bg-blue-50 disabled:opacity-50"
>Siguiente</button> >Siguiente</button>
<select <select
@@ -467,10 +476,10 @@ export default function Datastage() {
</div> </div>
{/* Tarjetas para móvil/tablet */} {/* Tarjetas para móvil/tablet */}
<div className="lg:hidden space-y-4 p-2"> <div className="lg:hidden space-y-4 p-2">
{datastages.length === 0 ? ( {datastages.results.length === 0 ? (
<div className="text-center text-gray-400 py-8">No hay datastages disponibles</div> <div className="text-center text-gray-400 py-8">No hay datastages disponibles</div>
) : ( ) : (
datastages.map(item => ( datastages.results.map(item => (
<div key={item.id} className="bg-white rounded-xl shadow border border-gray-200 p-4 flex flex-col gap-2"> <div key={item.id} className="bg-white rounded-xl shadow border border-gray-200 p-4 flex flex-col gap-2">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<span className="font-bold text-blue-800">#{item.id}</span> <span className="font-bold text-blue-800">#{item.id}</span>
@@ -568,6 +577,7 @@ export default function Datastage() {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
</svg> </svg>
</button> </button>
</div> </div>
</div> </div>
{/* Content */} {/* Content */}