From e40c3cf7299b11e2b0069d6beb9b6a8d242910c4 Mon Sep 17 00:00:00 2001
From: Sina Rohde <s.rohde@indiscale.com>
Date: Thu, 19 Sep 2024 12:05:44 +0200
Subject: [PATCH] next steps
---
pages/fdo/show/[prefix]/sandbox.tsx | 229 +++++++++++++++-------------
src/components/fdos/details.tsx | 193 +++++++++--------------
src/components/fdos/table.tsx | 62 ++++----
3 files changed, 227 insertions(+), 257 deletions(-)
diff --git a/pages/fdo/show/[prefix]/sandbox.tsx b/pages/fdo/show/[prefix]/sandbox.tsx
index 0b99069..ba5f754 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 79832b4..b0295a1 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 147fb9f..3c53e58 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
+ )
+}
--
GitLab