trc-client-core
Version:
The core of the TRC Client
277 lines (258 loc) • 10.6 kB
JSX
var React = require('react');
var _ = require('lodash');
var moment = require('moment');
var {Link} = require('react-router');
var Table = require('bd-stampy/components/Table');
var Input = require('bd-stampy/components/InputElement');
var Label = require('bd-stampy/components/Label');
var Loader = require('trc-client-core/src/components/Loader');
var Tab = require('bd-stampy/components/Tab');
var TabView = require('bd-stampy/components/TabView');
var TabContent = require('bd-stampy/components/TabContent');
var ToggleGroup = require('trc-client-core/src/components/ToggleGroup');
var UserStore = require('trc-client-core/src/user/UserStore');
var PortalStore = require('../portal/PortalStore');
var departments = [
{label: 'Sales & Fleet', value: 'sales'},
{label: 'Parts', value: 'parts'},
{label: 'Service', value: 'service'},
{label: 'Technical', value: 'tech'},
{label: 'Management & Admin', value: 'management'},
{label: 'Body & Paint', value: 'body_paint'}
];
function tableCells(item, name) {
var p = item.participantData;
var cells = {
Staff: function (){
return {
value: <Link className="link" to={`/portal/${p.participantId}`}>{p.firstName + ' ' + p.lastName}</Link>,
sort: p.firstName + p.lastName,
width: 15
};
},
Position: function (){
return {
value: <span dangerouslySetInnerHTML={{__html: p.jobPositionDesc}}></span>,
sort: p.jobPositionDesc
};
},
Department: function () {
if(item.courseMatrix) {
return {
value: <span dangerouslySetInnerHTML={{__html: p.department}}></span>,
sort: item.courseMatrix.departmentCategory
};
}
},
Date: function (){
return {
value: item._date,
sort: Date.parse(item._date),
filter: item._date,
width: 15
};
},
Manager: function () {
return {
value: item.manager
};
},
Course: function () {
if (item.soData && item.courseMatrix) {
return {
value: <Link lassName="readmore" to={`/course/${item.soData.soItemCode}`}>{item.courseMatrix.workshopName}</Link>,
sort: item.courseMatrix.workshopName,
width: 20
};
}
}
};
return cells[name]();
}
var TrainingActivitySummary = React.createClass({
displayName: 'TrainingActivitySummary',
mixins: [
require('trc-client-core/src/mixins/CourseMixin')
],
statics: {
willTransitionTo: function (transition) {
if((!UserStore.is('ROLE_MANAGER') || UserStore.is('ROLE_SUPER_ADMIN') || UserStore.is('ROLE_MEGA_ADMIN')) && transition.path !== '/unauthorized') {
transition.redirect('/unauthorized');
}
if(UserStore.is('ROLE_TMCA_INTERNAL')) {
transition.redirect('Portal');
}
}
},
getInitialState: function () {
return {
data: null,
search: undefined,
filter: []
};
},
componentDidMount: function () {
this.fetchData();
},
fetchData: function () {
var _this = this;
PortalStore.getTrainingActivitySummary().then(function (data){
_this.setState({data: data});
});
},
getSession: function (id) {
var data = this.state.data.sessionStatusList[id];
var facility, soStartDate = '-';
if(data.latestSOData) {
facility = data.latestSOData.facility;
soStartDate = moment(new Date(data.latestSOData.soStartDate)).format('DD MMM YY');
}
return {
sessionExistence: data.sessionExistence,
facility: facility || '-',
soStartDate: soStartDate
};
},
onSearch: function (e) {
this.setState({search: e.target.value});
},
onToggleDepartment: function (e, selected) {
var current = _.compact(_.map(selected.value, function (a, b){
return (a) ? b : null;
}));
if (current) {
this.setState({filter: current});
}
},
applyFilter: function (data) {
if (this.state.filter) {
return _.filter(data, function(row) {
if (this.state.filter.length && row.courseMatrix) {
if(_.intersection(row.courseMatrix.departmentCategory, this.state.filter).length) {
return true;
} else {
return false;
}
}
return true;
}, this);
}
return data;
},
render: function() {
return (
<div>
<h1>Training Activity Summary</h1>
<div className="row hide-print">
<p className="row2 hug-top">Monitor your dealership via the Training Activity Summary to track their future and review their development. </p>
<div className="w30 l-right">
<Label className="hug-top">Filter By Text</Label>
<Input name="search" onChange={this.onSearch} placeholder="Search"></Input>
</div>
<Label className="hug-top">Filter By Course</Label>
<ToggleGroup name="Departments" toggles={departments} value={this.state.filter} onChange={this.onToggleDepartment}/>
</div>
{this.renderData()}
</div>
);
},
renderData: function () {
if (this.state.data) {
var d = this.state.data;
return (
<TabView transition={false}>
<Tab>Current Enrolments ({d.enrolledList.length})</Tab>
<TabContent>{this.renderCurrentErollments(d.enrolledList, 'enrollments')}</TabContent>
<Tab>Current Waitlists ({d.waitedList.length})</Tab>
<TabContent>{this.renderCurrentErollments(d.waitedList, 'waitlists')}</TabContent>
<Tab>Evaluation Requests ({d.evaluationRequests.length})</Tab>
<TabContent>{this.renderEvaluations(d.evaluationRequests)}</TabContent>
<Tab>Outstanding Requests ({d.requestList.length})</Tab>
<TabContent>{this.renderRequestedEnrollments(d.requestList)}</TabContent>
</TabView>
);
} else {
return <Loader></Loader>;
}
},
renderCurrentErollments: function (data, type) {
var rows = _.map(this.applyFilter(data), function(item) {
var session = this.getSession(item.id);
item._date = session.soStartDate;
var getCells = _.partial(tableCells, item);
return {
_id: item.id,
Staff: getCells('Staff'),
Position: getCells('Position'),
Course: {
value: <Link className="readmore" to={"/course/"+item.soData.soItemCode}>{item.courseMatrix.workshopName}</Link>,
sort: item.courseMatrix.workshopName
},
Date: getCells("Date"),
Venue: session.facility,
Status: {
value: this.renderStatusText(session, item),
sort: item.registrationProcess
}
};
}, this);
return this.renderTable(rows, "No " + type + " to display.");
},
renderEvaluations: function (data) {
//
// Requests aren't filtered on account of the backend not providing the data
//
var rows = _.map(this.applyFilter(data), function(item) {
item._date = moment(new Date(item.requestTime)).format('DD MMM YY');
var getCells = _.partial(tableCells, item);
return {
_id: item.id,
Staff: getCells('Staff'),
Position: getCells('Position'),
"Request To": item.requestTo.firstName + ' ' + item.requestTo.lastName,
Course: {
value: <Link className="readmore" to={"/course/"+item.course.courseCode}>{item.course.courseCode}</Link>,
sort: item.course.courseCode
},
Requested: getCells("Date"),
" ": <a className="Button" href={"/careerPathway/evaluation/" + item.token}>Download</a>
};
}, this);
return this.renderTable(rows, "No requests to display.");
},
renderRequestedEnrollments: function (data) {
var rows = _.map(this.applyFilter(data), function(item) {
var session = this.getSession(item.id);
item._date = session.soStartDate;
var getCells = _.partial(tableCells, item);
return {
_id: item.id,
Staff: getCells('Staff'),
Position: getCells('Position'),
Course: getCells('Course'),
Requested: getCells("Date"),
Venue: session.facility,
" ": (
<div>
<a className="w100 Button Button-small" href={"/admin/request-training-in-site/approve?rid=" + item.id}>enrol</a>
<a className="w100 Button Button-small Button-grey" href={"/admin/request-training-in-site/deny?rid=" + item.id}>deny</a>
</div>)
};
}, this);
return this.renderTable(rows, "No requests to display.");
},
renderStatusText: function (session, item) {
var status = this.getPrettyStatus(item.registrationProcess);
if (session.sessionExistence === 'EXIST') {
return <span className={'t-' + status.toLowerCase()}>{status}</span>;
}
return <span>Cancelled <small>(SESSION NO LONGER AVAILABLE)</small></span>;
},
renderTable: function(rows, emptyText) {
var empty = <em className="InfoBox">{emptyText}</em>;
return (
<Table type="data" modifier="data" search={this.state.search} empty={empty}>{rows}</Table>
);
}
});
module.exports = TrainingActivitySummary;