invokers, providers and apis working perfect with last update of deleting (82da1547) · Commits · OCF / backoffice / frontend

capif_frontend/package.json

+1 −0

Original line number	Diff line number	Diff line
		@@ -30,6 +30,7 @@
		"@fullcalendar/timegrid": "6.1.6",
		"@hookform/resolvers": "3.1.0",
		"@iconify/react": "4.1.0",
		"@material-ui/core": "^4.12.4",
		"@mui/lab": "5.0.0-alpha.128",
		"@mui/material": "5.12.2",
		"@mui/system": "5.12.1",

capif_frontend/src/pages/apis/index.js

+81 −37

Original line number	Diff line number	Diff line
		@@ -31,22 +31,26 @@ const LinkStyled = styled(Link)(({ theme }) => ({
		color: theme.palette.primary.main,
		}));



		const Apis = () => {
		const queryClient = useQueryClient();
		const queryClient = useQueryClient()
		const [selectedApi, setSelectedApi] = useState(null);
		const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
		const [searchTerm, setSearchTerm] = useState('');

		const [currentPage, setCurrentPage] = useState(1);
		const [pageSize, setPageSize] = useState(10); // Número de invocadores por página
		const [totalPages, setTotalPages] = useState(0);
		const [totalApis, setTotalApis] = useState(0);
		const [apis, setApis] = useState([]);
		const [searchTerm, setSearchTerm] = useState('');

		// APIS DATA
		const queryKeyApis = ['apis'];
		const [isDeleting, setIsDeleting] = useState(false);
		const [deleteMessage, setDeleteMessage] = useState('');
		const [showDeleteMessage, setShowDeleteMessage] = useState(false);
		const [errorDeleting, setErrorDeleting] = useState(false);

		console.log("entra por aquí")
		// ApiS DATA
		const queryKeyApis = ['apis'];

		const { data: apisDataPages, isLoadingApisData, isErrorApisData, refetchApis } = useQuery({
		queryKey: queryKeyApis,
		@@ -55,15 +59,12 @@ const Apis = () => {
		refetchOnMount: false,
		});

		console.log("2 Imprime apisDataPages", apisDataPages)

		console.log('apisDataPages:', apisDataPages);

		useEffect(() => {
		// Solo establece los invocadores cuando ApisData cambie
		console.log("3 dentro del useEffect1 Imprime apisDataPages", apisDataPages)
		// Solo establece los invocadores cuando apisData cambie
		if (apisDataPages) {
		setApis(apisDataPages.data);
		console.log("4 Imprime apisDataPages.data dentro del if", apisDataPages.data)
		}
		}, [apisDataPages]);

		@@ -74,7 +75,6 @@ const Apis = () => {
		const response = await getApisPages({ page: currentPage, pageSize });
		setApis(response.data);
		setTotalApis(response.total);
		console.log('Total apis:', response.total);
		setTotalPages(Math.ceil(response.total / pageSize));
		} catch (error) {
		console.error('Error fetching apis:', error.message);
		@@ -84,8 +84,6 @@ const Apis = () => {
		fetchData(); // Llama a la función fetchData directamente cuando cambien las dependencias
		}, [currentPage, pageSize]);

		console.log('5 apis, no debería existir hasta refrescar la página: ', apis)


		const handleDeleteClick = (apf_id, api_id) => {
		setSelectedApi({ apf_id, api_id })
		@@ -94,24 +92,49 @@ const Apis = () => {

		const handleDeleteConfirm = async () => {
		try {
		setIsDeleting(true);
		setErrorDeleting(false);

		const currentPageBeforeDelete = currentPage; // Guarda la página actual antes de la eliminación

		const { apf_id, api_id } = selectedApi
		await deleteProviderService(apf_id, api_id)
		console.log('API eliminado')
		// Invalidar la caché después de la eliminación para que se vuelva a cargar la lista
		queryClient.invalidateQueries(queryKey);
		// Refrescar los datos inmediatamente después de la eliminación
		refetch()
		setDeleteDialogOpen(false)
		setSelectedApi(null)
		} catch (error) {
		console.error('Error al eliminar el api', error.message)

		// Carga el mensaje de éxito
		setDeleteMessage('Api removed');

		// Refresca los datos después de la eliminación manteniendo la página actual
		// Si la página actual quedó vacía después de la eliminación, cambia a la página anterior
		const response = await getApisPages({ page: currentPage, pageSize });
		setApis(response.data);
		setTotalApis(response.total);
		const newTotalPages = Math.ceil(response.total / pageSize);
		setTotalPages(newTotalPages);

		if (response.data.length === 0 && currentPageBeforeDelete > 1) {
		setCurrentPage(currentPageBeforeDelete - 1);
		}

		setDeleteDialogOpen(false);
		setSelectedApi(null);
		setShowDeleteMessage(true);
		} catch (error) {
		console.error('Error deleting api:', error.message);
		setErrorDeleting(true);
		} finally {
		setIsDeleting(false);
		}
		};

		const handleDeleteCancel = () => {
		setDeleteDialogOpen(false)
		setSelectedApi(null)
		}
		setDeleteDialogOpen(false);
		setSelectedApi(null);
		setDeleteMessage('');
		};

		const handleDeleteMessageAccept = () => {
		setShowDeleteMessage(false);
		};

		const handlePageChange = (newPage) => {
		setCurrentPage(newPage);
		@@ -128,7 +151,10 @@ const Apis = () => {
		};

		return (
		<Grid container spacing={6}>
		<Grid container spacing={3}>
		<Grid item xs={12}>
		{/* Agregar controles de búsqueda aquí si es necesario */}
		</Grid>
		<Grid item xs={8}>
		<PageHeader title={<Typography variant='h5'>Apis: {totalApis}</Typography>} />
		</Grid>
		@@ -141,7 +167,7 @@ const Apis = () => {
		<TextField
		label="Search by ..."
		variant="outlined"
		value={searchTerm}
		//value={searchTerm}
		onChange={(e) => setSearchTerm(e.target.value)}
		/>
		</Grid>
		@@ -150,6 +176,8 @@ const Apis = () => {
		</Grid>
		</Grid>



		<Grid item xs={12}>
		<Card>
		<CardHeader title='List of Apis' />
		@@ -210,6 +238,7 @@ const Apis = () => {
		</Card>
		</Grid>


		<Grid item xs={12}>
		<Grid container spacing={3} alignItems="center" justifyContent="space-between">
		<Grid item>
		@@ -229,16 +258,32 @@ const Apis = () => {
		</Grid>
		</Grid>

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

		<Dialog open={isDeleteDialogOpen} onClose={handleDeleteCancel}>
		<DialogTitle>Confirm Deletion</DialogTitle>
		<DialogContent>
		Are you sure you want to delete the API?
		Are you sure you want to delete the api?
		</DialogContent>
		<DialogActions>
		<Button onClick={handleDeleteCancel}>Cancel</Button>
		<Button onClick={handleDeleteConfirm} autoFocus>
		Confirm
		<Button onClick={handleDeleteConfirm} autoFocus disabled={isDeleting}>
		{isDeleting ? <CircularProgress size={24} /> : 'Confirm'}
		</Button>
		</DialogActions>
		</Dialog>

		<Dialog open={showDeleteMessage} onClose={handleDeleteMessageAccept}>
		<DialogTitle>
		{errorDeleting ? 'Error Deleting Api' : 'Api Deleted'}
		</DialogTitle>
		<DialogContent>
		{errorDeleting
		? 'An error occurred while deleting the api.'
		: 'The api has been successfully deleted.'}
		</DialogContent>
		<DialogActions>
		<Button onClick={handleDeleteMessageAccept} autoFocus>
		Accept
		</Button>
		</DialogActions>
		</Dialog>
		@@ -247,4 +292,3 @@ const Apis = () => {
		};

		export default Apis;

capif_frontend/src/pages/invokers/index.js

+347 −25

Original line number	Diff line number	Diff line
		import React from 'react';
		import { useState } from 'react';
		import { useQuery, useQueryClient, QueryClient, QueryClientProvider, useMutation } from '@tanstack/react-query'
		import { useQuery, useQueryClient, QueryClient, QueryClientInvoker, useMutation } from '@tanstack/react-query'
		import { getInvokers, getInvokersPages, deleteInvoker, getNumInvokers } from 'src/configs/apiService';
		import Link from 'next/link';
		import Grid from '@mui/material/Grid';
		@@ -33,6 +33,9 @@ const LinkStyled = styled(Link)(({ theme }) => ({
		color: theme.palette.primary.main,
		}));




		const Invokers = () => {
		const queryClient = useQueryClient()
		const [selectedInvoker, setSelectedInvoker] = useState(null);
		@@ -44,15 +47,10 @@ const Invokers = () => {
		const [invokers, setInvokers] = useState([]);
		const [searchTerm, setSearchTerm] = useState('');

		// INVOKERS NUMBER
		const queryKeyNumInvokers = ['invokersNum']

		const { data: invokersNum, isLoadingNumInvokers, isErrorNumInvokers, refetchNumInvokers } = useQuery({
		queryKey: queryKeyNumInvokers,
		queryFn: getNumInvokers,
		refetchOnWindowFocus: false,
		refetchOnMount: false,
		});
		const [isDeleting, setIsDeleting] = useState(false);
		const [deleteMessage, setDeleteMessage] = useState('');
		const [showDeleteMessage, setShowDeleteMessage] = useState(false);
		const [errorDeleting, setErrorDeleting] = useState(false);

		// INVOKERS DATA
		const queryKeyInvokers = ['invokers'];
		@@ -96,26 +94,49 @@ const Invokers = () => {

		const handleDeleteConfirm = async () => {
		try {
		// const { invokerId } = selectedInvoker
		// await deleteInvoker(invokerId)
		setIsDeleting(true);
		setErrorDeleting(false);

		const currentPageBeforeDelete = currentPage; // Guarda la página actual antes de la eliminación

		await deleteInvoker(selectedInvoker);

		// Invalidar la caché después de la eliminación para que se vuelva a cargar la lista
		queryClient.invalidateQueries('invokers');
		// Carga el mensaje de éxito
		setDeleteMessage('Invoker removed');

		// Refresca los datos después de la eliminación manteniendo la página actual
		// Si la página actual quedó vacía después de la eliminación, cambia a la página anterior
		const response = await getInvokersPages({ page: currentPage, pageSize });
		setInvokers(response.data);
		setTotalInvokers(response.total);
		const newTotalPages = Math.ceil(response.total / pageSize);
		setTotalPages(newTotalPages);

		if (response.data.length === 0 && currentPageBeforeDelete > 1) {
		setCurrentPage(currentPageBeforeDelete - 1);
		}

		// Refrescar los datos inmediatamente después de la eliminación
		// refetch()
		setDeleteDialogOpen(false);
		setSelectedInvoker(null);
		//fetchInvokers();
		setShowDeleteMessage(true);
		} catch (error) {
		console.error('Error deleting invoker:', error.message);
		setErrorDeleting(true);
		} finally {
		setIsDeleting(false);
		}
		};



		const handleDeleteCancel = () => {
		setDeleteDialogOpen(false);
		setSelectedInvoker(null);
		setSelectedinvoker(null);
		setDeleteMessage('');
		};

		const handleDeleteMessageAccept = () => {
		setShowDeleteMessage(false);
		};

		const handlePageChange = (newPage) => {
		@@ -138,7 +159,7 @@ const Invokers = () => {
		{/* Agregar controles de búsqueda aquí si es necesario */}
		</Grid>
		<Grid item xs={8}>
		<PageHeader title={<Typography variant='h5'>Invokers: {invokersNum?.data}</Typography>} />
		<PageHeader title={<Typography variant='h5'>Invokers: {totalInvokers}</Typography>} />
		</Grid>

		{/* Grid con el campo de búsqueda en la segunda columna */}
		@@ -158,6 +179,7 @@ const Invokers = () => {
		</Grid>
		</Grid>


		<Grid item xs={12}>
		<Card>
		<CardHeader title='List of Invokers' />
		@@ -170,7 +192,7 @@ const Invokers = () => {
		) : invokersDataPages?.data && invokersDataPages.data.length > 0 ? (
		<>
		<TableContainer component={Paper}>
		<Table sx={{ minWidth: 650 }} aria-label='Providers table'>
		<Table sx={{ minWidth: 650 }} aria-label='Invokers table'>
		<TableHead>
		<TableRow>
		<TableCell>ID</TableCell>
		@@ -224,8 +246,11 @@ const Invokers = () => {
		</Typography>
		)}
		</Card>

		</Grid>




		<Grid item xs={12}>
		<Grid container spacing={3} alignItems="center" justifyContent="space-between">
		<Grid item>
		@@ -245,7 +270,7 @@ const Invokers = () => {
		</Grid>
		</Grid>

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

		<Dialog open={isDeleteDialogOpen} onClose={handleDeleteCancel}>
		<DialogTitle>Confirm Deletion</DialogTitle>
		<DialogContent>
		@@ -253,8 +278,24 @@ const Invokers = () => {
		</DialogContent>
		<DialogActions>
		<Button onClick={handleDeleteCancel}>Cancel</Button>
		<Button onClick={handleDeleteConfirm} autoFocus>
		Confirm
		<Button onClick={handleDeleteConfirm} autoFocus disabled={isDeleting}>
		{isDeleting ? <CircularProgress size={24} /> : 'Confirm'}
		</Button>
		</DialogActions>
		</Dialog>

		<Dialog open={showDeleteMessage} onClose={handleDeleteMessageAccept}>
		<DialogTitle>
		{errorDeleting ? 'Error Deleting Invoker' : 'Invoker Deleted'}
		</DialogTitle>
		<DialogContent>
		{errorDeleting
		? 'An error occurred while deleting the invoker.'
		: 'The invoker has been successfully deleted.'}
		</DialogContent>
		<DialogActions>
		<Button onClick={handleDeleteMessageAccept} autoFocus>
		Accept
		</Button>
		</DialogActions>
		</Dialog>
		@@ -263,3 +304,284 @@ const Invokers = () => {
		};

		export default Invokers;










		// const Invokers = () => {
		// const queryClient = useQueryClient()
		// const [selectedInvoker, setSelectedInvoker] = useState(null);
		// const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
		// const [currentPage, setCurrentPage] = useState(1);
		// const [pageSize, setPageSize] = useState(10); // Número de invocadores por página
		// const [totalPages, setTotalPages] = useState(0);
		// const [totalInvokers, setTotalInvokers] = useState(0);
		// const [invokers, setInvokers] = useState([]);
		// const [searchTerm, setSearchTerm] = useState('');

		// const [isDeleting, setIsDeleting] = useState(false);
		// const [deleteMessage, setDeleteMessage] = useState('');
		// const [showDeleteMessage, setShowDeleteMessage] = useState(false);
		// const [errorDeleting, setErrorDeleting] = useState(false);



		// // INVOKERS NUMBER
		// const queryKeyNumInvokers = ['invokersNum']

		// const { data: invokersNum, isLoadingNumInvokers, isErrorNumInvokers, refetchNumInvokers } = useQuery({
		// queryKey: queryKeyNumInvokers,
		// queryFn: getNumInvokers,
		// refetchOnWindowFocus: false,
		// refetchOnMount: false,
		// });

		// // INVOKERS DATA
		// const queryKeyInvokers = ['invokers'];

		// const { data: invokersDataPages, isLoadingInvokersData, isErrorInvokersData, refetchInvokers } = useQuery({
		// queryKey: queryKeyInvokers,
		// queryFn: () => getInvokersPages({ page: currentPage, pageSize }),
		// refetchOnWindowFocus: false,
		// refetchOnMount: false,
		// });

		// console.log('invokersDataPages:', invokersDataPages);

		// useEffect(() => {
		// // Solo establece los invocadores cuando invokersData cambie
		// if (invokersDataPages) {
		// setInvokers(invokersDataPages.data);
		// }
		// }, [invokersDataPages]);

		// useEffect(() => {
		// // Lógica para refrescar los datos aquí
		// const fetchData = async () => {
		// try {
		// const response = await getInvokersPages({ page: currentPage, pageSize });
		// setInvokers(response.data);
		// setTotalInvokers(response.total);
		// setTotalPages(Math.ceil(response.total / pageSize));
		// } catch (error) {
		// console.error('Error fetching invokers:', error.message);
		// }
		// };

		// fetchData(); // Llama a la función fetchData directamente cuando cambien las dependencias
		// }, [currentPage, pageSize]);

		// const handleDeleteClick = (invokerId) => {
		// setSelectedInvoker(invokerId);
		// setDeleteDialogOpen(true);
		// };

		// const handleDeleteConfirm = async () => {
		// try {
		// setIsDeleting(true);
		// setErrorDeleting(false);
		// const currentPageBeforeDelete = currentPage; // Guarda la página actual antes de la eliminación

		// await deleteInvoker(selectedInvoker);

		// // Simula el mensaje de éxito, reemplaza esta línea con tu lógica real
		// setDeleteMessage('Invoker removed');

		// // Actualiza manualmente la lista de invocadores después de eliminar el invocador
		// const updatedInvokers = invokers.filter(invoker => invoker.api_invoker_id !== selectedInvoker);
		// setInvokers(updatedInvokers);

		// // Si la página actual quedó vacía después de la eliminación, cambia a la página anterior
		// if (updatedInvokers.length === 0 && currentPageBeforeDelete > 1) {
		// setCurrentPage(currentPageBeforeDelete - 1);
		// }

		// setDeleteDialogOpen(false);
		// setSelectedInvoker(null);
		// setShowDeleteMessage(true);
		// } catch (error) {
		// console.error('Error deleting invoker:', error.message);
		// setErrorDeleting(true);
		// } finally {
		// setIsDeleting(false);
		// }
		// };


		// const handleDeleteCancel = () => {
		// setDeleteDialogOpen(false);
		// setSelectedInvoker(null);
		// setDeleteMessage('');
		// };

		// const handleDeleteMessageAccept = () => {
		// setShowDeleteMessage(false);
		// };

		// 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}>
		// {/* Agregar controles de búsqueda aquí si es necesario */}
		// </Grid>
		// <Grid item xs={8}>
		// <PageHeader title={<Typography variant='h5'>Invokers: {invokersNum?.data}</Typography>} />
		// </Grid>

		// {/* Grid con el campo de búsqueda en la segunda columna */}
		// <Grid item xs={4}>
		// <Grid container spacing={2}>
		// {/* Agregar un campo de búsqueda */}
		// <Grid item xs={12}>
		// <TextField
		// label="Search by ..."
		// variant="outlined"
		// //value={searchTerm}
		// onChange={(e) => setSearchTerm(e.target.value)}
		// />
		// </Grid>

		// {/* Otros elementos adicionales en la segunda columna, si es necesario */}
		// </Grid>
		// </Grid>

		// <Grid item xs={12}>
		// <Card>
		// <CardHeader title='List of Invokers' />
		// {isLoadingInvokersData ? (
		// <CircularProgress />
		// ) : isErrorInvokersData ? (
		// <Typography variant='body1' sx={{ paddingLeft: 4, paddingBottom: 2 }}>
		// Error loading data.
		// </Typography>
		// ) : invokersDataPages?.data && invokersDataPages.data.length > 0 ? (
		// <>
		// <TableContainer component={Paper}>
		// <Table sx={{ minWidth: 650 }} aria-label='invokers table'>
		// <TableHead>
		// <TableRow>
		// <TableCell>ID</TableCell>
		// <TableCell>Info</TableCell>
		// <TableCell>User name</TableCell>
		// <TableCell>Actions</TableCell>
		// </TableRow>
		// </TableHead>
		// <TableBody>
		// {invokers.map((invoker) => (
		// <TableRow
		// key={invoker.api_invoker_id}
		// sx={{
		// '&:last-of-type td, &:last-of-type th': {
		// border: 0,
		// },
		// }}
		// >
		// <TableCell component='th' scope='row'>
		// <LinkStyled href={`/invokers/${invoker.api_invoker_id}`}>
		// {invoker.api_invoker_id}
		// </LinkStyled>
		// </TableCell>
		// <TableCell>{invoker.api_invoker_information}</TableCell>
		// <TableCell>
		// {invoker.username ? (
		// <LinkStyled href={`/users/${invoker.username}`}>
		// {invoker.username}
		// </LinkStyled>
		// ) : (
		// 'Unknown user'
		// )}
		// </TableCell>
		// <TableCell>
		// <Button
		// variant='contained'
		// onClick={() => handleDeleteClick(invoker.api_invoker_id)}
		// >
		// Delete
		// </Button>
		// </TableCell>
		// </TableRow>
		// ))}
		// </TableBody>
		// </Table>
		// </TableContainer>
		// </>
		// ) : (
		// <Typography variant='body1' sx={{ paddingLeft: 4, paddingBottom: 2 }}>
		// There are no invokers yet.
		// </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 per page</MenuItem>
		// <MenuItem value={20}>20 per page</MenuItem>
		// <MenuItem value={30}>30 per page</MenuItem>
		// </Select>
		// </Grid>
		// </Grid>
		// </Grid>


		// <Dialog open={isDeleteDialogOpen} onClose={handleDeleteCancel}>
		// <DialogTitle>Confirm Deletion</DialogTitle>
		// <DialogContent>
		// Are you sure you want to delete the invoker?
		// </DialogContent>
		// <DialogActions>
		// <Button onClick={handleDeleteCancel}>Cancel</Button>
		// <Button onClick={handleDeleteConfirm} autoFocus disabled={isDeleting}>
		// {isDeleting ? <CircularProgress size={24} /> : 'Confirm'}
		// </Button>
		// </DialogActions>
		// </Dialog>

		// <Dialog open={showDeleteMessage} onClose={handleDeleteMessageAccept}>
		// <DialogTitle>
		// {errorDeleting ? 'Error Deleting Invoker' : 'Invoker Deleted'}
		// </DialogTitle>
		// <DialogContent>
		// {errorDeleting
		// ? 'An error occurred while deleting the invoker.'
		// : 'The invoker has been successfully deleted.'}
		// </DialogContent>
		// <DialogActions>
		// <Button onClick={handleDeleteMessageAccept} autoFocus>
		// Accept
		// </Button>
		// </DialogActions>
		// </Dialog>
		// </Grid>
		// );
		// };

		// export default Invokers;

capif_frontend/src/pages/providers/index.js

+303 −26

File changed.

Preview size limit exceeded, changes collapsed.

capif_frontend/yarn.lock

+0 −0

File changed.

Preview suppressed by a .gitattributes entry or the file's encoding is unsupported.

View original file

View changed file