Homec4science
Diffusion Open Access Compliance Check Tool (OACCT) (issn4frontend) Browse

rOACCT/assets/src/pages/SearchFilterFields.js
80a2dbc29582issn4frontend

Last Change
Raw File

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, 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 {Context} from "../Context"
import ResultCard from "../components/ResultCard"
import DetailCard from "../components/DetailCard"
import TestQuery from "./TestQuery"
import { useQuery } from "react-query"
import CircularProgress from '@material-ui/core/CircularProgress'
import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
display: 'grid',
},
flexGrow: 1
},
formControl: {
margin: theme.spacing(1),
width: 350,
},
selectEmpty: {
marginTop: theme.spacing(2),
},
card: {
width: '100%',
marginTop: "1rem",
},
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 [result, updateResult] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
setDetails('null')
}, [])
// clear teh usestate
// const clear = () => {
// setState((prev) => new Map(prev.clear()));
// }
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) {
setLoading(true)
e.preventDefault()
//reset precedent results
setConditions([])
setDetails([])
updateResult([])
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()
)
}
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()
)
}
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()
)
}
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)
// 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())
)
}
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 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);
}
}
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);
}
}
sendSearchCondi().then(
sendGetJournal().then(sendGetInstit())
)
}
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 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);
}
}
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);
}
}
sendGetCondi().then(
sendGetJournal().then(
sendGetFunder()
)
)
}
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 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);
}
}
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 sendGetInstit =
async () => {
try {
const resp = await getInstitution(institId)
console.log(resp.data)
detailArray.push(resp.data)
updateResult(arr => [...arr, resp.data])
} catch (err) {
// Handle Error Here
console.error(err);
}
}
// sendGetCondi1().then(sendGetCondi2())
sendGetCondi()
sendGetJournal().then(
sendGetFunder().then(
sendGetInstit()
)
)
}
// alert(`Submit Institution: ID: ${institId} , Submit Funder: ${fund}, Submit Journal ID: ${journalId}`)
}
// const conditionIdArray = []
// conditions.map((item) =>(
// conditionIdArray.push(item.id)
// ))
// console.log(conditionIdArray)
console.log(`all conditions SET: ${conditions}`)
console.log(details)
console.log(`Selected Institution ID: ${institId} , Selected Funder: ${funderId}, Selected Journal ID: ${journalId}`)
function detailsResult() {
if (details !== 'null') {
return (
<div className={classes.root}>
<Accordion >
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography className={classes.heading}>
<p>Selected option(s)</p>
</Typography>
</AccordionSummary>
<Grid container className={classes.root} spacing="2" >
<Grid item xs={12}>
<Grid container justify="center" spacing="2">
{result?.map(i => (
<Grid key={i.id} item>
<AccordionDetails>
<DetailCard details={i}/>
</AccordionDetails>
</Grid>
))}
</Grid>
</Grid>
</Grid>
</Accordion>
</div>
)
}
}
function conditionResults () {
return (
<div className={classes.root} style={{ maxWidth: "auto", height:"auto"}}>
{conditions?.map(i=> (
<ResultCard result={i}/>
))}
</div>
)
}
return (
<div className="searchfilter">
<Container className= "App-check-form" fluid>
<Row >
<Col>
<form className="check-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}>
{!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>
</Col>
</Row>
</Container>
<Container className="details" fluid>
<Row>
<Col>
{detailsResult()}
</Col>
</Row>
</Container>
<Container className="term" fluid>
<Row>
<Col>
{conditionResults()}
</Col>
</Row>
</Container>
</div>
);
}
c4science · Help