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

rOACCT/assets/src/pages/SearchFilterFields.md
dcd9c0250b6bissn4frontend

Last Change
Raw File

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_.
c4science · Help