diff --git a/pages/fdo/show/[prefix]/sandbox.tsx b/pages/fdo/show/[prefix]/sandbox.tsx
index 3ff874a0bb04f2f543a1fd2c1eebac4d7172235a..292f2c16723fcf5e62fa77bfe2228e8994c01bce 100644
--- a/pages/fdo/show/[prefix]/sandbox.tsx
+++ b/pages/fdo/show/[prefix]/sandbox.tsx
@@ -8,7 +8,7 @@ import { Typography } from '@mui/material'
import CircularProgress from '@mui/material/CircularProgress'
import AssignmentIcon from '@mui/icons-material/Assignment'
import Avatar from '@mui/material/Avatar'
-import { green } from '@mui/material/colors'
+import { blue, green } from '@mui/material/colors'
import Box from '@mui/material/Box'
import Stack from '@mui/material/Stack'
import Chip from '@mui/material/Chip'
@@ -23,7 +23,6 @@ import ListItemText from '@mui/material/ListItemText'
import ListItemIcon from '@mui/material/ListItemIcon'
import VerifiedIcon from '@mui/icons-material/Verified'
import ReportIcon from '@mui/icons-material/Report'
-import Table from '../../../../src/components/fdos/table'
import { styled, ThemeProvider } from '@mui/material/styles'
import Details from '../../../../src/components/fdos/details'
@@ -154,19 +153,18 @@ const ShowFDO = () => {
</MenuList>
</Item>
- <Item>
- <Stack direction="row" spacing={2}>
- <Avatar sx={{ bgcolor: green[500] }} variant="rounded">
+ <Item sx={{ width: '60%' }}>
+ <Stack direction="row" spacing={3}>
+ <Avatar sx={{ bgcolor: blue[500] }} variant="rounded">
<AssignmentIcon />
</Avatar>
- <h2>FDO Name</h2>
- </Stack>
+ <h2>displayName</h2>
+ </Stack><br/>
<Details/>
</Item>
</Stack>
</div><br/><br/>
- <Table/>
</Show>
)
diff --git a/src/components/fdos/details.tsx b/src/components/fdos/details.tsx
index de44814814a4b279637daab242a87bc7068abe6a..36635151f818f63cc023386c4cdbe017b0742c8d 100644
--- a/src/components/fdos/details.tsx
+++ b/src/components/fdos/details.tsx
@@ -30,28 +30,30 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
}
}))
+const info = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.'
+
function createData (
- info: string,
category: string,
+ classification: string,
logo: string
) {
- return { info, category, logo }
+ return { category, classification, logo }
}
const rows = [
+ createData('Desription:', info, 'xx'),
+ createData('Type:', 'CETTS', 'xx'),
createData('Repository:', 'LinkAhead', 'xx'),
createData('Dataspace:', 'RWTH', 'xx'),
- createData('Technology:', 'EDC', 'xx'),
- createData('Type:', 'CETTS', 'xx'),
- createData('Displayname:', 'DE23-xy45', 'xx'),
- createData('Desription:', 'Info', 'xx')
+ createData('Technology:', 'EDC', 'xx')
+
]
export default function CustomizedTables () {
return (
<TableContainer component={Paper}>
- <Table sx={{ minWidth: 700 }} aria-label="customized table">
+ <Table aria-label="FDP Details">
<TableHead>
{/* <TableRow>
<StyledTableCell>Info1 </StyledTableCell>
@@ -61,12 +63,12 @@ export default function CustomizedTables () {
</TableHead>
<TableBody>
{rows.map((row) => (
- <StyledTableRow key={row.info}>
+ <StyledTableRow key={row.category}>
<StyledTableCell component="th" scope="row">
- {row.info}
+ {row.category}
</StyledTableCell>
- <StyledTableCell align="right">{row.category}</StyledTableCell>
- <StyledTableCell align="right">{row.logo}</StyledTableCell>
+ <StyledTableCell align="left">{row.classification}</StyledTableCell>
+ <StyledTableCell align="left">{row.logo}</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
diff --git a/src/components/fdos/table.tsx b/src/components/fdos/table.tsx
deleted file mode 100644
index 3c53e589e663f11fef7db14c25ea134d09ec1bd7..0000000000000000000000000000000000000000
--- a/src/components/fdos/table.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import * as React from 'react'
-import Box from '@mui/material/Box'
-import Collapse from '@mui/material/Collapse'
-import IconButton from '@mui/material/IconButton'
-import Table from '@mui/material/Table'
-import TableBody from '@mui/material/TableBody'
-import TableCell from '@mui/material/TableCell'
-import TableContainer from '@mui/material/TableContainer'
-import TableHead from '@mui/material/TableHead'
-import TableRow from '@mui/material/TableRow'
-import Typography from '@mui/material/Typography'
-import Paper from '@mui/material/Paper'
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'
-
-function createData (
- name: string,
- type: string,
- dataspace: string
-) {
- return {
- name,
- type,
- dataspace,
- details: [
- {
- update: '2020-01-05',
- customerId: '11091700',
- amount: 'ASS'
- },
- {
- update: '2020-01-02',
- customerId: '23987003',
- amount: 'LinkAhead'
- }
- ]
- }
-}
-
-function Row (props: { row: ReturnType<typeof createData> }) {
- const { row } = props
- const [open, setOpen] = React.useState(false)
-
- return (
- <React.Fragment>
- <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
- <TableCell>
- <IconButton
- aria-label="expand row"
- size="small"
- onClick={() => { setOpen(!open) }}
- >
- {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
- </IconButton>
- </TableCell>
- <TableCell component="th" scope="row">
- {row.name}
- </TableCell>
- <TableCell align="right">{row.type}</TableCell>
- <TableCell align="right">{row.dataspace}</TableCell>
- </TableRow>
- <TableRow>
- <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
- <Collapse in={open} timeout="auto" unmountOnExit>
- <Box sx={{ margin: 1 }}>
- <Typography variant="h6" gutterBottom component="div">
- Details
- </Typography>
- <Table size="small" aria-label="purchases">
- <TableHead>
- <TableRow>
- <TableCell>UPDATE</TableCell>
- <TableCell>CUSTOMER-ID</TableCell>
- <TableCell align="right">DATASPACE</TableCell>
- </TableRow>
- </TableHead>
- <TableBody>
- {row.details.map((detailsRow) => (
- <TableRow key={detailsRow.update}>
- <TableCell component="th" scope="row">
- {detailsRow.update}
- </TableCell>
- <TableCell>{detailsRow.customerId}</TableCell>
- <TableCell component="th" scope="row">
- </TableCell>
- <TableCell>{detailsRow.amount}</TableCell>
- <TableCell component="th" scope="row">
- </TableCell>
- </TableRow>
- ))}
- </TableBody>
- </Table>
- </Box>
- </Collapse>
- </TableCell>
- </TableRow>
- </React.Fragment>
- )
-}
-const rows = [
- createData('CETTS-D2-2024-07-08', '159', '6.0'),
- createData('CETTS-D2-2024-06-24', '237', '9.0'),
- createData('CETTS-XD2-2024-06-03', '262', '16.0'),
- createData('CETTS-L2a-2024-05-08', '305', '3.7'),
- createData('CETTS-XD3a-2024-03-11', '356', '16.0')
-]
-export default function CollapsibleTable () {
- return (
- <TableContainer component={Paper}>
- <Table aria-label="collapsible table">
- <TableHead>
- <TableRow>
- <TableCell />
- <TableCell>Name & Date</TableCell>
- <TableCell align="right">Time</TableCell>
- <TableCell align="right">Device</TableCell>
- <TableCell align="right">Status</TableCell>
- </TableRow>
- </TableHead>
- <TableBody>
- {rows.map((row) => (
- <Row key={row.name} row={row} />
- ))}
- </TableBody>
- </Table>
- </TableContainer>
- )
-}