diff --git a/pages/fdo/show/[prefix]/sandbox.tsx b/pages/fdo/show/[prefix]/sandbox.tsx
index 0b99069b41ebbaeab703ce5cfca6bb04f72e02ca..ba5f75489b2d5aee969d0adcbab315c0cd86000f 100644
--- a/pages/fdo/show/[prefix]/sandbox.tsx
+++ b/pages/fdo/show/[prefix]/sandbox.tsx
@@ -1,29 +1,31 @@
import React from 'react'
-import { ErrorComponent } from '../../../../src/components/ErrorComponent';
-import { GetServerSideProps } from 'next';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import { useShow, useTranslate, useParsed, useCustom, useApiUrl } from '@refinedev/core';
-import { Show } from '@refinedev/mui';
-import { CardContent, Typography } from '@mui/material';
-import CircularProgress from '@mui/material/CircularProgress';
-import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import Chip from '@mui/material/Chip';
-import Link from '@mui/material/Link';
-import StorageIcon from '@mui/icons-material/Storage';
-import Paper from '@mui/material/Paper';
-import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
-import Divider from '@mui/material/Divider';
-import MenuList from '@mui/material/MenuList';
-import MenuItem from '@mui/material/MenuItem';
-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 } from '@mui/material/styles';
-import Details from '../../../../src/components/fdos/details';
-
+import { ErrorComponent } from '../../../../src/components/ErrorComponent'
+import { GetServerSideProps } from 'next'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { useShow, useTranslate, useParsed, useCustom, useApiUrl } from '@refinedev/core'
+import { Show } from '@refinedev/mui'
+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 Box from '@mui/material/Box'
+import Stack from '@mui/material/Stack'
+import Chip from '@mui/material/Chip'
+import Link from '@mui/material/Link'
+import StorageIcon from '@mui/icons-material/Storage'
+import Paper from '@mui/material/Paper'
+import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked'
+import Divider from '@mui/material/Divider'
+import MenuList from '@mui/material/MenuList'
+import MenuItem from '@mui/material/MenuItem'
+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'
const resolvePid = (pid: string) => `https://hdl.handle.net/${pid}`
@@ -56,9 +58,9 @@ const ShowFDO = () => {
textAlign: 'center',
color: theme.palette.text.secondary,
...theme.applyStyles('dark', {
- backgroundColor: '#1A2027',
- }),
- }));
+ backgroundColor: '#1A2027'
+ })
+ }))
return (
<Show
@@ -68,92 +70,105 @@ const ShowFDO = () => {
{ isLoading && <Box sx={{ textAlign: 'center' }}><CircularProgress/></Box>}
<div>
- <Stack
+ <Stack
direction="row"
divider={<Divider orientation="vertical" flexItem />}
spacing={2}
- >
- <Item>
- <MenuList>
- <MenuItem>
- <ListItemIcon>
- <RadioButtonUncheckedIcon/>
- </ListItemIcon>
- <ListItemText>
- <Link href={`${handleUrl}?noredirect`}>Handle Record</Link>
- </ListItemText>
- </MenuItem>
- <MenuItem>
- <ListItemIcon>
- <StorageIcon/>
- </ListItemIcon>
- <ListItemText>
- <Link href={handleUrl}>To Repository</Link>
- </ListItemText>
- </MenuItem>
- { data?.data?.isFdo && (<>
- <Divider />
- <MenuItem>
- <ListItemIcon>
- { dataPid
- ? <VerifiedIcon color="success"/>
- : <ReportIcon color="error"/>
- }
- </ListItemIcon>
- <ListItemText>
- { metadataPid
- ? <Link href={resolvePid(dataPid)}>Data</Link>
- : 'Data not available.'
- }
- </ListItemText>
- </MenuItem>
- <MenuItem>
- <ListItemIcon>
- { metadataPid
- ? <VerifiedIcon color="success"/>
- : <ReportIcon color="error"/>
- }
- </ListItemIcon>
- <ListItemText>
- { metadataPid
- ? <Link href={resolvePid(metadataPid)}>Metadata</Link>
- : 'Metadata not available.'
- }
- </ListItemText>
- </MenuItem>
- <MenuItem>
- <ListItemIcon>
- { profilePid
- ? <VerifiedIcon color="success"/>
- : <ReportIcon color="error"/>
- }
- </ListItemIcon>
- <ListItemText>
- { profilePid
- ? <Link href={resolvePid(profilePid)}>Profile</Link>
- : 'Profile not available.'
+ >
+
+ <ThemeProvider
+ theme={{
+ palette: {
+ primary: {
+ main: '#ffffff',
+ dark: '#ffffff'
+ }
}
- </ListItemText>
- </MenuItem>
- </>)}
- </MenuList>
-
- </Item>
- <Item>
- <h2>FDO Name</h2>
- <Details/>
- </Item>
- <Item sx={{width: '30%' }}>
- <h3>Description</h3><br/>
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
- </Item>
+ }}
+ >
+ </ThemeProvider>
+
+ <Item>
+ <MenuList>
+ <MenuItem>
+ <ListItemIcon>
+ <RadioButtonUncheckedIcon/>
+ </ListItemIcon>
+ <ListItemText>
+ <Link href={`${handleUrl}?noredirect`}>Handle Record</Link>
+ </ListItemText>
+ </MenuItem>
+ <MenuItem>
+ <ListItemIcon>
+ <StorageIcon/>
+ </ListItemIcon>
+ <ListItemText>
+ <Link href={handleUrl}>To Repository</Link>
+ </ListItemText>
+ </MenuItem>
+ { data?.data?.isFdo && (<>
+ <Divider />
+ <MenuItem>
+ <ListItemIcon>
+ { dataPid
+ ? <VerifiedIcon color="success"/>
+ : <ReportIcon color="error"/>
+ }
+ </ListItemIcon>
+ <ListItemText>
+ { metadataPid
+ ? <Link href={resolvePid(dataPid)}>Data</Link>
+ : 'Data not available.'
+ }
+ </ListItemText>
+ </MenuItem>
+ <MenuItem>
+ <ListItemIcon>
+ { metadataPid
+ ? <VerifiedIcon color="success"/>
+ : <ReportIcon color="error"/>
+ }
+ </ListItemIcon>
+ <ListItemText>
+ { metadataPid
+ ? <Link href={resolvePid(metadataPid)}>Metadata</Link>
+ : 'Metadata not available.'
+ }
+ </ListItemText>
+ </MenuItem>
+ <MenuItem>
+ <ListItemIcon>
+ { profilePid
+ ? <VerifiedIcon color="success"/>
+ : <ReportIcon color="error"/>
+ }
+ </ListItemIcon>
+ <ListItemText>
+ { profilePid
+ ? <Link href={resolvePid(profilePid)}>Profile</Link>
+ : 'Profile not available.'
+ }
+ </ListItemText>
+ </MenuItem>
+ </>)}
+ </MenuList>
+ </Item>
+
+ <Item>
+ <Stack direction="row" spacing={2}>
+ <Avatar sx={{ bgcolor: green[500] }} variant="rounded">
+ <AssignmentIcon />
+ </Avatar>
+ <h2>FDO Name</h2>
+ </Stack>
+ <Details/>
+ </Item>
+
</Stack>
- </div>
- <br/>
+ </div><br/><br/>
<Table/>
-
- </Show>
+ </Show>
)
}
diff --git a/src/components/fdos/details.tsx b/src/components/fdos/details.tsx
index 79832b442c0ef44ef6a4429e309139bbb8cc0cd0..b0295a1855b0465d581fc6a09e85ca7f12d80d49 100644
--- a/src/components/fdos/details.tsx
+++ b/src/components/fdos/details.tsx
@@ -1,121 +1,76 @@
-import * as React from 'react';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import Divider from '@mui/material/Divider';
-import ListItemText from '@mui/material/ListItemText';
-import ListItemAvatar from '@mui/material/ListItemAvatar';
-import Avatar from '@mui/material/Avatar';
-import Typography from '@mui/material/Typography';
+import * as React from 'react'
+import { styled } from '@mui/material/styles'
+import Table from '@mui/material/Table'
+import TableBody from '@mui/material/TableBody'
+import TableCell, { tableCellClasses } from '@mui/material/TableCell'
+import TableContainer from '@mui/material/TableContainer'
+import TableHead from '@mui/material/TableHead'
+import TableRow from '@mui/material/TableRow'
+import Paper from '@mui/material/Paper'
-export default function AlignItemsList() {
+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+ [`&.${tableCellClasses.head}`]: {
+ backgroundColor: theme.palette.common.black,
+ color: theme.palette.common.white
+ },
+ [`&.${tableCellClasses.body}`]: {
+ fontSize: 16,
+ backgroundColor: theme.palette.common.white
+
+ }
+}))
+
+const StyledTableRow = styled(TableRow)(({ theme }) => ({
+ '&:nth-of-type(odd)': {
+ backgroundColor: theme.palette.action.hover
+ },
+ // hide last border
+ '&:last-child td, &:last-child th': {
+ border: 0
+ }
+}))
+
+function createData (
+ info: string,
+ category: string,
+ logo: string
+
+) {
+ return { info, category, logo }
+}
+
+const rows = [
+ 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')
+]
+
+export default function CustomizedTables () {
return (
-
- <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
- <ListItem alignItems="flex-start">
- <ListItemAvatar>
- <Avatar alt="LinkAhead Logo" src="/linkahead_icon_256.png" />
- </ListItemAvatar>
- <ListItemText
- primary="Repository: LinkAhead XX"
- secondary={
- <React.Fragment>
- <Typography
- component="span"
- variant="body2"
- sx={{ color: 'text.primary', display: 'inline' }}
- >
- Further Information:
- </Typography>
- {"Lorem ipsum dolor sit amet."}
- </React.Fragment>
- }
- />
- </ListItem>
- <Divider variant="inset" component="li" />
- <ListItem alignItems="flex-start">
-
- <ListItemText
- primary="Dataspace: RWTH"
- secondary={
- <React.Fragment>
- <Typography
- component="span"
- variant="body2"
- sx={{ color: 'text.primary', display: 'inline' }}
- >
- Further Information:
- </Typography>
- {"Lorem ipsum dolor sit amet."}
- </React.Fragment>
- }
- />
- <ListItemAvatar>
- <Avatar alt="Text" src="" />
- </ListItemAvatar>
- </ListItem>
- <Divider variant="inset" component="li" />
- <ListItem alignItems="flex-start">
- <ListItemAvatar>
- <Avatar alt="Text" src="" />
- </ListItemAvatar>
- <ListItemText
- primary="Technology: EDC"
- secondary={
- <React.Fragment>
- <Typography
- component="span"
- variant="body2"
- sx={{ color: 'text.primary', display: 'inline' }}
- >
- Further Information:
- </Typography>
- {"Lorem ipsum dolor sit amet."}
- </React.Fragment>
- }
- />
- </ListItem>
- <Divider variant="inset" component="li" />
- <ListItem alignItems="flex-start">
- <ListItemAvatar>
- <Avatar alt="Text" src="" />
- </ListItemAvatar>
- <ListItemText
- primary="Type: CETTS"
- secondary={
- <React.Fragment>
- <Typography
- component="span"
- variant="body2"
- sx={{ color: 'text.primary', display: 'inline' }}
- >
- Further Information:
- </Typography>
- {"Lorem ipsum dolor sit amet."}
- </React.Fragment>
- }
- />
- </ListItem>
- <Divider variant="inset" component="li" />
- <ListItem alignItems="flex-start">
- <ListItemAvatar>
- <Avatar alt="Text" src="" />
- </ListItemAvatar>
- <ListItemText
- primary="Display Name: "
- secondary={
- <React.Fragment>
- <Typography
- component="span"
- variant="body2"
- sx={{ color: 'text.primary', display: 'inline' }}
- >
- Further Information:
- </Typography>
- {"Lorem ipsum dolor sit amet."}
- </React.Fragment>
- }
- />
- </ListItem>
- </List>
- );
-}
\ No newline at end of file
+ <TableContainer component={Paper}>
+ <Table sx={{ minWidth: 700 }} aria-label="customized table">
+ <TableHead>
+ {/* <TableRow>
+ <StyledTableCell>Info1 </StyledTableCell>
+ <StyledTableCell align="right">Info2</StyledTableCell>
+ <StyledTableCell align="right">Info3</StyledTableCell>
+ </TableRow> */}
+ </TableHead>
+ <TableBody>
+ {rows.map((row) => (
+ <StyledTableRow key={row.info}>
+ <StyledTableCell component="th" scope="row">
+ {row.info}
+ </StyledTableCell>
+ <StyledTableCell align="right">{row.category}</StyledTableCell>
+ <StyledTableCell align="right">{row.logo}</StyledTableCell>
+ </StyledTableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </TableContainer>
+ )
+}
diff --git a/src/components/fdos/table.tsx b/src/components/fdos/table.tsx
index 147fb9faa6d914ae12beed35c4386ad1dff5204b..3c53e589e663f11fef7db14c25ea134d09ec1bd7 100644
--- a/src/components/fdos/table.tsx
+++ b/src/components/fdos/table.tsx
@@ -1,22 +1,22 @@
-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';
+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(
+function createData (
name: string,
type: string,
- dataspace: string,
+ dataspace: string
) {
return {
name,
@@ -26,20 +26,20 @@ function createData(
{
update: '2020-01-05',
customerId: '11091700',
- amount: 'ASS',
+ amount: 'ASS'
},
{
update: '2020-01-02',
customerId: '23987003',
- amount: 'LinkAhead',
- },
- ],
- };
+ amount: 'LinkAhead'
+ }
+ ]
+ }
}
-function Row(props: { row: ReturnType<typeof createData> }) {
- const { row } = props;
- const [open, setOpen] = React.useState(false);
+function Row (props: { row: ReturnType<typeof createData> }) {
+ const { row } = props
+ const [open, setOpen] = React.useState(false)
return (
<React.Fragment>
@@ -48,7 +48,7 @@ function Row(props: { row: ReturnType<typeof createData> }) {
<IconButton
aria-label="expand row"
size="small"
- onClick={() => setOpen(!open)}
+ onClick={() => { setOpen(!open) }}
>
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
@@ -95,16 +95,16 @@ function Row(props: { row: ReturnType<typeof createData> }) {
</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() {
+ createData('CETTS-XD3a-2024-03-11', '356', '16.0')
+]
+export default function CollapsibleTable () {
return (
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
@@ -124,5 +124,5 @@ export default function CollapsibleTable() {
</TableBody>
</Table>
</TableContainer>
- );
-}
\ No newline at end of file
+ )
+}