index.tsx 6.31 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
21
import UserMenuComponent from './UserMenuComponent';
import LeftMenu from './LeftMenu';
import LangListComponent from './LangListComponent';

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

interface IHeaderProps extends React.ClassAttributes<any> {
    login: any;
    logoutRequest: () => Promise<any>;
    loginAppRequest: () => Promise<any>;
    history: any;
Matija Obreza's avatar
Matija Obreza committed
110
    classes?: any;
Maxym Borodenko's avatar
Maxym Borodenko committed
111
112
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
}

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
141
            return <UserLoginMenuComponent />;
Maxym Borodenko's avatar
Maxym Borodenko committed
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
        }
    }

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

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

    public render() {

        const { classes, t } = this.props;

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

                            <LeftMenu open={ this.state.open } closeMenu={ this.handleLeftMenuClose } />
                        </div>

                        <div className={ classes.flex }>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
169
                            <Link to="/" className={ `float-left ${this.props.classes.navLogo} ${classes.mobileHidden}` }>
170
171
                                <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
172
                            </Link>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
173
                            <div className="navigation-block float-right">
174
                              <NavLink activeClassName="active" to="/a">{ t('menu.Accessions') }</NavLink>
Matija Obreza's avatar
Subsets    
Matija Obreza committed
175
                              <NavLink activeClassName="active" to="/subsets">{ t('menu.Subsets') }</NavLink>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
176
                              <NavLink activeClassName="active" to="/wiews">{ t('menu.Institutes') }</NavLink>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
177
                              <NavLink activeClassName="active" to="/c">{ t('menu.Crops') }</NavLink>
178
                              <NavLink activeClassName="active" to="/sel">{ t('menu.My List') }</NavLink>
Maxym Borodenko's avatar
Maxym Borodenko committed
179
180
                            </div>
                        </div>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
181
                        <div className="float-right">{ this.renderLogin([ROLE_USER, ROLE_ADMINISTRATOR]) }</div>
Maxym Borodenko's avatar
Maxym Borodenko committed
182
183
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,
});

Matija Obreza's avatar
Matija Obreza committed
198
199
200
201
202
203
const mapDispatchToProps = (dispatch) => bindActionCreators({
  loginAppRequest,
  logoutRequest,
}, dispatch);

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