Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F66100036
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
Sat, Jun 8, 06:53
Size
5 KB
Mime Type
text/html
Expires
Mon, Jun 10, 06:53 (2 d)
Engine
blob
Format
Raw Data
Handle
18172125
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";
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();
term[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 =
term[0].licence?.map(i=>(
i.name_or_abbrev
))
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 = 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 (
<Accordion key={term.id} className="term-Card">
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography className={classes.heading}
style={{ textAlign: "left"}}
>
Term ID: {term[0].id}
{term.map( j=> (
j[0] &&
<p>From condition set Id: {j[0]}</p>
))
}
{cost()}
{licence()}
{termArchive}
{embargo}
</Typography>
</AccordionSummary>
<AccordionDetails >
<Typography>
{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 Informations </Button>
:null}
</Typography>
</AccordionDetails>
</Accordion>
)
}
export default TermCard
Event Timeline
Log In to Comment