Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F71327321
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
Thu, Jul 11, 02:41
Size
7 KB
Mime Type
text/html
Expires
Sat, Jul 13, 02:41 (1 d, 23 h)
Engine
blob
Format
Raw Data
Handle
18937924
Attached To
rOACCT Open Access Compliance Check Tool (OACCT)
TermCard.js
View Options
import
React
,
{
useContext
}
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
DescriptionIcon
from
'@material-ui/icons/Description'
;
import
Grid
from
'@material-ui/core/Grid'
;
import
{
Context
}
from
"../Context"
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
{
institName
,
journalName
}
=
useContext
(
Context
)
// const termJournalName = 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
=
{
<
DescriptionIcon
/>
}
label
=
"Submitted Version"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
className
=
{
classes
.
chip
}
style
=
{{
background
:
"#FFFFFF"
}}
/>
)
}
else
if
(
vers
[
0
]
===
"Accepted"
)
{
return
(
<
Chip
key
=
{
id
[
0
]}
size
=
"small"
avatar
=
{
<
DescriptionIcon
/>
}
label
=
"Accepted Version"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
className
=
{
classes
.
chip
}
style
=
{{
background
:
"#FFFFFF"
}}
/>
)
}
else
if
(
vers
[
0
]
===
"Published"
)
{
return
(
<
Chip
key
=
{
id
[
0
]}
size
=
"small"
avatar
=
{
<
DescriptionIcon
/>
}
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
=
{
<
DoneIcon
/>
}
label
=
{
"IR Archiving"
}
// 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"
}}
/>
)
const
embargo
=
term
.
ir_archiving
?
(
<
Chip
size
=
"small"
avatar
=
{
<
DateRangeIcon
/>
}
label
=
{
"Embargo: "
+
term
.
embargo_months
+
" Month(s)"
}
// variant="outlined"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
style
=
{{
background
:
"#FFFFFF"
}}
/>
)
:
(
<
a
/>
)
return
(
<
Accordion
defaultActiveKey
=
"1"
key
=
{
term
.
id
}
>
<
Card
className
=
{
classes
.
card
}
>
<
Accordion
.
Toggle
className
=
"cardheader"
as
=
{
Card
.
Header
}
eventKey
=
"0"
>
{
institName
?
<
h3
>
Agreement
between
{
institName
}
<
Card
.
Link
href
=
{
term
.
source
}
target
=
"_blank"
rel
=
"noopener noreferrer"
>
<
InfoIcon
style
=
{{
color
:
"white"
}}
href
=
{
term
.
source
}
/><
/Card.Link></h3>
:
<
h3
>
<
Card
.
Link
href
=
{
term
.
source
}
target
=
"_blank"
rel
=
"noopener noreferrer"
>
<
InfoIcon
style
=
{{
color
:
"white"
}}
href
=
{
term
.
source
}
/><
/Card.Link>
<
/h3>
}
<
div
>
{
version
()}
{
cost
()}
{
licence
}
{
termArchive
}
{
embargo
}
<
/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
}
>
{
licenceDetail
}
<
/Grid>
<
/Card.Body>
<
/Accordion.Collapse>
<
/Card>
<
/Accordion>
)
}
export
default
TermCard
Event Timeline
Log In to Comment