Commit 0295c558 authored by Guillermo Sanz López's avatar Guillermo Sanz López
Browse files

invokers pagination working perfect with size selector

parent ba586fd2

capif_frontend/src/pages/invokers/index.js

+39 −21
Original line number Diff line number Diff line
@@ -24,6 +24,10 @@ import TextField from '@mui/material/TextField'; 
import Pagination from '@mui/material/Pagination';

import { useEffect } from 'react';



import Select from '@mui/material/Select';

import MenuItem from '@mui/material/MenuItem';

import { fetchData } from 'src/store/apps/user';



const LinkStyled = styled(Link)(({ theme }) => ({

  textDecoration: 'none',

  color: theme.palette.primary.main,
@@ -85,20 +89,6 @@ const Invokers = () => { 
    fetchData(); // Llama a la función fetchData directamente cuando cambien las dependencias

  }, [currentPage, pageSize]);



  const handlePageChange = (newPage) => {

    setCurrentPage(newPage);

  };



  const handlePageSizeChange = (event) => {

    const newSize = event.target.value;

    setPageSize(newSize);

    // Recalcular el número total de páginas cuando cambia el tamaño de la página

    const newTotalPages = Math.ceil(totalInvokers / newSize);

    setTotalPages(newTotalPages);

    // Asegurarse de que la página actual sea válida después de cambiar el tamaño de la página

    setCurrentPage((prevPage) => Math.min(prevPage, newTotalPages));

  };



  const handleDeleteClick = (invokerId) => {

    setSelectedInvoker(invokerId);

    setDeleteDialogOpen(true);
@@ -128,6 +118,20 @@ const Invokers = () => { 
    setSelectedInvoker(null);

  };



  const handlePageChange = (newPage) => {

    setCurrentPage(newPage);

  };



  const handlePageSizeChange = (event) => {

    const newSize = event.target.value;

    setPageSize(newSize);

    // Recalcular el número total de páginas cuando cambia el tamaño de la página

    const newTotalPages = Math.ceil(totalInvokers / newSize);

    setTotalPages(newTotalPages);

    // Asegurarse de que la página actual sea válida después de cambiar el tamaño de la página

    setCurrentPage(1);

  };



  return (

    <Grid container spacing={3}>

      <Grid item xs={12}>
@@ -212,12 +216,26 @@ const Invokers = () => { 
            </Typography>

          )}

        </Card>



      </Grid>

      <Grid item xs={12}>

        <Grid container spacing={3} alignItems="center" justifyContent="space-between">

          <Grid item>

            <Pagination

              count={totalPages}

              page={currentPage}

              onChange={(event, value) => handlePageChange(value)}

            />

          </Grid>

          <Grid item>

            <Select value={pageSize} onChange={handlePageSizeChange}>

              <MenuItem value={10}>10 por página</MenuItem>

              <MenuItem value={20}>20 por página</MenuItem>

              <MenuItem value={30}>30 por página</MenuItem>

            </Select>

          </Grid>

        </Grid>

      </Grid>



      {/* Confirmación de eliminación */}

      <Dialog open={isDeleteDialogOpen} onClose={handleDeleteCancel}>