Merge pull request #39 from ninjaconcept/ms-misc-improvements-and-cleanup

Ms misc improvements and cleanup

app/assets/javascripts/components/ContextActions.js

@@ -25,7 +25,7 @@ export default class ContextActions extends React.Component {
     // TODO später auch für reaktionen usw
     if(this.state.checkedSampleIds.size == 0) {
       return (
-        <ButtonGroup vertical>
+        <ButtonGroup vertical block>
           <Button>Create Sample</Button>
           <Button>Create Reaction</Button>
           <Button>Create Wellplate</Button>
@@ -33,7 +33,7 @@ export default class ContextActions extends React.Component {
       )
     } else {
       return (
-        <ButtonGroup vertical>
+        <ButtonGroup vertical block>
           <Button>Split as Subsample(s)</Button>
           <Button>Create Reaction</Button>
           <Button>Create Wellplate</Button>

app/assets/javascripts/components/ElementCollectionLabels.js

+import React from 'react';
+import {Label} from 'react-bootstrap';
+
+export default class ElementCollectionLabels extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      element: props.element
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        {this.collectionLabels(this.state.element)}
+      </div>
+    );
+  }
+
+  collectionLabels(element) {
+    if(element.collection_labels) {
+      return element.collection_labels.map((label, index) => {
+        return (
+          <span key={index}>
+            <Label bsStyle="primary">{label}</Label>
+            &nbsp;
+          </span>
+        )
+      });
+    }
+
+  }
+}
+

app/assets/javascripts/components/ElementsTable.js

@@ -4,6 +4,7 @@ import {Label, Pagination, Table} from 'react-bootstrap';
 import ElementStore from './stores/ElementStore';
 import ElementAllCheckbox from './ElementAllCheckbox';
 import ElementCheckbox from './ElementCheckbox';
+import ElementCollectionLabels from './ElementCollectionLabels';
 
 import SVG from 'react-inlinesvg';
 import Aviator from 'aviator';
@@ -73,14 +74,14 @@ export default class ElementsTable extends React.Component {
 
         optionalLabelColumn = (
           <td className="labels">
-            {this.collectionLabels(element)}
+            <ElementCollectionLabels element={element} key={element.id}/>
           </td>
         )
 
         let svgPath = `/assets/${element.molecule_svg}`;
         optionalMoleculeColumn = (
           <td className="molecule" margin="0" padding="0">
-            <SVG src={svgPath} className="molecule" />
+            <SVG src={svgPath} className="molecule" key={element.id}/>
           </td>
         )
 
@@ -98,7 +99,7 @@ export default class ElementsTable extends React.Component {
       return (
         <tr key={index} height="100" style={style}>
           <td className="check">
-            <ElementCheckbox element={element}/>
+            <ElementCheckbox element={element} key={element.id}/>
           </td>
           <td className="name" onClick={e => this.showDetails(element)} style={{cursor: 'pointer'}}>
             {element.name}
@@ -114,17 +115,6 @@ export default class ElementsTable extends React.Component {
     return !(this.state.currentElement);
   }
 
-  collectionLabels(element) {
-    return element.collection_labels.map((label, index) => {
-      return (
-        <span>
-          <Label bsStyle="primary" key={index}>{label}</Label>
-          &nbsp;
-        </span>
-      )
-    });
-  }
-
   showDetails(element) {
     Aviator.navigate(`/${element.type}/${element.id}`);
   }

app/assets/javascripts/components/Navigation.js

@@ -9,13 +9,14 @@ export default class Navigation extends React.Component {
 
   render() {
     return (
-      <Navbar brand="Chemotion" inverse>
+      <Navbar brand={<a href="#">Chemotion</a>} inverse fluid>
         <Nav>
           <NavItem>#1</NavItem>
         </Nav>
-        <div className='navbar-right'>
+        <Nav navbar right>
           <UserAuth currentUser={'Bernd Thomas'}/>
-        </div>
+          &nbsp;
+        </Nav>
       </Navbar>
     )
   }

app/assets/javascripts/components/NumeralInput.js

@@ -12,14 +12,6 @@ export default class NumeralInput extends Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
-    let {value} = nextProps;
-
-    this.setState({
-      numeralValue: this._convertValueToNumeralValue(value)
-    });
-  }
-
   _convertValueToNumeralValue(value) {
     let {numeralFormat} = this.props;
     return Numeral(value).format(numeralFormat);

app/assets/javascripts/components/NumeralInputWithUnits.js

@@ -13,16 +13,6 @@ export default class NumeralInputWithUnits extends Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
-    let {value, unit} = nextProps;
-    this.setState({
-      unit: unit,
-      value: value
-    });
-
-    this.forceUpdate()
-  }
-
   _handleUnitSelect(nextUnit) {
     let {value, unit} = this.state;
     let convertedValue = value;
@@ -69,13 +59,13 @@ export default class NumeralInputWithUnits extends Component {
 
 // TODO fix css-issue with wrong z-index
   render() {
-    let {units, bsSize, bsStyle, label, numeralFormat} = this.props;
+    let {units, bsSize, bsStyle, label, numeralFormat, key} = this.props;
     let {unit, value} = this.state;
 
     let buttonAfter = (units.length > 1) ? this._renderDropdownButtonAddon(unit) : '';
     let addonAfter = (units.length == 1) ? unit : '';
     return (
-      <NumeralInput buttonAfter={buttonAfter} addonAfter={addonAfter} onChange={(value) => this._handleValueChange(value)}
+      <NumeralInput key={key} buttonAfter={buttonAfter} addonAfter={addonAfter} onChange={(value) => this._handleValueChange(value)}
         value={value} bsSize={bsSize} bsStyle={bsStyle} label={label} numeralFormat={numeralFormat}/>
     );
   }

app/assets/javascripts/components/SampleDetails.js

@@ -5,6 +5,7 @@ import SVG from 'react-inlinesvg';
 import ElementActions from './actions/ElementActions';
 import ElementStore from './stores/ElementStore';
 import NumeralInputWithUnits from './NumeralInputWithUnits'
+import ElementCollectionLabels from './ElementCollectionLabels';
 
 import Aviator from 'aviator';
 
@@ -91,7 +92,7 @@ export default class SampleDetails extends React.Component {
 
     let sample = this.state.sample || {}
     let sampleAmount = sample.amount_value && sample.amount_unit ? `(${sample.amount_value} ${sample.amount_unit})` : '';
-    let svg = sample.molecule_svg ? (<SVG key={sample.id} src={`/assets/${sample.molecule_svg}`} className="molecule-mid"/>) : '';
+    let svgPath = sample.molecule_svg ? `/assets/${sample.molecule_svg}`  : '';
 
     return (
       <div>
@@ -100,9 +101,10 @@ export default class SampleDetails extends React.Component {
             <td width="70%">
               <h3>{sample.name}</h3>
               <h4>{sampleAmount}</h4>
+              <ElementCollectionLabels element={sample} key={sample.id} />
             </td>
             <td width="30%">
-              {svg}
+              <SVG key={sample.id} src={svgPath} className="molecule-mid"/>
             </td>
           </tr></table>
           <ListGroup fill>
@@ -114,6 +116,7 @@ export default class SampleDetails extends React.Component {
                   onChange={(e) => this.handleNameChanged(e)}
                 />
                 <NumeralInputWithUnits
+                   key={sample.id}
                    value={sample.amount_value}
                    unit={sample.amount_unit || 'g'}
                    label="Amount"

app/assets/javascripts/components/UserAuth.js

@@ -20,12 +20,12 @@ export default class UserAuth extends Component {
   render() {
     let {currentUser} = this.props;
     return (
-      <div>
+      <span>
         <p className='navbar-text'>
           {`Logged in as ${currentUser}.`}
         </p>
         <a onClick={() => this.logout()} className='btn btn-primary navbar-btn'>Logout</a>
-      </div>
+      </span>
     );
   }
 }

app/assets/stylesheets/application.scss

@@ -17,8 +17,6 @@
  @import "bootstrap-sprockets";
  @import "bootstrap";
 
-
-
 /*
 Show Bootstrap Grid as overlay for debugging
 
@@ -30,3 +28,4 @@ div[class^="col-"] {
     background-color: rgba(255, 0, 0, 0.2);
 }
 */
+

app/assets/stylesheets/collection_tree.css

@@ -33,6 +33,6 @@
 }
 
 .selected {
-  background: #333;
+  background: #337ab7;
   color: #fff;
 }

app/assets/stylesheets/elements_table.css

@@ -2,23 +2,6 @@
   margin-top: 0 !important;
 }
 
-.molecule svg {
-  width: 90px;
-  height: 90px;
-  margin-left: 10px;
-}
-
-.molecule-mid svg {
-  width: 180px;
-  height:180px;
-  margin-left: 10px;
-}
-
-.molecule rect {
-  fill: none;
-  fill-opacity: 0.0;
-}
-
 .borderless {
     border: none !important;
     padding-top: 0px !important;
@@ -28,7 +11,6 @@ table.elements {
   table-layout: fixed;
 }
 
-
 th.check, td.check {
   width: 40px !important;
 }

app/assets/stylesheets/molecules.css

+.molecule svg {
+  width: 90px;
+  height: 90px;
+  margin-left: 10px;
+}
+
+.molecule rect {
+  fill: none;
+  fill-opacity: 0.0;
+}
+
+.molecule-mid svg {
+  width: 180px;
+  height:180px;
+  margin-left: 10px;
+}

app/assets/stylesheets/sample_details.css

-.sample-details {
-  margin-left: 357px !important;
-  margin-top: 71px !important;
-  width: calc(100vw - 357px) !important;
-}
-
-.modal-backdrop {
-  opacity: 0 !important;
-}

app/serializers/sample_serializer.rb

@@ -7,7 +7,7 @@ class SampleSerializer < ActiveModel::Serializer
   end
 
   def collection_labels
-    object.collections.flat_map(&:label)
+    object.collections.flat_map(&:label).uniq
   end
 
   def type

app/views/layouts/application.haml

@@ -7,4 +7,5 @@
     = javascript_include_tag 'application', 'data-turbolinks-track' => true
     = csrf_meta_tags
   %body
-    = yield
+    .fluid-container
+      = yield

app/views/pages/welcome.haml

 #app
-#modal
\ No newline at end of file
+#modal