Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F85137492
TermCard.js
No One
Temporary
Actions
Download File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Subscribers
None
File Metadata
Details
File Info
Storage
Attached
Created
Fri, Sep 27, 01:03
Size
5 KB
Mime Type
text/x-java
Expires
Sun, Sep 29, 01:03 (1 d, 19 h)
Engine
blob
Format
Raw Data
Handle
21133626
Attached To
rOACCT Open Access Compliance Check Tool (OACCT)
TermCard.js
View Options
import React from "react"
import { makeStyles } from '@material-ui/core/styles';
import "./termcard.css"
import Chip from '@material-ui/core/Chip';
import DoneIcon from '@material-ui/icons/Done';
import HighlightOffIcon from '@material-ui/icons/HighlightOff';
import Typography from '@material-ui/core/Typography';
import DateRangeIcon from '@material-ui/icons/DateRange';
import { FaCoins } from 'react-icons/fa';
import { RiFilePaper2Line } from 'react-icons/ri';
import Button from '@material-ui/core/Button';
import { HiLink } from "react-icons/hi";
import { GrInfo } from "react-icons/gr";
import Container from '@material-ui/core/Container'
import Grid from '@material-ui/core/Grid'
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
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(`cost factor data: ${term[0].cost_factor[0].cost_factor_type.name}`)
const licenceIcon =
term[0].licence?.map(i=>(
<>
<Button href={i.website} target="blank" rel="noopener noreferrer" size="small">
<Chip
size="small"
avatar={ <RiFilePaper2Line />}
label={i.name_or_abbrev}
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
className={classes.chip}
style={{ background: "#FFFFFF", textAlign: "left"}}
title="Licence Information"
/>
</Button>
</>
))
const cost = term[0].cost_factor?.map( i => (
<>
<Chip
key={i.cost_factor_type.id}
size="small"
avatar={ <FaCoins />}
label={i.cost_factor_type.name + " : " + i.amount + " " + i.symbol}
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
className={classes.chip}
style={{ background: "#FFFFFF"}}
title={i.comment}
/>
</>
))
const termArchive = term[0].ir_archiving && term[0].ir_archiving ? (
<Chip
size="small"
avatar={<DoneIcon />}
label={"IR Archiving"}
// variant="outlined"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
style={{ background: "#DAF7A6"}}
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 = term[0].ir_archiving && term[0].ir_archiving ? (
<Chip
size="small"
avatar={<DateRangeIcon />}
label={"Embargo: " + term[0].embargo_months + " Month(s)"}
// variant="outlined"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
style={{ background: "#FFFFFF"}}
title="This is more information"
/>
):
(<a />)
return (
<div>
<Card key={term.id} className="term-Card"
style={{ textAlign: "left"}}
>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
{term.map( j=> (
j[0] &&
<>
<p>Condition set N° {j[0]}: {j[1]}</p>
<p><small>Condition type: {j[2].condition_issuer}</small></p>
</>
))
}
Term ID: {term[0].id}
</Typography>
<Typography variant="h5" component="h2">
</Typography>
<Typography className={classes.pos} color="textSecondary">
</Typography>
<Typography variant="body2" component="p">
<Container maxWidth="xs" >
<Grid container>
<Grid item xs={6} sm={2}>
{/* filter Unknow cost factor type to not display */}
{cost}
{licenceIcon}
{termArchive}
{embargo}
</Grid>
</Grid>
</Container>
<div
style={{ marginTop: "1rem"}}
>
{term[0].comment ?
<div style={{ textAlign: "left"}}>
<p>
<small>
<GrInfo
style={{
padding: "0.05rem"
}}
/>
{term[0].comment}
</small>
</p>
</div>
:null}
</div>
</Typography>
</CardContent>
<CardActions>
{term[0].source ?
<Button href={term[0].source} target="blank" rel="noopener noreferrer" size="small"><HiLink/> More Information </Button>
:null}
</CardActions>
</Card>
</div>
)
}
export default TermCard
Event Timeline
Log In to Comment