trc-client-core
Version:
The core of the TRC Client
350 lines (302 loc) • 13.6 kB
JSX
import React from 'react';
import {reduxForm} from 'redux-form';
import {Map} from 'immutable';
import {Lifecycle} from 'react-router';
import CourseValidation from 'trc-client-core/src/course/CourseValidation';
import Fieldset from 'bd-stampy/components/Fieldset';
import FormError from 'trc-client-core/src/forms/FormError';
import IconSelect from 'trc-client-core/src/components/IconSelect';
import Input from 'bd-stampy/components/InputElement';
import InputRow from 'bd-stampy/components/InputRow';
import Loader from 'trc-client-core/src/components/Loader';
import Select from 'trc-client-core/src/components/Select';
import Textarea from 'bd-stampy/components/Textarea';
import ElearningTagInput from 'trc-client-core/src/course/ElearningTagInput';
import TechnicalTagForm from 'trc-client-core/src/course/TechnicalTagForm';
import DocumentTagForm from 'trc-client-core/src/course/DocumentTagForm';
import ModalManager from 'trc-client-core/src/Modal/ModalManager';
import ModalConfirm from 'trc-client-core/src/Modal/ModalConfirm';
import CourseTypes from 'trc-client-core/src/constants/CourseTypes';
import ErrorList from 'trc-client-core/src/components/ErrorList';
function getIcons() {
var icons = ['MT', 'DT', 'PT', 'ST', '1F3E6', '1F4BC', 'E009', 'E025', 'E042', 'E043', 'E045', 'E049', 'E051', 'E052', 'E058', 'E059', 'E060', 'E067', 'E097', 'E100', 'E114', 'E115', 'E120', 'E138', 'E140', 'E149', 'E151', 'E156', 'E161', 'E210', 'E236', 'E245', 'E258', 'E259', 'E281', 'E283', 'E308', 'E320', 'E332', 'E333', 'E337', 'E350', 'E366', 'E372', 'E378', 'E458', 'E329', 'E087', 'E004', 'E293', 'E373', 'E255', 'E324', '1F6B2', 'E268', 'E270', 'E271'];
return icons.reduce((reduction, value) => {
reduction[value] = value;
return reduction;
}, {});
}
var IN_DEVELOPMENT = "IN DEVELOPMENT\nPlease contact Blue Flag";
var CourseEditForm = React.createClass({
displayName: 'CourseEditForm',
mixins: [Lifecycle],
propTypes: {
fields: React.PropTypes.object.isRequired
},
routerWillLeave() {
if (this.props.dirty) {
return 'You have unsaved information, are you sure you want to leave this page?';
}
},
onChangeType(data) {
var {type} = this.props.fields;
var changeFunction = type.onChange.bind(this, data);
if (type.value !== 'FACE_TO_FACE') {
ModalManager.showModal(ModalConfirm, {
title: 'Warning!',
message: 'Are your sure you want to change the course type? Changing the Training Type after a course has been created can affect the way the course is handled in various parts of the TRC.',
yes: 'Submit',
onYes: changeFunction,
no: 'Cancel'
});
} else {
changeFunction();
}
},
render() {
const {
submitting,
errors,
fields: {
abbreviatedName,
additionalResources,
attendance,
canWaitlist,
company,
courseCode,
courseIcon,
courseTrainer,
departmentCategory,
draft,
duration,
faceToFaceTag,
id,
learningOutcomes,
overview,
participantFeedBack,
prerequisiteExpression,
prerequisites,
price,
similarCourses,
site,
societyPoints,
stream,
trainingHours,
type,
viewableInList,
workshopName
}
} = this.props;
const similarCoursesOptions = this.props.similarCourses
.reduce((reduction, course) => {
return reduction.set(course.get('courseCode'), {
value: course.get('courseCode'),
label: `${course.get('courseCode')} - ${course.get('workshopName')}`
});
}, Map())
.toArray();
if (submitting) {
return <Loader/>
}
function selectProps(obj) {
return {
...obj,
onBlur: obj.onBlur.bind(null, obj.value)
}
}
function changeNumber(obj) {
return {
onChange: (ee, data) => obj.onChange(data.value),
onBlur: (ee, data) => obj.onBlur(data.value)
}
}
return <form>
{!this.props.pristine ? <span className="Icon right t-red absolute top3 right3" data-icon={"\uE446"}></span> : null}
<ErrorList {...this.props} />
<Fieldset legend="General">
<input type="hidden" {...canWaitlist} />
<input type="hidden" {...draft} />
<input type="hidden" {...faceToFaceTag} />
<input type="hidden" {...site} />
<InputRow label="Workshop Name">
<Input {...workshopName} placeholder="e.g. Managing the Service Department"/>
<FormError {...workshopName} />
</InputRow>
<InputRow label="Abbreviated Name">
<Input {...abbreviatedName} placeholder="Create an abbreviated version to be used on Gap Reports (e.g. Mng Service Dept)"/>
<FormError {...abbreviatedName} />
</InputRow>
<InputRow label="Training Type">
<Select onChangeString {...selectProps(type)} onChange={this.onChangeType} options={CourseTypes} />
</InputRow>
<InputRow label="Stream">
<Select onChangeString {...selectProps(stream)}>
<option value="PRO">Professional</option>
<option value="TECH">Technical</option>
</Select>
</InputRow>
<InputRow label="Course Code">
<Input {...courseCode} placeholder="e.g. SAL1" onBlur={() => {}}/>
<FormError {...courseCode} />
</InputRow>
<InputRow label="Viewable In List">
<Input {...viewableInList} type="checkbox" name="viewableInList"/>
</InputRow>
<InputRow label="Can be Waitlisted">
<code className={`t-${(!!canWaitlist.value).toString()}`}>{(!!canWaitlist.value).toString()}</code>
</InputRow>
<InputRow label="Department Category">
<Select onChangeString multi {...selectProps(departmentCategory)}>
<option value="tech">Technical</option>
<option value="sales">Sales</option>
<option value="service">Service</option>
<option value="parts">Parts</option>
<option value="management">Management</option>
<option value="TMCA">TMCA/Internal</option>
<option value="body_paint">Body & Paint</option>
</Select>
<FormError {...departmentCategory} />
</InputRow>
{this.renderCourseTypeElements()}
{this.renderCourseStreamElements()}
</Fieldset>
<Fieldset legend="Admin">
<InputRow label="Prerequisites">
<Input {...prerequisiteExpression} placeholder="SPK1234 AND SPK5678" />
</InputRow>
<InputRow label="Prerequisite Description">
<Textarea {...prerequisites} placeholder="Extra text to explain the course's pre-requisites." />
</InputRow>
<InputRow label="Course Icon">
<IconSelect onChangeString {...courseIcon} icons={getIcons()} />
<FormError {...courseIcon} />
</InputRow>
<InputRow label="Training Company">
<Input {...company} placeholder="e.g. Human Synergy"/>
</InputRow>
<InputRow label="Id">
<Input {...id} disabled/>
</InputRow>
<InputRow label="Sales Society Points">
<Input {...societyPoints} placeholder="e.g. 2000"/>
</InputRow>
<InputRow label="Training Hours">
<Input {...trainingHours} type="number" placeholder="e.g. 5" {...changeNumber(trainingHours)}/>
<FormError {...trainingHours} />
</InputRow>
</Fieldset>
<Fieldset legend="Course Details">
<p>Please insert the text you would like to display on the website using Markdown, <br/> an easy to understand and learn web language. <a className="link" href="/#/admin/markdown">What is Markdown?</a></p>
<InputRow label="Course Overview">
<Textarea {...overview} placeholder={"e.g. \nThe Pro Technician Certification Exams are separated into seven key subjects being Electrical Systems, Engine..."} />
</InputRow>
<InputRow label="Learning Outcomes">
<Textarea {...learningOutcomes} placeholder={"e.g.\n* Understand the origins of Hybrid Vehicles \n* Understand the effects High Voltage has on the human body & the hybrid components that have this potential"}/>
</InputRow>
<InputRow label="Course Trainer">
<Input {...courseTrainer} placeholder="e.g. Andrew Ryan"/>
</InputRow>
<InputRow label="Duration">
<Input {...duration} placeholder="e.g. 1 Day"/>
<FormError {...duration} />
</InputRow>
<InputRow label="Price">
<Input {...price} placeholder="e.g. 495" />
<FormError {...price} />
</InputRow>
<InputRow label="Participant Feedback">
<Textarea {...participantFeedBack} placeholder={"e.g. \n> Great content, and the diverse roles of participants gave a good overview and opportunity to think how my role can help them provide a better experience for our clients."} />
</InputRow>
<InputRow label="Additional Resources">
<Textarea {...additionalResources} placeholder={IN_DEVELOPMENT} />
{/*<FileUploadForm {...additionalResources} multiple/>*/}
</InputRow>
<InputRow label="Attendance">
<Textarea {...attendance} placeholder={"e.g.\n * All Sales Staff\n * Sales Managers"}/>
</InputRow>
<InputRow label="Associated Learning">
<Select
{...selectProps(similarCourses)}
onChangeString
multi
options={similarCoursesOptions}
/>
</InputRow>
</Fieldset>
<ErrorList {...this.props} />
</form>;
},
renderCourseTypeElements() {
const {
fields: {
type,
eLearningTag,
documentTag
}
} = this.props;
switch(type.value) {
case 'E_LEARNING':
return <ElearningTagInput {...eLearningTag} />;
case 'DOCUMENT':
return <DocumentTagForm {...documentTag} />;
}
},
renderCourseStreamElements() {
const {
fields: {
stream,
techTag
}
} = this.props;
if (stream.value === 'TECH') {
return <TechnicalTagForm {...techTag} />;
}
}
});
export const CourseEditFormFields = [
'abbreviatedName',
'additionalResources',
'attendance',
'canWaitlist',
'company',
'courseCode',
'courseIcon',
'courseTrainer',
'departmentCategory',
'documentTag.documents[].name',
'documentTag.documents[].url',
'draft',
'duration',
'eLearningTag',
'faceToFaceTag',
'id',
'learningOutcomes',
'overview',
'participantFeedBack',
'prerequisiteExpression',
'prerequisites',
'price',
'proTag',
'similarCourses',
'site',
'societyPoints',
'stream',
'techTag.category',
'techTag.group',
'techTag.streamCode',
'trainingHours',
'type',
'viewableInList',
'workshopName'
];
export default reduxForm({
form: 'courseEditForm',
destroyOnUnmount: false,
validate: CourseValidation,
fields: CourseEditFormFields
},
(state,props) => {
return {
initialValues: props.initialValues
}
}
)(CourseEditForm);