Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F68776694
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, Jun 28, 21:32
Size
7 KB
Mime Type
text/html
Expires
Sun, Jun 30, 21:32 (2 d)
Engine
blob
Format
Raw Data
Handle
18631597
Attached To
rOACCT Open Access Compliance Check Tool (OACCT)
TermCard.js
View Options
import React, {useContext} from "react"
import { Card, Accordion } 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 CastForEducationIcon from '@material-ui/icons/CastForEducation';
import PaymentIcon from '@material-ui/icons/Payment';
import DateRangeIcon from '@material-ui/icons/DateRange';
import InfoIcon from '@material-ui/icons/Info';
import LocationCityIcon from '@material-ui/icons/LocationCity';
import DescriptionIcon from '@material-ui/icons/Description';
import Grid from '@material-ui/core/Grid';
import {Context} from "../Context"
const useStyles = makeStyles({
card: {
width: '100%',
marginTop: "1rem",
},
root: {
flexGrow: 1,
},
chip: {
margin: 0.5,
},
})
function TermCard({term}) {
console.log(term)
const classes = useStyles();
const { institName, journalName } = useContext(Context)
// const termJournalName = term.journals.map(journal=>(
// <a> {journal.name}</a>
// ))
// const publisherName = term.publishers.map(publisher=>(
// <a>{publisher.name}</a>
// ))
// const publisherDetail = term.publishers.map(publisher=>(
// <div key={publisher.id}>
// <h4>Publisher Details</h4>
// {publisher.name}
// <LocationCityIcon /> {publisher.city}
// <br />
// Since: {publisher.starting_year}
// </div>
// ))
// const journalDetail = term.journals.map(i=>(
// <div key={i.id}>
// <h4>Journal Details</h4>
// {i.name}
// <br />
// {i.name_short_iso_4}
// <br />
// <a href={i.website} target="_blank" rel="noopener noreferrer">{i.website}</a>
// </div>
// ))
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>
))
const licence = term.licence.map(li=>(
<Chip
size="small"
avatar={ <CastForEducationIcon />}
label={li.name_or_abbrev}
// 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]}
size="small"
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]}
size="small"
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]}
size="small"
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={ <PaymentIcon />}
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 (
<Accordion defaultActiveKey="1" key={term.id}>
<Card className={classes.card} >
<Accordion.Toggle className="cardheader" as={Card.Header} eventKey="0">
{institName ?
<h3>Agreement between {institName} <Card.Link href={term.source} target="_blank" rel="noopener noreferrer"> <InfoIcon style={{ color: "white" }} href={term.source} /></Card.Link></h3>
:
<h3>
<Card.Link href={term.source} target="_blank" rel="noopener noreferrer"> <InfoIcon style={{ color: "white" }} href={term.source} /></Card.Link>
</h3>
}
<div>
{version()}
{cost()}
{licence}
{termArchive}
{embargo}
</div>
</Accordion.Toggle>
<Accordion.Collapse eventKey="0">
<Card.Body >
<Grid item xs={12}>
<Card.Title> <h3>ID: {term.id}</h3>
</Card.Title>
{/* <Card.Subtitle className="mb-2 text-muted">
your subtile here
</Card.Subtitle> */}
</Grid>
<Grid item xs={12}>
{licenceDetail}
</Grid>
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
)
}
export default TermCard
Event Timeline
Log In to Comment