trc-client-core/src/report/SurveyNotificationList.jsx

The core of the TRC Client

import React from 'react';
import Reflux from 'reflux';
import {State, History} from 'react-router';
import SurveyStore from 'trc-client-core/src/report/SurveyStore';
import SurveyActions from 'trc-client-core/src/report/SurveyActions';
import StoreMixin from 'reflux-immutable/StoreMixin';

import DataTable from 'bd-stampy/components/DataTable';
import Label from 'bd-stampy/components/Label';
import Input from 'bd-stampy/components/InputElement';

import SurveyNotificationLegend from 'trc-client-core/src/copy/report/SurveyNotificationLegend';

import Time from 'trc-client-core/src/components/Time';
import Icon from 'trc-client-core/src/components/Icon';
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 Loader from 'trc-client-core/src/components/Loader';
import Markdown from 'trc-client-core/src/components/Markdown';
import ObjectTable from 'trc-client-core/src/components/ObjectTable';
import ModalManager from 'trc-client-core/src/Modal/ModalManager';
import InformationModal from 'trc-client-core/src/components/InformationModal';

function updateStateWithName (ee, details) {
    this.setState({
        [details.key]: details.value
    })
}

var SurveyNotificationList = React.createClass({
    displayName: 'SurveyNotificationList',
    mixins: [
        StoreMixin,
        State,
        History,
        Reflux.listenTo(SurveyStore, 'onStoreChange')
    ],
    componentDidMount() {
        SurveyActions.getNotificationList(this.props.location.query);
        SurveyActions.getPossibleCourses();
        SurveyActions.getSurveyCodes();
    },
    getStoreState() {
        return {
            notificationsList: SurveyStore.get('notificationsList'),
            notificationsListLoading: SurveyStore.get('notificationsListLoading'),
            possibleCourses: SurveyStore.get('possibleCourses').toJS(),
            surveyCodes: SurveyStore.get('surveyCodes').toJS()
        };
    },
    onChangeQuery(ee, details) {
        var query = {
            [details.key]: details.value
        };
        
        this.history.replaceState(null, '/report/survey-notification-list', query);
        SurveyActions.getNotificationList(query); 
    },
    onFilter: updateStateWithName,
    onShowLegend() {
        ModalManager.showModal(InformationModal, {
            title: 'Survey Notifications',
            children: <Markdown html={SurveyNotificationLegend}/>
        });
    },
    onShowDetails(item) {
        item.firstNotificationTime = <Time value={item.firstNotificationTime}/>;
        item.completedDate = <Time value={item.completedDate}/>;

        ModalManager.showModal(InformationModal, {
            title: 'Details',
            children: <ObjectTable data={item}/>
        });
    },
    render() {
        var selectProps = {
            onChange: this.onChangeQuery,
            name: 'courseCode',
            value: this.props.location.query.courseCode,
            options: this.state.possibleCourses
        };

        return (
            <div>
                <h1>Survey Notifications <Icon name="circleinfo" onClick={this.onShowLegend}/></h1>
                <Grid>
                    <Col>
                        <Label>Possible Courses</Label>
                        <Select {...selectProps} />
                    </Col>
                    <Col>
                        <Label>Survey Code</Label>
                        <Select {...selectProps} name="surveyId" value={this.props.location.query.surveyId} options={this.state.surveyCodes}/>
                    </Col>
                    <Col></Col>
                    <Col>
                        <Label>Search Results</Label>
                        <Input name="search" onChange={this.onFilter}/>
                    </Col>
                </Grid>

                {this.renderTable()}
            </div>
        );
    },
    renderTable() {
        if(this.state.notificationsListLoading) {
            return <Loader/>;
        }

        var tableSchema = [
        {
            heading: 'Notified',
            filter: 'firstNotificationTime',
            render: (item) => <Time type="short" value={item.firstNotificationTime}/>
        }, 
        {
            heading: 'Completed',
            filter: 'completedDate',
            render: (item) => <Time type="short" value={item.completedDate}/>
        }, 
        {
            heading: 'SO Id',
            filter: 'soId'
        }, 
        {
            heading: 'Course',
            filter: 'courseCode'
        }, 
        {
            heading: 'Instructor',
            filter: 'instructor'
        }, 
        // {
        //     heading: 'Delay',
        //     filter: (item) => item.firstNotificationTime - item.completedDate,
        //     render: (item) => <Time type="short" duration="milliseconds" value={item.firstNotificationTime - item.completedDate}/>
        // }, 
        // {
        //     heading: 'Location',
        //     filter: 'location',
        //     render: (item) => <span title={item.location}>{item.location.match(/\S+(\s\S+)?/)[0]}</span>
        // }, 
        {
            heading: 'Attendee',
            filter: 'fullName'
        }, {
            heading: 'Survey Id',
            filter: 'surveyId'
        },{
            heading: '',
            render: (item) => <a className="link" onClick={this.onShowDetails.bind(this, item)}>details</a>
        }];

        return <DataTable 
            schema={tableSchema} 
            data={this.state.notificationsList.toJS()} 
            search={this.state.search}
            modifier="data tight" 
        />;
    }
});

module.exports = SurveyNotificationList;