labo-components/app/components/workspace/projects/crud/ProjectForm.jsx

B&G UI components

import React from 'react';
import PropTypes from 'prop-types';
import IDUtil from '../../../../util/IDUtil';
import Project from '../../../../model/Project';
import { Link } from 'react-router-dom';

/**
* Shows the project form and handles saving the project data using the given api.
*/
class ProjectForm extends React.PureComponent {

    handleSubmit(e) {
        e.preventDefault();

        const project = Project.construct(this.props.project);
        project.name = this.name.value; //TODO user a proper react ref
        project.description = this.description.value;
        this.saveProject(project);

        return false;
    }

    saveProject(project, callback) {
        this.props.api.save(this.props.user.id, project, proj => {
            if (proj && proj.id) {
                this.props.projectDidSave(proj.id);
            } else {
                alert('An error occurred while saving this project');
            }
        })
    }

    render() {
        let cancelButton = null;
        if(this.props.cancelLink && this.props.cancelLink !== '') {
            cancelButton = (
                <Link to={this.props.cancelLink} className="btn">
                    Cancel
                </Link>
            )
        } else if(this.props.onCancel){
            cancelButton = (
                <button className="btn" type="button" onClick={this.props.onCancel}>
                    Cancel
                </button>
            );
        }

        return (
            <form className={IDUtil.cssClassName('project-form')} onSubmit={this.handleSubmit.bind(this)}>
                <div className="new-project-container">
                    <span className="bg__new-project-wrapper">
                        <label className="label project-modal-left">Name</label>
                        <input
                            type="text"
                            name="name"
                            required={true}
                            className="project-modal-right"
                            defaultValue={this.props.project.name}
                            ref={elem => (this.name = elem)}/>
                    </span>
                    <span className="bg__new-project-wrapper">
                    <label className="label project-modal-left">Description</label>
                    <textarea
                        name="description"
                        className="project-modal-right"
                        defaultValue={this.props.project.description}
                        ref={elem => (this.description = elem)}/>
                    </span>

                </div>

                <div className="actions">
                    {cancelButton}
                    <input
                        type="submit"
                        className="btn primary add"
                        value={this.props.submitButton}/>
                </div>
            </form>
        )
    }
}

ProjectForm.propTypes = {
    api: PropTypes.func.isRequired,
    id: PropTypes.string,
    cancelLink: PropTypes.string,
    onCancel: PropTypes.func,
    project: Project.getPropTypes(),
    projectDidSave: PropTypes.func.isRequired,
    submitButton: PropTypes.string.isRequired,
    user: PropTypes.shape({
        id: PropTypes.string.isRequired,
        name: PropTypes.string,
        attributes: PropTypes.shape({
            allowPersonalCollections: PropTypes.bool
        })
    }).isRequired,

};

export default ProjectForm;