Homec4science
Diffusion Open Access Compliance Check Tool (OACCT) (issn4frontend) Browse

rOACCT/assets/src/components/TermCard.js
e7e69b89fcbaissn4frontend

Last Change
Raw File

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
c4science · Help