Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F67155385
ResultCard.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
Thu, Jun 20, 08:41
Size
3 KB
Mime Type
text/x-java
Expires
Sat, Jun 22, 08:41 (2 d)
Engine
blob
Format
Raw Data
Handle
18327985
Attached To
rOACCT Open Access Compliance Check Tool (OACCT)
ResultCard.js
View Options
import React from "react"
import { makeStyles } from '@material-ui/core/styles';
import "./ResultCard.css"
import TermCard from "../components/TermCard"
import Accordion from '@material-ui/core/Accordion';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import Badge from '@material-ui/core/Badge';
import { HiOutlineDocumentDuplicate } from "react-icons/hi";
import { HiOutlineDocument } from "react-icons/hi";
import Grid from '@material-ui/core/Grid'
import Box from '@material-ui/core/Box'
import Container from '@material-ui/core/Container';
const useStyles = makeStyles((theme) =>({
root: {
flexGrow: 1,
},
chip: {
margin: 0.5,
},
}))
function ResultCard({result}) {
const classes = useStyles();
//create one array to organize the frontend output
const termresult = []
const termArray = result?.map(i=>(
// get condition details
i.term?.map(j =>(
// termresult.push([j, i.id, i.comment, i.condition_type])
termresult.push([j, [i.id, i.comment, i.condition_type]])
))
))
//groupyBy array
function groupBy(objectArray, property) {
// console.log(objectArray)
return objectArray.reduce((acc, obj) => {
// console.log(obj[0])
const key = obj[0][property][0].description;
if (!acc[key]) {
acc[key] = [];
}
// Add object to list for given key's value
acc[key].push(obj);
return acc;
}, {});
}
const groupedTerm = groupBy(termresult, 'version')
//first version
// console.log(groupedTerm[1])
//convert object into array
const termItem = Object.entries(groupedTerm)
//manage the display order
function orderVersion (version) {
if (version[0] ==="Submitted version") {
version.unshift(3)
}
else if (version[0] === "Published version") {
version.unshift(1)
}
else if (version[0] === "Accepted version") {
version.unshift(2)
}
}
//apply the function for each version
termItem?.map(i=>(
orderVersion(i)
))
termItem.sort()
console.log(termItem)
const displayVersion =
termItem?.map(item =>(
<div className={classes.root} >
<Accordion className="term-version">
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography className={classes.heading}>
{item?.map(i => (
<Badge anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
style={{
padding: "0.05rem",
color: "black",
}}
badgeContent={typeof i === "object" && i.length} >{typeof i === "string" && i} {typeof i === "object" && i.length > 1 ? <HiOutlineDocumentDuplicate />: typeof i === "object" && <HiOutlineDocument/>}</Badge>
))
}
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
<Container maxWidth="xl" >
<Grid container spacing={0.5} direction="row">
{item?.map(j => (
typeof j === "object" &&
j?.map(k => (
<TermCard term={k}/>
))
))
}
</Grid>
</Container>
</Typography>
</AccordionDetails>
</Accordion>
</div>
))
return (
//level 0
<div className={classes.root} >
{displayVersion}
</div>
)
}
export default ResultCard
Event Timeline
Log In to Comment