Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F61983549
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
Fri, May 10, 05:10
Size
5 KB
Mime Type
text/html
Expires
Sun, May 12, 05:10 (2 d)
Engine
blob
Format
Raw Data
Handle
17586879
Attached To
rOACCT Open Access Compliance Check Tool (OACCT)
TermCard.js
View Options
import
React
from
"react"
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
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
DateRangeIcon
from
'@material-ui/icons/DateRange'
;
import
InfoIcon
from
'@material-ui/icons/Info'
;
import
DescriptionIcon
from
'@material-ui/icons/Description'
;
import
Grid
from
'@material-ui/core/Grid'
;
import
{
FaCoins
}
from
'react-icons/fa'
;
import
{
RiFilePaper2Line
}
from
'react-icons/ri'
;
import
"./termcard.css"
const
useStyles
=
makeStyles
((
theme
)
=>
({
card
:
{
width
:
'100%'
,
marginTop
:
"1rem"
,
textAlign
:
'left'
},
root
:
{
flexGrow
:
1
,
textAlign
:
'left'
,
},
chip
:
{
margin
:
0.5
,
},
heading
:
{
fontSize
:
theme
.
typography
.
pxToRem
(
15
),
fontWeight
:
theme
.
typography
.
fontWeightRegular
,
},
}))
function
TermCard
({
term
})
{
const
classes
=
useStyles
();
term
[
0
].
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>
))
function
licence
(){
const
lockstatus
=
term
[
0
].
licence
?
.
map
(
i
=>
(
i
.
name_or_abbrev
))
if
(
lockstatus
[
0
]
===
"CC-BY"
)
{
return
(
<
Chip
size
=
"small"
avatar
=
{
<
RiFilePaper2Line
/>
}
label
=
{
lockstatus
}
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
className
=
{
classes
.
chip
}
style
=
{{
background
:
"#FFFFFF"
}}
title
=
"This is more information"
/>
)
}
else
{
return
(
<
Chip
size
=
"small"
avatar
=
{
<
RiFilePaper2Line
/>
}
label
=
{
lockstatus
}
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
className
=
{
classes
.
chip
}
style
=
{{
background
:
"#FFFFFF"
}}
title
=
"This is more information"
/>
)
}
}
function
cost
()
{
const
price
=
term
[
0
].
cost_factor
?
.
map
(
i
=>
(
i
.
amount
))
const
price_symbol
=
term
[
0
].
cost_factor
?
.
map
(
j
=>
(
j
.
symbol
))
const
cost_name
=
term
[
0
].
cost_factor
?
.
map
(
k
=>
(
k
.
cost_factor_type
.
name
))
const
id
=
term
[
0
].
cost_factor
?
.
map
(
k
=>
(
k
.
cost_factor_type
.
id
))
return
(
<
Chip
key
=
{
id
[
0
]}
size
=
"small"
avatar
=
{
<
FaCoins
/>
}
label
=
{
cost_name
[
0
]
+
" : "
+
price
[
0
]
+
" "
+
price_symbol
}
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
className
=
{
classes
.
chip
}
style
=
{{
background
:
"#FFFFFF"
}}
title
=
"This is more information"
/>
)
}
const
termArchive
=
term
[
0
].
ir_archiving
&&
term
[
0
].
ir_archiving
?
(
<
Chip
size
=
"small"
avatar
=
{
<
DoneIcon
/>
}
label
=
{
"IR Archiving"
}
// variant="outlined"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
style
=
{{
background
:
"#FFFFFF"
}}
title
=
"This is more information"
/>
)
:
(
<
Chip
size
=
"small"
avatar
=
{
<
HighlightOffIcon
/>
}
label
=
"IR Archiving"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
style
=
{{
background
:
"#f50057"
}}
title
=
"This is more information"
/>
)
const
embargo
=
term
[
0
].
ir_archiving
&&
term
[
0
].
ir_archiving
?
(
<
Chip
size
=
"small"
avatar
=
{
<
DateRangeIcon
/>
}
label
=
{
"Embargo: "
+
term
[
0
].
embargo_months
+
" Month(s)"
}
// variant="outlined"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
style
=
{{
background
:
"#FFFFFF"
}}
title
=
"This is more information"
/>
)
:
(
<
a
/>
)
return
(
<
div
className
=
{
classes
.
root
}
>
<
Accordion
key
=
{
term
.
id
}
style
=
{{
maxWidth
:
"20rem"
,
height
:
"auto"
}}
>
<
AccordionSummary
expandIcon
=
{
<
ExpandMoreIcon
/>
}
aria
-
controls
=
"panel1a-content"
id
=
"panel1a-header"
>
<
Typography
className
=
{
classes
.
heading
}
>
{
cost
()}
{
licence
()}
{
termArchive
}
{
embargo
}
term
ID
:
{
term
[
0
].
id
}
{
term
.
map
(
j
=>
(
j
[
0
]
&&
<
p
>
Condition
Set
Id
:
{
j
[
0
]}
<
/p>
))
}
<
/Typography>
<
/AccordionSummary>
<
AccordionDetails
>
<
Typography
>
{
/* {term[1]} */
}
{
term
[
0
].
comment
}
{
term
[
0
].
source
}
<
/Typography>
<
/AccordionDetails>
<
/Accordion>
<
/div>
)
}
export
default
TermCard
Event Timeline
Log In to Comment