Commit 71b5dcf4 authored by Valeriy Panov's avatar Valeriy Panov
Browse files

search partners menu

parent 29ff5bb4
Pipeline #2932 passed with stages
in 3 minutes and 50 seconds
......@@ -2,7 +2,7 @@ import * as React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as cookies from 'es-cookie';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import {MuiThemeProvider} from 'material-ui/styles';
import Header from './header';
import Footer from './footer/index';
......@@ -10,16 +10,11 @@ import {checkTokenRequest, logoutRequest, loginAppRequest, loginUser} from '../a
import {clearCookies, saveCookies} from '../utilities';
import {ROLE_CLIENT} from '../constants/userRoles';
import {serverInfoRequest} from '../actions/serverInfo';
import theme from '../theme';
const ssr: boolean = process.env.SSR === 'true';
const token: string = typeof window !== 'undefined' && cookies.get('access_token');
const theme = createMuiTheme({
status: {
danger: 'orange',
},
});
interface IAppProps extends React.ClassAttributes<any> {
children: any;
login: any;
......
......@@ -59,7 +59,8 @@ class StepNavigation extends React.Component<IStepNavigationProps, any> {
}
protected getStepId = (location) => {
const path = location.pathname.split('/').pop();
const {uuid} = this.props.params;
const path = location.pathname.split(uuid).pop().replace('/', '');
return steps.find((e) => e.link === path).id;
}
......@@ -68,7 +69,8 @@ class StepNavigation extends React.Component<IStepNavigationProps, any> {
// ACCEPT AND PUBLISH
} else {
const path = steps.find((e) => e.id === this.state.id + 1).link;
this.props.router.push(`/datasets/${this.props.params.uuid}/${path}`);
const {router, params: {uuid}} = this.props;
router.push(`/datasets/${uuid}/${path}`);
}
}
......
import * as React from 'react';
import compose from 'recompose/compose';
import {withStyles} from 'material-ui/styles';
import {StyleRules, withStyles} from 'material-ui/styles';
import Grid from 'material-ui/Grid';
import Checkbox from 'material-ui/Checkbox';
import Divider from 'material-ui/Divider';
import List, {ListItem, ListItemSecondaryAction, ListItemText} from 'material-ui/List';
import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
import IconButton from 'material-ui/IconButton';
import Search from 'material-ui-icons/Search';
import ExpandMoreIcon from 'material-ui-icons/ExpandMore';
......@@ -12,10 +11,15 @@ import Collapse from 'material-ui/transitions/Collapse';
import Hidden from 'material-ui/Hidden';
import * as classNames from 'classnames';
import withWidth from 'material-ui/utils/withWidth';
import DateRange from 'material-ui-icons/DateRange';
import TextField from 'material-ui/TextField';
import ArrowDropUp from 'material-ui-icons/ArrowDropUp';
import Close from 'material-ui-icons/Close';
import Button from 'material-ui/Button';
import MaterialAutosuggest from '../../../common/material-autosuggest';
import countries from '../../../../data/countries';
import {Field} from 'redux-form';
import institutes from '../../../../mock/institutes';
interface ISearchMenuProps extends React.ClassAttributes<any> {
classes: any;
......@@ -44,7 +48,33 @@ const styles = (theme) => ({
flexGrow: {
flex: '1 1 auto',
},
});
instWrapper: {
margin: '3px 16px 0 16px',
},
instItem: {
padding: '12px 16px 12px 16px',
backgroundColor: '#F8F7F5',
display: 'flex',
},
closeIcon: {
display: 'flex',
},
applyReset: {
display: 'flex',
padding: '12px 16px 12px 16px',
},
activeItem: {
'backgroundColor': '#F8F7F5',
'& h3': {
color: '#88ba42',
fontFamily: 'Roboto-Medium',
},
},
searchCountry: {
backgroundColor: '#E8E5E0',
},
greenButton: theme.button.green,
} as StyleRules);
class SearchMenu extends React.Component<ISearchMenuProps, any> {
......@@ -52,16 +82,22 @@ class SearchMenu extends React.Component<ISearchMenuProps, any> {
super(props);
this.state = {
expanded: true,
byDate: false,
byInst: false,
expanded: false,
expandDate: false,
expandInst: false,
country: '',
institute: '',
institutes: [],
dateFrom: null,
dateTo: null,
};
}
public componentDidMount() {
if (['sm', 'xs'].indexOf(this.props.width) !== -1) {
this.setState({expanded: false});
} else {
this.setState({expanded: true});
}
}
......@@ -73,6 +109,50 @@ class SearchMenu extends React.Component<ISearchMenuProps, any> {
this.setState({expanded: !this.state.expanded});
}
private addInstitute = (code: string) => {
if (code && this.state.institutes.indexOf(code) === -1) {
this.setState({institutes: [...this.state.institutes, code]});
}
}
private removeInstitute = (index: number) => {
this.setState({
institutes: [
...this.state.institutes.slice(0, index),
...this.state.institutes.slice(index + 1),
],
});
}
private overflowVisible = (element: HTMLElement) => {
element.style.overflow = 'visible';
element.style.height = 'auto';
}
private overflowHidden = (element: HTMLElement) => {
element.style.overflow = 'hidden';
}
protected apply = () => {
console.log('apply');
}
protected resetInstitutes = () => {
this.setState({institutes: []});
}
protected resetDates = () => {
this.setState({dateFrom: null, dateTo: null});
}
private handleDateFrom = (e) => {
this.setState({dateFrom: e.target.value});
}
private handleDateTo = (e) => {
this.setState({dateTo: e.target.value});
}
public componentWillReceiveProps(nextProps) {
if (['sm', 'xs'].indexOf(nextProps.width) === -1 && !this.state.expanded) {
this.setState({expanded: true});
......@@ -109,11 +189,17 @@ class SearchMenu extends React.Component<ISearchMenuProps, any> {
</Hidden>
</ListItem>
<Collapse in={ this.state.expanded } transitionDuration="auto" unmountOnExit>
<Collapse
in={ this.state.expanded }
transitionDuration="auto"
unmountOnExit
onEntered={ this.overflowVisible }
onExit={ this.overflowHidden }
>
<div>
<Divider />
<ListItem >
<ListItem className={ classes.searchCountry } >
<MaterialAutosuggest
placeholder="Search Country..."
suggestions={ countries }
......@@ -140,25 +226,139 @@ class SearchMenu extends React.Component<ISearchMenuProps, any> {
<Divider />
<ListItem button onClick={ this.handleToggle.bind(this, 'byDate') }>
<ListItem
button
onClick={ this.handleToggle.bind(this, 'expandDate') }
className={ this.state.expandDate ? classes.activeItem : null }
>
<ListItemText primary="BY DATE"/>
<Checkbox
checked={ this.state.byDate }
tabIndex={ -1 }
disableRipple
/>
{
this.state.expandDate && <ArrowDropUp />
}
</ListItem>
<Collapse
in={ this.state.expandDate }
transitionDuration="auto"
unmountOnExit
onEntered={ this.overflowVisible }
onExit={ this.overflowHidden }
>
<div>
<ListItem>
<ListItemIcon>
<DateRange />
</ListItemIcon>
<TextField
label="From"
type="date"
value={ this.state.dateFrom || '' }
onChange={ this.handleDateFrom }
fullWidth
InputLabelProps={ {
shrink: true,
} }
/>
</ListItem>
<ListItem>
<ListItemIcon>
<DateRange />
</ListItemIcon>
<TextField
label="To"
type="date"
value={ this.state.dateTo || '' }
onChange={ this.handleDateTo }
fullWidth
InputLabelProps={ {
shrink: true,
} }
/>
</ListItem>
<div className={ classes.applyReset }>
<Button raised onClick={ this.apply } className={ classes.greenButton }>
Apply
</Button>
<div className={ classes.flexGrow }/>
<Button onClick={ this.resetDates }>
Reset
</Button>
</div>
</div>
</Collapse>
<Divider />
<ListItem button onClick={ this.handleToggle.bind(this, 'byInst') }>
<ListItem
button
onClick={ this.handleToggle.bind(this, 'expandInst') }
className={ this.state.expandInst ? classes.activeItem : null }
>
<ListItemText primary="BY INSTITUTE"/>
<Checkbox
checked={ this.state.byInst }
tabIndex={ -1 }
disableRipple
/>
{
this.state.expandInst && <ArrowDropUp />
}
</ListItem>
<Collapse
in={ this.state.expandInst }
transitionDuration="auto"
unmountOnExit
onEntered={ this.overflowVisible }
onExit={ this.overflowHidden }
>
<div>
<ListItem>
<MaterialAutosuggest
placeholder="Select institute..."
suggestions={ institutes }
suggestionLabel="name"
meta={ {} }
input={ {
value: this.state.institute,
onChange: (e) => {
if (typeof e === 'string') {
if (e) {
const inst = institutes.find((i) => i.name === e).code;
this.addInstitute(inst);
}
this.setState({institute: ''});
} else if (e.target && typeof e.target.value === 'string') {
this.setState({institute: e.target.value});
}
},
onBlur: (e) => {
//
},
} }
/>
</ListItem>
{
this.state.institutes.map((e, i) => (
<div key={ i } className={ classes.instWrapper }>
<div className={ classes.instItem }>
<span>{ e }</span>
<div className={ classes.flexGrow } />
<div className={ classes.closeIcon }>
<Close onClick={ this.removeInstitute.bind(this, i) }/>
</div>
</div>
</div>
))
}
<div className={ classes.applyReset }>
<Button raised onClick={ this.apply } className={ classes.greenButton }>
Apply
</Button>
<div className={ classes.flexGrow }/>
<Button onClick={ this.resetInstitutes }>
Reset
</Button>
</div>
</div>
</Collapse>
<Divider />
</div>
</Collapse>
</List>
......
export default [
{
code: 'ALB026',
name: 'Plant Genetic Resources Center',
},
{
code: 'ARM005',
name: 'Institute of Botany',
},
{
code: 'ARM006',
name: 'Scientific Center of Agriculture',
},
{
code: 'ARM008',
name: 'Scientific Center of Vegetables and Industrial Crops',
},
{
code: 'ARM035',
name: 'Laboratory of Plants Gene Pool and Breeding',
},
{
code: 'ARM059',
name: 'Scientific Center of Agrobiotechnology',
},
];
import {createMuiTheme} from 'material-ui/styles';
const theme = createMuiTheme({
status: {
danger: 'orange',
},
button: {
/* tslint:disable */
green: {
backgroundColor: '#88ba42',
color: '#fff',
'&:hover': {
backgroundColor: '#8fc848',
},
},
/* tslint:enable */
},
});
export default theme;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment