Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F85190384
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, 10:01
Size
7 KB
Mime Type
text/html
Expires
Sun, Sep 29, 10:01 (2 d)
Engine
blob
Format
Raw Data
Handle
21140124
Attached To
rOACCT Open Access Compliance Check Tool (OACCT)
TermCard.js
View Options
import React, {useContext} from "react"
import { Card } from 'react-bootstrap';
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 LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import AttachMoneyIcon from '@material-ui/icons/AttachMoney';
import DateRangeIcon from '@material-ui/icons/DateRange';
import InfoIcon from '@material-ui/icons/Info';
import DescriptionIcon from '@material-ui/icons/Description';
import LockOpenIcon from '@material-ui/icons/LockOpen';
import Grid from '@material-ui/core/Grid';
import {Context} from "../Context"
import "./termcard.css"
const useStyles = makeStyles((theme) =>({
card: {
width: '100%',
marginTop: "1rem",
},
root: {
flexGrow: 1,
},
chip: {
margin: 0.5,
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular,
},
}))
function TermCard({term}) {
const classes = useStyles();
const { institName, journalName } = useContext(Context)
const licenceDetail = term.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 = term.licence.map(i=>(
i.name_or_abbrev
))
if (lockstatus[0] === "CC-BY") {
return (
<Chip
size="small"
avatar={ <LockOpenIcon />}
label={lockstatus}
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
className={classes.chip}
style={{ background: "#FFFFFF"}}
/>
)
}
else {
return(
<Chip
size="small"
avatar={ <LockOutlinedIcon />}
label={lockstatus}
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
className={classes.chip}
style={{ background: "#FFFFFF"}}
/>
)
}
}
function version() {
const vers = term.version.map(i => (
i.description
))
const id = term.version.map(i => (
i.id
))
// console.log(vers[0])
if (vers[0] === "Submitted") {
return (
<Chip
key={id[0]}
avatar={ <DescriptionIcon />}
label="Submitted Version"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
className={classes.chip}
style={{ background: "#FFFFFF"}}
/>
)
}
else if (vers[0] === "Accepted") {
return (
<Chip
key={id[0]}
avatar={ <DescriptionIcon />}
label="Accepted Version"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
className={classes.chip}
style={{ background: "#FFFFFF"}}
/>
)
}
else if (vers[0] === "Published") {
return (
<Chip
key={id[0]}
avatar={ <DescriptionIcon />}
label="Published Version"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
className={classes.chip}
style={{ background: "#FFFFFF"}}
/>
)
}
}
function cost() {
const price = term.cost_factor.map(i => (
i.amount
))
const price_symbol = term.cost_factor.map(j => (
j.symbol
))
const cost_name = term.cost_factor.map(k => (
k.cost_factor_type[0].name
))
const id = term.cost_factor.map(k => (
k.cost_factor_type[0].id
))
return (
<Chip
key={id[0]}
size="small"
avatar={ <AttachMoneyIcon />}
label={cost_name[0] + " : " + price[0] + " " + price_symbol}
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
className={classes.chip}
style={{ background: "#FFFFFF"}}
/>
)
}
const termArchive = term.ir_archiving ? (
<Chip
size="small"
avatar={<DoneIcon />}
label={"IR Archiving"}
// variant="outlined"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
style={{ background: "#FFFFFF"}}
/>
): (
<Chip
size="small"
avatar={<HighlightOffIcon />}
label="IR Archiving"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
style={{ background: "#f50057"}}
/>
)
const embargo = term.ir_archiving ? (
<Chip
size="small"
avatar={<DateRangeIcon />}
label={"Embargo: " + term.embargo_months + " Month(s)"}
// variant="outlined"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
style={{ background: "#FFFFFF"}}
/>
):
(<a />)
return (
<div className={classes.root}>
<Accordion key={term.id}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography className={classes.heading}>
{version()} |
{cost()}
{licence()}
{termArchive}
{embargo}
| {term.comment}
<Card.Link href={term.source} target="_blank" rel="noopener noreferrer"> <InfoIcon style={{ color: "white" }} href={term.source} /></Card.Link>
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
{institName ?
<h3>Agreement with {institName}</h3>
:
<h3>
{journalName}
</h3>
}
{licenceDetail}
</Typography>
</AccordionDetails>
</Accordion>
</div>
)
}
export default TermCard
Event Timeline
Log In to Comment