Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F76026915
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
Mon, Aug 5, 19:40
Size
19 KB
Mime Type
text/x-java
Expires
Wed, Aug 7, 19:40 (2 d)
Engine
blob
Format
Raw Data
Handle
19651265
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