Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F65646743
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
Wed, Jun 5, 06:35
Size
6 KB
Mime Type
text/html
Expires
Fri, Jun 7, 06:35 (2 d)
Engine
blob
Format
Raw Data
Handle
18106137
Attached To
rOACCT Open Access Compliance Check Tool (OACCT)
TermCard.js
View Options
import
React
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
Grid
from
'@material-ui/core/Grid'
;
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
journalName
=
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
>
<
h4
>
Publisher
Details
<
/h4>
{
publisher
.
name
}
<
LocationCityIcon
/>
{
publisher
.
city
}
<
br
/>
Since
:
{
publisher
.
starting_year
}
<
/div>
))
const
journalDetail
=
term
.
journals
.
map
(
i
=>
(
<
div
>
<
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
>
<
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
))
// console.log(vers[0])
if
(
vers
[
0
]
===
"Submitted"
)
{
return
(
<
Chip
size
=
"small"
avatar
=
{
<
HighlightOffIcon
/>
}
label
=
"Submitted Version"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
className
=
{
classes
.
chip
}
style
=
{{
background
:
"#f50057"
}}
/>
)
}
else
if
(
vers
[
0
]
===
"Accepted"
)
{
return
(
<
Chip
size
=
"small"
avatar
=
{
<
HighlightOffIcon
/>
}
label
=
"Accepted Version"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
className
=
{
classes
.
chip
}
style
=
{{
background
:
"#f50057"
}}
/>
)
}
else
if
(
vers
[
0
]
===
"Published"
)
{
return
(
<
Chip
size
=
"small"
avatar
=
{
<
DoneIcon
/>
}
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
(
i
=>
(
i
.
symbol
))
const
cost_name
=
term
.
cost_factor
.
map
(
j
=>
(
j
.
cost_factor_type
[
0
].
name
))
console
.
log
(
cost_name
[
0
])
return
(
<
Chip
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
=
{
<
DateRangeIcon
/>
}
label
=
{
"IR Archiving"
+
" : "
+
term
.
embargo_months
+
" Month(s)"
}
// 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"
}}
/>
)
return
(
<
Accordion
defaultActiveKey
=
"1"
key
=
{
term
.
id
}
>
<
Card
className
=
{
classes
.
card
}
>
<
Accordion
.
Toggle
className
=
"cardheader"
as
=
{
Card
.
Header
}
eventKey
=
"0"
>
{
term
.
comment
}
and
{
journalName
}
({
publisherName
})
<
Card
.
Link
href
=
{
term
.
source
}
target
=
"_blank"
rel
=
"noopener noreferrer"
>
<
InfoIcon
style
=
{{
color
:
"white"
}}
href
=
{
term
.
source
}
/><
/Card.Link>
<
div
>
{
version
()}
{
cost
()}
{
licence
}
{
termArchive
}
<
/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
}
>
{
publisherDetail
}
<
/Grid>
<
Grid
item
xs
=
{
12
}
>
{
journalDetail
}
<
/Grid>
<
Grid
item
xs
=
{
12
}
>
{
licenceDetail
}
<
/Grid>
<
/Card.Body>
<
/Accordion.Collapse>
<
/Card>
<
/Accordion>
)
}
export
default
TermCard
Event Timeline
Log In to Comment