Commit c12161e8 authored by Maxim Babichev's avatar Maxim Babichev
Browse files

Dataset registration progress

parent 7002eeb5
Pipeline #3548 passed with stages
in 4 minutes and 30 seconds
......@@ -75,6 +75,8 @@ class StepNavigation extends React.Component<IStepNavigationProps, any> {
const path = steps.find((e) => e.id === id).link;
const {router, params: {uuid}} = this.props;
router.push(`/datasets/${uuid}/${path}`);
steps.forEach((i) => i.active = false);
steps[id - 1].active = true;
}
}
......
......@@ -7,6 +7,7 @@ interface IStepProgressProps extends React.ClassAttributes<any> {
classes: any;
step: number;
completed: number;
active: boolean;
}
const styleSheet = {
......@@ -21,7 +22,7 @@ const styleSheet = {
height: '30px',
width: '30px',
},
spanWrapper: {
spanWrapperActive: {
lineHeight: '30px',
fontSize: '21px',
textAlign: 'center',
......@@ -29,6 +30,14 @@ const styleSheet = {
borderRadius: '15px',
color: '#ffffff',
},
spanWrapper: {
lineHeight: '30px',
fontSize: '21px',
textAlign: 'center',
backgroundColor: '#d4d1c6',
borderRadius: '15px',
color: '#ffffff',
},
span: {
display: 'inline-block',
verticalAlign: 'middle',
......@@ -40,7 +49,7 @@ class StepProgress extends React.Component<IStepProgressProps, any> {
public render() {
const {classes, completed, step} = this.props;
const {classes, completed, step, active} = this.props;
return (
<div className={ classes.root }>
......@@ -49,7 +58,7 @@ class StepProgress extends React.Component<IStepProgressProps, any> {
<CheckCircle className={ classes.circle } />
:
(
<div className={ classes.spanWrapper }>
<div className={ active ? classes.spanWrapperActive : classes.spanWrapper }>
<span className={ classes.span }>{ step }</span>
</div>
)
......
import * as React from 'react';
import {withStyles} from 'material-ui/styles';
import {ListItem, ListItemIcon, ListItemText} from 'material-ui/List';
import StepProgress from './StepProgress';
import steps from '../../../../../data/Steps';
interface ICustomListItemProps extends React.ClassAttributes<any> {
classes: any;
step: number;
completed: boolean;
active: boolean;
i: number;
e: any;
params: any;
router: any;
}
const styles = {
text: {
'& h3': {
fontFamily: 'Roboto-Medium',
color: '#d4d1c6',
},
},
textActive: {
'& h3': {
fontFamily: 'Roboto',
fontWeight: 'bold' as 'bold',
color: '#2b2924',
},
},
};
class CustomListItem extends React.Component<ICustomListItemProps, any> {
protected handleClick(i, disabled) {
if (!disabled) {
this.props.router.push(`/datasets/${this.props.params.uuid}/${steps[i].link}`);
}
steps.forEach((i) => i.active = false);
steps[i].active = true;
}
public render() {
const { active, classes, i, e } = this.props;
return (
<div className={ classes.root }>
{
active ? <span className={ `arrow` }/> : null
}
<ListItem button key={ i } divider onClick={ this.handleClick.bind(this, i, false) }>
<ListItemIcon>
<StepProgress step={ i + 1 } completed={ false } active={ active ? true : false }/>
</ListItemIcon>
<ListItemText primary={ e.name } className={ active ? classes.textActive : classes.text }/>
</ListItem>
</div>
);
};
}
export default withStyles(styles)<any>(CustomListItem);
......@@ -2,16 +2,16 @@ import * as React from 'react';
import {connect} from 'react-redux';
import { Link } from 'react-router';
import {withStyles} from 'material-ui/styles';
import List, {ListItem, ListItemIcon, ListItemText} from 'material-ui/List';
import Typography from 'material-ui/Typography';
import List, {ListItem, ListItemText} from 'material-ui/List';
import StepProgress from './StepProgress';
import steps from '../../../../../data/Steps';
import StepsListItem from './StepsListItem';
interface IProgressMenuProps extends React.ClassAttributes<any> {
classes: any;
router: any;
params: any;
location: any;
}
const styleSheet = (theme) => ({
......@@ -27,28 +27,24 @@ const styleSheet = (theme) => ({
},
boxShadow: '-4px 0px 2px -1px rgba(0, 0, 0, 0.2)',
},
/* tslint:enable */
title: {
lineHeight: '50px',
},
text: {
'& h3': { // tslint disable-line
fontFamily: 'Roboto-Medium',
},
},
});
class ProgressMenu extends React.Component<IProgressMenuProps, any> {
protected handleClick(i, disabled) {
if (!disabled) {
this.props.router.push(`/datasets/${this.props.params.uuid}/${steps[i].link}`);
}
public componentWillMount() {
steps.forEach( (i) => {
i.active = false;
const path = this.props.location.pathname.split('/');
let lastPath = path[path.length - 1];
path.length < 4 ? lastPath = '' : null;
i.link === lastPath ? i.active = true : null;
} );
}
public render() {
const classes = this.props.classes;
const {classes, router, params} = this.props;
return (
<List className={ classes.root }>
......@@ -57,12 +53,14 @@ class ProgressMenu extends React.Component<IProgressMenuProps, any> {
</ListItem>
{
steps.map((e, i) => (
<ListItem button key={ i } divider onClick={ this.handleClick.bind(this, i, false) }>
<ListItemIcon>
<StepProgress step={ i + 1 } completed={ false }/>
</ListItemIcon>
<ListItemText primary={ e.name }/>
</ListItem>
<StepsListItem
active={ e.active }
key={ i }
i={ i }
e = { e }
router = { router }
params = { params }
/>
),
)
}
......
......@@ -3,31 +3,37 @@ const steps = [
id: 1,
name: 'Basic information',
link: '',
active: false,
},
{
id: 2,
name: 'Dataset creator',
link: 'dataset-creator',
active: false,
},
{
id: 3,
name: 'Timing and location',
link: 'timing-and-location',
active: false,
},
{
id: 4,
name: 'List of accessions',
link: 'list-of-accessions',
active: false,
},
{
id: 5,
name: 'Traits observed',
link: 'traits-observed',
active: false,
},
{
id: 6,
name: 'Review and publish',
link: 'review-and-publish',
active: false,
},
];
......
......@@ -318,4 +318,16 @@ a:visited {
.leaflet-container {
height: inherit;
width: inherit;
}
\ No newline at end of file
}
.arrow {
position: absolute;
left: -8px;
margin-top: 16px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right:8px solid #fff;
filter: drop-shadow(-2px 0 2px rgba(0, 0, 0, 0.2));
}
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