Refactor static research plans

app/assets/javascripts/components/models/ResearchPlan.js

@@ -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;
     }
   }
 

app/assets/javascripts/components/research_plan/ResearchPlanDetails.js

@@ -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() {

app/assets/javascripts/components/research_plan/ResearchPlanDetailsBody.js

@@ -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>
+      )
+    }
   }
 }
 

app/assets/javascripts/components/research_plan/ResearchPlanDetailsField.js

@@ -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 = {

app/assets/javascripts/components/research_plan/ResearchPlanDetailsFieldImage.js

@@ -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 = {

app/assets/javascripts/components/research_plan/ResearchPlanDetailsFieldKetcher.js

@@ -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 = {

app/assets/javascripts/components/research_plan/ResearchPlanDetailsFieldRichText.js

@@ -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 = {

app/assets/javascripts/components/research_plan/ResearchPlanDetailsFieldTable.js

@@ -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 = {

app/assets/javascripts/components/research_plan/ResearchPlanDetailsName.js

@@ -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>
+    }
   }
 
 }

app/assets/javascripts/components/research_plan/ResearchPlanDetailsStatic.js

-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>
-    )
-  }