initial docker setup
This commit is contained in:
GotPPay
107
frontend/src/mainComponents/menu/Menu.jsx
Normal file
107
frontend/src/mainComponents/menu/Menu.jsx
Normal file
@@ -0,0 +1,107 @@
|
||||
import React, {Component} from 'react';
|
||||
import {connect} from 'react-redux';
|
||||
import {Link} from 'react-router-dom';
|
||||
import {
|
||||
Collapse,
|
||||
Navbar,
|
||||
NavbarToggler,
|
||||
NavbarBrand,
|
||||
Nav,
|
||||
NavItem,
|
||||
NavLink
|
||||
} from 'reactstrap';
|
||||
import {fetchCartCount} from '../../actions/cart/cartActions';
|
||||
import {resetActiveSubModule} from '../../actions/page/pageActions';
|
||||
import CartIcon from '../../containers/cart/components/CartIcon.jsx';
|
||||
import Submenu from './Submenu.jsx';
|
||||
import './menu.css';
|
||||
import logoWhite from '../../svg/logoWhite.svg';
|
||||
|
||||
class Menu extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.toggle = this.toggle.bind(this);
|
||||
this.toggleSubmenu = this.toggleSubmenu.bind(this);
|
||||
this.toggleDropdown = this.toggleDropdown.bind(this);
|
||||
this.state = {
|
||||
isOpen: false,
|
||||
isSubmenuOpen: false,
|
||||
dropdownOpen: false
|
||||
};
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.setState({
|
||||
isOpen: !this.state.isOpen
|
||||
});
|
||||
}
|
||||
|
||||
toggleSubmenu() {
|
||||
this.setState({
|
||||
isSubmenuOpen: !this.state.isSubmenuOpen
|
||||
});
|
||||
}
|
||||
|
||||
toggleDropdown() {
|
||||
this.setState({
|
||||
dropdownOpen: !this.state.dropdownOpen
|
||||
});
|
||||
}
|
||||
|
||||
isInMenu(module) {
|
||||
return parseInt(module.isInMenu, 10) === 1;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.props.dispatch(fetchCartCount());
|
||||
}
|
||||
|
||||
onModuleClick(moduleName){
|
||||
this.props.dispatch(resetActiveSubModule());
|
||||
this.props.addActiveClass(moduleName);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {wiaasModules} = this.props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Navbar id="main-menu-bar" className="navigation-bar" dark expand="md">
|
||||
<NavbarBrand tag={Link} to="/"><img className="logo-image" src={logoWhite} alt="WIAAS" /></NavbarBrand>
|
||||
<NavbarToggler onClick={this.toggle}/>
|
||||
<Collapse isOpen={this.state.isOpen} navbar>
|
||||
<Nav className="mr-auto" navbar>
|
||||
{
|
||||
(wiaasModules && wiaasModules.modules) &&
|
||||
wiaasModules.modules.filter(this.isInMenu).map((module, index) =>
|
||||
<NavItem key={index}
|
||||
id={"nav-button-" + module.url}
|
||||
className={(this.props.activeModule === module.url) ? "navbar-button active" : "navbar-button"}
|
||||
onClick={() => this.onModuleClick(module.url)}>
|
||||
<NavLink tag={Link} to={'/' + module.url}>{module.menuName}</NavLink>
|
||||
</NavItem>
|
||||
)
|
||||
}
|
||||
</Nav>
|
||||
<Nav className="nav-btn-cart navbar-right" navbar>
|
||||
<NavItem id="nav-button-cart">
|
||||
<NavLink tag={Link} to="/cart">
|
||||
<span className="fa fa-shopping-cart cart-icon"></span>
|
||||
<CartIcon cartCount={this.props.cartCount} />
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
</Collapse>
|
||||
</Navbar>
|
||||
<Submenu activeModule={this.props.activeModule}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
const mapStateToProps = (state) => ({
|
||||
wiaasModules: state.auth.modules,
|
||||
cartCount: state.cartReducer.cartCount
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps)(Menu);
|
||||
128
frontend/src/mainComponents/menu/Submenu.jsx
Normal file
128
frontend/src/mainComponents/menu/Submenu.jsx
Normal file
@@ -0,0 +1,128 @@
|
||||
import React, {Component} from 'react';
|
||||
import {connect} from 'react-redux';
|
||||
import {Link} from 'react-router-dom';
|
||||
import {
|
||||
Collapse,
|
||||
Navbar,
|
||||
NavbarToggler,
|
||||
Nav,
|
||||
NavItem,
|
||||
NavLink,
|
||||
Dropdown,
|
||||
DropdownToggle,
|
||||
DropdownMenu,
|
||||
DropdownItem
|
||||
} from 'reactstrap';
|
||||
import {logout} from '../../actions/login/authActions';
|
||||
import {setActiveSubModule} from '../../actions/page/pageActions';
|
||||
import {recieveProfileInfo} from '../../actions/profileSettings/profileSettingsActions';
|
||||
import CoMarketCatalogSelect from '../../containers/coMarket/components/CoMarketCatalogSelect.jsx';
|
||||
import {menuTexts} from '../../constants/menuConstants';
|
||||
|
||||
const extraSubmenuContent = {
|
||||
'co-market': CoMarketCatalogSelect,
|
||||
'cart': CoMarketCatalogSelect
|
||||
};
|
||||
|
||||
class Submenu extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.toggle = this.toggle.bind(this);
|
||||
this.toggleSubmenu = this.toggleSubmenu.bind(this);
|
||||
this.toggleDropdown = this.toggleDropdown.bind(this);
|
||||
this.logoutHandle = this.logoutHandle.bind(this);
|
||||
this.state = {
|
||||
isOpen: false,
|
||||
isSubmenuOpen: false,
|
||||
dropdownOpen: false
|
||||
};
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.setState({
|
||||
isOpen: !this.state.isOpen
|
||||
});
|
||||
}
|
||||
|
||||
toggleSubmenu() {
|
||||
this.setState({
|
||||
isSubmenuOpen: !this.state.isSubmenuOpen
|
||||
});
|
||||
}
|
||||
|
||||
toggleDropdown() {
|
||||
this.setState({
|
||||
dropdownOpen: !this.state.dropdownOpen
|
||||
});
|
||||
}
|
||||
|
||||
logoutHandle() {
|
||||
this.props.dispatch(logout());
|
||||
this.props.dispatch(recieveProfileInfo({}));
|
||||
};
|
||||
|
||||
isInMenu(module) {
|
||||
return parseInt(module.isInMenu, 10) === 1;
|
||||
}
|
||||
|
||||
setActiveSubmodule(submoduleName) {
|
||||
this.props.dispatch(setActiveSubModule(submoduleName));
|
||||
}
|
||||
|
||||
render() {
|
||||
const {wiaasModules, userInfo, activeModule, profileInfo, urlParams} = this.props;
|
||||
const TagName = extraSubmenuContent[activeModule] || null;
|
||||
|
||||
return (
|
||||
<Navbar id="secondary-menu-bar" className="submenu-navigation-bar " light expand="md">
|
||||
<NavbarToggler onClick={this.toggleSubmenu}/>
|
||||
<Collapse isOpen={this.state.isSubmenuOpen} className="ml-auto submenu-elements" navbar>
|
||||
{
|
||||
(wiaasModules && wiaasModules.subModules && wiaasModules.subModules[activeModule]) &&
|
||||
<Nav className="mr-auto submenu-navbar" navbar>
|
||||
{ wiaasModules.subModules[activeModule].map((subModule, index) =>
|
||||
<NavItem key={index}
|
||||
id={"nav-submodule-button-" + subModule.url}
|
||||
onClick={() => this.setActiveSubmodule(subModule.url)}
|
||||
className="navbar-button">
|
||||
<NavLink tag={Link} to={'/' + subModule.url}>{subModule.menuName}</NavLink>
|
||||
</NavItem>
|
||||
)}
|
||||
<NavItem></NavItem>
|
||||
</Nav>
|
||||
}
|
||||
{
|
||||
TagName && <TagName idCommercialLead={parseInt(urlParams.idCommercialLead, 10)} activeModule={activeModule}/>
|
||||
}
|
||||
<Nav className="ml-auto navbar-right" navbar>
|
||||
<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggleDropdown}>
|
||||
<DropdownToggle id="nav-logout-expand" nav caret>
|
||||
{ profileInfo && profileInfo.name
|
||||
? profileInfo.name
|
||||
: userInfo && userInfo.wiaas_user_full_name
|
||||
}
|
||||
</DropdownToggle>
|
||||
<DropdownMenu right>
|
||||
<DropdownItem>
|
||||
<NavLink id="nav-profile" tag={Link} to='/profileSettings'>{menuTexts.buttons.Profile} <i className="fa fa-cog"></i></NavLink>
|
||||
</DropdownItem>
|
||||
<DropdownItem>
|
||||
<NavLink id="nav-logout" tag={Link} to='/' onClick={this.logoutHandle}>{menuTexts.buttons.Logout} <i className="fa fa-sign-out"></i></NavLink>
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</Nav>
|
||||
</Collapse>
|
||||
</Navbar>
|
||||
);
|
||||
}
|
||||
}
|
||||
const mapStateToProps = (state) => ({
|
||||
wiaasModules: state.auth.modules,
|
||||
userInfo: state.auth.userInfo,
|
||||
profileInfo: state.profileSettingsReducer.profileInfo,
|
||||
urlParams: state.pageReducer.urlParams
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps)(Submenu);
|
||||
119
frontend/src/mainComponents/menu/menu.scss
Normal file
119
frontend/src/mainComponents/menu/menu.scss
Normal file
@@ -0,0 +1,119 @@
|
||||
@import '../../styleConstants.scss';
|
||||
|
||||
.navbar {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.navigation-bar {
|
||||
background-color: $header-background;
|
||||
position: relative;
|
||||
height: 3.8rem;
|
||||
}
|
||||
|
||||
.submenu-navigation-bar {
|
||||
position: relative;
|
||||
background-color: $subheader-background;
|
||||
box-shadow: 0 4px 7px 0 $shadow-color;
|
||||
height: 3.12rem;
|
||||
}
|
||||
|
||||
.navbar-light .navbar-nav .nav-link {
|
||||
font-size: $font-size-normal;
|
||||
font-weight: $font-weight;
|
||||
text-align: left;
|
||||
color: $warmGreyColor;
|
||||
}
|
||||
|
||||
.navbar-light .navbar-nav > .active {
|
||||
border-bottom: 0.2rem solid $lightGreenColor;
|
||||
width: fit-content;
|
||||
margin-bottom: -0.3rem;
|
||||
}
|
||||
|
||||
.navbar-button {
|
||||
margin-left: -0.5rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-nav .nav-link {
|
||||
font-size: $font-size-normal;
|
||||
font-weight: $font-weight;
|
||||
text-align: left;
|
||||
color: $whiteColor;
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-nav > .active {
|
||||
border-bottom: 0.3rem solid $lightGreenColor;
|
||||
width: fit-content;
|
||||
margin-bottom: -0.3rem;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
max-height: 68%;
|
||||
max-width: 12%;
|
||||
position: absolute;
|
||||
left: 45%;
|
||||
top: 0.8rem;
|
||||
}
|
||||
|
||||
.nav-btn-cart {
|
||||
padding: 0.2rem;
|
||||
background-color: rgba(113, 194, 191, 0.5);
|
||||
width: 11.5rem;
|
||||
}
|
||||
|
||||
.cart-icon {
|
||||
font-size: 1.2rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.items-cart-count {
|
||||
margin-left: 1rem;
|
||||
width: 12rem;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.submenu-elements {
|
||||
min-width: 90%;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.dropdown-menu{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#nav-button-logout {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media all and (max-width: 768px) {
|
||||
.navigation-bar {
|
||||
min-height: 3.6rem;
|
||||
height:auto;
|
||||
}
|
||||
.submenu-navigation-bar {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.navbar-button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
|
||||
.nav-btn-cart {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
padding: 0 1rem;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user