Commit 0ef78e1b authored by Viacheslav Pavlov's avatar Viacheslav Pavlov
Browse files

Add number indicator to My List

parent 16a2c31b
......@@ -10,7 +10,6 @@ import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import * as PropTypes from 'prop-types';
import * as moment from 'moment';
import Page from 'model/Page';
......@@ -78,11 +77,6 @@ const styles = (theme) => ({
class DataTable extends React.Component<IDataTableProps, any> {
public static propTypes = {
pageObj: PropTypes.object.isRequired,
path: PropTypes.string.isRequired,
};
public render() {
const {classes, pageObj, path, showStatus} = this.props;
return (
......@@ -142,7 +136,7 @@ class DataTable extends React.Component<IDataTableProps, any> {
</Table>
</Paper>
);
};
}
}
......
......@@ -6,6 +6,7 @@ import Drawer from '@material-ui/core/Drawer';
import ListItem from '@material-ui/core/ListItem';
import { NavLink, Link } from 'react-router-dom';
import Close from '@material-ui/icons/Close';
import MyListCount from './MyListCount';
const styleSheet = (theme) => ({
flex: {
......@@ -61,6 +62,7 @@ const styleSheet = (theme) => ({
interface ILeftMenuProps extends React.ClassAttributes<any> {
open: any;
myListItemsCount: number;
closeMenu: (flag) => any;
classes: any;
t: any;
......@@ -69,7 +71,7 @@ interface ILeftMenuProps extends React.ClassAttributes<any> {
class LeftMenu extends React.Component<ILeftMenuProps, any> {
public render() {
const { t } = this.props;
const { t, myListItemsCount } = this.props;
const closeBtn = {
color: '#fff',
......@@ -104,6 +106,9 @@ class LeftMenu extends React.Component<ILeftMenuProps, any> {
<ListItem button>
<NavLink activeClassName="active" to="/c">{ t('menu.Crops') }</NavLink>
</ListItem>
<ListItem button>
<NavLink activeClassName="active" to="/sel">{ t('menu.My List') }<MyListCount style={ {float: 'right', margin: '4px 0', fontSize: 'initial'} } count={ myListItemsCount }/></NavLink>
</ListItem>
</div>
</Drawer>
</div>
......
import * as React from 'react';
import withStyles from '@material-ui/core/styles/withStyles';
const styles = () => ({
root: {
backgroundColor: 'grey',
borderRadius: '50%',
marginLeft: '10px',
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
fontSize: '14px',
minHeight: '1.6em',
minWidth: '1.6em',
},
});
const MyListCount = ({count, classes, classname = '', style = {}}) => (
<span style={ style } className={ `${classes.root} ${classname}` }>{ count }</span>
);
export default withStyles(styles)(MyListCount);
......@@ -18,6 +18,7 @@ import UserLoginMenuComponent from './UserLoginMenu';
import UserMenuComponent from './UserMenuComponent';
import LeftMenu from './LeftMenu';
import LangListComponent from './LangListComponent';
import MyListCount from './MyListCount';
const styleSheet = (theme) => ({
root: {
......@@ -108,6 +109,7 @@ interface IHeaderProps extends React.ClassAttributes<any> {
loginAppRequest: () => Promise<any>;
history: any;
classes?: any;
myListItemsCount: number;
}
class Header extends React.Component<IHeaderProps | any, any> {
......@@ -151,7 +153,7 @@ class Header extends React.Component<IHeaderProps | any, any> {
public render() {
const { classes, t } = this.props;
const { classes, myListItemsCount, t } = this.props;
return (
<div className="header-bar">
......@@ -162,7 +164,7 @@ class Header extends React.Component<IHeaderProps | any, any> {
<img src="images/GENESYS-ICON.svg" className={ classes.logoIcon } />
</IconButton>
<LeftMenu open={ this.state.open } closeMenu={ this.handleLeftMenuClose } />
<LeftMenu open={ this.state.open } closeMenu={ this.handleLeftMenuClose } myListItemsCount={ myListItemsCount }/>
</div>
<div className={ classes.flex }>
......@@ -175,7 +177,7 @@ class Header extends React.Component<IHeaderProps | any, any> {
<NavLink activeClassName="active" to="/subsets">{ t('menu.Subsets') }</NavLink>
<NavLink activeClassName="active" to="/wiews">{ t('menu.Institutes') }</NavLink>
<NavLink activeClassName="active" to="/c">{ t('menu.Crops') }</NavLink>
<NavLink activeClassName="active" to="/sel">{ t('menu.My List') }</NavLink>
<NavLink activeClassName="active" to="/sel">{ t('menu.My List') }<MyListCount count={ myListItemsCount }/></NavLink>
</div>
</div>
<div className="float-right">{ this.renderLogin([ROLE_USER, ROLE_ADMINISTRATOR]) }</div>
......@@ -193,6 +195,7 @@ class Header extends React.Component<IHeaderProps | any, any> {
const mapStateToProps = (state) => ({
login: state.login,
myListItemsCount: state.list.public.myList.count,
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
......
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