index.tsx 6.52 KB
Newer Older
Maxym Borodenko's avatar
Maxym Borodenko committed
1
2
import * as React from 'react';
import { connect } from 'react-redux';
Matija Obreza's avatar
Matija Obreza committed
3
import {bindActionCreators} from 'redux';
Maxym Borodenko's avatar
Maxym Borodenko committed
4
5
import { NavLink, Link, withRouter } from 'react-router-dom';
import { translate } from 'react-i18next';
Matija Obreza's avatar
Matija Obreza committed
6

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
7
import {loginAppRequest} from 'actions/login';
8
import {logoutRequest} from 'user/actions/public';
Matija Obreza's avatar
Matija Obreza committed
9

Matija Obreza's avatar
Matija Obreza committed
10
11
12
13
import AppBar from '@material-ui/core/AppBar';
import { withStyles } from '@material-ui/core/styles';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
Maxym Borodenko's avatar
Maxym Borodenko committed
14

15
import {ROLE_ADMINISTRATOR, ROLE_USER} from 'constants/userRoles';
Maxym Borodenko's avatar
Maxym Borodenko committed
16

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
17
import UserLoginMenuComponent from './UserLoginMenu';
Maxym Borodenko's avatar
Maxym Borodenko committed
18
19
20
import UserMenuComponent from './UserMenuComponent';
import LeftMenu from './LeftMenu';
import LangListComponent from './LangListComponent';
21
import MyListCount from './MyListCount';
Maxym Borodenko's avatar
Maxym Borodenko committed
22

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
23
const styleSheet = (theme) => ({
Maxym Borodenko's avatar
Maxym Borodenko committed
24
25
26
27
28
29
30
31
32
33
    root: {
        marginTop: 90,
        width: '100%',
    },
    flex: {
        flex: 1,
    },
    headerRoot: {
        backgroundColor: '#2b2924',
        height: 'auto',
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
34
35
36
        [theme.breakpoints.down('sm')]: {
          height: '3.5rem',
        },
Maxym Borodenko's avatar
Maxym Borodenko committed
37
38
39
    },
    blockHeader: {
      padding: '0 20px',
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
40
41
42
      [theme.breakpoints.down('sm')]: {
        alignItems: 'baseline' as 'baseline',
      },
Maxym Borodenko's avatar
Maxym Borodenko committed
43
    },
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
44
    /*tslint:disable*/
Maxym Borodenko's avatar
Maxym Borodenko committed
45
46
47
48
49
50
51
52
53
54
    navLogo: {
        color: '#e6e5e0',
        padding: '15px 0',
        fontSize: '29px',
        height: '100%',
        width: '100%',
        maxWidth: '182px',
        marginRight: '68px',
        lineHeight: '22px',
        display: 'block',
Matija Obreza's avatar
Matija Obreza committed
55
        boxSizing: 'border-box' as 'border-box',
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
56
57
58
59
        'html[dir="rtl"] &': {
            marginRight: '0 !important',
            marginLeft: '68px !important'
        },
Maxym Borodenko's avatar
Maxym Borodenko committed
60
    },
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
61
    /*tslint:enable*/
Maxym Borodenko's avatar
Maxym Borodenko committed
62
63
64
65
    mainIcon: {
        height: '42px',
        // width: '29%',
        paddingRight: '0.7143rem',
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
66
        paddingLeft: '0.7143rem',
Maxym Borodenko's avatar
Maxym Borodenko committed
67
68
69
70
71
72
73
74
75
76
77
78
        paddingBottom: '0px',
        display: 'inline-block',
        verticalAlign: 'middle',
    },
    logoIcon: {
        height: '27px',
        // width: '60%',
        display: 'inline-block',
        verticalAlign: 'middle',
    },
    loginButton: {
        color: '#ffffff',
Matija Obreza's avatar
Matija Obreza committed
79
        float: 'right' as 'right',
Maxym Borodenko's avatar
Maxym Borodenko committed
80
81
82
83
84
85
86
87
88
89
90
91
92
93
    },
    /* tslint:disable */
    linkLogin: {
        fontSize: '18px',
        color: '#ffffff',
        cursor: 'pointer',
        '&:hover': {
            color: '#88ba42',
            textDecoration: 'none',
        },
    },
    menuBtn: {
        width: '1em',
        marginRight: '1.429rem',
Maxym Borodenko's avatar
Maxym Borodenko committed
94
95
96
        '&:hover': {
            backgroundColor: 'transparent' as 'transparent',
        }
Maxym Borodenko's avatar
Maxym Borodenko committed
97
    },
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
98
99
100
101
102
    mobileHidden: {
      [theme.breakpoints.down('sm')]: {
        display: 'none'
      },
    },
Maxym Borodenko's avatar
Maxym Borodenko committed
103
    /* tslint:enable */
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
104
});
Maxym Borodenko's avatar
Maxym Borodenko committed
105
106
107
108
109
110

interface IHeaderProps extends React.ClassAttributes<any> {
    login: any;
    logoutRequest: () => Promise<any>;
    loginAppRequest: () => Promise<any>;
    history: any;
Matija Obreza's avatar
Matija Obreza committed
111
    classes?: any;
112
    myListItemsCount: number;
Maxym Borodenko's avatar
Maxym Borodenko committed
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
}

class Header extends React.Component<IHeaderProps | any, any> {

    public constructor(props: any) {
        super(props);

        this.state = {
            open: false,
        };
    }

    private logout = () => {
        this.props.logoutRequest()
            .then(() => this.props.loginAppRequest())
            .then((data) => {
                this.props.history.push('/login');
            });
    }

    private hasRole = (roles: string[]): boolean => {
        return this.props.login.authorities
            .map((e) => roles.indexOf(e) > -1)
            .reduce((p, c) => p || c);
    }

    private renderLogin = (roles: string[]) => {
        if (this.hasRole(roles)) {
            return <UserMenuComponent userName={ this.props.login.user_name } logoutRequest={ this.logout }/>;
        } else {
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
143
            return <UserLoginMenuComponent />;
Maxym Borodenko's avatar
Maxym Borodenko committed
144
145
146
147
148
149
150
151
152
153
154
155
        }
    }

    private toggleDrawer = (flag) => {
        this.setState({ open: flag });
    }
    private handleLeftMenuClose = () => this.toggleDrawer(false);

    private handleLeftMenuOpen = () => this.toggleDrawer(true);

    public render() {

156
        const { classes, myListItemsCount, t } = this.props;
Maxym Borodenko's avatar
Maxym Borodenko committed
157
158
159

        return (
            <div className="header-bar">
Matija Obreza's avatar
Matija Obreza committed
160
                <AppBar position="fixed" className={ classes.headerRoot } >
Maxym Borodenko's avatar
Maxym Borodenko committed
161
162
                    <Toolbar className={ classes.blockHeader }>
                        <div className="mobile-navigation-block">
Matija Obreza's avatar
Matija Obreza committed
163
                            <IconButton className={ classes.menuBtn } aria-label="Menu" color="secondary" onClick={ this.handleLeftMenuOpen } >
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
164
                              <img src="images/GENESYS-ICON.svg" className={ classes.logoIcon } />
Maxym Borodenko's avatar
Maxym Borodenko committed
165
166
                            </IconButton>

167
                            <LeftMenu open={ this.state.open } closeMenu={ this.handleLeftMenuClose } myListItemsCount={ myListItemsCount }/>
Maxym Borodenko's avatar
Maxym Borodenko committed
168
169
170
                        </div>

                        <div className={ classes.flex }>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
171
                            <Link to="/" className={ `float-left ${this.props.classes.navLogo} ${classes.mobileHidden}` }>
172
173
                                <img src="images/GENESYS-ICON.svg" className={ classes.mainIcon } />
                                <img src="images/GENESYS-LOGO.svg" className={ classes.logoIcon } />
Maxym Borodenko's avatar
Maxym Borodenko committed
174
                            </Link>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
175
                            <div className="navigation-block float-right">
176
                              <NavLink activeClassName="active" to="/a">{ t('menu.Accessions') }</NavLink>
Matija Obreza's avatar
Subsets    
Matija Obreza committed
177
                              <NavLink activeClassName="active" to="/subsets">{ t('menu.Subsets') }</NavLink>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
178
                              <NavLink activeClassName="active" to="/wiews">{ t('menu.Institutes') }</NavLink>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
179
                              <NavLink activeClassName="active" to="/c">{ t('menu.Crops') }</NavLink>
180
                              <NavLink activeClassName="active" to="/sel">{ t('menu.My List') }<MyListCount count={ myListItemsCount }/></NavLink>
Maxym Borodenko's avatar
Maxym Borodenko committed
181
182
                            </div>
                        </div>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
183
                        <div className="float-right">{ this.renderLogin([ROLE_USER, ROLE_ADMINISTRATOR]) }</div>
Maxym Borodenko's avatar
Maxym Borodenko committed
184
185
186
187
188
189
190
191
192
193
194
195
196
197

                        <div>
                            <LangListComponent />
                        </div>
                    </Toolbar>
                </AppBar>
            </div>
        );
    }

}

const mapStateToProps = (state) => ({
    login: state.login,
198
    myListItemsCount: state.list.public.myList.count,
Maxym Borodenko's avatar
Maxym Borodenko committed
199
200
});

Matija Obreza's avatar
Matija Obreza committed
201
202
203
204
205
206
const mapDispatchToProps = (dispatch) => bindActionCreators({
  loginAppRequest,
  logoutRequest,
}, dispatch);

export default translate()(withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styleSheet)(Header))));