trc-client-core
Version:
The core of the TRC Client
216 lines (199 loc) • 9.67 kB
JSX
import React from 'react';
import {Link} from 'react-router';
import UserStore from 'trc-client-core/src/user/UserStore';
import Auth from 'trc-client-core/src/components/Auth';
import Permissions from 'trc-client-core/src/user/Permissions';
import Col from 'trc-client-core/src/components/Col';
import Icon from 'trc-client-core/src/components/Icon';
import {STATIC_ASSETS, learningPlanUrl} from 'trc-client-core/src/constants/url';
import LearningPlanList from 'trc-client-core/src/learningPlan/LearningPlanList';
var Navigation = React.createClass({
displayName: 'Navigation',
contextTypes: {
location: React.PropTypes.object
},
getInitialState() {
return {
hover: ''
};
},
onTabOver(value) {
this.setState({hover: value});
},
onTabOut() {
this.setState({hover: null});
},
render() {
var {hover} = this.state;
var departmentUrl = this.context.location.pathname.match(/^\/(\w*)\/?/)[1];
var departments = [
{value:'sales', label:'Sales', permission:false},
{value:'parts', label:'Parts', permission:false},
{value:'service', label:'Service', permission:false},
{value:'technical', label:'Technical', permission:'TECHNICAL'},
{value:'product', label:'Product', permission:false},
{value:'management', label:'Management', permission:false},
{value:'body_and_paint', label:'Body & Paint', permission:false},
{value:'toyotaforlife', label:'Toyota For Life', permission:false}
];
function lexusTabs (department) {
return !(UserStore.get('site') === 'LEXUS' &&
(department.value === 'body_and_paint')
);
}
function hasPermission(department) {
if(Permissions.get('TMCA_STAFF') && !UserStore.is('ROLE_TMCA_ADMIN') && department.value !== 'toyotaforlife' && department.value !== 'product') {
return false;
}
return !department.permission || Permissions.get(department.permission);
}
return (
<div className={`${(hover) ? '' : departmentUrl} ${hover}`}>
<ul className={`NavigationView_bar`}>
<li
key="home"
className="NavigationView_dropdown"
onMouseOver={this.onTabOver.bind(null, 'hero')}
onMouseOut={this.onTabOut}
><Link className="NavigationView_dropdown_link" to="/">Home</Link></li>
{departments.filter(lexusTabs).filter(hasPermission).map(this.renderTab)}
<li key="courses" className="NavigationView_dropdown is-right">
<Link className="NavigationView_dropdown_link" to="/course">All Courses</Link>
</li>
</ul>
</div>
);
},
renderTab(department) {
function filterLearningPlans(department) {
switch (department.value) {
case 'technical':
return plan => plan.get('careerPlanId') === 'technical_career_plan';
default:
return plan => true
}
}
return (
<li key={department.value} onMouseOver={this.onTabOver.bind(null, department.value)} onMouseOut={this.onTabOut}>
<div className="NavigationView_dropdown">
<a href={this.renderPageUrl(department)} className="NavigationView_dropdown_link">{department.label}</a>
<ul className="NavigationView_dropdown_list">
<li className="grid">
{this.renderCol1(department)}
{this.renderCol2(department)}
<Col>
<Link to="/portal" className="NavigationView_dropdown_title">My {UserStore.get('site') === 'TOYOTA' ? 'TIA' : 'Academy'}</Link>
<Auth is="ROLE_MANAGER" isntAny={['ROLE_TMCA_ADMIN', 'ROLE_TMCA_INTERNAL']} component="div">
<div><Link to="/portal/dealership">Dealership Details</Link></div>
<div><Link to="/portal/training_activity_summary">Training Activity Summary</Link></div>
</Auth>
<div className="NavigationView_dropdown_title margin-top05">My Learning Plans</div>
<LearningPlanList linkClassName="Icon Icon-smallSize Icon-inline whitespace-nowrap" learningPlans={UserStore.get('learningPlans').filter(filterLearningPlans(department))}/>
</Col>
</li>
</ul>
</div>
</li>
);
},
renderPageUrl(department) {
return `/#/${department.value}`;
},
renderCol1(department) {
function technical () {
if(department.value === 'technical'){
return (
<div>
<Auth site="TOYOTA"><li><a href="/#/technical/fixitright">Fix It Right</a></li></Auth>
<Auth site="TOYOTA"><li><a href="/#/technical/toyota-network-training">Toyota Network Training</a></li></Auth>
<li><Link to="/technical/technical-advisor-information">Technical Advisor Information</Link></li>
</div>
);
}
}
function product() {
if(department.value === 'product'){
return <li><ul>
<li><Link to="/product/vehicles">Vehicles</Link></li>
<li><Link to="/product/trainers">Our Team</Link></li>
<Auth site="TOYOTA" >
<ul>
<li><Link to="/product/the-toyota-edge">The Toyota Edge</Link></li>
<li><Link to="/product/toyotalink">Toyota Link</Link></li>
</ul>
</Auth>
<Auth site="LEXUS">
<li><Link to="/product/lexus-enform">Lexus Enform</Link></li>
</Auth>
</ul></li>;
}
}
function management() {
if(department.value === 'management') {
return <li><ul>
<li><Link to="/management/qualification">Management Qualifications</Link></li>
<Auth site="TOYOTA"><li><a href="/#/management/managers-toolbox">Manager's Toolbox</a></li></Auth>
<Auth is="ROLE_FDLP"><li><a href="/#/management/fdlp">Future Dealer Leader's Program</a></li></Auth>
</ul></li>;
}
}
return <ul className="col--">
<li className="NavigationView_dropdown_title">General</li>
<li><a href={this.renderPageUrl(department)}>Department Page</a></li>
<Auth site="TOYOTA" bool={department.value === 'service'}>
<li><a href="/#/service/warranty">Warranty</a></li>
<li><a href="/#/service/technical-support-system">Technical Support System</a></li>
</Auth>
{technical()}
{product()}
{management()}
</ul>;
},
renderCol2(department) {
function calenders() {
if(
department.value !== 'product' &&
department.value !== 'management' &&
department.value !== 'body_and_paint' &&
department.value !== 'toyotaforlife'
) {
return <li><ul>
<li><Link to={`/training-calendars`} query={{page:department.value}}>Course Training Calendar</Link></li>
<Auth bool={department.value === 'technical'}>
<li><a href="/#/technical/videos">Training Videos</a></li>
</Auth>
</ul></li>;
}
}
function product() {
if(department.value === 'product'){
return <li><ul>
<Auth site="TOYOTA" component="li">
<ul>
<li><Link to="/product/factsheet">Fact Sheets</Link></li>
<li><Link to="/product/qanda">Q & A</Link></li>
</ul>
</Auth>
</ul></li>;
}
}
return <ul className="col--">
<li className="NavigationView_dropdown_title">Resources</li>
<li><a href={`${STATIC_ASSETS}docs/Essential-Automotive-Terminology-062015.pdf`} target="_blank">Essential Terminology</a></li>
<Auth perm="GAPREPORT_TFL">
<li><Link to={`/portal/gapreport/toyota-for-life`}>Toyota for Life Gap Report</Link></li>
</Auth>
<Auth bool={department.value === 'technical'}>
<li><ul>
<Auth perm="GAPREPORT_TECHNICAL">
<li><Link to={`/gapreport/technical_overview`}>Technical Gap Report</Link></li>
</Auth>
<li><a href={`${STATIC_ASSETS}docs/team21-training-curriculum.pdf`} target="_blank">TEAM21 Training Curriculum</a></li>
</ul></li>
</Auth>
{calenders()}
{product()}
</ul>;
}
});
module.exports = Navigation;