Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F81072927
SearchFilterFields.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, Sep 4, 02:05
Size
9 KB
Mime Type
text/x-java
Expires
Fri, Sep 6, 02:05 (2 d)
Engine
blob
Format
Raw Data
Handle
20512634
Attached To
rOACCT Open Access Compliance Check Tool (OACCT)
SearchFilterFields.js
View Options
import React, {useContext, useState, useEffect} from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import { Container, Row, Col } from 'react-bootstrap';
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 } from '../services/requests/Condition'
import {getJournal} from '../services/requests/Journal'
import {getFunder} from '../services/requests/Funder'
import {getInstitution} from '../services/requests/Institution'
import {Context} from "../Context"
import ResultCard from "../components/ResultCard"
import DetailCard from "../components/DetailCard"
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
display: 'grid',
},
},
formControl: {
margin: theme.spacing(1),
width: 200,
},
selectEmpty: {
marginTop: theme.spacing(2),
},
card: {
width: '100%',
marginTop: "1rem",
},
root: {
flexGrow: 1,
},
chip: {
margin: 0.5,
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular,
},
}));
export default function SearchFilterFields() {
const classes = useStyles();
//call the custom hook for listing field with api
const { getSelectedInstitId,
getSelectedJournalId,
getSelectedFunderId,
institList,
journalList,
funderList,
institId,
journalId,
funderId,
setInstitId,
setJournalId,
setFunderId,
institName,
journalName,
funderName,
}
= useContext(Context)
//responses
const [conditions, setConditions] = useState([]);
const [details, setDetails] = useState([]);
const [details2, setDetails2] = useState([]);
useEffect(() => {
setDetails('null')
setDetails2('null')
}, [])
function handleInstit(e, newInputValue) {
if (newInputValue){
getSelectedInstitId(newInputValue)
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) {
e.preventDefault()
//reset precedent results
setConditions([])
setDetails([])
setDetails2([])
if (institId && !journalId && !funderId){
//get organizations conditions
// alert(`get api organization Condition only: ${institId}`)
//condtion type is not journal only = 1
searchorganizationonly(institId,1).then(res => {
const data = res.data;
setConditions(data);
})
getInstitution(institId).then(res=> {
const data = res.data;
setDetails(data);
console.log(data);
})
}
else if (!institId && !journalId && funderId){
//get funder conditions
// alert(`get api funder Condition only: ${funderId}`)
//condtion type is not journal only = 1
searchorganizationonly(funderId,1).then(res => {
const data = res.data;
setConditions(data);
console.log(data);
})
getFunder(funderId).then(res=> {
const data = res.data;
setDetails(data);
console.log(data);
})
}
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
searchjournalonly(journalId,2).then(res => {
const data = res.data;
setConditions(data);
console.log(data);
}
)
getJournal(journalId).then(res=> {
const data = res.data;
setDetails(data);
console.log(data);
})
}
else if (institId && journalId && !funderId) {
//alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${institId}`)
//condtion type journal/condition = 3
searchCondi(journalId,institId,1).then(res => {
const data = res.data;
console.log(data)
setConditions(data);
console.log(data);
})
getJournal(journalId).then(res=> {
const data = res.data;
setDetails(data);
console.log(data);
})
getInstitution(institId).then(res=> {
const data = res.data;
setDetails2(data);
console.log(data);
})
}
else if (!institId && journalId && funderId) {
// alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${funderId}`)
//condtion type journal/institution/funder conditions = 3
searchCondi(journalId,funderId,3).then(res => {
const data = res.data;
setConditions(data);
console.log(data);
})
}
// alert(`Submit Institution: ID: ${institId} , Submit Funder: ${fund}, Submit Journal ID: ${journalId}`)
}
console.log(details2)
console.log(`Selected Institution ID: ${institId} , Selected Funder: ${funderId}, Selected Journal ID: ${journalId}`)
const detailsResult =
<div key={details.id}>
<DetailCard details={details} details2={details2}/>
</div>
const conditionResults =
<div>
<ResultCard result={conditions} />
</div>
//work only for term display
// <div key={array.id}>
// {condition = array.condition_type.id}
// {array.term.map( term => (
// <TermCard key={term.id} term={term} condition={condition}/>
// ))}
// </div>
return (
<div className="searchfilter">
<Container className= "App-check-form" fluid>
<Row >
<Col>
<form style={{ marginTop: "8rem"}} noValidate autoComplete="on" onSubmit={handleSubmit} color="inherit">
<FormControl className={classes.formControl}>
<Autocomplete
freeSolo
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}
renderInput={(params) => (
<TextField
{...params}
label="Swiss Institutions"
// margin="normal"
value={institId}
variant="outlined"
/>
)}
/>
</FormControl>
<FormControl className={classes.formControl}>
<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={classes.formControl}>
<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={classes.formControl}>
<Button
className="App-btn"
variant="contained"
type="submit"
>
Check
</Button>
</FormControl>
</form>
</Col>
</Row>
<Container className="details" fluid>
<Row>
<Col>
{detailsResult}
</Col>
</Row>
</Container>
</Container>
<Container className="term" fluid>
<Row>
<Col>
{conditionResults}
</Col>
</Row>
</Container>
</div>
);
}
Event Timeline
Log In to Comment