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

rOACCT/assets/src/components/DetailCard.js
14fe3912bb75issn4frontend

Last Change
Raw File

DetailCard.js
View Options

import React, {useContext} from "react"
import { makeStyles } from '@material-ui/core/styles';
import "./detailscard.css"
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import { HiLink } from "react-icons/hi";
import DoneIcon from '@material-ui/icons/Done';
import WarningIcon from '@material-ui/icons/Warning';
import "./termcard.css"
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
display: 'grid',
},
flexGrow: 1,
},
formControl: {
margin: theme.spacing(1),
width: 200,
},
selectEmpty: {
marginTop: theme.spacing(1),
},
chip: {
margin: 0.5,
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular,
},
}));
function DetailsCard({details}) {
const classes = useStyles();
if (details !== 'null') {
console.log(details)
return (
<div>
{details.end_year === null ?
<Card className="detail-Card">
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
<h4>{details.name}</h4>
{details.issn && details.issn.map(item => {
return (
item.issn_type === 1 ?
<p>ISSN Print :{item.issn} </p>
: item.issn_type === 2 ?
<p>ISSN Electronic: {item.issn}</p>
:<p>ISSN Other: {item.issn}</p>
)
})}
{details.publisher && details.publisher.map(item => {
return <div key={item.id}> Publisher: {item.name}</div>
})}
</Typography>
<Typography variant="h5" component="h2">
</Typography>
<Typography className={classes.pos} color="textSecondary">
{details.country && details.country.map(item => {
return <div key={item.id}>{item.name}</div>;
})}
{details.starting_year &&
<div>
Since {details.starting_year}
</div>
}
</Typography>
<Typography variant="body2" component="p"
style={{ textAlign: "left"}}
>
{details.oa_status ?
<div>
{details.oa_status.status !== "UNKNOWN" ?
<div>
<p> Open Acces Status: {details.oa_status.status} <br></br>
<small>{details.oa_status.description}</small>
</p>
</div>
:null}
</div>
:null}
</Typography>
<Typography variant="body2" component="p"
style={{ textAlign: "left"}}
>
{details.doaj_seal &&
<div >
<Button href="https://doaj.org/apply/seal/" target="blank" rel="noopener noreferrer" size="small"><DoneIcon/> DOAJ seal</Button>
</div>
}
{details.doaj_status &&
<div >
<Button
href="https://doaj.org/search/journals?source=%7B%22query%22%3A%7B%22match_all%22%3A%7B%7D%7D%2C%22size%22%3A50%2C%22sort%22%3A%5B%7B%22created_date%22%3A%7B%22order%22%3A%22desc%22%7D%7D%5D%7D"
target="blank" rel="noopener noreferrer" size="small"><DoneIcon/>Listed on DOAJ</Button>
</div>
}
{details.lockss &&
<div >
<Button href="https://www.lockss.org/" target="blank" rel="noopener noreferrer" size="small"><DoneIcon/>Preserved with LOCKSS</Button>
</div>
}
{details.portico &&
<div >
<Button href="https://www.portico.org/" target="blank" rel="noopener noreferrer" size="small"><DoneIcon/>Preserved with Portico</Button>
</div>
}
{details.nlch &&
<div >
<Button href="https://consortium.ch/nationallizenzen/?lang=en" target="blank" rel="noopener noreferrer" size="small"><DoneIcon/>Swiss National licences</Button>
</div>
}
{details.qoam_av_score &&
<div >
<Button href="https://www.qoam.eu/" target="blank" rel="noopener noreferrer" size="small"><HiLink/>QOAM score : {details.qoam_av_score}</Button>
</div>
}
</Typography>
</CardContent>
<CardActions>
{details.website ?
<Button href={details.website} target="blank" rel="noopener noreferrer" size="small"><HiLink/> Website </Button>
:null}
{details.oa_options ?
<Button href={details.oa_options} target="blank" rel="noopener noreferrer" size="small"><HiLink/>Open Access Infos</Button>
:null}
</CardActions>
</Card>
// render condition for inactive journal
:details.end_year &&
<Card className="detail-Card"
style={{ backgroundColor: "lightGrey"}}>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
<WarningIcon /> Inactive!
{details.starting_year &&
<div>
<p>From {details.starting_year} to {details.end_year}</p>
</div>
}
<h4>{details.name}</h4>
{details.issn && details.issn.map(item => {
return (
item.issn_type === 1 ?
<p>ISSN Print :{item.issn} </p>
: item.issn_type === 2 ?
<p>ISSN Electronic: {item.issn}</p>
:<p>ISSN Other: {item.issn}</p>
)
})}
{details.publisher && details.publisher.map(item => {
return <div key={item.id}> Publisher: {item.name}</div>
})}
</Typography>
<Typography variant="h5" component="h2">
</Typography>
<Typography className={classes.pos} color="textSecondary">
{details.country && details.country.map(item => {
return <div key={item.id}>{item.name}</div>;
})}
</Typography>
<Typography variant="body2" component="p"
style={{ textAlign: "left"}}
>
{details.oa_status ?
<div>
{details.oa_status.status !== "UNKNOWN" ?
<div>
<p> Open Acces Status: {details.oa_status.status} <br></br>
<small>{details.oa_status.description}</small>
</p>
</div>
:null}
</div>
:null}
</Typography>
<Typography variant="body2" component="p"
style={{ textAlign: "left"}}
>
{details.doaj_seal &&
<div >
<Button href="https://doaj.org/apply/seal/" target="blank" rel="noopener noreferrer" size="small"><DoneIcon/> DOAJ seal</Button>
</div>
}
{details.doaj_status &&
<div >
<Button
href="https://doaj.org/search/journals?source=%7B%22query%22%3A%7B%22match_all%22%3A%7B%7D%7D%2C%22size%22%3A50%2C%22sort%22%3A%5B%7B%22created_date%22%3A%7B%22order%22%3A%22desc%22%7D%7D%5D%7D"
target="blank" rel="noopener noreferrer" size="small"><DoneIcon/>Listed on DOAJ</Button>
</div>
}
{details.lockss &&
<div >
<Button href="https://www.lockss.org/" target="blank" rel="noopener noreferrer" size="small"><DoneIcon/>Preserved with LOCKSS</Button>
</div>
}
{details.portico &&
<div >
<Button href="https://www.portico.org/" target="blank" rel="noopener noreferrer" size="small"><DoneIcon/>Preserved with Portico</Button>
</div>
}
{details.nlch &&
<div >
<Button href="https://consortium.ch/nationallizenzen/?lang=en" target="blank" rel="noopener noreferrer" size="small"><DoneIcon/>Swiss National licences</Button>
</div>
}
{details.qoam_av_score &&
<div >
<Button href="https://www.qoam.eu/" target="blank" rel="noopener noreferrer" size="small"><HiLink/>QOAM score : {details.qoam_av_score}</Button>
</div>
}
</Typography>
</CardContent>
<CardActions>
{details.website ?
<Button href={details.website} target="blank" rel="noopener noreferrer" size="small"><HiLink/> Website </Button>
:null}
{details.oa_options ?
<Button href={details.oa_options} target="blank" rel="noopener noreferrer" size="small"><HiLink/>Open Access Infos</Button>
:null}
</CardActions>
</Card>
}
</div>
)
}
else {
return null
}
}
export default DetailsCard
c4science · Help