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

import {loginAppRequest, logoutRequest} from 'actions/login';

Matija Obreza's avatar
Matija Obreza committed
9
10
11
12
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';
markchkhotua's avatar
markchkhotua committed
13

14
import {ROLE_ADMINISTRATOR, ROLE_CLIENT, ROLE_USER} from 'constants/userRoles';
15
import {saveCookies} from 'utilities';
Matija Obreza's avatar
Matija Obreza committed
16

17
import UserMenuComponent from './UserMenuComponent';
Matija Obreza's avatar
Matija Obreza committed
18
import LeftMenu from './LeftMenu';
Maxym Borodenko's avatar
Maxym Borodenko committed
19
import LangListComponent from './LangListComponent';
Oleksii Savran's avatar
Header    
Oleksii Savran committed
20
import { ServerLink } from 'ui/catalog/Links';
markchkhotua's avatar
markchkhotua committed
21

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
22
const styleSheet = (theme) => ({
Matija Obreza's avatar
Matija Obreza 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',
        },
Matija Obreza's avatar
Matija Obreza committed
36
    },
37
    blockHeader: {
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
38
39
40
41
        padding: '0 20px',
        [theme.breakpoints.down('sm')]: {
            alignItems: 'baseline' as 'baseline',
        },
42
    },
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
43
    /*tslint:disable*/
Matija Obreza's avatar
Matija Obreza committed
44
45
    navLogo: {
        color: '#e6e5e0',
Matija Obreza's avatar
Matija Obreza committed
46
        padding: '15px 0',
Matija Obreza's avatar
Matija Obreza committed
47
48
        fontSize: '29px',
        height: '100%',
Svetlana Alieksieieva's avatar
Svetlana Alieksieieva committed
49
50
        width: '100%',
        maxWidth: '182px',
Matija Obreza's avatar
Matija Obreza committed
51
52
53
        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'
        },
Matija Obreza's avatar
Matija Obreza committed
59
    },
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
60
    /*tslint:enable*/
Matija Obreza's avatar
Matija Obreza committed
61
    mainIcon: {
Matija Obreza's avatar
Matija Obreza committed
62
63
        height: '42px',
        // width: '29%',
Maxim Babichev's avatar
Maxim Babichev committed
64
        paddingRight: '0.7143rem',
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
65
        paddingLeft: '0.7143rem',
Matija Obreza's avatar
Matija Obreza committed
66
67
68
69
70
        paddingBottom: '0px',
        display: 'inline-block',
        verticalAlign: 'middle',
    },
    logoIcon: {
Matija Obreza's avatar
Matija Obreza committed
71
72
        height: '27px',
        // width: '60%',
Matija Obreza's avatar
Matija Obreza committed
73
74
75
76
77
        display: 'inline-block',
        verticalAlign: 'middle',
    },
    loginButton: {
        color: '#ffffff',
Matija Obreza's avatar
Matija Obreza committed
78
        float: 'right' as 'right',
Matija Obreza's avatar
Matija Obreza committed
79
80
81
82
83
84
85
86
87
88
89
    },
    /* tslint:disable */
    linkLogin: {
        fontSize: '18px',
        color: '#ffffff',
        cursor: 'pointer',
        '&:hover': {
            color: '#88ba42',
            textDecoration: 'none',
        },
    },
Maxim Babichev's avatar
Maxim Babichev committed
90
91
92
    menuBtn: {
        width: '1em',
        marginRight: '1.429rem',
93
94
95
        '&:hover': {
            backgroundColor: 'transparent' as 'transparent',
        }
Maxim Babichev's avatar
Maxim Babichev committed
96
    },
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
97
98
99
100
101
    mobileHidden: {
        [theme.breakpoints.down('sm')]: {
            display: 'none'
        },
    },
102
    /* tslint:enable */
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
103
});
Matija Obreza's avatar
Matija Obreza committed
104

markchkhotua's avatar
markchkhotua committed
105
106
interface IHeaderProps extends React.ClassAttributes<any> {
    login: any;
Valeriy Panov's avatar
Valeriy Panov committed
107
    logoutRequest: () => Promise<any>;
108
    loginAppRequest: () => Promise<any>;
Maxym Borodenko's avatar
Maxym Borodenko committed
109
    history: any;
Matija Obreza's avatar
Matija Obreza committed
110
    classes?: any;
markchkhotua's avatar
markchkhotua committed
111
}
markchkhotua's avatar
markchkhotua committed
112

Matija Obreza's avatar
Matija Obreza committed
113
class Header extends React.Component<IHeaderProps | any, any> {
markchkhotua's avatar
markchkhotua committed
114

Matija Obreza's avatar
Matija Obreza committed
115
116
117
118
119
120
121
122
    public constructor(props: any) {
        super(props);

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

markchkhotua's avatar
markchkhotua committed
123
    private logout = () => {
Valeriy Panov's avatar
Valeriy Panov committed
124
125
126
        this.props.logoutRequest()
            .then(() => this.props.loginAppRequest())
            .then((data) => {
127
128
                // console.log('Logout', data);
                saveCookies({access_token: data.access_token, authorities: [ROLE_CLIENT]}, data.exp * 1000 || new Date().getTime() + data.expires_in * 1000);
Maxym Borodenko's avatar
Maxym Borodenko committed
129
                this.props.history.push('/login');
Valeriy Panov's avatar
Valeriy Panov committed
130
            });
markchkhotua's avatar
markchkhotua committed
131
132
    }

133
134
135
136
137
138
139
140
    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)) {
Maxym Borodenko's avatar
Maxym Borodenko committed
141
            return <UserMenuComponent userName={ this.props.login.user_name } logoutRequest={ this.logout }/>;
markchkhotua's avatar
markchkhotua committed
142
        } else {
Matija Obreza's avatar
Matija Obreza committed
143
144
            const { t } = this.props;
            return <Link className={ this.props.classes.linkLogin } to="/login">{ t('common:action.login') }</Link>;
markchkhotua's avatar
markchkhotua committed
145
146
147
        }
    }

Matija Obreza's avatar
Matija Obreza committed
148
149
150
151
152
153
154
    private toggleDrawer = (flag) => {
        this.setState({ open: flag });
    }
    private handleLeftMenuClose = () => this.toggleDrawer(false);

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

markchkhotua's avatar
markchkhotua committed
155
    public render() {
156

Oleksii Savran's avatar
Header    
Oleksii Savran committed
157
        const { classes, t, baseUrl } = this.props;
158

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

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
168
                            <LeftMenu open={ this.state.open } closeMenu={ this.handleLeftMenuClose } />
Maxim Babichev's avatar
Maxim Babichev committed
169
                        </div>
Matija Obreza's avatar
Matija Obreza committed
170

171
                        <div className={ classes.flex }>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
172
                            <ServerLink link={ baseUrl } classes={ `float-left ${this.props.classes.navLogo} ${classes.mobileHidden}` }>
173
174
                                <img src="images/GENESYS-ICON.svg" className={ classes.mainIcon } />
                                <img src="images/GENESYS-LOGO.svg" className={ classes.logoIcon } />
Oleksii Savran's avatar
Header    
Oleksii Savran committed
175
                            </ServerLink>
Matija Obreza's avatar
Matija Obreza committed
176
                            <div className="navigation-block">
Matija Obreza's avatar
Matija Obreza committed
177
                                <NavLink activeClassName="active" to="/datasets">{ t('menu.Datasets') }</NavLink>
Oleksii Savran's avatar
Header    
Oleksii Savran committed
178
                                <NavLink activeClassName="active" to="/partners">{ t('menu.Data providers') }</NavLink>
Matija Obreza's avatar
Matija Obreza committed
179
                                <NavLink activeClassName="active" to="/descriptorlists">{ t('menu.Descriptor lists') }</NavLink>
Matija Obreza's avatar
Matija Obreza committed
180
181
                            </div>
                        </div>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
182
                        <div className="float-right">{ this.renderLogin([ROLE_USER, ROLE_ADMINISTRATOR]) }</div>
Maxym Borodenko's avatar
Maxym Borodenko committed
183
184
185
186

                        <div>
                            <LangListComponent />
                        </div>
Matija Obreza's avatar
Matija Obreza committed
187
188
                    </Toolbar>
                </AppBar>
markchkhotua's avatar
markchkhotua committed
189
190
191
192
193
194
195
196
            </div>
        );
    }

}

const mapStateToProps = (state) => ({
    login: state.login,
197
    baseUrl: state.applicationConfig.apiUrl,
markchkhotua's avatar
markchkhotua committed
198
199
});

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
200
201
202
203
204
205
const mapDispatchToProps = (dispatch) => bindActionCreators({
    loginAppRequest,
    logoutRequest,
}, dispatch);

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