Skip to content

GitLab

Commit f8e778d4 authored by hh1966's avatar hh1966
Browse files

Add edit mode to research plan detail

parent 9c922d3b
Pipeline #50344 failed with stage
Hide whitespace changes
Inline Side-by-side
app/assets/javascripts/components/ResearchPlanDetails.js
View file @ f8e778d4
......@@ -23,8 +23,9 @@ import SpinnerPencilIcon from './common/SpinnerPencilIcon';
import ImageModal from './common/ImageModal';
import LoadingActions from './actions/LoadingActions';
import ResearchPlanDetailsNameField from './research_plan/ResearchPlanDetailsNameField';
import ResearchPlanDetailsBody from './research_plan/ResearchPlanDetailsBody';
import ResearchPlanDetailsNameField from './research_plan/ResearchPlanDetailsNameField';
import ResearchPlanDetailsStatic from './research_plan/ResearchPlanDetailsStatic';
const editorTooltip = exts => <Tooltip id="editor_tooltip">Available extensions: {exts}</Tooltip>;
......@@ -55,7 +56,8 @@ export default class ResearchPlanDetails extends Component {
showStructureEditor: false,
loadingMolecule: false,
attachmentEditor: false,
extension: null
extension: null,
edit: false
};
this.editorInitial = this.editorInitial.bind(this);
}
......@@ -106,51 +108,6 @@ export default class ResearchPlanDetails extends Component {
return docType;
}
researchPlanHeader(research_plan) {
let saveBtnDisplay = research_plan.changed ? '' : 'none';
return (
<div>
<i className="fa fa-file-text-o" />
&nbsp; <span>{research_plan.name}</span> &nbsp;
<ElementCollectionLabels element={research_plan} placement="right"/>
<OverlayTrigger placement="bottom"
overlay={<Tooltip id="closeresearch_plan">Close research_plan</Tooltip>}>
<Button bsStyle="danger" bsSize="xsmall" className="button-right"
onClick={() => DetailActions.close(research_plan)} >
<i className="fa fa-times"></i>
</Button>
</OverlayTrigger>
<OverlayTrigger placement="bottom"
overlay={<Tooltip id="saveresearch_plan">Save research_plan</Tooltip>}>
<Button bsStyle="warning" bsSize="xsmall" className="button-right"
onClick={() => this.handleSubmit()}
style={{display: saveBtnDisplay}} >
<i className="fa fa-floppy-o "></i>
</Button>
</OverlayTrigger>
<OverlayTrigger placement="bottom"
overlay={<Tooltip id="fullSample">Fullresearch_plan</Tooltip>}>
<Button bsStyle="info" bsSize="xsmall" className="button-right"
onClick={() => this.props.toggleFullScreen()}>
<i className="fa fa-expand"></i>
</Button>
</OverlayTrigger>
</div>
)
}
researchPlanInfo(research_plan) {
const style = {height: 'auto'};
return (
<Row style={style}>
<Col md={2}>
<h4>{research_plan.name}</h4>
</Col>
</Row>
)
}
dropzone() {
return (
<Dropzone
......@@ -408,7 +365,26 @@ export default class ResearchPlanDetails extends Component {
});
}
propertiesTab(research_plan) {
toggleEdit() {
let {edit} = this.state
this.setState({
edit: !edit
});
}
renderResearchPlanInfo(research_plan) {
const style = {height: 'auto'};
return (
<Row style={style}>
<Col md={6}>
<h4>{research_plan.name}</h4>
</Col>
</Row>
)
}
renderPropertiesTab(research_plan) {
const { name, body } = research_plan;
const submitLabel = research_plan.isNew ? "Create" : "Save";
......@@ -417,7 +393,8 @@ export default class ResearchPlanDetails extends Component {
<ListGroupItem>
<ResearchPlanDetailsNameField value={name} disabled={research_plan.isMethodDisabled('name')}
onChange={this.handleNameChange.bind(this)} />
<ResearchPlanDetailsBody body={body} disabled={research_plan.isMethodDisabled('body')}
<ResearchPlanDetailsBody body={body}
disabled={research_plan.isMethodDisabled('body')}
onChange={this.handleBodyChange.bind(this)}
onDrop={this.handleBodyDrop.bind(this)}
onAdd={this.handleBodyAdd.bind(this)}
......@@ -436,8 +413,7 @@ export default class ResearchPlanDetails extends Component {
);
}
literatureTab(research_plan){
const { name, description } = research_plan;
renderLiteratureTab(research_plan) {
const submitLabel = research_plan.isNew ? "Create" : "Save";
return (
......@@ -447,25 +423,65 @@ export default class ResearchPlanDetails extends Component {
);
}
render() {
const { research_plan } = this.state;
const { name, description } = research_plan;
const submitLabel = research_plan.isNew ? "Create" : "Save";
renderPanelHeading(research_plan) {
let saveBtnDisplay = research_plan.changed ? '' : 'none'
return (
<Panel bsStyle={research_plan.isPendingToSave ? 'info' : 'primary'}
className="panel-detail">
<Panel.Heading>{this.researchPlanHeader(research_plan)}</Panel.Heading>
<Panel.Heading>
<i className="fa fa-file-text-o" />
&nbsp; <span>{research_plan.name}</span> &nbsp;
<ElementCollectionLabels element={research_plan} placement="right"/>
<OverlayTrigger placement="bottom"
overlay={<Tooltip id="closeresearch_plan">Close research_plan</Tooltip>}>
<Button bsStyle="danger" bsSize="xsmall" className="button-right"
onClick={() => DetailActions.close(research_plan)} >
<i className="fa fa-times"></i>
</Button>
</OverlayTrigger>
<OverlayTrigger placement="bottom"
overlay={<Tooltip id="saveresearch_plan">Save research_plan</Tooltip>}>
<Button bsStyle="warning" bsSize="xsmall" className="button-right"
onClick={() => this.handleSubmit()}
style={{display: saveBtnDisplay}} >
<i className="fa fa-floppy-o "></i>
</Button>
</OverlayTrigger>
<OverlayTrigger placement="bottom"
overlay={<Tooltip id="saveresearch_plan">Toggle edit research_plan</Tooltip>}>
<Button bsStyle="warning" bsSize="xsmall" className="button-right"
onClick={() => this.toggleEdit()}>
<i className="fa fa-pencil"></i>
</Button>
</OverlayTrigger>
<OverlayTrigger placement="bottom"
overlay={<Tooltip id="fullSample">Fullresearch_plan</Tooltip>}>
<Button bsStyle="info" bsSize="xsmall" className="button-right"
onClick={() => this.props.toggleFullScreen()}>
<i className="fa fa-expand"></i>
</Button>
</OverlayTrigger>
</Panel.Heading>
)
}
renderPanelBody(research_plan, edit) {
if (edit) {
const submitLabel = research_plan.isNew ? "Create" : "Save"
return (
<Panel.Body>
{this.researchPlanInfo(research_plan)}
{this.renderResearchPlanInfo(research_plan)}
<Tabs activeKey={this.state.activeTab} onSelect={key => this.handleSelect(key)}
id="screen-detail-tab">
<Tab eventKey={0} title={'Properties'}>
{this.propertiesTab(research_plan)}
{this.renderPropertiesTab(research_plan)}
</Tab>
<Tab eventKey={1} title={'Literature'}>
{this.literatureTab(research_plan)}
{this.renderLiteratureTab(research_plan)}
</Tab>
</Tabs>
<ButtonToolbar>
......@@ -473,6 +489,26 @@ export default class ResearchPlanDetails extends Component {
<Button bsStyle="warning" onClick={() => this.handleSubmit()}>{submitLabel}</Button>
</ButtonToolbar>
</Panel.Body>
)
} else {
const { name, body } = research_plan
return (
<Panel.Body>
<ResearchPlanDetailsStatic name={name} body={body} />
</Panel.Body>
)
}
}
render() {
const { research_plan, edit } = this.state;
return (
<Panel bsStyle={research_plan.isPendingToSave ? 'info' : 'primary'}
className="panel-detail">
{this.renderPanelHeading(research_plan)}
{this.renderPanelBody(research_plan, edit)}
</Panel>
);
}
......
app/assets/javascripts/components/models/ResearchPlan.js
View file @ f8e778d4
import Element from './Element';
import React from 'react';
import { isEmpty } from 'lodash';
import Element from './Element';
const uuidv4 = require('uuid/v4');
export default class ResearchPlan extends Element {
......@@ -22,23 +24,6 @@ export default class ResearchPlan extends Element {
});
}
get svgPath() {
for (var i = 0; i < this.body.length; i++) {
if (this.body[i].type == 'ketcher') {
return `/images/research_plans/${this.body[i].value.svg_file}`
} else if (this.body[i].type == 'image') {
}
}
return `/images/wild_card/no_image_180.svg`
}
// overwrite isPendingToSave method in models/Element.js
get isPendingToSave() {
return !isEmpty(this) && (this.isNew || this.changed);
}
addBodyField(type) {
switch (type) {
case 'richtext':
......@@ -65,4 +50,21 @@ export default class ResearchPlan extends Element {
break;
}
}
get svgPath() {
for (var i = 0; i < this.body.length; i++) {
if (this.body[i].type == 'ketcher') {
return `/images/research_plans/${this.body[i].value.svg_file}`
} else if (this.body[i].type == 'image') {
}
}
return `/images/wild_card/no_image_180.svg`
}
// overwrite isPendingToSave method in models/Element.js
get isPendingToSave() {
return !isEmpty(this) && (this.isNew || this.changed);
}
}
app/assets/javascripts/components/research_plan/ResearchPlanDetailsStatic.js 0 → 100644
View file @ f8e778d4
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 field_html
switch (field.type) {
case 'richtext':
field_html = <QuillViewer value={field.value} />
break;
case 'ketcher':
let svgPath = '/images/research_plans/' + field.value.svg_file
field_html = (
<div className="svg-container-static">
<SVG src={svgPath} className="molecule-mid" />
</div>
)
break;
}
return (
<Row key={field.id}>
<Col>
{field_html}
</Col>
</Row>
)
})
return (
<div>
<h4>{name}</h4>
{fields}
</div>
)
}
}
ResearchPlanDetailsStatic.propTypes = {
name: PropTypes.string,
body: PropTypes.array
}
app/assets/stylesheets/research_plan.scss
View file @ f8e778d4
......@@ -70,3 +70,9 @@
}
}
}
.svg-container-static {
min-height: 200px;
width: 100%;
height: 100%;
}
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

Imprint