Commit 10dc4d8e authored by Guillermo Sanz López's avatar Guillermo Sanz López
Browse files

all working

parent 0234a0a1

capif_frontend/.eslintrc.js

+0 −13
Original line number Diff line number Diff line
@@ -24,19 +24,6 @@ module.exports = { 
    'react/no-unescaped-entities': 'off',

    'import/no-anonymous-default-export': 'off',



    // add new line above comment

    'lines-around-comment': [

      'error',

      {

        beforeLineComment: true,

        beforeBlockComment: true,

        allowBlockStart: true,

        allowClassStart: true,

        allowObjectStart: true,

        allowArrayStart: true

      }

    ],



    // add new line above return

    'newline-before-return': 'error',

capif_frontend/src/configs/apiService.js

+9 −0
Original line number Diff line number Diff line
@@ -45,6 +45,15 @@ export const deleteProviderService = async (apf_id, api_id) => { 
  return axiosInstance.delete(`/providers/services/${apf_id}/${api_id}`)

}



// APIS

export const getApis = async () => {

  return axiosInstance.get(`/apis`)

}



export const getNumApis = async () => {

  return axiosInstance.get(`/apis/num`)

}



// USERS

export const getUsers = async id => {

  return axiosInstance.get(`/users`)

capif_frontend/src/configs/axiosInstance.js

+2 −2
Original line number Diff line number Diff line
@@ -22,9 +22,9 @@ axiosInstance.interceptors.request.use( 
    }

    



    //const accessToken = getAccessToken()

    const accessToken = getAccessToken()

    

    const accessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmcmVzaCI6ZmFsc2UsImlhdCI6MTcwMDc2MDk3MiwianRpIjoiMWZjZTdiZGMtMGU3My00OTgwLTlmNzktMDg5MmZmYjY0NmQwIiwidHlwZSI6ImFjY2VzcyIsInN1YiI6InN1cGVyYWRtaW4iLCJuYmYiOjE3MDA3NjA5NzJ9.A2ogmeWRY5lHPAK0fT-dnv_ru21bTKifLMqmRGX2Dzo"

    //const accessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmcmVzaCI6ZmFsc2UsImlhdCI6MTcwMDc2MDk3MiwianRpIjoiMWZjZTdiZGMtMGU3My00OTgwLTlmNzktMDg5MmZmYjY0NmQwIiwidHlwZSI6ImFjY2VzcyIsInN1YiI6InN1cGVyYWRtaW4iLCJuYmYiOjE3MDA3NjA5NzJ9.A2ogmeWRY5lHPAK0fT-dnv_ru21bTKifLMqmRGX2Dzo"



    const refreshToken = getRefreshToken()

    console.log('Interceptor request accessToken', accessToken)

capif_frontend/src/pages/apis/[id].js

deleted100644 → 0
+0 −0

Empty file deleted.

capif_frontend/src/pages/apis/index.js

+57 −26
Original line number Diff line number Diff line
@@ -16,7 +16,9 @@ import TableCell from '@mui/material/TableCell'; 
import TableContainer from '@mui/material/TableContainer';

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

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

import { getUsers, deleteUser } from 'src/configs/apiService';

import { getApis } from 'src/configs/apiService';

import { useState } from 'react'

import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material'



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

  textDecoration: 'none',
@@ -25,61 +27,76 @@ const LinkStyled = styled(Link)(({ theme }) => ({ 


const Apis = () => {

  const queryClient = useQueryClient();

  const [selectedApi, setSelectedApi] = useState(null);

  const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);



  // Define la clave única para esta consulta

  const queryKey = ['users'];

  const queryKey = ['apis'];



  // Usa useQuery para obtener los datos

  const { data: usersData, isLoading, isError, refetch } = useQuery({

  const { data: apisData, isLoading, isError, refetch } = useQuery({

    queryKey,

    queryFn: getUsers,

    queryFn: getApis,

  });



  const handleDeleteClick = async (username, password) => {

  const handleDeleteClick = (apf_id, api_id) => {

    setSelectedApi({ apf_id, api_id })

    setDeleteDialogOpen(true)

  }



  const handleDeleteConfirm = async () => {

    try {

      await deleteUser(username, password);

      console.log('Usuario eliminado');

      const { apf_id, api_id } = selectedProvider

      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();

      refetch()

      setDeleteDialogOpen(false)

      setSelectedApi(null)

    } catch (error) {

      console.error('Error al eliminar el usuario', error.message);

      console.error('Error al eliminar el api', error.message)

    }

  }



  const handleDeleteCancel = () => {

    setDeleteDialogOpen(false)

    setSelectedApi(null)

  }

  };



  return (

    <Grid container spacing={6}>

      <PageHeader title={<Typography variant='h5'>Users</Typography>} />

      <PageHeader title={<Typography variant='h5'>APIs</Typography>} />

      <Grid item xs={12}>

        <Card>

          <CardHeader title='List of Users' />

          <CardHeader title='List of APIs' />

          <TableContainer component={Paper}>

            <Table sx={{ minWidth: 650 }} aria-label='Users table'>

            <Table sx={{ minWidth: 650 }} aria-label='APIs table'>

              {isLoading ? (

                <CircularProgress />

              ) : isError ? (

                <Typography variant='body1' sx={{ paddingLeft: 4, paddingBottom: 2 }}>

                  Error loading data.

                </Typography>

              ) : !usersData || usersData.length === 0 ? (

              ) : !apisData || apisData.length === 0 ? (

                <Typography variant='body1' sx={{ paddingLeft: 4, paddingBottom: 2 }}>

                  There are no users yet.

                  There are no apis yet.

                </Typography>

              ) : (

                <>

                  <TableHead>

                    <TableRow>

                      <TableCell>Users name</TableCell>

                      <TableCell>Role</TableCell>

                      <TableCell>Users info</TableCell>

                      <TableCell>Delete user</TableCell>

                      <TableCell>API name</TableCell>

                      <TableCell>Description</TableCell>

                      <TableCell>AEF</TableCell>

                      <TableCell>Delete API</TableCell>

                    </TableRow>

                  </TableHead>

                  <TableBody>

                    {usersData.data.map((user) => (

                    {apisData.data.map((api) => (

                      <TableRow

                        key={user.username}

                        key={api.username}

                        sx={{

                          '&:last-of-type td, &:last-of-type th': {

                            border: 0,
@@ -87,16 +104,16 @@ const Apis = () => { 
                        }}

                      >

                        <TableCell component='th' scope='row'>

                          <LinkStyled href={`/users/${user.username}`}>

                            {user.username}

                          <LinkStyled href={`/users/${api.username}`}>

                            {api.api_name}

                          </LinkStyled>

                        </TableCell>

                        <TableCell>{user.role}</TableCell>

                        <TableCell>{user.description}</TableCell>

                        <TableCell>{api.description}</TableCell>

                        <TableCell>{api.aef_profiles[0].aef_id}</TableCell>

                        <TableCell>

                          <Button

                            variant='contained'

                            onClick={() => handleDeleteClick(user.username, user.password)}

                            onClick={() => handleDeleteClick()}

                          >

                            Delete

                          </Button>
@@ -110,6 +127,20 @@ const Apis = () => { 
          </TableContainer>

        </Card>

      </Grid>



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

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

        <DialogTitle>Confirm Deletion</DialogTitle>

        <DialogContent>

          Are you sure you want to delete the provider?

        </DialogContent>

        <DialogActions>

          <Button onClick={handleDeleteCancel}>Cancel</Button>

          <Button onClick={handleDeleteConfirm} autoFocus>

            Confirm

          </Button>

        </DialogActions>

      </Dialog>

    </Grid>

  );

};