trc-client-core
Version:
The core of the TRC Client
327 lines (305 loc) • 13.3 kB
JSX
import React from 'react';
import Grid from 'trc-client-core/src/components/Grid';
import Col from 'trc-client-core/src/components/Col';
import Icon from 'trc-client-core/src/components/Icon';
import Loader from 'trc-client-core/src/components/Loader';
import {Link} from 'react-router';
import {fromJS, Map} from 'immutable';
import Auth from 'trc-client-core/src/components/Auth';
import ModalManager from 'trc-client-core/src/Modal/ModalManager';
import CourseGroupActivityModal from 'trc-client-core/src/components/CourseGroupActivityModal';
import CourseActivityModal from 'trc-client-core/src/course/CourseActivityModal';
import UserStore from 'trc-client-core/src/user/UserStore';
import ParticipantList from 'trc-client-core/src/participant/ParticipantList';
import {ATTENDED, COMPLETED, CREDIT} from 'trc-client-core/src/constants/CourseStatus';
import {IconTechnical} from 'trc-client-core/src/components/Icons';
function fourCourse(code) {
return [`${code}_PRE_READ`, `${code}_PRE_EXAM`, `${code}_ILT`, `${code}_EXAM`];
}
const COURSE_LIST_MAP = {
'T21-STWE': fourCourse('T21-STWE'),
'T21-STWWN': fourCourse('T21-STWWN'),
'T21-STFOS': fourCourse('T21-STFOS'),
'T21-STSO': fourCourse('T21-STSO'),
'T21-STCHS': fourCourse('T21-STCHS'),
'T21-STENS': fourCourse('T21-STENS'),
'T21-STDLS': fourCourse('T21-STDLS'),
'T21-PTFOR': fourCourse('T21-PTFOR'),
'T21-PTEL_EF': fourCourse('T21-PTEL_EF'),
'T21-PTEL_SR': fourCourse('T21-PTEL_SR'),
'T21-PTEL_HVAC': fourCourse('T21-PTEL_HVAC'),
'T21-PTCH_BR': fourCourse('T21-PTCH_BR'),
'T21-PTCH_SS': fourCourse('T21-PTCH_SS'),
'T21-PTEN_MEC': fourCourse('T21-PTEN_MEC'),
'T21-PTEN_MAN': fourCourse('T21-PTEN_MAN'),
'T21-PTCH_MT': fourCourse('T21-PTCH_MT'),
'T21-PTCH_AT': fourCourse('T21-PTCH_AT'),
'T21-PTCH_FDR': fourCourse('T21-PTCH_FDR')
}
function Segment(props) {
var marginBottom = (props.modifier !== "ServiceTechnician") ? 'margin-bottom' : '';
return <div className={`margin-row3`}>
{props.title ? <div className={`Bar Bar-${props.modifier} ${marginBottom}`}>{props.title}</div> : null}
{props.children}
</div>
}
function Heading(props) {
return <strong className="t-center block padding">{props.children}</strong>
}
var TechnicalLearningPlan = React.createClass({
displayName: 'TechnicalLearningPlan',
onClickCourse(courseCode) {
var courseMap = this.getCourseMap();
var {firstName} = this.props.participant.toObject();
var participantId = this.props.location.query.participantId || UserStore.get('participantId');
if (COURSE_LIST_MAP[courseCode]) {
ModalManager.showModal(<CourseGroupActivityModal
name={firstName}
course={fromJS(courseMap[courseCode])}
courses={fromJS(COURSE_LIST_MAP[courseCode].map(ii => courseMap[ii]))}
/>);
} else {
ModalManager.showModal(<CourseActivityModal courseCode={courseCode} participantId={participantId} />);
}
},
getPathwayCompletion() {
if(this.props.learningPlan) {
return this.props.learningPlan.getIn(['pathwayCompletion', 0]);
}
return Map();
},
getCourseMap() {
return this.props.learningPlan.getIn(['pathwayCompletion', 0, 'gapData'])
.reduce((rr, ii) => rr.set(ii.get('courseCode'), ii), Map())
.toJS();
},
renderCourse(props) {
var eligible = props.eligible;
var size = props.size || 'tight';
var {workshopName} = props;
var type;
var ribbon;
var ribbonClass;
switch (props.completionProcess){
case "ENROLL":
ribbonClass = 'Card-ribbon';
ribbon = <span className="Card_ribbon">Enrolled</span>;
type = props.stream;
break;
case "WAITLIST":
ribbonClass = 'Card-ribbon';
ribbon = <span className="Card_ribbon">Waitlisted</span>;
type = props.stream;
break;
case ATTENDED:
case COMPLETED:
case CREDIT:
ribbonClass = 'Card-ribbon';
ribbon = <span className="Card_ribbon">Completed</span>;
type = props.stream;
break;
}
if(props.completed){
ribbonClass = 'Card-ribbon';
ribbon = <span className="Card_ribbon">Completed</span>;
type = props.stream;
}
if (eligible) {
type = props.stream;
}
return <a
onClick={props.onClick || this.onClickCourse.bind(null, props.courseCode)}
style={{height: 120, ...props.style}}
className={`Card Card-${size} Card-${type} ${ribbonClass} ${props.className} margin-bottom`}>
{workshopName && workshopName.replace(props.replace, '') || props.children}
{ribbon}
</a>;
},
renderCertification(props) {
return <this.renderCourse
stream={props.stream}
courseCode={props.courseCode}
completionProcess={props.completionProcess}
size="normal"
style={{height:'auto', ...props.style}}>
<div style={{maxWidth: 230, margin: 'auto'}}>
<Icon hexCode="E075" modifier="large" className="right"/>
{props.workshopName || props.children}
</div>
</this.renderCourse>
},
render() {
var {learningPlan, participant} = this.props;
if(!learningPlan) {
return <Loader/>;
}
var courseMap = this.getCourseMap();
var Course = this.renderCourse;
var Certification = this.renderCertification;
function STCourse(code) {
return <Col>
<Course {...courseMap[code]} stream="technicalService" replace="ST "/>
</Col>;
}
function PTCourse(code) {
return <Course {...courseMap[code]} stream="technicalPro" replace="PT "/>;
}
function DTCourse(code, props) {
return <Course {...props} {...courseMap[code]} stream="technicalDiagnosis" replace="DT "/>;
}
return <div>
<h1>
<span className="t-capitalize">{learningPlan.get('displayName')}</span>
<div className="t-muted">{`${participant.get('firstName')} ${participant.get('lastName')} `}</div>
</h1>
<Segment modifier="ServiceTechnician" title="Service Technician">
<Grid>
<Col width={3}>
<Heading>Optional</Heading>
<Grid modifier="tighter">
<Col>
{STCourse('T21-STWE')}
</Col>
<Col>
{STCourse('T21-STWWN')}
</Col>
</Grid>
</Col>
<Col>
<Heading>{String.fromCharCode(160)}</Heading>
<Grid modifier="tighter">
<Col>
{STCourse('T21-STFOS')}
</Col>
<Col>
{STCourse('T21-STSO')}
</Col>
<Col>
{STCourse('T21-STCHS')}
</Col>
<Col>
{STCourse('T21-STENS')}
</Col>
<Col>
{STCourse('T21-STDLS')}
</Col>
<Col>
{STCourse('T21-STHYB_SS')}
</Col>
</Grid>
</Col>
</Grid>
<Certification stream="technicalService" {...courseMap['ST_STC']} />
</Segment>
<Segment modifier="ProfessionalTechnician" title="Pro Technician">
<Grid modifier="tight">
<Col width="3">
<Heading>{String.fromCharCode(160)}</Heading>
{PTCourse("T21-PTFOR")}
</Col>
<Col width="3">
<Heading>Electrical</Heading>
{PTCourse("T21-PTEL_EF")}
{PTCourse("T21-PTEL_SR")}
{PTCourse("T21-PTEL_HVAC")}
</Col>
<Col width="3">
<Heading>Engine</Heading>
{PTCourse("T21-PTEN_MEC")}
{PTCourse("T21-PTEN_MAN")}
</Col>
<Col width="6">
<Heading>Chassis</Heading>
<Grid modifier="tight">
<Col>
{PTCourse("T21-PTCH_BR")}
{PTCourse("T21-PTCH_SS")}
</Col>
<Col>
{PTCourse("T21-PTCH_MT")}
{PTCourse("T21-PTCH_AT")}
{PTCourse("T21-PTCH_FDR")}
</Col>
</Grid>
</Col>
</Grid>
<Certification stream="technicalPro" {...courseMap['PT_PTC']}/>
</Segment>
<Segment modifier="DiagnosisTechnician" title="Diagnosis Technician">
{DTCourse('T21-DTFD1', {
className: "margin-column-auto",
style: {
width: 128
}
})}
<Grid modifier="tight">
<Col width={4}>
<Heading>Electrical</Heading>
<Grid modifier="tighter">
<Col>
{DTCourse('T21-DTHYB1')}
</Col>
<Col>
{DTCourse('T21-DTEL1')}
{DTCourse('T21-DTEL2')}
{DTCourse('T21-DTEL3')}
{DTCourse('T21-DTEL4')}
</Col>
</Grid>
</Col>
<Col width={4}>
<Heading>Engine</Heading>
<Grid modifier="tighter">
<Col>
{DTCourse('T21-DTEN1')}
</Col>
<Col>
{DTCourse('T21-DTEN2')}
</Col>
</Grid>
</Col>
<Col width={4}>
<Heading>Chassis</Heading>
<Grid modifier="tighter">
<Col>
{DTCourse('T21-DTCH1')}
{DTCourse('T21-DTCH2')}
{DTCourse('T21-DTCH3')}
</Col>
<Col>
{DTCourse('T21-DTCH4')}
</Col>
</Grid>
</Col>
</Grid>
<Grid modifier="tight">
<Col><Certification stream="technicalDiagnosis" style={{width:'100%'}} {...courseMap['DT_ELC']}/></Col>
<Col><Certification stream="technicalDiagnosis" style={{width:'100%'}} {...courseMap['DT_ENC']}/></Col>
<Col><Certification stream="technicalDiagnosis" style={{width:'100%'}} {...courseMap['DT_CHC']}/></Col>
</Grid>
<Certification stream="technicalDiagnosis" {...courseMap['DT_SDTC']} />
</Segment>
<Segment title="Technical Advisor Professional" modifier="technical">
<Grid modifier="tight">
<Col><Course {...courseMap['MENTOR']}>Mentor Training</Course></Col>
<Col><Course {...courseMap['GCS']}>Technical Advisor Training</Course></Col>
<Col width="8"/>
</Grid>
</Segment>
<Auth is="ROLE_MANAGER">
<div>
<h2><IconTechnical/> Technical Career Plan <span className="t-muted">Staff List</span></h2>
<em className="block">Click on a staff member to view their Technical Career Plan status.</em>
<ParticipantList type="technical" className="clearfix margin-row" renderItem={this.renderStaff}/>
</div>
</Auth>
</div>;
},
renderStaff(participant, key) {
var {firstName, lastName, participantId} = participant.toObject();
return <li key={key} className="w25 left">
<Link className="t-capitalise" to={`/learning-plan/technical_career_plan`} query={{participantId}}>{firstName} {lastName}</Link>
</li>
}
});
export default TechnicalLearningPlan;