Commit 92fe0433 authored by hh1966's avatar hh1966
Browse files

Move name to seperate component in research plan detail

parent 2f6fc74a
......@@ -23,10 +23,10 @@ import SpinnerPencilIcon from './common/SpinnerPencilIcon';
import ImageModal from './common/ImageModal';
import LoadingActions from './actions/LoadingActions';
import NameField from './research_plan/NameField';
import RichTextField from './research_plan/RichTextField';
import KetcherField from './research_plan/KetcherField';
const editorTooltip = exts => <Tooltip id="editor_tooltip">Available extensions: {exts}</Tooltip>;
const downloadTooltip = <Tooltip id="download_tooltip">Download attachment</Tooltip>;
......@@ -107,23 +107,6 @@ export default class ResearchPlanDetails extends Component {
return docType;
}
handleInputChange(type, event) {
let {research_plan} = this.state;
research_plan.changed = true;
const value = event.target.value;
switch (type) {
case 'name':
research_plan.name = value;
break;
// case 'description':
// research_plan.description = value;
// break;
}
this.setState({
research_plan: research_plan
});
}
researchPlanHeader(research_plan) {
let saveBtnDisplay = research_plan.changed ? '' : 'none';
......@@ -363,7 +346,24 @@ export default class ResearchPlanDetails extends Component {
Utils.downloadFile({contents: `/api/v1/attachments/${attachment.id}`, name: attachment.filename});
}
handleChange(value, index) {
handleSelect(eventKey) {
UIActions.selectTab({tabKey: eventKey, type: 'screen'});
this.setState({
activeTab: eventKey
})
}
handleNameChange(value) {
let {research_plan} = this.state
research_plan.changed = true
research_plan.name = value
this.setState({
research_plan: research_plan
});
}
handleBodyChange(value, index) {
let {research_plan} = this.state
research_plan.changed = true
research_plan.body[index].value = value
......@@ -374,22 +374,22 @@ export default class ResearchPlanDetails extends Component {
}
propertiesTab(research_plan) {
const { name, description } = research_plan;
const { name, body } = research_plan;
const submitLabel = research_plan.isNew ? "Create" : "Save";
const disabled = research_plan.isMethodDisabled('body')
let bodyFields = research_plan.body.map((field, index) => {
let bodyFields = body.map((field, index) => {
switch (field.type) {
case 'richtext':
return <RichTextField key={field.id}
field={field} index={index} disabled={disabled}
onChange={this.handleChange.bind(this)} />
onChange={this.handleBodyChange.bind(this)} />
break;
case 'ketcher':
return <KetcherField key={field.id}
field={field} index={index} disabled={disabled}
onChange={this.handleChange.bind(this)} />
onChange={this.handleBodyChange.bind(this)} />
break;
}
})
......@@ -397,19 +397,8 @@ export default class ResearchPlanDetails extends Component {
return (
<ListGroup fill="true">
<ListGroupItem>
<Row>
<Col md={4}>
<FormGroup>
<ControlLabel>Name</ControlLabel>
<FormControl
type="text"
value={name || ''}
onChange={event => this.handleInputChange('name', event)}
disabled={research_plan.isMethodDisabled('name')}
/>
</FormGroup>
</Col>
</Row>
<NameField value={name} disabled={research_plan.isMethodDisabled('name')}
onChange={this.handleNameChange.bind(this)} />
{bodyFields}
<Row>
<Col md={12}>
......@@ -436,13 +425,6 @@ export default class ResearchPlanDetails extends Component {
);
}
handleSelect(eventKey) {
UIActions.selectTab({tabKey: eventKey, type: 'screen'});
this.setState({
activeTab: eventKey
})
}
render() {
const { research_plan } = this.state;
const { name, description } = research_plan;
......
......@@ -88,8 +88,6 @@ export default class KetcherField extends Component {
svgPath = '/images/wild_card/loading-bubbles.svg'
}
console.log(svgPath);
const imageDefault = !includes(svgPath, 'no_image_180.svg');
return (
......
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { ControlLabel, FormControl, FormGroup, Row, Col } from 'react-bootstrap';
export default class NameField extends Component {
constructor(props) {
super(props)
const { value, disabled, onChange } = props
this.state = {
value,
disabled,
onChange
}
}
handleChange(event) {
let { value, onChange } = this.state
value = event.target.value
this.setState({
value: value
});
onChange(value)
}
render() {
let { value, disabled } = this.state
return (
<Row>
<Col md={4}>
<FormGroup>
<ControlLabel>Name</ControlLabel>
<FormControl
type="text"
value={value || ''}
onChange={this.handleChange.bind(this)}
disabled={disabled}
/>
</FormGroup>
</Col>
</Row>
)
}
}
NameField.propTypes = {
value: PropTypes.string,
disabled: PropTypes.bool,
onChange: PropTypes.func,
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment