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

rOACCT/assets/src/pages/SearchFilterFields.js
afa2713a0973master

Last Change
Raw File

SearchFilterFields.js
View Options

/*
This is the Open Access Check Tool (OACT).
The publication of scientific articles as Open Access (OA), usually in the variants "Green OA" and "Gold OA", allows free access to scientific research results and their largely unhindered dissemination. Often, however, the multitude of available publication conditions makes the decision in favor of a particular journal difficult: requirements of the funding agencies and publication guidelines of the universities and colleges must be carefully compared with the offers of the publishing houses, and separately concluded publication agreements can also offer additional benefits. The "OA Compliance Check Tool" provides a comprehensive overview of the possible publication conditions for a large number of journals, especially for the Swiss university landscape, and thus supports the decision-making process.
© All rights reserved. ECOLE POLYTECHNIQUE FEDERALE DE LAUSANNE, Switzerland, Scientific Information and Libraries, 2022
See LICENSE.TXT for more details.
This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License along with this program. If not, see
<https://www.gnu.org/licenses/>.
*/
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";
import PropTypes from 'prop-types';
// import { FiFlag } from 'react-icons/fi';
import FlagOutlinedIcon from '@material-ui/icons/FlagOutlined';
import Tooltip from '@material-ui/core/Tooltip';
function useQuery() {
return new URLSearchParams(useLocation().search);
}
const Transition = React.forwardRef(function Transition(props, ref) {
return <Slide direction="up" ref={ref} {...props} />;
});
// ID of condition type that must be excluded in some API requests
const j_only_id = 3
const o_only_id = 1
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
chip: {
margin: 0.5,
},
}));
/**
* Contain the main logic of OACT tools to filter and send the appropriate request.
* @version 0.0.1
* @author [Hugo Galuppo](https://github.com/hgpulse)
*/
// Comparison function to sort details as instititution ' funder - journal'
// sort order on the is_funder field is True, False, undefined
function details_compare(a, b) {
console.log('Entering details_compare()')
if (a.is_funder == undefined) {
if (b.is_funder == undefined) {
// the 1st object is a journal, must come last
return 0;
} else {
return 1;
}
} else {
if (b.is_funder == undefined) {
return -1;
} else {
if (a.is_funder < b.is_funder) {
return -1;
} else {
return 1;
}
}
}
return 0;
}
export default function SearchFilterFields() {
/** Access to URL parameter */
const history = useHistory();
console.log(history)
let query = useQuery()
//state that allow to hide or show the share url button
const [open, setOpen] = React.useState(false)
const classes = useStyles();
//call the custom hook to share the state between different level componant
const { getSelectedInstitId,
getSelectedJournalId,
getSelectedFunderId,
institList,
journalList,
funderList,
institId,
journalId,
funderId,
setInstitId,
setJournalId,
setFunderId,
setUrl,
url
}
= useContext(Context)
//responses
const [conditions, setConditions] = useState([]);
const [details, setDetails] = useState([]);
const [result, updateResult] = useState([]);
//Manage the loading state to hide or show the spinner in the search bar
const [loading, setLoading] = useState(false);
// const [url, setUrl] = useState(window.location.href);
useEffect(() => {
setDetails('null')
setUrl(window.location.href)
//handle Url param
console.log(history)
if (history.location.pathname === "/check") {
console.log("this an url to check")
setDetails('fromUrl')
// alert(query.get("institution"))
if (query.get("institution") && !query.get("funder") && !query.get("journal")){
//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(query.get("institution"), j_only_id)
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(query.get("institution"))
// console.log(`instit name from api: ${resp.data.name}`)
// setInstitName(resp.data.name)
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=${query.get("institution")}`})
}
else if (!query.get("institution") && !query.get("journal") && query.get("funder")){
//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(query.get("funder"), j_only_id)
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(query.get("funder"))
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=${query.get("funder")}`})
}
else if (!query.get("funder") && !query.get("institution") && query.get("journal")){
//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(query.get("journal"), o_only_id)
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(query.get("journal"))
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=${query.get("journal")}`})
}
else if (query.get("institution") && query.get("funder") && !query.get("journal")) {
//alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${institId}`)
//condtion type journal/condition = 3
const sendSearchCondi =
async () => {
try {
const resp = await searchInstitFunder(query.get("institution"), query.get("funder"), j_only_id)
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(query.get("institution"))
console.log(resp.data)
// detailArray.push(resp.data)
// setDetails(detailArray)
updateResult(arr => [...arr, resp.data].sort(details_compare))
} catch (err) {
// Handle Error Here
console.error(err);
}
}
const sendGetFunder =
async () => {
try {
const resp = await getFunder(query.get("funder"))
console.log(resp.data)
updateResult(arr => [...arr, resp.data].sort(details_compare))
} catch (err) {
// Handle Error Here
console.error(err);
}
}
sendSearchCondi().then(
sendGetInstit().then(sendGetFunder())
)
history.push({pathname:`check`, search: `institution=${query.get("institution")}&funder=${query.get("funder")}`})
}
else if (query.get("institution") && query.get("journal") && !query.get("funder")) {
//alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${institId}`)
//condtion type journal/condition = 3
const sendSearchCondi =
async () => {
try {
const resp = await searchCondi(query.get("journal"),query.get("institution"))
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(query.get("institution"))
console.log(resp.data)
updateResult(arr => [...arr, resp.data].sort(details_compare))
} catch (err) {
// Handle Error Here
console.error(err);
}
}
const sendGetJournal =
async () => {
try {
const resp = await getJournal(query.get("journal"))
console.log(resp.data)
// detailArray.push(resp.data)
// setDetails(detailArray)
updateResult(arr => [...arr, resp.data].sort(details_compare))
} catch (err) {
// Handle Error Here
console.error(err);
}
}
sendSearchCondi().then(
sendGetInstit().then(sendGetJournal)
)
history.push({pathname:`check`, search: `institution=${query.get("institution")}&journal=${query.get("journal")}`})
}
else if (!query.get("institution") && query.get("journal") && query.get("funder")) {
// 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(query.get("journal"),query.get("funder"))
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(query.get("funder"))
console.log(resp.data)
updateResult(arr => [...arr, resp.data].sort(details_compare))
} catch (err) {
// Handle Error Here
console.error(err);
}
}
const sendGetJournal =
async () => {
try {
const resp = await getJournal(query.get("journal"))
console.log(resp.data)
updateResult(arr => [...arr, resp.data].sort(details_compare))
} catch (err) {
// Handle Error Here
console.error(err);
}
}
sendGetCondi().then(
sendGetFunder().then(
sendGetJournal()
)
)
history.push({pathname:`check`, search: `funder=${query.get("funder")}&journal=${query.get("journal")}`})
}
else if (query.get("institution") && query.get("journal") && query.get("funder")) {
// 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(query.get("institution"),query.get("journal"),query.get("funder"))
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(query.get("institution"))
console.log(resp.data)
detailArray.push(resp.data)
updateResult(arr => [...arr, resp.data].sort(details_compare))
console.log("sendGetInst completing")
} catch (err) {
// Handle Error Here
console.error(err);
}
return 0;
}
const sendGetFunder =
async () => {
try {
const resp = await getFunder(query.get("funder"))
console.log(resp.data)
updateResult(arr => [...arr, resp.data].sort(details_compare))
console.log("sendGetFunder completing")
} catch (err) {
// Handle Error Here
console.error(err);
}
return 0;
}
const sendGetJournal =
async () => {
try {
const resp = await getJournal(query.get("journal"))
console.log(resp.data)
updateResult(arr => [...arr, resp.data].sort(details_compare))
console.log("sendGetJournal completing")
} catch (err) {
// Handle Error Here
console.error(err);
}
return 0;
}
//order requests
sendGetCondi()
sendGetInstit().then(
sendGetFunder()
).then(
sendGetJournal()
)
history.push({pathname:`check`, search: `institution=${query.get("institution")}&funder=${query.get("funder")}&journal=${query.get("journal")}`})
}
}
}, [])
//useEffect on Url state change
React.useEffect(() => {
//condition to avoid infinite loop
if (history.location.pathname === "/") {
setConditions([])
setDetails('null')
updateResult([])
setUrl(window.location.href)
}
}, [url]);
function handleReport () {
// ## Create mail template to report a modification, contain the actual Url and the reference Term Card
window.open(`mailto:publishsupport@epfl.ch?subject= OACT Modification request for ${encodeURIComponent(url)} &body=Request Description:`)
}
//copy url to clipboard
function handlShare(e) {
setOpen(true)
navigator.clipboard.writeText(url)
}
const handleClose = () => {
setOpen(false);
};
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, j_only_id)
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, j_only_id)
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, o_only_id)
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, j_only_id)
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}`})
}
}
console.log(`all conditions SET: ${conditions}`)
console.log(details)
console.log(`Selected Institution ID: ${institId} , Selected Funder: ${funderId}, Selected Journal ID: ${journalId}`)
function detailsResult() {
console.log(`details: ${details}`)
console.log(result)
if (details !== 'null') {
return (
<div className={classes.root} >
<Accordion style={{ marginBottom: "2rem"}} defaultExpanded="true">
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography className={classes.heading}>
<p>Selected option(s)</p>
</Typography>
</AccordionSummary>
<Container maxWidth="xl" >
<Grid container spacing={0.5} direction="row">
{result?.map(i => (
<Grid key={i.id} item>
<AccordionDetails>
<DetailCard details={i}/>
</AccordionDetails>
</Grid>
))}
</Grid>
</Container>
</Accordion>
</div>
)
}
}
function conditionResults () {
return (
<div className={classes.root} >
{conditions?.map(i=> (
<ResultCard result={i}/>
))}
</div>
)
}
return (
<Box>
<div id="bannertext">
Your input on OACT is welcome! Do not hesitate to contact <a href="mailto:publishsupport@epfl.ch">publishsupport@epfl.ch</a> for comments or questions,
or use the "Modification request" buttons in the results for feedback regarding specific details.
</div>
<div className={classes.root}>
<Container maxWidth="xl" >
<Grid container spacing={1} direction="row">
<form className={classes.root} 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 Institution"
// margin="normal"
value={institId}
variant="outlined"
/>
)}
/>
{ (institList.length > 0) ?
<p class="field-comment">
{institList.length} institutions
</p>
:
<p class="field-comment">
Loading...
</p>
}
</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"
/>
)}
/>
{ (funderList.length > 0) ?
<p class="field-comment">
{funderList.length} funders
</p>
:
<p class="field-comment">
Loading...
</p>
}
</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"
/>
)}
/>
{ (journalList.length > 0) ?
<p class="field-comment">
{journalList.length} journals
</p>
:
<p class="field-comment">
Loading...
</p>
}
</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" >
{detailsResult()}
{conditionResults()}
{ history.location.pathname === "/" &&
<Welcome />
}
{/* { history.location.pathname === "/" && */}
<Tooltip disableFocusListener title="Share Url" arrow>
<Fab onClick={handlShare} color="primary" aria-label="add">
<ShareIcon />
</Fab>
</Tooltip>
{/* } */}
<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>
<Tooltip disableFocusListener title="Modification Request" arrow>
<Fab onClick={handleReport} color="secondary" aria-label="Report">
<FlagOutlinedIcon fontSize="medium"/>
</Fab >
</Tooltip>
</Container>
</div>
</Box>
);
}
SearchFilterFields.propTypes = {
/** Store the selected option/field Result from API. */
details: PropTypes.object,
/** Store the individual response for each request. */
result: PropTypes.object,
/** Store at the same place the aggregation of all request result */
conditions: PropTypes.object,
/** Manage the loading wheels inside the check button. */
loading: PropTypes.bool
}
c4science · Help