PrintJob.js

class PrintJob extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            printJobType: 0,
            clientPrinter: null,
            printerCommands: "",
            printFiles: []
        };
    }

    setPrintJobType(event) {
        this.setState({ printJobType: event.target.value });
    }

    deleteJob() {
        this.props.removeJobHandler(this.props.jobIndex);
    }

    updateJob() {
        var cpj = new JSPM.ClientPrintJob();
        cpj.clientPrinter = this.state.clientPrinter;
        cpj.printerCommands = this.state.printerCommands;
        if (this.state.printFiles) {
            let files = this.state.printFiles;
            for (let j = 0; j < files.length; j++) {
                let my_file;

                if (files[j].name) my_file = new JSPM.PrintFile(files[j], JSPM.FileSourceType.BLOB, files[j].name, 1);
                else my_file = new JSPM.PrintFile(files[j], JSPM.FileSourceType.ExternalURL, "myFileToPrint." + files[j].split(".").pop(), 1);

                cpj.files.push(my_file);
            }
        }

        this.props.updateJobHandler(this.props.jobIndex, cpj);
    }

    onPrinterChange(newPrinter) {
        //No need to re-render!
        this.state.clientPrinter = newPrinter;
        this.updateJob();
    }
    onPrinterCommandsChange(newPrinterCommands) {
        //No need to re-render!
        this.state.printerCommands = newPrinterCommands;
        this.updateJob();
    }
    onPrintFilesChange(newFiles) {
        //No need to re-render!
        this.state.printFiles = newFiles;
        this.updateJob();
    }

    render() {
        let jobIndex = "collapse-" + this.props.jobIndex;
        let jobIndexDT = "#" + jobIndex;
        let jobType = <PrintJobForRawCommands jobIndex={this.props.jobIndex} onPrinterCommandsChange={this.onPrinterCommandsChange.bind(this)} />;
        if (this.state.printJobType == 1) {
            jobType = <PrintJobForFiles jobIndex={this.props.jobIndex} onPrintFilesChange={this.onPrintFilesChange.bind(this)} />;
        }

        return (
            <div>
                <div className="card">
                    <div className="card-header">
                        <div className="input-group">
                            <div className="input-group-prepend" data-toggle="collapse" data-target={jobIndexDT} aria-expanded="true" aria-controls={jobIndex}>
                                <label className="input-group-text" htmlFor="selectcontentType" data-toggle="tooltip" data-placement="left" title="Expand/Collapse">
                                    <i className="fa fa-list-alt" />&nbsp;Print Job Content Type:
                                </label>
                            </div>
                            <select className="custom-select" aria-describedby="selectcontentType" onChange={this.setPrintJobType.bind(this)}>
                                <option value="0">RAW Printer Commands</option>
                                <option value="1">Files (PDF, TXT, PNG, JPG, etc.)</option>
                            </select>
                            <div className="input-group-append">
                                <button className="btn btn-danger" type="button" onClick={this.deleteJob.bind(this)}>
                                    <i className="fa fa-minus white" />
                                </button>
                            </div>
                            <div className="input-group-append">
                                <button className="btn btn-dark" type="button" data-toggle="collapse" data-target={jobIndexDT} aria-expanded="true" aria-controls={jobIndex}>
                                    <i className="fa fa-chevron-down white" />
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id={jobIndex} className="collapse show" data-parent="#accordion">
                        <div className="card-body">
                            <div className="row">
                                <Printers JobContentType={this.state.printJobType} onPrinterChange={this.onPrinterChange.bind(this)} />
                            </div>
                            <div className="row">{jobType}</div>
                        </div>
                    </div>
                </div>
                <br />
            </div>
        );
    }
}

window.PrintJob = PrintJob;