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 { 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>
)
}
......
src/components/fdos/details.tsx
+ 74
− 119
View file @ e40c3cf7
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>
)
}
src/components/fdos/table.tsx
+ 31
− 31
View file @ e40c3cf7
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
)
}
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