trc-client-core/src/course/CourseListQueryView.jsx

The core of the TRC Client

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

import Auth from 'trc-client-core/src/components/Auth';

import DEPARTMENTS from 'trc-client-core/src/constants/Departments';
import COURSE_TYPES from 'trc-client-core/src/constants/CourseTypes';
import COURSE_STREAMS from 'trc-client-core/src/constants/CourseStreams';
import ALL from 'trc-client-core/src/constants/Alls';

import Select from 'trc-client-core/src/components/Select';
import UserStore from 'trc-client-core/src/user/UserStore';

var CourseListQueryView = React.createClass({
    displayName: 'CourseListQueryView',
    render: function () {
        if(!this.props.value) {
            return null;
        }

        const withAll = (props) => ALL.concat(props);

        const getProps = (name) => {
            return {
                name: name,
                value: this.props.value[name] || 'ALL',
                onChange: this.props.onChange
            }
        }

        return (
            <div>

                <Grid className="row">
                    <Col>
                        <Label>Course Type</Label>
                        <Select {...getProps('type')} options={withAll(COURSE_TYPES)}/>
                       
                    </Col>
                    <Auth bool={UserStore.isDepartment('service') || UserStore.is('ROLE_SUPER_ADMIN')} component={React.createFactory(Col)}>
                        <Label>Course Stream</Label>
                        <Select {...getProps('stream')} options={withAll(COURSE_STREAMS)}/>
                    </Auth>
                    <Col>
                        <Label>Department</Label>
                        <Select {...getProps('departmentCategory')} options={withAll(DEPARTMENTS)}/>
                    </Col>
                    <Col>
                        <Label>Search</Label>
                        <Input name="search" onChange={this.props.onChange} autoComplete="off" defaultValue={this.props.value.search} placeholder="Search..." />
                    </Col>
                </Grid>
            </div>
        );
    }
});

module.exports = CourseListQueryView;