<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Plato - components/doi/DOIForm.js</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

  <!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <link href="../../assets/css/vendor/morris.css" rel="stylesheet" type="text/css">
  <link href="../../assets/css/vendor/bootstrap.css" rel="stylesheet" type="text/css">
  <link href="../../assets/css/vendor/font-awesome.css" rel="stylesheet" type="text/css">
  <link href="../../assets/css/vendor/codemirror.css" rel="stylesheet" type="text/css">
  <link href="../../assets/css/plato.css" rel="stylesheet" type="text/css">
  <link href="../../assets/css/plato-file.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="navbar navbar-fixed-top">
  <div class="container">
    <a class="navbar-brand" href="https://github.com/the-simian/es6-plato">ES6 Plato on Github</a>
    <ul class="nav navbar-nav">
      <li>
        <a href="../../index.html">Report Home</a>
      </li>
      <li class="active">
        <a href="display.html">Summary Display</a>
      </li>
    </ul>
  </div>
</div>

<div class="jumbotron">
  <div class="container">
    <h1>components/doi/DOIForm.js</h1>
  </div>
</div>

<div class="container aggregate-stats">
  <div class="row">
    <div class="col-md-6">
      <h2 class="header">Maintainability <a href="http://blogs.msdn.com/b/codeanalysis/archive/2007/11/20/maintainability-index-range-and-meaning.aspx"><i class="icon icon-info-sign" rel="popover" data-placement="top" data-trigger="hover" data-content="A value between 0 and 100 that represents the relative ease of maintaining the code. A high value means better maintainability." data-original-title="Maintainability Index"  data-container="body"></i></a></h2>
      <p class="stat">69.63</p>
    </div>
    <div class="col-md-6">
      <h2 class="header">Lines of code <i class="icon icon-info-sign" rel="popover" data-placement="top" data-trigger="hover" data-content="Source Lines of Code / Logical Lines of Code" data-original-title="SLOC/LSLOC" data-container="body"></i></h2>
      <p class="stat">210</p>
    </div>
  </div>
  <div class="row historical">
    <div class="col-md-6">
      <p id="chart_historical_maint" class="chart"></p>
    </div>
    <div class="col-md-6">
      <p id="chart_historical_sloc" class="chart"></p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <h2 class="header">Difficulty  <a href="http://en.wikipedia.org/wiki/Halstead_complexity_measures"><i class="icon icon-info-sign" rel="popover" data-placement="top" data-trigger="hover" data-content="The difficulty measure is related to the difficulty of the program to write or understand." data-original-title="Difficulty" data-container="body"></i></a></h2>
      <p class="stat">35.17</p>
    </div>
    <div class="col-md-6">
      <h2 class="header">Estimated Errors  <a href="http://en.wikipedia.org/wiki/Halstead_complexity_measures"><i class="icon icon-info-sign" rel="popover" data-placement="top" data-trigger="hover" data-content="Halstead's delivered bugs is an estimate for the number of errors in the implementation." data-original-title="Delivered Bugs" data-container="body"></i></a></h2>
      <p class="stat">1.43</p>
    </div>
  </div>
</div>

<div class="container charts">
  <div class="row">
    <h2 class="header">Function weight</h2>
  </div>
  <div class="row">
    <div class="col-md-6">
      <h3 class="chart-header">By Complexity <a href="http://en.wikipedia.org/wiki/Cyclomatic_complexity"><i class="icon icon-info-sign" rel="popover" data-placement="top" data-trigger="hover" data-content="This metric counts the number of distinct paths through a block of code. Lower values are better." data-original-title="Cyclomatic Complexity" data-container="body"></i></a></h3>
      <div id="fn-by-complexity" class="stat"></div>
    </div>
    <div class="col-md-6">
      <h3 class="chart-header">By SLOC  <i class="icon icon-info-sign" rel="popover" data-placement="top" data-trigger="hover" data-content="Source Lines of Code / Logical Lines of Code" data-original-title="SLOC/LSLOC" data-container="body"></i></h3>
      <div id="fn-by-sloc" class="stat"></div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <textarea id="file-source" class="col-md-12">import React from &#039;react&#039;;
import axios from &quot;axios&quot;;
import { Label, SplitButton, MenuItem, Panel, Form, FormGroup, ControlLabel, Button, FormControl } from &#039;react-bootstrap&#039;;
import { BootstrapTable, TableHeaderColumn } from &#039;react-bootstrap-table&#039;;
import { getMintDOI } from &#039;../../api/icat/icatPlus.js&#039;

export class DOIForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            authors: [],
            investigationUsers: [],
            fetching: false,
            fetched: false
        }

        this.onAfterDeleteRow = this.onAfterDeleteRow.bind(this);
        this.addAuthor = this.addAuthor.bind(this);
    }

    /**
     * Add an author to the table
     */
    addAuthor(investigationUser) {
        let authors = this.state.authors;
        if (!investigationUser.fullName) {
            authors.push({
                &quot;name&quot;: this.name.value,
                &quot;surname&quot;: this.surname.value,
                &quot;id&quot;: this.name.value + &quot;_&quot; + this.surname.value
            });
        }
        else {
            let name = investigationUser.fullName.split(&quot; &quot;)[0];
            let surname = investigationUser.fullName.replace(investigationUser.fullName.split(&quot; &quot;)[0], &quot;&quot;)
            authors.push({
                &quot;name&quot;: name,
                &quot;surname&quot;: surname,
                &quot;id&quot;: name + &quot;_&quot; + surname
            });
        }
        this.setState({
            authors: authors
        });
    }


    onAfterDeleteRow(rowKeys) {
        let authors = this.state.authors;
        for (var i = 0; i &lt; rowKeys.length; i++) {
            authors = authors.filter(function (o) { return o.id !== rowKeys[i] })

        }
        this.setState({
            authors: authors
        });

    }

    /**
     * This method will get the params from the form and will cal to ICAT+ to mint a new DOI
     */
    mint() {
        let authors = this.state.authors;
        let title = this.title.value;
        let abstract = this.abstract.value;
        let datasetIdList = [];
        for (var i = 0; i &lt; this.props.datasets.length; i++) {
            datasetIdList.push(this.props.datasets[i].id);
        }
        var url = getMintDOI(this.props.sessionId);
        axios.post(url, {
            title: title,
            abstract: abstract,
            datasetIdList: datasetIdList,
            authors: authors
        })
            .then(function (response) {
                if (response) {
                    if (response.data) {
                        if (response.data.message) {
                            alert(&quot;Your DOI has been created &quot; + response.data.message);
                        }
                    }
                }
            })
            .catch(function (error) {
                if (error) {
                    if (error.response) {
                        if (error.response.data) {
                            if (error.response.data.message) {
                                alert(error.response.data.message);
                            }
                        }
                    }
                }
            });
    }


    renderButton() {

        return &lt;SplitButton
            bsStyle=&quot;default&quot;
            title=&quot;Add author&quot;
            style={{ width: &#039;100px&#039; }}
            onClick={this.addAuthor}
        &gt;
            {this.props.investigationUsers.map(function (user, i) {
                var bsStyleRole = &quot;default&quot;;
                if (user.role === &quot;Principal investigator&quot;) {
                    var bsStyleRole = &quot;primary&quot;;
                }
                return &lt;MenuItem style={{ width: &#039;350px&#039; }} eventKey={user} onSelect={this.addAuthor}&gt;
                    &lt;span style={{ marginLeft: 10 }}&gt;{user.fullName} &lt;/span&gt;
                    &lt;Label bsStyle=&#039;info&#039; style={{ marginLeft: 20 }}&gt;{user.investigationName}&lt;/Label&gt;
                    &lt;Label bsStyle={bsStyleRole} style={{ marginLeft: 10 }}&gt;{user.role}&lt;/Label&gt;
                &lt;/MenuItem&gt;
            }, this)}
            &lt;MenuItem divider /&gt;

        &lt;/SplitButton&gt;

    }
    render() {
        // If you want to enable deleteRow, you must enable row selection also.
        const selectRowProp = {
            mode: &#039;checkbox&#039;
        };

        const options = {
            paginationSize: 5,
            sizePerPage: 5,
            paginationShowsTotal: true,
            hidePageListOnlyOnePage: true,
            afterDeleteRow: this.onAfterDeleteRow  // A hook for after droping rows.
        };




        return &lt;Form&gt;
            &lt;FormGroup controlId=&quot;formControlsTextarea&quot;&gt;
                &lt;ControlLabel&gt;Title &lt;Mandatory&gt;&lt;/Mandatory&gt;&lt;/ControlLabel&gt;
                &lt;FormControl inputRef={(ref) =&gt; { this.title = ref }} componentClass=&quot;textarea&quot; placeholder=&quot;&quot; /&gt;
            &lt;/FormGroup&gt;

            &lt;FormGroup controlId=&quot;formControlsTextarea&quot;&gt;
                &lt;ControlLabel&gt;Abstract &lt;Mandatory&gt;&lt;/Mandatory&gt;&lt;/ControlLabel&gt;
                &lt;FormControl inputRef={(ref) =&gt; { this.abstract = ref }} componentClass=&quot;textarea&quot; placeholder=&quot;&quot; /&gt;
            &lt;/FormGroup&gt;
            &lt;br /&gt;
            &lt;Panel bsStyle=&quot;primary&quot;&gt;
                &lt;Panel.Heading &gt;
                    &lt;Panel.Title &gt;Authors&lt;/Panel.Title&gt;
                &lt;/Panel.Heading&gt;

                &lt;Panel.Body&gt;

                    &lt;Form inline&gt;
                        &lt;FormGroup controlId=&quot;formInlineName&quot;&gt;
                            &lt;ControlLabel&gt;Name&lt;/ControlLabel&gt;{&#039; &#039;}
                            &lt;FormControl inputRef={(ref) =&gt; { this.name = ref }} type=&quot;text&quot; /&gt;
                        &lt;/FormGroup&gt;{&#039; &#039;}
                        &lt;FormGroup controlId=&quot;formInlineEmail&quot; style={{ &#039;marginLeft&#039;: &#039;10px&#039; }}&gt;
                            &lt;ControlLabel&gt;Surname&lt;/ControlLabel&gt;{&#039; &#039;}
                            &lt;FormControl inputRef={(ref) =&gt; { this.surname = ref }} /&gt;
                        &lt;/FormGroup&gt;{&#039; &#039;}

                        {this.renderButton()}

                    &lt;/Form&gt;

                    &lt;br /&gt;
                    &lt;BootstrapTable
                        data={this.state.authors}
                        options={options}
                        striped
                        selectRow={selectRowProp}
                        deleteRow={true}
                        hover
                        condensed&gt;
                        &lt;TableHeaderColumn width=&#039;50%&#039; isKey hidden dataField=&#039;id&#039;&gt;id&lt;/TableHeaderColumn&gt;
                        &lt;TableHeaderColumn width=&#039;50%&#039; dataField=&#039;name&#039;&gt;Name&lt;/TableHeaderColumn&gt;
                        &lt;TableHeaderColumn width=&#039;50%&#039; dataField=&#039;surname&#039;&gt;Surname&lt;/TableHeaderColumn&gt;
                    &lt;/BootstrapTable&gt;
                &lt;/Panel.Body&gt;

            &lt;/Panel&gt;
            &lt;br /&gt;
            &lt;Button onClick={this.mint.bind(this)} className=&#039;btn btn-primary pull-right&#039;&gt;Mint&lt;/Button&gt;


        &lt;/Form&gt;


    }
}

class Mandatory extends React.Component {
    render() {
        return (
            &lt;span style={{ color: &#039;red&#039; }}&gt;*&lt;/span&gt;

        );
    }
};

export default DOIForm
</textarea>
  </div>
</div>

<footer class="footer">
  <div class="container">
    <p>.</p>
  </div>
</footer>

<script type="text/html" id="complexity-popover-template">
  <div class="complexity-notice">
    Complexity : {{ complexity.cyclomatic }} <br>
    Length : {{ complexity.halstead.length }} <br>
    Difficulty : {{ complexity.halstead.difficulty.toFixed(2) }} <br>
    Est # bugs : {{ complexity.halstead.bugs.toFixed(2) }}<br>
  </div>
</script>

<script type="text/javascript" src="../../assets/scripts/bundles/core-bundle.js"></script>
<script type="text/javascript" src="../../assets/scripts/bundles/codemirror.js"></script>
<script type="text/javascript" src="../../assets/scripts/codemirror.markpopovertext.js"></script>
<script type="text/javascript" src="report.js"></script>
<script type="text/javascript" src="report.history.js"></script>
<script type="text/javascript" src="../../assets/scripts/plato-file.js"></script>
</body>
</html>
