Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F77596131
SearchFilterFields.md
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, Aug 15, 09:28
Size
19 KB
Mime Type
text/x-java
Expires
Sat, Aug 17, 09:28 (1 d, 23 h)
Engine
blob
Format
Raw Data
Handle
19891712
Attached To
rOACCT Open Access Compliance Check Tool (OACCT)
SearchFilterFields.md
View Options
SearchFilterFields
example
:
###
Detail
section
```
js
import
Accordion
from
'
@
material
-
ui
/
core
/
Accordion
'
;
import
AccordionSummary
from
'
@
material
-
ui
/
core
/
AccordionSummary
'
;
import
ExpandMoreIcon
from
'
@
material
-
ui
/
icons
/
ExpandMore
'
;
import
Typography
from
'
@
material
-
ui
/
core
/
Typography
'
;
import
AccordionDetails
from
'
@
material
-
ui
/
core
/
AccordionDetails
'
;
import
Grid
from
'
@
material
-
ui
/
core
/
Grid
'
;
import
Box
from
'
@
material
-
ui
/
core
/
Box
'
;
import
Container
from
'
@
material
-
ui
/
core
/
Container
'
;
import
DetailCard
from
"../components/DetailCard"
;
<
div
>
<
Accordion
style
={{
marginBottom
:
"2rem"
}}
defaultExpanded
=
"true"
>
<
AccordionSummary
expandIcon
={<
ExpandMoreIcon
/>}
aria
-
controls
=
"panel1a-content"
id
=
"panel1a-header"
>
<
Typography
>
<
p
>
Selected
option
(
s
)</
p
>
</
Typography
>
</
AccordionSummary
>
<
Container
maxWidth
=
"xl"
>
</
Container
>
</
Accordion
>
</
div
>
```
###
Form
Design
```
js
import
React
,
{
useContext
,
useState
,
useEffect
}
from
'
react
'
;
import
"./SearchFilterFields.css"
import
{
makeStyles
}
from
'
@
material
-
ui
/
core
/
styles
'
;
import
Button
from
'
@
material
-
ui
/
core
/
Button
'
;
import
FormControl
from
'
@
material
-
ui
/
core
/
FormControl
'
;
import
TextField
from
'
@
material
-
ui
/
core
/
TextField
'
;
import
Autocomplete
from
'
@
material
-
ui
/
lab
/
Autocomplete
'
;
import
{
searchCondi
,
searchorganizationonly
,
searchjournalonly
,
searchInstitFunder
,
searchCondi3
}
from
'
../
services
/
requests
/
Condition
'
import
{
getJournal
}
from
'
../
services
/
requests
/
Journal
'
import
{
getFunder
}
from
'
../
services
/
requests
/
Funder
'
import
{
getInstitution
}
from
'
../
services
/
requests
/
Institution
'
import
Accordion
from
'
@
material
-
ui
/
core
/
Accordion
'
;
import
AccordionSummary
from
'
@
material
-
ui
/
core
/
AccordionSummary
'
;
import
ExpandMoreIcon
from
'
@
material
-
ui
/
icons
/
ExpandMore
'
;
import
Typography
from
'
@
material
-
ui
/
core
/
Typography
'
;
import
AccordionDetails
from
'
@
material
-
ui
/
core
/
AccordionDetails
'
;
import
Grid
from
'
@
material
-
ui
/
core
/
Grid
'
import
Box
from
'
@
material
-
ui
/
core
/
Box
'
import
Container
from
'
@
material
-
ui
/
core
/
Container
'
;
import
{
Context
}
from
"../ContextProvider"
import
ResultCard
from
"../components/ResultCard"
import
DetailCard
from
"../components/DetailCard"
import
CircularProgress
from
'
@
material
-
ui
/
core
/
CircularProgress
'
import
Fab
from
'
@
material
-
ui
/
core
/
Fab
'
import
ShareIcon
from
'
@
material
-
ui
/
icons
/
Share
'
import
Dialog
from
'
@
material
-
ui
/
core
/
Dialog
'
;
import
DialogActions
from
'
@
material
-
ui
/
core
/
DialogActions
'
;
import
DialogContent
from
'
@
material
-
ui
/
core
/
DialogContent
'
;
import
DialogContentText
from
'
@
material
-
ui
/
core
/
DialogContentText
'
;
import
DialogTitle
from
'
@
material
-
ui
/
core
/
DialogTitle
'
;
import
Slide
from
'
@
material
-
ui
/
core
/
Slide
'
;
import
Welcome
from
'
./
welcome
'
;
import
{
useHistory
,
useLocation
}
from
"react-router-dom"
;
const
institList
=
[
"epfl"
,
"UNIGE"
]
const
funderList
=
[
"funder1"
,
"funder2"
]
const
journalList
=
[
"journal1"
,
"journal2"
]
const
loading
=
"True"
const
journalId
=
2
const
funderId
=
3
const
institId
=
1
function
handleInstit
(
e
,
newInputValue
)
{
if
(
newInputValue
){
getSelectedInstitId
(
newInputValue
)
return
}
// if (institName){
// getSelectedInstitId(institName)
// return
// }
setInstitId
(
""
)
}
function
handleFunder
(
e
,
newInputValue
)
{
console
.
log
(
newInputValue
)
if
(
newInputValue
){
getSelectedFunderId
(
newInputValue
)
return
}
setFunderId
(
""
)
}
function
handleJournal
(
e
,
newInputValue
)
{
if
(
newInputValue
){
getSelectedJournalId
(
newInputValue
)
return
}
setJournalId
(
""
)
}
function
handleSubmit
(
e
)
{
setLoading
(
true
)
e
.
preventDefault
()
//reset precedent results
setConditions
([])
setDetails
([])
updateResult
([])
if
(!
institId
&&
!
journalId
&&
!
funderId
){
setLoading
(
false
)
setDetails
(
'
null
'
)
}
if
(
institId
&&
!
journalId
&&
!
funderId
){
//get organizations conditions
// alert(`get api organization Condition only: ${institId}`)
//condtion type is not journal only = 1
// Get the user
const
sendSearchInstitOnly
=
async
()
=>
{
try
{
const
resp
=
await
searchorganizationonly
(
institId
,
1
)
console
.
log
(
resp
.
data
)
setConditions
(
arr
=>
[...
arr
,
resp
.
data
])
}
catch
(
err
)
{
// Handle Error Here
console
.
error
(
err
);
}
setLoading
(
false
)
}
console
.
log
(
details
)
const
sendGetrequest
=
async
()
=>
{
try
{
const
resp
=
await
getInstitution
(
institId
)
console
.
log
(
resp
.
data
)
updateResult
(
arr
=>
[...
arr
,
resp
.
data
])
// if (details === "null") {
// setDetails(resp.data)
// }
// else {
// setDetails(prevArray => [...prevArray, resp.data])
// }
}
catch
(
err
)
{
// Handle Error Here
console
.
error
(
err
);
}
}
sendSearchInstitOnly
().
then
(
sendGetrequest
()
)
history
.
push
({
pathname
:
`check`, search:`institution=${institId}`
})
}
else
if
(!
institId
&&
!
journalId
&&
funderId
){
//get funder conditions
// alert(`get api funder Condition only: ${funderId}`)
//condtion type is not journal only = 1
const
sendSearchOrgaOnly
=
async
()
=>
{
try
{
const
resp
=
await
searchorganizationonly
(
funderId
,
1
)
console
.
log
(
resp
.
data
)
setConditions
(
arr
=>
[...
arr
,
resp
.
data
])
}
catch
(
err
)
{
// Handle Error Here
console
.
error
(
err
);
}
setLoading
(
false
)
}
const
sendGetrequest
=
async
()
=>
{
try
{
const
resp
=
await
getFunder
(
funderId
)
console
.
log
(
resp
.
data
)
updateResult
(
arr
=>
[...
arr
,
resp
.
data
])
}
catch
(
err
)
{
// Handle Error Here
console
.
error
(
err
);
}
}
sendSearchOrgaOnly
().
then
(
sendGetrequest
()
)
history
.
push
({
pathname
:
`check`, search:`funder=${funderId}`
})
}
else
if
(!
funderId
&&
!
institId
&&
journalId
){
//get journals conditions
// alert(`get api journal Condition only: ${journalId}`)
//condtion type is not institution only = 2
//get journal detail
const
sendSearchJournalOnly
=
async
()
=>
{
try
{
const
resp
=
await
searchjournalonly
(
journalId
,
2
)
console
.
log
(
resp
.
data
)
setConditions
(
arr
=>
[...
arr
,
resp
.
data
])
// setConditions(arr => [...arr, resp.data])
}
catch
(
err
)
{
// Handle Error Here
console
.
error
(
err
);
}
setLoading
(
false
)
}
const
sendGetrequest
=
async
()
=>
{
try
{
const
resp
=
await
getJournal
(
journalId
)
console
.
log
(
resp
.
data
)
updateResult
(
arr
=>
[...
arr
,
resp
.
data
])
}
catch
(
err
)
{
// Handle Error Here
console
.
error
(
err
);
}
}
sendSearchJournalOnly
().
then
(
sendGetrequest
()
)
history
.
push
({
pathname
:
`check`, search:`journal=${journalId}`
})
}
else
if
(
institId
&&
funderId
&&
!
journalId
)
{
//alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${institId}`)
//condtion type journal/condition = 3
const
sendSearchCondi
=
async
()
=>
{
try
{
const
resp
=
await
searchInstitFunder
(
institId
,
funderId
,
1
)
console
.
log
(
resp
.
data
)
setConditions
(
arr
=>
[...
arr
,
resp
.
data
])
}
catch
(
err
)
{
// Handle Error Here
console
.
error
(
err
);
}
setLoading
(
false
)
}
const
sendGetInstit
=
async
()
=>
{
try
{
const
resp
=
await
getInstitution
(
institId
)
console
.
log
(
resp
.
data
)
//manage the order output
// detailArray.push(resp.data)
// setDetails(detailArray)
updateResult
(
arr
=>
[...
arr
,
resp
.
data
])
}
catch
(
err
)
{
// Handle Error Here
console
.
error
(
err
);
}
}
const
sendGetFunder
=
async
()
=>
{
try
{
const
resp
=
await
getFunder
(
funderId
)
console
.
log
(
resp
.
data
)
updateResult
(
arr
=>
[...
arr
,
resp
.
data
])
}
catch
(
err
)
{
// Handle Error Here
console
.
error
(
err
);
}
}
sendSearchCondi
().
then
(
sendGetInstit
().
then
(
sendGetFunder
())
)
history
.
push
({
pathname
:
`check`, search: `institution=${institId}&funder=${funderId}`
})
}
else
if
(
institId
&&
journalId
&&
!
funderId
)
{
//alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${institId}`)
//condtion type journal/condition = 3
const
sendSearchCondi
=
async
()
=>
{
try
{
const
resp
=
await
searchCondi
(
journalId
,
institId
)
console
.
log
(
resp
.
data
)
setConditions
(
arr
=>
[...
arr
,
resp
.
data
])
}
catch
(
err
)
{
// Handle Error Here
console
.
error
(
err
);
}
setLoading
(
false
)
}
const
sendGetInstit
=
async
()
=>
{
try
{
const
resp
=
await
getInstitution
(
institId
)
console
.
log
(
resp
.
data
)
updateResult
(
arr
=>
[...
arr
,
resp
.
data
])
}
catch
(
err
)
{
// Handle Error Here
console
.
error
(
err
);
}
}
const
sendGetJournal
=
async
()
=>
{
try
{
const
resp
=
await
getJournal
(
journalId
)
console
.
log
(
resp
.
data
)
// detailArray.push(resp.data)
// setDetails(detailArray)
updateResult
(
arr
=>
[...
arr
,
resp
.
data
])
}
catch
(
err
)
{
// Handle Error Here
console
.
error
(
err
);
}
}
sendSearchCondi
().
then
(
sendGetInstit
().
then
(
sendGetJournal
)
)
history
.
push
({
pathname
:
`check`, search: `institution=${institId}&journal=${journalId}`
})
}
else
if
(!
institId
&&
journalId
&&
funderId
)
{
// alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${funderId}`)
//condtion type journal/institution/funder conditions = 3
const
sendGetCondi
=
async
()
=>
{
try
{
const
resp
=
await
searchCondi
(
journalId
,
funderId
)
console
.
log
(
resp
.
data
)
setConditions
(
arr
=>
[...
arr
,
resp
.
data
])
}
catch
(
err
)
{
// Handle Error Here
console
.
error
(
err
);
}
setLoading
(
false
)
}
const
sendGetFunder
=
async
()
=>
{
try
{
const
resp
=
await
getFunder
(
funderId
)
console
.
log
(
resp
.
data
)
updateResult
(
arr
=>
[...
arr
,
resp
.
data
])
}
catch
(
err
)
{
// Handle Error Here
console
.
error
(
err
);
}
}
const
sendGetJournal
=
async
()
=>
{
try
{
const
resp
=
await
getJournal
(
journalId
)
console
.
log
(
resp
.
data
)
updateResult
(
arr
=>
[...
arr
,
resp
.
data
])
}
catch
(
err
)
{
// Handle Error Here
console
.
error
(
err
);
}
}
sendGetCondi
().
then
(
sendGetJournal
().
then
(
sendGetFunder
()
)
)
history
.
push
({
pathname
:
`check`, search: `funder=${funderId}&journal=${journalId}`
})
}
else
if
(
institId
&&
journalId
&&
funderId
)
{
// alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${funderId}`)
//condtion type journal/institution/funder conditions = 3
console
.
log
(
"main check !"
)
//(institution + journal)
const
detailArray
=
[]
const
sendGetCondi
=
async
()
=>
{
try
{
const
resp
=
await
searchCondi3
(
institId
,
journalId
,
funderId
)
console
.
log
(
resp
.
data
)
setConditions
(
arr
=>
[...
arr
,
resp
.
data
])
}
catch
(
err
)
{
// Handle Error Here
console
.
error
(
err
);
}
setLoading
(
false
)
}
const
sendGetInstit
=
async
()
=>
{
try
{
const
resp
=
await
getInstitution
(
institId
)
console
.
log
(
resp
.
data
)
updateResult
(
arr
=>
[...
arr
,
resp
.
data
])
}
catch
(
err
)
{
// Handle Error Here
console
.
error
(
err
);
}
}
const
sendGetFunder
=
async
()
=>
{
try
{
const
resp
=
await
getFunder
(
funderId
)
console
.
log
(
resp
.
data
)
updateResult
(
arr
=>
[...
arr
,
resp
.
data
])
}
catch
(
err
)
{
// Handle Error Here
console
.
error
(
err
);
}
}
const
sendGetJournal
=
async
()
=>
{
try
{
const
resp
=
await
getJournal
(
journalId
)
console
.
log
(
resp
.
data
)
updateResult
(
arr
=>
[...
arr
,
resp
.
data
])
}
catch
(
err
)
{
// Handle Error Here
console
.
error
(
err
);
}
}
//order the request
sendGetCondi
()
sendGetInstit
().
then
(
sendGetFunder
()
).
then
(
sendGetJournal
()
)
history
.
push
({
pathname
:
`check`, search: `institution=${institId}&funder=${funderId}&journal=${journalId}`
})
}
}
<
Box
>
<
div
>
<
Container
maxWidth
=
"xl"
>
<
Grid
container
spacing
={
1
}
direction
=
"row"
>
<
form
style
={{
marginTop
:
"8rem"
}}
noValidate
autoComplete
=
"on"
onSubmit
={
handleSubmit
}
color
=
"inherit"
>
<
FormControl
className
=
"form-input"
style
={{
width
:
340
}}>
<
Autocomplete
freeSolo
autoSelect
selectOnFocus
clearOnBlur
id
=
"institution"
options
={
institList
.
map
((
option
)
=>
option
.
name
)}
renderOption
={(
params
)
=>
(
<
a
style
={{
textAlign
:
"left"
}}>{
params
}</
a
>
)}
// getOptionLabel={(option) => option.name}
// filterOptions={filterOptions}
onInputChange
={
handleInstit
}
// inputValue={institName}
renderInput
={(
params
)
=>
(
<
TextField
{...
params
}
label
=
"Swiss Institutions"
// margin="normal"
value
={
institId
}
variant
=
"outlined"
/>
)}
/>
</
FormControl
>
<
FormControl
className
=
"form-input"
style
={{
width
:
340
}}>
<
Autocomplete
freeSolo
id
=
"funder"
options
={
funderList
.
map
((
option
)
=>
option
.
name
)}
renderOption
={(
params
)
=>
(
<
a
style
={{
textAlign
:
"left"
}}>{
params
}</
a
>
)}
onInputChange
={
handleFunder
}
renderInput
={(
params
)
=>
(
<
TextField
{...
params
}
label
=
"Funder"
// margin="normal"
value
={
funderId
}
variant
=
"outlined"
/>
)}
/>
</
FormControl
>
<
FormControl
className
=
"form-input"
style
={{
width
:
340
}}>
<
Autocomplete
freeSolo
id
=
"journal"
options
={
journalList
.
map
((
option
)
=>
option
.
name
)}
renderOption
={(
params
)
=>
(
<
a
style
={{
textAlign
:
"left"
}}>{
params
}</
a
>
)}
onInputChange
={
handleJournal
}
renderInput
={(
params
)
=>
(
<
TextField
{...
params
}
label
=
"Journal"
// margin="normal"
value
={
journalId
}
variant
=
"outlined"
/>
)}
/>
</
FormControl
>
<
FormControl
className
=
"form-input"
style
={{
width
:
340
}}>
{!
loading
&&
<
Button
className
=
"App-btn"
variant
=
"contained"
type
=
"submit"
>
Check
</
Button
>
}
{
loading
&&
<
Button
className
=
"App-btn"
variant
=
"contained"
type
=
"submit"
disabled
>
<
CircularProgress
color
=
"white"
/>
Checking
...
</
Button
>
}
</
FormControl
>
</
form
>
</
Grid
>
</
Container
>
<
Container
maxWidth
=
"xl"
>
</
Container
>
</
div
>
</
Box
>
```
###
Url
sharing
```
js
import
React
,
{
useContext
,
useState
,
useEffect
}
from
'
react
'
;
import
Button
from
'
@
material
-
ui
/
core
/
Button
'
;
import
ShareIcon
from
'
@
material
-
ui
/
icons
/
Share
'
import
Dialog
from
'
@
material
-
ui
/
core
/
Dialog
'
;
import
DialogActions
from
'
@
material
-
ui
/
core
/
DialogActions
'
;
import
DialogContent
from
'
@
material
-
ui
/
core
/
DialogContent
'
;
import
DialogContentText
from
'
@
material
-
ui
/
core
/
DialogContentText
'
;
import
DialogTitle
from
'
@
material
-
ui
/
core
/
DialogTitle
'
;
import
Slide
from
'
@
material
-
ui
/
core
/
Slide
'
;
import
Fab
from
'
@
material
-
ui
/
core
/
Fab
'
;
const
url
=
"www.myapp.com/share"
const
[
open
,
setOpen
]
=
React
.
useState
(
false
)
const
Transition
=
React
.
forwardRef
(
function
Transition
(
props
,
ref
)
{
return
<
Slide
direction
=
"up"
ref
={
ref
}
{...
props
}
/>;
});
//copy url to clipboard
function
handlShare
(
e
)
{
setOpen
(
true
)
navigator
.
clipboard
.
writeText
(
url
)
}
const
handleClose
=
()
=>
{
setOpen
(
false
);
}
<
div
>
<
Dialog
open
={
open
}
TransitionComponent
={
Transition
}
keepMounted
onClose
={
handleClose
}
aria
-
labelledby
=
"alert-dialog-slide-title"
aria
-
describedby
=
"alert-dialog-slide-description"
>
<
DialogTitle
id
=
"alert-dialog-slide-title"
>{
"Share your Result!"
}</
DialogTitle
>
<
DialogContent
>
<
DialogContentText
id
=
"alert-dialog-slide-description"
>
{
url
}
</
DialogContentText
>
</
DialogContent
>
<
DialogActions
>
<
Button
onClick
={
handleClose
}
color
=
"primary"
>
Copy
to
clipboard
!
</
Button
>
</
DialogActions
>
</
Dialog
>
<
Fab
onClick
={
handlShare
}
color
=
"primary"
aria
-
label
=
"add"
>
<
ShareIcon
/>
</
Fab
>
</
div
>
```
Any
[
Markdown
](
http
:
//daringfireball.net/projects/markdown/) is **allowed** _here_.
Event Timeline
Log In to Comment