Skip to content
Snippets Groups Projects
Commit e40c3cf7 authored by Sina Rohde's avatar Sina Rohde
Browse files

next steps

parent 1eb402fe
No related branches found
No related tags found
2 merge requests!7Revert "MAINT: Ignore venv and package-lock.json",!5F fdo details
Pipeline #55391 passed
Stage: test
Hide whitespace changes
Inline Side-by-side
pages/fdo/show/[prefix]/sandbox.tsx
+ 122
− 107
View file @ e40c3cf7
import React from 'react' import React from 'react'
import { ErrorComponent } from '../../../../src/components/ErrorComponent'; import { ErrorComponent } from '../../../../src/components/ErrorComponent'
import { GetServerSideProps } from 'next'; import { GetServerSideProps } from 'next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { useShow, useTranslate, useParsed, useCustom, useApiUrl } from '@refinedev/core'; import { useShow, useTranslate, useParsed, useCustom, useApiUrl } from '@refinedev/core'
import { Show } from '@refinedev/mui'; import { Show } from '@refinedev/mui'
import { CardContent, Typography } from '@mui/material'; import { Typography } from '@mui/material'
import CircularProgress from '@mui/material/CircularProgress'; import CircularProgress from '@mui/material/CircularProgress'
import Box from '@mui/material/Box'; import AssignmentIcon from '@mui/icons-material/Assignment'
import Stack from '@mui/material/Stack'; import Avatar from '@mui/material/Avatar'
import Chip from '@mui/material/Chip'; import { green } from '@mui/material/colors'
import Link from '@mui/material/Link'; import Box from '@mui/material/Box'
import StorageIcon from '@mui/icons-material/Storage'; import Stack from '@mui/material/Stack'
import Paper from '@mui/material/Paper'; import Chip from '@mui/material/Chip'
import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked'; import Link from '@mui/material/Link'
import Divider from '@mui/material/Divider'; import StorageIcon from '@mui/icons-material/Storage'
import MenuList from '@mui/material/MenuList'; import Paper from '@mui/material/Paper'
import MenuItem from '@mui/material/MenuItem'; import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked'
import ListItemText from '@mui/material/ListItemText'; import Divider from '@mui/material/Divider'
import ListItemIcon from '@mui/material/ListItemIcon'; import MenuList from '@mui/material/MenuList'
import VerifiedIcon from '@mui/icons-material/Verified'; import MenuItem from '@mui/material/MenuItem'
import ReportIcon from '@mui/icons-material/Report'; import ListItemText from '@mui/material/ListItemText'
import Table from '../../../../src/components/fdos/table'; import ListItemIcon from '@mui/material/ListItemIcon'
import { styled } from '@mui/material/styles'; import VerifiedIcon from '@mui/icons-material/Verified'
import Details from '../../../../src/components/fdos/details'; 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}` const resolvePid = (pid: string) => `https://hdl.handle.net/${pid}`
...@@ -56,9 +58,9 @@ const ShowFDO = () => { ...@@ -56,9 +58,9 @@ const ShowFDO = () => {
textAlign: 'center', textAlign: 'center',
color: theme.palette.text.secondary, color: theme.palette.text.secondary,
...theme.applyStyles('dark', { ...theme.applyStyles('dark', {
backgroundColor: '#1A2027', backgroundColor: '#1A2027'
}), })
})); }))
return ( return (
<Show <Show
...@@ -68,92 +70,105 @@ const ShowFDO = () => { ...@@ -68,92 +70,105 @@ const ShowFDO = () => {
{ isLoading && <Box sx={{ textAlign: 'center' }}><CircularProgress/></Box>} { isLoading && <Box sx={{ textAlign: 'center' }}><CircularProgress/></Box>}
<div> <div>
<Stack <Stack
direction="row" direction="row"
divider={<Divider orientation="vertical" flexItem />} divider={<Divider orientation="vertical" flexItem />}
spacing={2} spacing={2}
> >
<Item>
<MenuList> <ThemeProvider
<MenuItem> theme={{
<ListItemIcon> palette: {
<RadioButtonUncheckedIcon/> primary: {
</ListItemIcon> main: '#ffffff',
<ListItemText> dark: '#ffffff'
<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> >
</>)} </ThemeProvider>
</MenuList>
<Item>
</Item> <MenuList>
<Item> <MenuItem>
<h2>FDO Name</h2> <ListItemIcon>
<Details/> <RadioButtonUncheckedIcon/>
</Item> </ListItemIcon>
<Item sx={{width: '30%' }}> <ListItemText>
<h3>Description</h3><br/> <Link href={`${handleUrl}?noredirect`}>Handle Record</Link>
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. </ListItemText>
</Item> </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> </Stack>
</div> </div><br/><br/>
<br/>
<Table/> <Table/>
</Show>
</Show>
) )
} }
......
src/components/fdos/details.tsx
+ 74
− 119
View file @ e40c3cf7
import * as React from 'react'; import * as React from 'react'
import List from '@mui/material/List'; import { styled } from '@mui/material/styles'
import ListItem from '@mui/material/ListItem'; import Table from '@mui/material/Table'
import Divider from '@mui/material/Divider'; import TableBody from '@mui/material/TableBody'
import ListItemText from '@mui/material/ListItemText'; import TableCell, { tableCellClasses } from '@mui/material/TableCell'
import ListItemAvatar from '@mui/material/ListItemAvatar'; import TableContainer from '@mui/material/TableContainer'
import Avatar from '@mui/material/Avatar'; import TableHead from '@mui/material/TableHead'
import Typography from '@mui/material/Typography'; 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 ( return (
<TableContainer component={Paper}>
<List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}> <Table sx={{ minWidth: 700 }} aria-label="customized table">
<ListItem alignItems="flex-start"> <TableHead>
<ListItemAvatar> {/* <TableRow>
<Avatar alt="LinkAhead Logo" src="/linkahead_icon_256.png" /> <StyledTableCell>Info1 </StyledTableCell>
</ListItemAvatar> <StyledTableCell align="right">Info2</StyledTableCell>
<ListItemText <StyledTableCell align="right">Info3</StyledTableCell>
primary="Repository: LinkAhead XX" </TableRow> */}
secondary={ </TableHead>
<React.Fragment> <TableBody>
<Typography {rows.map((row) => (
component="span" <StyledTableRow key={row.info}>
variant="body2" <StyledTableCell component="th" scope="row">
sx={{ color: 'text.primary', display: 'inline' }} {row.info}
> </StyledTableCell>
Further Information: <StyledTableCell align="right">{row.category}</StyledTableCell>
</Typography> <StyledTableCell align="right">{row.logo}</StyledTableCell>
{"Lorem ipsum dolor sit amet."} </StyledTableRow>
</React.Fragment> ))}
} </TableBody>
/> </Table>
</ListItem> </TableContainer>
<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
src/components/fdos/table.tsx
+ 31
− 31
View file @ e40c3cf7
import * as React from 'react'; import * as React from 'react'
import Box from '@mui/material/Box'; import Box from '@mui/material/Box'
import Collapse from '@mui/material/Collapse'; import Collapse from '@mui/material/Collapse'
import IconButton from '@mui/material/IconButton'; import IconButton from '@mui/material/IconButton'
import Table from '@mui/material/Table'; import Table from '@mui/material/Table'
import TableBody from '@mui/material/TableBody'; import TableBody from '@mui/material/TableBody'
import TableCell from '@mui/material/TableCell'; import TableCell from '@mui/material/TableCell'
import TableContainer from '@mui/material/TableContainer'; import TableContainer from '@mui/material/TableContainer'
import TableHead from '@mui/material/TableHead'; import TableHead from '@mui/material/TableHead'
import TableRow from '@mui/material/TableRow'; import TableRow from '@mui/material/TableRow'
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography'
import Paper from '@mui/material/Paper'; import Paper from '@mui/material/Paper'
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'
function createData( function createData (
name: string, name: string,
type: string, type: string,
dataspace: string, dataspace: string
) { ) {
return { return {
name, name,
...@@ -26,20 +26,20 @@ function createData( ...@@ -26,20 +26,20 @@ function createData(
{ {
update: '2020-01-05', update: '2020-01-05',
customerId: '11091700', customerId: '11091700',
amount: 'ASS', amount: 'ASS'
}, },
{ {
update: '2020-01-02', update: '2020-01-02',
customerId: '23987003', customerId: '23987003',
amount: 'LinkAhead', amount: 'LinkAhead'
}, }
], ]
}; }
} }
function Row(props: { row: ReturnType<typeof createData> }) { function Row (props: { row: ReturnType<typeof createData> }) {
const { row } = props; const { row } = props
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false)
return ( return (
<React.Fragment> <React.Fragment>
...@@ -48,7 +48,7 @@ function Row(props: { row: ReturnType<typeof createData> }) { ...@@ -48,7 +48,7 @@ function Row(props: { row: ReturnType<typeof createData> }) {
<IconButton <IconButton
aria-label="expand row" aria-label="expand row"
size="small" size="small"
onClick={() => setOpen(!open)} onClick={() => { setOpen(!open) }}
> >
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />} {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton> </IconButton>
...@@ -95,16 +95,16 @@ function Row(props: { row: ReturnType<typeof createData> }) { ...@@ -95,16 +95,16 @@ function Row(props: { row: ReturnType<typeof createData> }) {
</TableCell> </TableCell>
</TableRow> </TableRow>
</React.Fragment> </React.Fragment>
); )
} }
const rows = [ const rows = [
createData('CETTS-D2-2024-07-08', '159', '6.0'), createData('CETTS-D2-2024-07-08', '159', '6.0'),
createData('CETTS-D2-2024-06-24', '237', '9.0'), createData('CETTS-D2-2024-06-24', '237', '9.0'),
createData('CETTS-XD2-2024-06-03', '262', '16.0'), createData('CETTS-XD2-2024-06-03', '262', '16.0'),
createData('CETTS-L2a-2024-05-08', '305', '3.7'), createData('CETTS-L2a-2024-05-08', '305', '3.7'),
createData('CETTS-XD3a-2024-03-11', '356', '16.0'), createData('CETTS-XD3a-2024-03-11', '356', '16.0')
]; ]
export default function CollapsibleTable() { export default function CollapsibleTable () {
return ( return (
<TableContainer component={Paper}> <TableContainer component={Paper}>
<Table aria-label="collapsible table"> <Table aria-label="collapsible table">
...@@ -124,5 +124,5 @@ export default function CollapsibleTable() { ...@@ -124,5 +124,5 @@ export default function CollapsibleTable() {
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
); )
} }
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment