add users page and modify invokers page (ef63b7a6) · Commits · OCF / backoffice / frontend

src/navigation/vertical/index.js

+5 −0

Original line number	Diff line number	Diff line
		@@ -14,6 +14,11 @@ const navigation = () => {
		title: 'Providers',
		icon: 'mdi:baseline-people',
		path: '/providers'
		},
		{
		title: 'Users',
		icon: 'mdi:baseline-people',
		path: '/users'
		}

		// {

src/pages/invokers/[id].js

+99 −14

Original line number	Diff line number	Diff line
		@@ -43,25 +43,28 @@ const Invokers = () => {
		return (
		<Grid container spacing={6}>
		<PageHeader title={<Typography variant='h5'>Invoker: {invokerId}</Typography>} />

		<Grid item xs={12}>
		<Card>
		<CardHeader title='Security' />
		<CardHeader title='Info' />
		<CardContent>
		{!invokerSecurityData && <CircularProgress />}
		{invokerSecurityData && invokerSecurityData.length === 0 && <strong>No info</strong>}
		{invokerSecurityData && invokerSecurityData.length > 0 && (
		{!invokerEvents && <CircularProgress />}
		{invokerEvents && invokerEvents.length === 0 && <strong>Algo de la información del usuario al que pertenece. API para la que se ha creado el invoker. API para hacer X.</strong>}
		{invokerEvents && invokerEvents.length > 0 && (
		<TableContainer>
		<Table sx={{ minWidth: 650 }} aria-label='Card Actions'>
		<TableHead>
		<TableRow>
		<TableCell>notification_destination</TableCell>
		<TableCell>request_test_notification</TableCell>
		<TableCell>subscriber_id</TableCell>
		<TableCell>subscription_id</TableCell>
		<TableCell>notificationDestination</TableCell>
		</TableRow>
		</TableHead>
		<TableBody>
		<TableRow>
		<TableCell>{invokerSecurityData[0].notification_destination}</TableCell>
		<TableCell>{invokerSecurityData[0].request_test_notification}</TableCell>
		<TableCell>{invokerEvents[0].subscriber_id}</TableCell>
		<TableCell>{invokerEvents[0].subscription_id}</TableCell>
		<TableCell>{invokerEvents[0].notificationDestination}</TableCell>
		</TableRow>
		</TableBody>
		</Table>
		@@ -70,6 +73,88 @@ const Invokers = () => {
		</CardContent>
		</Card>
		</Grid>

		<Grid item xs={12}>
		<Card>
		<CardHeader title='Security' />
		<TableContainer component={Paper}>
		<Table sx={{ minWidth: 650 }} aria-label='Invokers table'>
		{!invokerSecurityData && <CircularProgress />}
		{invokerSecurityData && invokerSecurityData.length === 0 && <strong>No info</strong>}
		{invokerSecurityData && invokerSecurityData.length > 0 && (
		<>
		<TableHead>
		<TableRow>
		<TableCell>Nombre API</TableCell>
		<TableCell>Método Autenticación</TableCell>
		<TableCell>Fecha alta</TableCell>
		<TableCell>Validez</TableCell>
		</TableRow>
		</TableHead>
		<TableBody>
		{invokerSecurityData.map(invoker => (
		<TableRow
		key={invoker.api_invoker_id}
		sx={{
		'&:last-of-type td, &:last-of-type th': {
		border: 0
		}
		}}
		>
		<TableCell component='th' scope='row'>
		</TableCell>
		<TableCell>{invokerSecurityData[0].notification_destination}</TableCell>
		<TableCell>{invokerSecurityData[0].notification_destination}</TableCell>
		</TableRow>
		))}
		</TableBody>
		</>
		)}
		</Table>
		</TableContainer>
		</Card>
		</Grid>

		<Grid item xs={12}>
		<Card>
		<CardHeader title='Events 2' />
		<TableContainer component={Paper}>
		<Table sx={{ minWidth: 650 }} aria-label='Invokers table'>
		{!invokerSecurityData && <CircularProgress />}
		{invokerSecurityData && invokerSecurityData.length === 0 && <strong>No info</strong>}
		{invokerSecurityData && invokerSecurityData.length > 0 && (
		<>
		<TableHead>
		<TableRow>
		<TableCell>Identificador</TableCell>
		<TableCell>TimeStamp</TableCell>
		<TableCell>Descripción</TableCell>
		</TableRow>
		</TableHead>
		<TableBody>
		{invokerSecurityData.map(invoker => (
		<TableRow
		key={invoker.api_invoker_id}
		sx={{
		'&:last-of-type td, &:last-of-type th': {
		border: 0
		}
		}}
		>
		<TableCell component='th' scope='row'>
		</TableCell>
		<TableCell>{invokerSecurityData[0].notification_destination}</TableCell>
		<TableCell>{invokerSecurityData[0].notification_destination}</TableCell>
		</TableRow>
		))}
		</TableBody>
		</>
		)}
		</Table>
		</TableContainer>
		</Card>
		</Grid>

		<Grid item xs={12}>
		<Card>
		<CardHeader title='Events' />
		@@ -81,9 +166,9 @@ const Invokers = () => {
		<Table sx={{ minWidth: 650 }} aria-label='Card Actions'>
		<TableHead>
		<TableRow>
		<TableCell>subscriber_id</TableCell>
		<TableCell>subscription_id</TableCell>
		<TableCell>notificationDestination</TableCell>
		<TableCell>Identificador</TableCell>
		<TableCell>TimeStamp</TableCell>
		<TableCell>Descripción</TableCell>
		</TableRow>
		</TableHead>
		<TableBody>

src/pages/invokers/index.js

+3 −0

Original line number	Diff line number	Diff line
		@@ -29,6 +29,7 @@ const Invokers = () => {
		try {
		const { data } = await getInvokers()
		setInvokersData(data)
		console.log('Invokers data:', data)
		} catch (error) {
		console.error('Error fetching invokers:', error)
		}
		@@ -56,6 +57,7 @@ const Invokers = () => {
		<TableRow>
		<TableCell>ID</TableCell>
		<TableCell>Info</TableCell>
		<TableCell>User name</TableCell>
		</TableRow>
		</TableHead>
		<TableBody>
		@@ -72,6 +74,7 @@ const Invokers = () => {
		<LinkStyled href={`/invokers/${invoker.api_invoker_id}`}>{invoker.api_invoker_id}</LinkStyled>
		</TableCell>
		<TableCell>{invoker.api_invoker_information}</TableCell>
		<TableCell>{invoker.api_invoker_information}</TableCell>
		</TableRow>
		))}
		</TableBody>

src/pages/users/[id].js

0 → 100644

+0 −0

Empty file added.

src/pages/users/index.js

0 → 100644

+90 −0

Original line number	Diff line number	Diff line
		import Link from 'next/link'
		import Grid from '@mui/material/Grid'
		import Card from '@mui/material/Card'
		import { styled } from '@mui/material/styles'
		import Typography from '@mui/material/Typography'
		import CardHeader from '@mui/material/CardHeader'
		import PageHeader from 'src/@core/components/page-header'
		import Paper from '@mui/material/Paper'
		import Table from '@mui/material/Table'
		import TableRow from '@mui/material/TableRow'
		import TableHead from '@mui/material/TableHead'
		import TableBody from '@mui/material/TableBody'
		import TableCell from '@mui/material/TableCell'
		import TableContainer from '@mui/material/TableContainer'
		import CircularProgress from '@mui/material/CircularProgress'
		import { getProviders } from 'src/configs/apiService'
		import { useEffect, useState } from 'react'

		// ** Styled component for the link in the dataTable
		const LinkStyled = styled(Link)(({ theme }) => ({
		textDecoration: 'none',
		color: theme.palette.primary.main
		}))

		const Providers = () => {
		const [providersData, setProvidersData] = useState(null)

		const fetchData = async () => {
		try {
		const { data } = await getProviders()
		setProvidersData(data)
		} catch (error) {
		console.error('Error fetching users:', error)
		}
		}

		useEffect(() => {
		fetchData()
		}, [])

		return (
		<Grid container spacing={6}>
		<PageHeader
		title={<Typography variant='h5'>Users</Typography>}
		subtitle={<Typography variant='body2'>A table with users</Typography>}
		/>
		<Grid item xs={12}>
		<Card>
		<CardHeader title='List of Users' />
		<TableContainer component={Paper}>
		<Table sx={{ minWidth: 650 }} aria-label='Users table'>
		{!providersData && <CircularProgress />}
		{providersData && (
		<>
		<TableHead>
		<TableRow>
		<TableCell>Users name</TableCell>
		<TableCell>Users info</TableCell>
		</TableRow>
		</TableHead>
		<TableBody>
		{providersData.map(invoker => (
		<TableRow
		key={invoker.api_prov_dom_id}
		sx={{
		'&:last-of-type td, &:last-of-type th': {
		border: 0
		}
		}}
		>
		<TableCell component='th' scope='row'>
		<LinkStyled href={`/providers/${invoker.api_prov_dom_id}`}>
		{invoker.api_prov_dom_id}
		</LinkStyled>
		</TableCell>
		<TableCell>{invoker.api_prov_dom_info}</TableCell>
		</TableRow>
		))}
		</TableBody>
		</>
		)}
		</Table>
		</TableContainer>
		</Card>
		</Grid>
		</Grid>
		)
		}

		export default Providers