Add svg formatter and json

Add revert button to versioned field

reset colum information

re-create schema

update solvent label

app/models/concerns/versionable.rb

@@ -41,7 +41,7 @@ def versions_hash(record_name = name)
         old_value = version_value(key, base[key])
         new_value = version_value(key, value)
 
-        if old_value.is_a?(Hash) || new_value.is_a?(Hash)
+        if (old_value.is_a?(Hash) || new_value.is_a?(Hash)) && key != 'temperature'
           # fix nil cases
           old_value ||= {}
           new_value ||= {}
@@ -126,6 +126,10 @@ def version_label(attribute, value_hash = {})
       'Stop'
     when 'observation'
       'Additional information for publication and purification details'
+    when 'temperature'
+      'Temperature'
+    when 'solvent'
+      'Solvent'
     else
       if self.class.columns_hash[attribute].type.in?(%i[hstore jsonb])
         label_hash = {}
@@ -158,6 +162,8 @@ def version_kind(attribute, value_hash = {})
                   :quill
                 elsif self.class.name == 'Container' && key == 'kind'
                   :treeselect
+                elsif self.class.name == 'Sample' && key == 'sample_svg_file'
+                  :svg
                 else
                   :string
                 end
@@ -176,6 +182,12 @@ def version_kind(attribute, value_hash = {})
         :date
       when 'melting_point', 'boiling_point'
         :numrange
+      when 'solvent'
+        :solvent
+      when 'sample_svg_file'
+        :svg
+      when 'temperature'
+        :temperature
       else
         :string
       end

app/packs/src/apps/mydb/elements/details/VersionsTable.js

@@ -16,6 +16,8 @@ export default class VersionsTable extends Component {
       page: 1,
       pages: 1,
     };
+
+    this.updateParent = this.updateParent.bind(this);
   }
 
   componentDidMount() {
@@ -51,8 +53,13 @@ export default class VersionsTable extends Component {
     });
   }
 
+  updateParent(name, kind, value) {
+    this.props.updateGrandparent(name, kind, value);
+  }
+
   render() {
     const { versions, page, pages } = this.state;
+    const { type } = this.props;
 
     const pagination = () => (
       <Pager>
@@ -105,8 +112,8 @@ export default class VersionsTable extends Component {
     const expandRow = {
       onlyOneExpanding: true,
       parentClassName: 'active',
-      renderer: (row) => (
-        <VersionsTableChanges changes={row.changes} />
+      renderer: row => (
+        <VersionsTableChanges type={type} changes={row.changes} updateParent={this.updateParent}/>
       ),
     };
 

app/packs/src/apps/mydb/elements/details/VersionsTableChanges.js

@@ -1,8 +1,45 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, Col } from 'react-bootstrap';
+import { Row, Col, FormControl, Button, Table } from 'react-bootstrap';
 import moment from 'moment';
 import QuillViewer from 'src/components/QuillViewer';
+import SVG from 'react-inlinesvg';
+import ReactJson from 'react-json-view';
+import EditableCell from './lineChart/EditableCell'
+
+const SolventDetails = ({ solvent }) => {
+  if (!solvent) {
+    return (<></>)
+  }
+
+  return (
+    <tr>
+      <td width="5%"></td>
+      <td width="50%">
+        <FormControl
+          bsClass="bs-form--compact form-control"
+          bsSize="small"
+          type="text"
+          name="solvent_label"
+          value={solvent.label}
+          disabled
+        />
+      </td>
+      <td width="26%">
+        <FormControl
+          bsClass="bs-form--compact form-control"
+          bsSize="small"
+          type="number"
+          name="solvent_ratio"
+          value={solvent.ratio}
+          disabled
+        />
+      </td>
+      <td>
+      </td>
+    </tr>
+  )
+};
 
 function VersionsTableChanges(props) {
   const { changes } = props;
@@ -15,21 +52,116 @@ function VersionsTableChanges(props) {
     input ? <QuillViewer value={JSON.parse(input)} /> : ''
   );
 
-  const numrange = (input) => (
-    input ? input.slice(1, -1).split(',', 1) : ''
+  const numrange = input => (
+    input ? `${input.slice(1, -1).split(',')[0]} - ${input.slice(1, -1).split(',')[1]}`: ''
   );
 
   const treeselect = (input) => (
     (input || '').split(' | ', 2)[1] || input
   );
 
+  const svg = input => (
+    input ? <SVG src={`/images/samples/${input}`} key={input} /> : ''
+  );
+
+  const solvent = input => {
+    let contents = []
+    if (input) {
+      input.forEach((solv) => {
+        contents.push((
+          <SolventDetails
+            solvent={solv}
+          />
+        ))
+      })
+    }
+
+    return input ? (<div>
+      <table width="100%" className="reaction-scheme">
+        <thead>
+          <tr>
+            <th width="5%"></th>
+            <th width="50%">Label</th>
+            <th width="26%">Ratio</th>
+            <th width="3%" />
+          </tr>
+        </thead>
+        <tbody>
+          {contents.map(item => item)}
+        </tbody>
+      </table>
+    </div>) : <></>;
+  };
+
+  const temperature = input => {
+    if (input) {
+      var rows = []
+      var data = input.data;
+      for (let i = 0; i < data.length; i = i + 1) {
+        let row = (
+          <tr key={"rows_" + i}>
+            <td className="table-cell">
+              <EditableCell type="time" value={data[i].time} />
+            </td>
+            <td className="table-cell">
+              <div>
+                <div style={{ width: "65%", float: "left" }}>
+                  <EditableCell key={"value_cell_" + i} type="value" value={data[i].value}  />
+                </div>
+              </div>
+            </td>
+          </tr>
+        )
+        rows.push(row)
+      }
+
+      return input ? (<div>
+        <span>Temperature: {input.userText} {input.valueUnit} </span>
+        <Table className="editable-table" style={{ backgroundColor: 'transparent' }}>
+          <thead>
+            <tr>
+              <th> Time (hh:mm:ss) </th>
+              <th> Temperature ({input.valueUnit}) </th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows}
+          </tbody>
+        </Table>
+      </div>) : <></>;
+    }
+  }
+
+  const handleRevert = (name, kind, value) => {
+    props.updateParent(name, kind, value);
+  }
+
+  const renderRevertButton = (name, kind, oldValue) => {
+    if (['location', 'name', 'external_label', 'real_amount_value', 'description', 'solvent',
+      'real_amount_unit', 'showed_name', 'target_amount_unit', 'target_amount_value', 'boiling_point',
+      'melting_point', 'short_label', 'purity', 'density', 'molarity_value', 'data', 'temperature'].includes(name)) {
+      return (<Button
+        bsSize="xsmall"
+        type="button"
+        bsStyle='default'
+        style={{ marginLeft: '5px' }}
+        onClick={() => handleRevert(name, kind, oldValue)}
+      >
+        <i className="fa fa-undo" />
+      </Button>);
+    }
+  }
+
   const formatValue = (kind, value) => {
     const formatters = {
       date,
       quill,
       numrange,
       treeselect,
-      string: () => value,
+      svg,
+      solvent,
+      temperature,
+      string: () => JSON.stringify(value),
     };
 
     return (
@@ -43,17 +175,22 @@ function VersionsTableChanges(props) {
         changes.map(({
           name, label, kind, oldValue, newValue
         }) => (
-          <Row key={name} bsStyle="version-history">
-            <Col xs={12}>
-              <strong>{label}</strong>
-            </Col>
-            <Col xs={6} className="bg-danger" style={{ whiteSpace: 'pre-line' }}>
-              {formatValue(kind, oldValue)}
-            </Col>
-            <Col xs={6} className="bg-success" style={{ whiteSpace: 'pre-line' }}>
-              {formatValue(kind, newValue)}
-            </Col>
-          </Row>
+          <div>
+            <Row key={name} bsStyle="version-history">
+              <Col xs={12}>
+                <strong>{label}</strong>
+                {renderRevertButton(name, kind, oldValue)}
+              </Col>
+            </Row>
+            <Row bsStyle="version-history">
+              <Col xs={6} className="bg-danger" style={{ whiteSpace: 'pre-line' }}>
+                {formatValue(kind, oldValue)}
+              </Col>
+              <Col xs={6} className="bg-success" style={{ whiteSpace: 'pre-line' }}>
+                {formatValue(kind, newValue)}
+              </Col>
+            </Row>
+          </div>
         ))
       }
     </>

db/migrate/20171019102800_change_column_reactions_temperature.rb

@@ -2,6 +2,7 @@
 # type text (rails hash serialized) to postgres jsonb (and down)
 class ChangeColumnReactionsTemperature < ActiveRecord::Migration[4.2]
   def up
+    Reaction.reset_column_information
     Reaction.with_deleted.find_each do |r|
       tmp = r.temperature
       tmp = "---\nvalueUnit: \"°C\"\nuserText: ''\ndata: []\n" if tmp.empty?

package.json

@@ -81,6 +81,7 @@
     "react-inlinesvg": "0.8.4",
     "react-input-autosize": "1.1.0",
     "react-json-editor-ajrm": "^2.5.10",
+    "react-json-view": "^1.21.3",
     "react-markdown": "^6.0.2",
     "react-molviewer": "^1.1.3",
     "react-notification-system": "^0.2.7",