CreateProject.jsx #1

// The CreateProject component is a two-step wizard.
//
// The first step sets up basic project details, with the option of selecting
// a depot location for the project.
//
// The second step is basically our user management view.

var AppActions = require('../actions/AppActions');
var DepotTree = require('./DepotTree.jsx');
var Projects = require('../stores/Projects');
var React = require('react');
var ReactBootstrap = require('react-bootstrap');

var ButtonInput = ReactBootstrap.ButtonInput;
var Col = ReactBootstrap.Col;
var Grid = ReactBootstrap.Grid;
var Input = ReactBootstrap.Input;
var Panel = ReactBootstrap.Panel;
var Row = ReactBootstrap.Row;

var CreateProject = React.createClass({

  getInitialState: function() {
    return {
      useDepot: false
    };
  },

  componentDidMount: function() {
    Projects.addProjectCreatedListener(this.handleProjectCreated);
    Projects.addProjectCreationFailedListener(this.handleProjectCreationFailed);
  },

  componentWillUnmount: function() {
    Projects.removeProjectCreatedListener(this.handleProjectCreated);
    Projects.removeProjectCreationFailedListener(this.handleProjectCreationFailed);
  },

  render: function() {
    var existingForm;
    if (this.state.useDepot) {
      existingForm = (
        <div>
          <Input type='checkbox' label='Use an existing location in the depot'
                 onChange={this.changeUseDepot} checked />
          <DepotTree dirsOnly='true' onSelect={this.depotDirSelected} />
        </div>
      )
    } else {
      existingForm = (
        <div>
          <Input type='checkbox' label='Use an existing location in the depot'
                 onChange={this.changeUseDepot} />
        </div>
      );
    }

    return (
      <Panel>
        <Row>
          <Col md={6}>
            <h3> Create Project </h3>
          </Col>
          <Col md={6}>
          </Col>
        </Row>
        <Row>
          <Col md={12}>
            <form onSubmit={this.handleFormSubmit}>
              <Input ref='name' type='text' label='Name' placeholder='Enter Name (required)' />
              <Input ref='description' type='textarea' label='Description' placeholder='Enter Description (optional)' />
              {existingForm}
              <ButtonInput className='pull-right' type='submit' value='Create' />
            </form>
          </Col>
        </Row>
      </Panel>
    );
  },

  handleFormSubmit: function(event) {
    // TODO we likely want to update local state and trigger validation instead
    //      of passing values directly to the callback
    if (this.state.useDepot) {
      AppActions.createProject(
        this.refs.name.getValue(),
        this.refs.description.getValue(),
        "//" + this.state.depotDir.pathId.join('/')
      );
    } else {
      AppActions.createProject(
        this.refs.name.getValue(),
        this.refs.description.getValue());
    }

    event.stopPropagation();
    event.preventDefault();
  },

  handleProjectCreated: function() {
    AppActions.changeLocation({ projectList: 'my' });
  },

  handleProjectCreationFailed: function() {
    alert('Oops, project creation failed!');
  },

  changeUseDepot: function() {
    this.setState({ useDepot: !this.state.useDepot });
  },

  depotDirSelected: function(dir) {
    this.setState({ depotDir: dir });
  }
});

module.exports = CreateProject;