Commit 7308272b authored by hh1966's avatar hh1966
Browse files

Refactor static research plans

parent d4587793
......@@ -78,6 +78,15 @@ export default class ResearchPlan extends Element {
}
})
break;
case 'sample':
this.body.push({
id: uuidv4(),
type: 'sample',
value: {
sample_id: null
}
})
break;
}
}
......
......@@ -18,7 +18,6 @@ import LoadingActions from '../actions/LoadingActions';
import ResearchPlanDetailsAttachments from './ResearchPlanDetailsAttachments';
import ResearchPlanDetailsBody from './ResearchPlanDetailsBody';
import ResearchPlanDetailsName from './ResearchPlanDetailsName';
import ResearchPlanDetailsStatic from './ResearchPlanDetailsStatic';
export default class ResearchPlanDetails extends Component {
......@@ -27,7 +26,7 @@ export default class ResearchPlanDetails extends Component {
const { research_plan } = props;
this.state = {
research_plan,
edit: true,
edit: false,
update: false
};
}
......@@ -194,7 +193,7 @@ export default class ResearchPlanDetails extends Component {
renderPropertiesTab(research_plan) {
const { name, body, attachments } = research_plan
const { update } = this.state
const { update, edit } = this.state
const submitLabel = research_plan.isNew ? "Create" : "Save"
return (
......@@ -202,7 +201,8 @@ export default class ResearchPlanDetails extends Component {
<ListGroupItem>
<ResearchPlanDetailsName value={name}
disabled={research_plan.isMethodDisabled('name')}
onChange={this.handleNameChange.bind(this)} />
onChange={this.handleNameChange.bind(this)}
edit={edit} />
<ResearchPlanDetailsBody body={body}
disabled={research_plan.isMethodDisabled('body')}
......@@ -210,14 +210,16 @@ export default class ResearchPlanDetails extends Component {
onDrop={this.handleBodyDrop.bind(this)}
onAdd={this.handleBodyAdd.bind(this)}
onDelete={this.handleBodyDelete.bind(this)}
update={update} />
update={update}
edit={edit} />
<ResearchPlanDetailsAttachments attachments={attachments}
onDrop={this.handleAttachmentDrop.bind(this)}
onDelete={this.handleAttachmentDelete.bind(this)}
onUndoDelete={this.handleAttachmentUndoDelete.bind(this)}
onDownload={this.handleAttachmentDownload.bind(this)}
onEdit={this.handleAttachmentEdit.bind(this)} />
onEdit={this.handleAttachmentEdit.bind(this)}
edit={edit} />
</ListGroupItem>
</ListGroup>
);
......@@ -279,36 +281,26 @@ export default class ResearchPlanDetails extends Component {
}
renderPanelBody(research_plan, edit) {
if (edit) {
const submitLabel = research_plan.isNew ? "Create" : "Save"
return (
<Panel.Body>
{this.renderResearchPlanInfo(research_plan)}
<Tabs activeKey={this.state.activeTab} onSelect={key => this.handleSelect(key)}
id="screen-detail-tab">
<Tab eventKey={0} title={'Properties'}>
{this.renderPropertiesTab(research_plan)}
</Tab>
<Tab eventKey={1} title={'Literature'}>
{this.renderLiteratureTab(research_plan)}
</Tab>
</Tabs>
<ButtonToolbar>
<Button bsStyle="primary" onClick={() => DetailActions.close(research_plan)}>Close</Button>
<Button bsStyle="warning" onClick={() => this.handleSubmit()}>{submitLabel}</Button>
</ButtonToolbar>
</Panel.Body>
)
} else {
const { name, body } = research_plan
const submitLabel = research_plan.isNew ? "Create" : "Save"
return (
<Panel.Body>
<ResearchPlanDetailsStatic name={name} body={body} />
</Panel.Body>
)
}
return (
<Panel.Body>
{this.renderResearchPlanInfo(research_plan)}
<Tabs activeKey={this.state.activeTab} onSelect={key => this.handleSelect(key)}
id="screen-detail-tab">
<Tab eventKey={0} title={'Properties'}>
{this.renderPropertiesTab(research_plan)}
</Tab>
<Tab eventKey={1} title={'Literature'}>
{this.renderLiteratureTab(research_plan)}
</Tab>
</Tabs>
<ButtonToolbar>
<Button bsStyle="primary" onClick={() => DetailActions.close(research_plan)}>Close</Button>
<Button bsStyle="warning" onClick={() => this.handleSubmit()}>{submitLabel}</Button>
</ButtonToolbar>
</Panel.Body>
)
}
render() {
......
......@@ -9,7 +9,7 @@ import Field from './ResearchPlanDetailsField'
export default class ResearchPlanDetailsBody extends Component {
render() {
let { body, disabled, onChange, onDrop, onAdd, onDelete, update } = this.props
let { body, disabled, onChange, onDrop, onAdd, onDelete, update, edit } = this.props
let fields = body.map((field, index) => {
return <Field key={field.id}
......@@ -17,25 +17,34 @@ export default class ResearchPlanDetailsBody extends Component {
onChange={onChange.bind(this)}
onDrop={onDrop.bind(this)}
onDelete={onDelete.bind(this)}
update={update} />
update={update}
edit={edit} />
})
return (
<div className="research-plan-details-body">
{fields}
<Row>
<Col md={12}>
<ResearchPlanDetailsDropTarget index={fields.length}/>
<div>
<ControlLabel>Add field</ControlLabel>
if (edit) {
return (
<div className="research-plan-details-body">
{fields}
<Row>
<Col md={12}>
<ResearchPlanDetailsDropTarget index={fields.length}/>
<div>
<ResearchPlanDetailsAddField onAdd={onAdd}/>
<ControlLabel>Add field</ControlLabel>
<div>
<ResearchPlanDetailsAddField onAdd={onAdd}/>
</div>
</div>
</div>
</Col>
</Row>
</div>
)
</Col>
</Row>
</div>
)
} else {
return (
<div className="research-plan-details-static">
{fields}
</div>
)
}
}
}
......
......@@ -13,7 +13,7 @@ import ResearchPlanDetailsFieldTable from './ResearchPlanDetailsFieldTable'
export default class ResearchPlanDetailsField extends Component {
render() {
let { field, index, disabled, onChange, onDrop, onDelete, update } = this.props
let { field, index, disabled, onChange, onDrop, onDelete, update, edit } = this.props
let label, component
switch (field.type) {
......@@ -21,48 +21,57 @@ export default class ResearchPlanDetailsField extends Component {
label = 'Text'
component = <ResearchPlanDetailsFieldRichText key={field.id}
field={field} index={index} disabled={disabled}
onChange={onChange.bind(this)} />
onChange={onChange.bind(this)} edit={edit} />
break;
case 'ketcher':
label = 'Schema'
component = <ResearchPlanDetailsFieldKetcher key={field.id}
field={field} index={index} disabled={disabled}
onChange={onChange.bind(this)} />
onChange={onChange.bind(this)} edit={edit} />
break;
case 'image':
label = 'Image'
component = <ResearchPlanDetailsFieldImage key={field.id}
field={field} index={index} disabled={disabled}
onChange={onChange.bind(this)} />
onChange={onChange.bind(this)} edit={edit} />
break;
case 'table':
label = 'Table'
component = <ResearchPlanDetailsFieldTable key={field.id}
field={field} index={index} disabled={disabled}
onChange={onChange.bind(this)} update={update} />
onChange={onChange.bind(this)} update={update} edit={edit} />
break;
}
return (
<Row>
<Col md={12}>
<ResearchPlanDetailsDropTarget index={index}/>
</Col>
<Col md={12}>
<div className="field">
<Button className="pull-right" bsStyle="danger" bsSize="xsmall"
onClick={() => onDelete(field.id)} >
<i className="fa fa-times"></i>
</Button>
<ResearchPlanDetailsDragSource index={index} onDrop={onDrop.bind(this)}/>
<ControlLabel>{label}</ControlLabel>
if (edit) {
return (
<Row>
<Col md={12}>
<ResearchPlanDetailsDropTarget index={index}/>
</Col>
<Col md={12}>
<div className="field">
<Button className="pull-right" bsStyle="danger" bsSize="xsmall"
onClick={() => onDelete(field.id)} >
<i className="fa fa-times"></i>
</Button>
<ResearchPlanDetailsDragSource index={index} onDrop={onDrop.bind(this)}/>
<ControlLabel>{label}</ControlLabel>
{component}
</div>
</Col>
</Row>
)
} else {
return (
<Row>
<Col md={12}>
{component}
</div>
</Col>
</Row>
)
</Col>
</Row>
)
}
}
}
ResearchPlanDetailsField.propTypes = {
......
......@@ -19,7 +19,7 @@ export default class ResearchPlanDetailsFieldImage extends Component {
});
}
render() {
renderEdit() {
let { field } = this.props
let content
......@@ -46,6 +46,24 @@ export default class ResearchPlanDetailsFieldImage extends Component {
);
}
renderStatic() {
const { field } = this.props
const src = '/images/research_plans/' + field.value.public_name
return (
<div className="image-container">
<img src={src} alt={field.value.file_name} />
</div>
)
}
render() {
if (this.props.edit) {
return this.renderEdit()
} else {
return this.renderStatic()
}
}
}
ResearchPlanDetailsFieldImage.propTypes = {
......
......@@ -77,7 +77,7 @@ export default class ResearchPlanDetailsFieldKetcher extends Component {
)
}
render() {
renderEdit() {
let { field, disabled } = this.state
let className, svgPath
......@@ -101,6 +101,25 @@ export default class ResearchPlanDetailsFieldKetcher extends Component {
</div>
)
}
renderStatic() {
const { field } = this.state
const svgPath = '/images/research_plans/' + field.value.svg_file
return (
<div className="svg-container-static">
<SVG src={svgPath} className="molecule-mid" />
</div>
)
}
render() {
if (this.props.edit) {
return this.renderEdit()
} else {
return this.renderStatic()
}
}
}
ResearchPlanDetailsFieldKetcher.propTypes = {
......
......@@ -2,11 +2,12 @@ import React, { Component } from 'react'
import PropTypes from 'prop-types'
import QuillEditor from '../QuillEditor'
import QuillViewer from '../QuillViewer'
export default class ResearchPlanDetailsFieldRichText extends Component {
render() {
let { field, index, disabled, onChange } = this.props
renderEdit() {
const { field, index, disabled, onChange } = this.props
return (
<QuillEditor value={field.value}
......@@ -16,6 +17,19 @@ export default class ResearchPlanDetailsFieldRichText extends Component {
)
}
renderStatic() {
const { field } = this.props
return <QuillViewer value={field.value} />
}
render() {
if (this.props.edit) {
return this.renderEdit()
} else {
return this.renderStatic()
}
}
}
ResearchPlanDetailsFieldRichText.propTypes = {
......
......@@ -290,7 +290,7 @@ export default class ResearchPlanDetailsFieldTable extends Component {
return this.props.field.value.rows[idx]
}
render() {
renderEdit() {
const { field } = this.props
const { rows, columns } = field.value
const { columnNameModal, schemaModal } = this.state
......@@ -356,6 +356,47 @@ export default class ResearchPlanDetailsFieldTable extends Component {
</div>
)
}
renderStatic() {
const { field } = this.props
const { columns, rows } = field.value
const th = columns.map(column => {
return <th key={column.key}>{column.name}</th>
})
const tr = rows.map((row, index) => {
const td = columns.map(column => {
return <td key={column.key}>{row[column.key]}</td>
})
return (
<tr key={index}>
{td}
</tr>
)
})
return (
<table className="table table-bordered">
<thead>
<tr>
{th}
</tr>
</thead>
<tbody>
{tr}
</tbody>
</table>
)
}
render() {
if (this.props.edit) {
return this.renderEdit()
} else {
return this.renderStatic()
}
}
}
ResearchPlanDetailsFieldTable.propTypes = {
......
......@@ -5,19 +5,23 @@ import { ControlLabel, FormControl, FormGroup, Row, Col } from 'react-bootstrap'
export default class ResearchPlanDetailsName extends Component {
render() {
let { value, disabled, onChange } = this.props
const { value, disabled, onChange, edit } = this.props
return (
<FormGroup>
<ControlLabel>Name</ControlLabel>
<FormControl
type="text"
value={value || ''}
onChange={(event) => onChange(event.target.value)}
disabled={disabled}
/>
</FormGroup>
)
if (edit) {
return (
<FormGroup>
<ControlLabel>Name</ControlLabel>
<FormControl
type="text"
value={value || ''}
onChange={(event) => onChange(event.target.value)}
disabled={disabled}
/>
</FormGroup>
)
} else {
return <h4>{value}</h4>
}
}
}
......
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import SVG from 'react-inlinesvg'
import { ControlLabel, Row, Col } from 'react-bootstrap'
import QuillViewer from '../QuillViewer'
import ResearchPlanDetailsAddField from './ResearchPlanDetailsAddField'
import ResearchPlanDetailsDropTarget from './ResearchPlanDetailsDropTarget'
import Field from './ResearchPlanDetailsField'
export default class ResearchPlanDetailsStatic extends Component {
render() {
let { name, body } = this.props
let fields = body.map((field) => {
let html
switch (field.type) {
case 'richtext':
html = <QuillViewer value={field.value} />
break;
case 'ketcher':
let svgPath = '/images/research_plans/' + field.value.svg_file
html = (
<div className="svg-container-static">
<SVG src={svgPath} className="molecule-mid" />
</div>
)
break;
case 'image':
const src = '/images/research_plans/' + field.value.public_name
html = (
<div className="image-container">
<img src={src} alt={field.value.file_name} />
</div>
)
break;
case 'table':
const { columns, rows } = field.value
const column_html = columns.map(column => {
return <th key={column.key}>{column.name}</th>
})
const rows_html = rows.map((row, index) => {
const row_html = columns.map(column => {
return <td key={column.key}>{row[column.key]}</td>
})
return (
<tr key={index}>
{row_html}
</tr>
)
})
html = (
<table className="table table-bordered">
<thead>
<tr>
{column_html}
</tr>
</thead>
<tbody>
{rows_html}
</tbody>
</table>
)
break;
}
return (
<Row key={field.id}>
<Col md={12}>
{html}
</Col>
</Row>
)
})
return (
<div>
<h4>{name}</h4>
<div className="research-plan-details-static">
{fields}
</div>
</div>
)
}