Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F71348908
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
Thu, Jul 11, 05:52
Size
6 KB
Mime Type
text/x-java
Expires
Sat, Jul 13, 05:52 (2 d)
Engine
blob
Format
Raw Data
Handle
18940568
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 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 { 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();
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>
</>
))
function cost() {
const price = term[0].cost_factor?.map(i => (
i.amount
))
const price_symbol = term[0].cost_factor?.map(j => (
j.symbol
))
const cost_name = term[0].cost_factor?.map(k => (
k.cost_factor_type.name
))
const id = term[0].cost_factor?.map(k => (
k.cost_factor_type.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 = 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: "#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 = 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 (
<Card key={term.id} className="term-Card"
style={{ textAlign: "left"}}
>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
{term.map( j=> (
j[1] &&
<p>Condition set Title: {j[1]}</p>
))
}
Term ID: {term[0].id}
{term.map( j=> (
j[0] &&
<p>From condition set Id: {j[0]}</p>
))
}
</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}>
{cost()}
{licenceIcon}
{termArchive}
{embargo}
</Grid>
</Grid>
</Container>
</Typography>
</CardContent>
<CardActions>
{term[0].comment ?
<div style={{ textAlign: "left"}}>
<p>
<GrInfo
style={{
padding: "0.05rem"
}}
/>
"{term[0].comment}"
</p>
</div>
:null}
{term[0].source ?
<Button href={term[0].source} target="blank" rel="noopener noreferrer" size="small"><HiLink/> More Information </Button>
:null}
</CardActions>
</Card>
)
}
export default TermCard
Event Timeline
Log In to Comment