Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F62157789
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, May 11, 07:20
Size
7 KB
Mime Type
text/html
Expires
Mon, May 13, 07:20 (1 d, 23 h)
Engine
blob
Format
Raw Data
Handle
17612229
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 =
<Chip
size="small"
avatar={<DateRangeIcon />}
label={"Embargo: " + term.embargo_months + " Month(s)"}
// variant="outlined"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
style={{ background: "#FFFFFF"}}
/>
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} and {termJournalName} ({publisherName}) <Card.Link href={term.source} target="_blank" rel="noopener noreferrer"> <InfoIcon style={{ color: "white" }} href={term.source} /></Card.Link></h3>
:
<h3>
{termJournalName} ({publisherName}) <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}>
{publisherDetail}
</Grid>
<Grid item xs={12}>
{journalDetail}
</Grid>
<Grid item xs={12}>
{licenceDetail}
</Grid>
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
)
}
export default TermCard
Event Timeline
Log In to Comment