Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F62341849
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
Sun, May 12, 13:14
Size
6 KB
Mime Type
text/html
Expires
Tue, May 14, 13:14 (1 d, 23 h)
Engine
blob
Format
Raw Data
Handle
17635399
Attached To
rOACCT Open Access Compliance Check Tool (OACCT)
TermCard.js
View Options
import React 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 Grid from '@material-ui/core/Grid';
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 journalName = 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={ <HighlightOffIcon />}
label="Submitted Version"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
className={classes.chip}
style={{ background: "#f50057"}}
/>
)
}
else if (vers[0] === "Accepted") {
return (
<Chip
key={id[0]}
size="small"
avatar={ <HighlightOffIcon />}
label="Accepted Version"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
className={classes.chip}
style={{ background: "#f50057"}}
/>
)
}
else if (vers[0] === "Published") {
return (
<Chip
key={id[0]}
size="small"
avatar={ <DoneIcon />}
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={<DateRangeIcon />}
label={"IR Archiving" + " : " + term.embargo_months + " Month(s)"}
// 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"}}
/>
)
return (
<Accordion defaultActiveKey="1" key={term.id}>
<Card className={classes.card} >
<Accordion.Toggle className="cardheader" as={Card.Header} eventKey="0">
{term.comment} and {journalName} ({publisherName}) <Card.Link href={term.source} target="_blank" rel="noopener noreferrer"> <InfoIcon style={{ color: "white" }} href={term.source} /></Card.Link>
<div>
{version()}
{cost()}
{licence}
{termArchive}
</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