trc-client-core/src/technical/TechnicalCoursesView.jsx

The core of the TRC Client

import React from 'react';
import {State} from 'react-router';
import TechnicalSidebar from 'trc-client-core/src/technical/TechnicalSidebar';
import CourseList from 'trc-client-core/src/course/CourseList';
import Select from 'trc-client-core/src/components/Select';

import Grid from 'trc-client-core/src/components/Grid';
import Col from 'trc-client-core/src/components/Col';
import Input from 'bd-stampy/components/InputElement';
import Label from 'bd-stampy/components/Label';

var TehcnicalCoursesView = React.createClass({
    displayName: 'TehcnicalCoursesView',
    mixins: [
        State
    ],
    getInitialState() {
        return {
              
        };
    },
    onChange(ee, details) {
        this.setState({
            [details.key]: details.value
        });
    },
    filterCourses(course) {
        var {type} = this.props.location.query;
        var searchString = course.get('workshopName') + course.get('courseCode');

        if(this.state.search) {
            return searchString.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1;
        }

        if(type) {
            return course.get('type') === type || type === 'ANY_TYPE';
        }

        return true;
    },
    render() {
        return <Grid>
            <Col width={3}>
                <TechnicalSidebar/>
            </Col>
            <Col>
                <h1>Technical Training</h1>
                {this.renderFilters()}                
                <CourseList department="tech" filter={this.filterCourses}/>
            </Col>
        </Grid>;
    },
    renderFilters() {
        return <Grid className="p">
            <Col width={3}>
                <Label>Course Type</Label>
                <Select name="type" queryString value={this.props.location.query.type} options={[
                    {value: 'ANY_TYPE', label: 'Any Type'},
                    {value: 'FACE_TO_FACE', label: 'Face to Face'},
                    {value: 'E_LEARNING', label: 'Elearning'}
                ]}/>
            </Col>
            <Col width={4}>
                <Label>Search</Label>
                <Input name="search" onChange={this.onChange} placeholder="Search..."/>
            </Col>
            <Col width={2}></Col>
        </Grid>;
        
    }
});

export default TehcnicalCoursesView;