Add number indicator to My List

src/ui/common/tables/DataTable.tsx

@@ -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>
         );
-    };
+    }
 
 }
 

src/ui/layout/Header/LeftMenu.tsx

@@ -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>

src/ui/layout/Header/MyListCount.tsx

+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);

src/ui/layout/Header/index.tsx

@@ -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({