Added calls to update MDL components after dynamic rendering. Started…

… implementing table for listing things.
agileup · Jul 14, 2015 · f12da08 · f12da08
1 parent 554def3
commit f12da08
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 26 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -6,6 +6,9 @@
     "mocha": true,
     "jasmine": false
   },
+  "globals": {
+    "componentHandler": false
+  },
   "ecmaFeatures": {
     "arrowFunctions": true,
     "binaryLiterals": true,
@@ -19,11 +22,11 @@
     "jsx": true,
     "modules": true,
     "objectLiteralComputedProperties": true,
-    "objectLiteralDuplicateProperties": false,		
-    "objectLiteralShorthandMethods": true,		
-    "objectLiteralShorthandProperties": true,		
-    "octalLiterals": true,		
-    "regexYFlag": true,		
+    "objectLiteralDuplicateProperties": false,
+    "objectLiteralShorthandMethods": true,
+    "objectLiteralShorthandProperties": true,
+    "octalLiterals": true,
+    "regexYFlag": true,
     "restParams": true,
     "spread": true,
     "superInFunctions": true,
@@ -227,8 +230,8 @@
       }
     ],
     "no-use-before-define": [
-    2,
-    "nofunc"
+      2,
+      "nofunc"
     ],
     "no-var": 2,
     "no-void": 0,

diff --git a/app/components/index/Register.jsx b/app/components/index/Register.jsx
@@ -8,6 +8,9 @@ import Button from '../common/Button.jsx';
 
 export default React.createClass({
   displayName: 'Register',
+  componentDidUpdate: function () {
+    componentHandler.upgradeDom();
+  },
   render() {
     return (
         <div className="mdl-card mdl-shadow--4dp form-card-wide">
@@ -16,7 +19,8 @@ export default React.createClass({
               <h2>Please Register</h2>
               <div id="register-info-tooltip" className="icon material-icons">info</div>
               <div className="mdl-tooltip" htmlFor="register-info-tooltip">
-                Please insert your desired username and password.<br />
+                Please insert your desired username and password.
+                <br />
                 At the moment validations are non existant for username/password length, type etc.
               </div>
             </div>

diff --git a/app/components/index/Signin.jsx b/app/components/index/Signin.jsx
@@ -8,6 +8,9 @@ import Button from '../common/Button.jsx';
 
 export default React.createClass({
   displayName: 'Signin',
+  componentDidUpdate: function () {
+    componentHandler.upgradeDom();
+  },
   render() {
     return (
         <div className="mdl-card mdl-shadow--4dp form-card-medium">

diff --git a/app/components/thing/Thing.jsx b/app/components/thing/Thing.jsx
@@ -3,7 +3,6 @@
 import React from 'react';
 import Button from '../common/Button.jsx';
 import Input from '../common/Input.jsx';
-import Label from '../common/Label.jsx';
 import ThingActions from './ThingActions';
 
 export default React.createClass({
@@ -12,6 +11,9 @@ export default React.createClass({
     _modify: React.PropTypes.func.isRequired,
     item: React.PropTypes.object.isRequired
   },
+  componentDidUpdate: function () {
+    componentHandler.upgradeDom();
+  },
   getInitialState() {
     return {editing: false};
   },
@@ -33,29 +35,29 @@ export default React.createClass({
   render() {
     if (this.state.editing) {
       return (
-          <li>
+          <tr>
             <form ref="updateForm" className="thing-item" action="/API/thing?_method=PUT" method="post" onSubmit={this._modify}>
-              <Input name="name" type="text" onChange={this._setChangedText} />
-              <Button text="Update" />
+              <td>
+                <Input name="name" type="text" onChange={this._setChangedText} />
+              </td>
+              <td>
+                <Button text="Update" />
+              </td>
             </form>
-          </li>
+          </tr>
       );
     }
     return (
-        <li>
-          <div className="thing-item">
-            <div className="tooltip" ref="thingSpan" onContextMenu={this._enableEditMode}>
+        <tr>
+          <td ref="thingSpan" onContextMenu={this._enableEditMode}>
             {this.props.item.name}
-              <pre>
-                <img className="callout" src="img/callout.gif" />
-                Right click to edit
-              </pre>
-            </div>
+          </td>
+          <td>
             <a onClick={this._delete} href={'/API/thing/' + this.props.item.id + '?_method=DELETE'}>
               <Button text="Delete" />
             </a>
-          </div>
-        </li>
+          </td>
+        </tr>
     );
   }
 });
diff --git a/app/components/thing/ThingContainer.jsx b/app/components/thing/ThingContainer.jsx
@@ -81,9 +81,17 @@ export default React.createClass({
           </div>
           <div className="thing-list-container">
             <span className="thing-list-header">Current Things</span>
-            <ul>
+            <table className="mdl-data-table mdl-js-data-table mdl-shadow--4dp">
+              <thead>
+                <tr>
+                  <th className="mdl-data-table__cell--non-numeric">Name</th>
+                  <th className="mdl-data-table__cell--non-numeric">Delete</th>
+                </tr>
+              </thead>
+              <tbody>
               {thingList}
-            </ul>
+              </tbody>
+            </table>
           </div>
         </div>
     );

diff --git a/views/index.jade b/views/index.jade
@@ -8,5 +8,5 @@ block content
         #app!=html
         script.
             __DATA__ = !{data}
+    script(src='https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js')
     script(src='/js.js')
-    script(src='https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js')