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

The core of the TRC Client

import React from 'react';
import Input from 'bd-stampy/components/InputElement';
import InputRow from 'bd-stampy/components/InputRow';
import FileUpload from 'trc-client-core/src/components/FileUpload';
import ModalManager from 'trc-client-core/src/Modal/ModalManager';
import ModalConfirm from 'trc-client-core/src/Modal/ModalConfirm';
import xhr from 'trc-client-core/src/utils/xhr';
import {INTERNAL_SERVER_ERROR} from 'trc-client-core/src/constants/Error';
import {ELEARNING_FILE_UPLOAD_ENDPOINT} from 'trc-client-core/src/constants/Endpoints';

var ModuleUploadForm = React.createClass({
    displayName: 'ModuleUploadForm',
    mixins: [
        require('bd-stampy/mixins/FormMixin')
    ],
    getInitialState() {
        return {
            progress: 0,
            submitting: false
        };
    },
    componentWillMount() {
        this.FormMixin_updateState({});
    },
    componentWillReceiveProps(nextProps) {
        this.FormMixin_updateState(nextProps.value || nextProps.initialValue || {});
    },
    onSuccess(details) {
        this.FormMixin_onFormChange(null, {key: 'moduleId', value: details._id});
        this.FormMixin_onFormChange(null, {key: 'url', value: details.url});

        this.setState({
            success: 'Module Uploaded!',
            submitting: false
        });

        if(this.props.onChange) {
            this.props.onChange(this.state.formData);
        }
    },
    onError(error) {
        var errorMessage;

        switch(error) {
            case INTERNAL_SERVER_ERROR:
                errorMessage = 'Elearning server is down';
                break;
            default:
                errorMessage = error.message || error;
                break;
        }

        this.setState({
            error: errorMessage,
            submitting: false
        });
    },
    onProgress(ee) {
        var decimal = (ee.loaded / ee.total);

        var details = {
            loaded: ee.loaded,
            decimal: decimal,
            progress: Math.round((decimal * 100) * 100) / 100
        };

        this.setState(details);
    },
    onConfirmFileSubmit(data) {
        if(this.state.formData.moduleId) {
            ModalManager.showModal(ModalConfirm, {
                title: 'Warning!',
                message: `You are about to replace an existing module. Please note that this may cause an issue for any user currently completing this module. It is recommended to replace and test published modules outside of working hours.`,
                yes: 'Submit',
                onYes: this.onSubmitFile.bind(this, data),
                no: 'Cancel'
            });
        } else {
            this.onSubmitFile(data);
        }

        this.setState({
            success: '',
            error: '',
            submitting: true,
            progress: 1
        });
    },
    onSubmitFile(data) {
        xhr.upload(ELEARNING_FILE_UPLOAD_ENDPOINT, 'filename', data.files[0], this.onProgress)
            .then(
                (data) => this.onSuccess(data),
                (error) => this.onError(error)
            );
    },
    onChange() {
        if(this.props.onChange) {
            this.props.onChange(this.state.formData);
        }
    },
    onUpdate(e, details) {
        this.setState({success: ''});
        this.FormMixin_onFormChange(e, details, this.onChange);
    },
    render() {
        return (
            <div>
                <InputRow label="eLearning .zip">
                    <FileUpload
                        onSubmit={this.onConfirmFileSubmit}
                        submitting={this.state.submitting}
                        progress={this.state.progress}
                    />
                    <strong className={this.state.error ? 't-red' : 't-green'}>{this.state.error || this.state.success}</strong>
                </InputRow>
                {this.renderDetails()}
            </div>
        );
    },
    renderDetails() {
        if(!Object.keys(this.state.formData).length) {
            return <div>
                {this.renderModuleId()}
                {this.renderModuleURL()}
                {this.renderModuleCloseButton()}
            </div>;
        }
    },
    renderModuleId(){
        if(this.state.formData.moduleId) {
            return <InputRow label="Module ID">
                <Input name="moduleId" value={this.state.formData.moduleId} disabled/>
            </InputRow>;
        }
    },
    renderModuleURL(){
        if(this.state.formData.url) {
            return <InputRow label="Module URL">
                <Input name="url" value={this.state.formData.url} disabled/>
            </InputRow>;
        }
    },
    renderModuleCloseButton(){
        var closeLabel = <div>
            <span>Close Button</span>
            <div><em className="t-muted">Some modules record completion on window close, if this is the case, please check Close Button.</em></div>
        </div>;

        if(this.state.formData.moduleId) {
            return <InputRow label={closeLabel}>
                <Input type="checkbox" name="renderCloseBtn" value={this.state.formData.renderCloseBtn} onChange={this.onUpdate}/>
            </InputRow>;
        }
    }
});

export default ModuleUploadForm;