Page MenuHomec4science

TermCard.js
No OneTemporary

File Metadata

Created
Sun, May 12, 02:04

TermCard.js

import React from "react"
import { makeStyles } from '@material-ui/core/styles';
import Chip from '@material-ui/core/Chip';
import DoneIcon from '@material-ui/icons/Done';
import HighlightOffIcon from '@material-ui/icons/HighlightOff';
import Accordion from '@material-ui/core/Accordion';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import DateRangeIcon from '@material-ui/icons/DateRange';
import InfoIcon from '@material-ui/icons/Info';
import DescriptionIcon from '@material-ui/icons/Description';
import Grid from '@material-ui/core/Grid';
import { FaCoins } from 'react-icons/fa';
import { RiFilePaper2Line } from 'react-icons/ri';
import "./termcard.css"
const useStyles = makeStyles((theme) =>({
card: {
width: '100%',
marginTop: "1rem",
textAlign:'left'
},
root: {
flexGrow: 1,
textAlign:'left',
},
chip: {
margin: 0.5,
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular,
},
}))
function TermCard({term}) {
const classes = useStyles();
console.log(term)
const conditionSetId = term.map(i =>(
i.map( j=> (
j[0]
))
))
const termObject = term.map( j =>(
j[0]
))
const licenceDetail =
console.log(termObject)
termObject[0].licence?.map(i=>(
<div key={i.id}>
<h4>Licence Details</h4>
{i.name}
{i.name_or_abbrev}
<br />
<a href={i.website} target="_blank" rel="noopener noreferrer">{i.website}</a>
</div>
))
function licence (){
const lockstatus =
termObject[0].licence?.map(i=>(
i.name_or_abbrev
))
if (lockstatus[0] === "CC-BY") {
return (
<Chip
size="small"
avatar={ <RiFilePaper2Line />}
label={lockstatus}
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
className={classes.chip}
style={{ background: "#FFFFFF"}}
title="This is more information"
/>
)
}
else {
return(
<Chip
size="small"
avatar={ <RiFilePaper2Line />}
label={lockstatus}
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
className={classes.chip}
style={{ background: "#FFFFFF"}}
title="This is more information"
/>
)
}
}
function cost() {
const price = termObject[0].cost_factor?.map(i => (
i.amount
))
const price_symbol = termObject[0].cost_factor?.map(j => (
j.symbol
))
const cost_name = termObject[0].cost_factor?.map(k => (
k.cost_factor_type[0].name
))
const id = termObject[0].cost_factor?.map(k => (
k.cost_factor_type[0].id
))
return (
<Chip
key={id[0]}
size="small"
avatar={ <FaCoins />}
label={cost_name[0] + " : " + price[0] + " " + price_symbol}
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
className={classes.chip}
style={{ background: "#FFFFFF"}}
title="This is more information"
/>
)
}
const termArchive = termObject[0].ir_archiving && termObject.ir_archiving ? (
<Chip
size="small"
avatar={<DoneIcon />}
label={"IR Archiving"}
// variant="outlined"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
style={{ background: "#FFFFFF"}}
title="This is more information"
/>
): (
<Chip
size="small"
avatar={<HighlightOffIcon />}
label="IR Archiving"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
style={{ background: "#f50057"}}
title="This is more information"
/>
)
const embargo = termObject[0].ir_archiving && termObject.ir_archiving ? (
<Chip
size="small"
avatar={<DateRangeIcon />}
label={"Embargo: " + termObject.embargo_months + " Month(s)"}
// variant="outlined"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
style={{ background: "#FFFFFF"}}
title="This is more information"
/>
):
(<a />)
return (
<div className={classes.root}>
{ term.map(i =>(
<Accordion key={term.id}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography className={classes.heading}>
{cost()}
{licence()}
{termArchive}
{embargo}
term ID: {i[0].id}
{i.map( j=> (
j &&
<p>Condition Set Id: {j}</p>
))
}
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
{licenceDetail}
{termObject[0].comment}
{termObject[0].source}
</Typography>
</AccordionDetails>
</Accordion>
))}
</div>
)
}
export default TermCard

Event Timeline