diff --git a/assets/src/components/DetailCard.js b/assets/src/components/DetailCard.js
index 0b5f840f..c9004e8d 100644
--- a/assets/src/components/DetailCard.js
+++ b/assets/src/components/DetailCard.js
@@ -1,373 +1,373 @@
import React, {useContext,useEffect} from "react"
import {Context} from "../ContextProvider"
import { makeStyles } from '@material-ui/core/styles';
import "./detailcard.css"
import Typography from '@material-ui/core/Typography';
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"
import { BsUnlock } from "react-icons/bs";
import { GrDiamond } from "react-icons/gr";
import Chip from '@material-ui/core/Chip';
import ClearSharpIcon from '@material-ui/icons/ClearSharp';
/**
* General component description in JSDoc format. Markdown is *supported*.
*/
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,
},
}));
export default function DetailCard({details}) {
/** To manage display for journal.end_year --> Inactive*/
const year = new Date().getFullYear()
console.log(year)
const {
setUrl
}
= useContext(Context)
const classes = useStyles();
useEffect(() => {
setUrl(window.location.href)
},)
if (details !== 'null') {
return (
<div id={details.id}>
<Card className="detail-Card">
<CardContent>
{details.end_year && details.end_year < year &&
<Typography className={classes.title} color="textSecondary" gutterBottom
style={{backgroundColor:"lightgrey", text:"white"}}
>
<WarningIcon /> Inactive!
{details.starting_year &&
<div>
<p>From {details.starting_year} to {details.end_year}</p>
</div>
}
</Typography>
}
<Typography className={classes.title} color="textSecondary" gutterBottom>
<h4>{details.name}</h4>
<Typography variant="body2" component="p"
style={{ textAlign: "left"}}
>
<ul>
{details.issn && details.issn.map(item => {
return (
item.issn_type === "1" ?
<li>Print ISSN: {item.issn}</li>
: item.issn_type === "2" ?
<li>Electronic ISSN: {item.issn}</li>
: item.issn_type === "3" ?
<li>Other ISSN: {item.issn}</li>
:null
)
})}
</ul>
</Typography>
{details.publisher && details.publisher.map(item => {
return <div key={item.id}> <div >
<Button href={item.website} target="blank" rel="noopener noreferrer" size="small"><HiLink/>Publisher: {item.name}</Button>
{item.oa_policies ?
<Button href={item.oa_policies} target="blank" rel="noopener noreferrer" size="small"><HiLink/>Publisher policies</Button>
: null
}
</div></div>
})}
</Typography>
<Typography variant="h5" component="h2">
</Typography>
<Typography className={classes.pos} color="textSecondary" variant="body2" component="p"
style={{ textAlign: "left"}} >
{details.country && details.country.map(item => {
return <div key={item.id}>{item.name}</div>;
})}
{!details.end_year && (details.starting_year != 0) &&
<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>
{
details.oa_status.status === "Gold" ?
<p>
<abbr title={details.oa_status.description}>
Open Access Status:
<Button href="https://oa100.snf.ch/en/context/open-access/versions-of-open-access/" target="blank" rel="noopener noreferrer" size="small">
<Chip
size="small"
avatar={ <BsUnlock />}
label={details.oa_status.status}
className={classes.chip}
style={{ background: "#FFD700", textAlign: "left"}}
// title="Licence Information"
/>
</Button>
</abbr>
</p>
: details.oa_status.status === "Diamond" ?
<>
<abbr title={details.oa_status.description}>
Open Access Status:
<Button href="https://oa100.snf.ch/en/context/open-access/versions-of-open-access/" target="blank" rel="noopener noreferrer" size="small">
<Chip
size="small"
avatar={ <GrDiamond />}
label={details.oa_status.status}
className={classes.chip}
style={{ background: "#B9F2FF", textAlign: "left"}}
// title="Licence Information"
/>
</Button>
{/* {details.oa_status.status} */}
</abbr>
</>
:details.oa_status.status === "Full" ?
<p>
<abbr title={details.oa_status.description}>
Open Access Status:
<Button href="https://oa100.snf.ch/en/context/open-access/versions-of-open-access/" target="blank" rel="noopener noreferrer" size="small">
<Chip
size="small"
avatar={ <BsUnlock />}
label={details.oa_status.status}
className={classes.chip}
style={{ background: "#ADD8E6", textAlign: "left"}}
// title="Licence Information"
/>
</Button>
</abbr>
</p>
:details.oa_status.status === "Hybrid" ?
<p>
<abbr title={details.oa_status.description}>
Open Access Status:
<Button href="https://oa100.snf.ch/en/context/open-access/versions-of-open-access/" target="blank" rel="noopener noreferrer" size="small">
<Chip
size="small"
avatar={ <BsUnlock />}
label={details.oa_status.status}
className={classes.chip}
style={{ background: "#cfcdaa", textAlign: "left"}}
// title="Licence Information"
/>
</Button>
</abbr>
</p>
:details.oa_status.status === "Green" ?
<p>
<abbr title={details.oa_status.description}>
Open Access Status:
<Button href="https://oa100.snf.ch/en/context/open-access/versions-of-open-access/" target="blank" rel="noopener noreferrer" size="small">
<Chip
size="small"
avatar={ <BsUnlock />}
label={details.oa_status.status}
className={classes.chip}
style={{ background: "#DAF7A6", textAlign: "left"}}
// title="Licence Information"
/>
</Button>
</abbr>
</p>
:details.oa_status.status === "none" ?
<p>
<abbr title={details.oa_status.description}>
Open Access Status:
<Button href="https://oa100.snf.ch/en/context/open-access/versions-of-open-access/" target="blank" rel="noopener noreferrer" size="small">
<Chip
size="small"
avatar={ <ClearSharpIcon />}
label={details.oa_status.status}
className={classes.chip}
style={{ background: "#FF7F7F", textAlign: "left"}}
// title="Licence Information"
/>
</Button>
</abbr>
</p>
:null
}
</div>
:null}
</div>
:null}
</Typography>
{details.language &&
details.language.map(item =>(
<Typography variant="body2" component="p"
style={{ textAlign: "left"}}
>
<p><small>Language: {item.name}</small></p>
</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 && details.issn &&
+ {details.doaj_status && details.issn[0] &&
<div >
<Button
href={"https://doaj.org/toc/"+details.issn[0].issn}
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 && details.issn &&
+ {details.portico && details.issn[0] &&
<div >
<Button href={"https://www.portico.org/coverage/titles/?keyword="+details.issn[0].issn} 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 >
<br />
<Button href="https://www.qoam.eu/" target="blank" rel="noopener noreferrer" size="small">QOAM score : {details.qoam_av_score}</Button>
</div>
}
{/* ROR and FUNDRED not needed in the current version */}
{/* {details.ror ?
<div >
<Button href={"https://ror.org/"+details.ror} target="blank" rel="noopener noreferrer" size="small">Ror ID: {details.ror}</Button>
</div>
:null}
{details.fundref ?
<div>
<Button href={"https://search.crossref.org/funding?q="+details.fundref} target="blank" rel="noopener noreferrer" size="small">Fundref Id: {details.fundref}</Button>
</div>
:null}
}
}
*/}
</Typography>
</CardContent>
<CardActions>
{details.website ?
<Button href={details.website} target="blank" rel="noopener noreferrer" size="small"><HiLink/>Website</Button>
: <Button size="small">No website info available</Button>}
{details.oa_options ?
<Button href={details.oa_options} target="blank" rel="noopener noreferrer" size="small"><HiLink/>Open Access Infos</Button>
:null}
{details.ir_name ?
<div>
<Button href={details.ir_url} target="blank" rel="noopener noreferrer" size="small"><HiLink/>REPOSITORY: {details.ir_name}</Button>
</div>
:null}
</CardActions>
</Card>
</div>
)
}
else {
return null
}
}
\ No newline at end of file