added feature to edit schema

Author: Kevin Jose

src/App.css

@@ -1,7 +1,8 @@
 .showcase {
-  width: 300px;
-  height: 600px;
+  width: 500px;
+  height: 400px;
   padding: 0 20px;
+  padding-top: 15px;
 }
 
 .json-input {

src/App.js

@@ -6,65 +6,72 @@ import './App.css';
 class App extends React.Component {
   state = {
     data: [],
-    model: [
-      { key: 'name', label: 'Name', props: { required: true } },
-      { key: 'age', label: 'Age', type: 'number' },
-      {
-        key: 'rating',
-        label: 'Rating',
-        type: 'number',
-        props: { min: 0, max: 5 }
-      },
-      {
-        key: 'gender',
-        label: 'Gender',
-        type: 'radio',
-        options: [
-          {
-            key: 'male',
-            label: 'Male',
-            name: 'gender',
-            value: 'male'
-          },
-          {
-            key: 'female',
-            label: 'Female',
-            name: 'gender',
-            value: 'female'
-          }
-        ]
-      },
-      { key: 'qualification', label: 'Qualification' },
-      {
-        key: 'city',
-        label: 'City',
-        type: 'select',
-        value: 'Kerala',
-        props: { required: true },
-        options: [
-          { key: '_placeholder', label: 'Select a city', value: '' },
-          { key: 'mumbai', label: 'Mumbai', value: 'Mumbai' },
-          {
-            key: 'bangalore',
-            label: 'Bangalore',
-            value: 'Bangalore'
-          },
-          { key: 'kerala', label: 'Kerala', value: 'Kerala' }
-        ]
-      },
-      {
-        key: 'skills',
-        label: 'Skills',
-        type: 'checkbox',
-        options: [
-          { key: 'reactjs', label: 'ReactJS', value: 'reactjs' },
-          { key: 'angular', label: 'Angular', value: 'angular' },
-          { key: 'vuejs', label: 'VueJS', value: 'vuejs' }
-        ]
-      }
-    ]
+    model: JSON.stringify(
+      [
+        { key: 'name', label: 'Name', props: { required: true } },
+        { key: 'age', label: 'Age', type: 'number' },
+        {
+          key: 'rating',
+          label: 'Rating',
+          type: 'number',
+          props: { min: 0, max: 5 }
+        },
+        {
+          key: 'gender',
+          label: 'Gender',
+          type: 'radio',
+          options: [
+            {
+              key: 'male',
+              label: 'Male',
+              name: 'gender',
+              value: 'male'
+            },
+            {
+              key: 'female',
+              label: 'Female',
+              name: 'gender',
+              value: 'female'
+            }
+          ]
+        },
+        { key: 'qualification', label: 'Qualification' },
+        {
+          key: 'city',
+          label: 'City',
+          type: 'select',
+          value: 'Kerala',
+          props: { required: true },
+          options: [
+            { key: '_placeholder', label: 'Select a city', value: '' },
+            { key: 'mumbai', label: 'Mumbai', value: 'Mumbai' },
+            {
+              key: 'bangalore',
+              label: 'Bangalore',
+              value: 'Bangalore'
+            },
+            { key: 'kerala', label: 'Kerala', value: 'Kerala' }
+          ]
+        },
+        {
+          key: 'skills',
+          label: 'Skills',
+          type: 'checkbox',
+          options: [
+            { key: 'reactjs', label: 'ReactJS', value: 'reactjs' },
+            { key: 'angular', label: 'Angular', value: 'angular' },
+            { key: 'vuejs', label: 'VueJS', value: 'vuejs' }
+          ]
+        }
+      ],
+      null,
+      2
+    )
   };
 
+  handleModel = e => {
+    this.setState({ model: e.target.value });
+  };
   onSubmit = model => {
     let data = [];
     if (model.id) {
@@ -91,17 +98,48 @@ class App extends React.Component {
     });
   };
 
+  renderTableHead = () => {
+    console.log(this.state.data);
+    if (!this.state.data[0]) {
+      return <td>No Data!</td>;
+    }
+    let dataHead = Object.keys(this.state.data[0]);
+    return dataHead.map(d => {
+      return <td key={'th_' + d}>{d}</td>;
+    });
+  };
+  renderRow = r => {
+    return Object.keys(r).map(p => <td key={'td_' + p}>{r[p]}</td>);
+  };
+
+  renderForm = () => {
+    try {
+      return (
+        <DynamicForm
+          title="Registration"
+          defaultValues={this.state.currentRecord}
+          model={JSON.parse(this.state.model)}
+          onSubmit={model => {
+            this.onSubmit(model);
+          }}
+        />
+      );
+    } catch (e) {
+      return <p>Invalid form, ensure that the JSON is valid</p>;
+    }
+  };
   render() {
     let data = this.state.data.map(d => {
       return (
         <tr key={d.id}>
-          <td>{d.name}</td>
+          {this.renderRow(d)}
+          {/* <td>{d.name}</td>
           <td>{d.age}</td>
           <td>{d.qualification}</td>
           <td>{d.gender}</td>
           <td>{d.rating}</td>
           <td>{d.city}</td>
-          <td>{d.skills && d.skills.length ? d.skills.join(', ') : ''}</td>
+          <td>{d.skills && d.skills.length ? d.skills.join(', ') : ''}</td> */}
           <td>
             <button
               className="ui button basic negative"
@@ -115,27 +153,32 @@ class App extends React.Component {
     });
     return (
       <div className="ui container" style={{ paddingTop: '50px' }}>
-        <div className="ui three column stackable grid container">
-          <div className="showcase">
+        <div className="ui two column stackable grid container">
+          <div className="column showcase">
+            <h4 className="ui dividing header">Form Schema</h4>
             <textarea
               style={{ fontFamily: 'monospace' }}
               className="json-input"
-              value={JSON.stringify(this.state.model, null, 2)}
+              value={this.state.model}
+              onChange={this.handleModel}
             />
           </div>
           <div className="column">
-            <DynamicForm
-              title="Registration"
-              defaultValues={this.state.currentRecord}
-              model={this.state.model}
-              onSubmit={model => {
-                this.onSubmit(model);
-              }}
-            />
+            <h4 className="ui dividing header">Rendered Form</h4>
+            {this.renderForm()}
           </div>
+        </div>
+        <div className="clearfix" />
+        <br />
+        <br />
+        <br />
+        <div className="ui column stackable grid container">
           <div className="column">
             <h4 className="ui dividing header">Data</h4>
             <table className="ui stacked table">
+              <thead>
+                <tr>{this.renderTableHead()}</tr>
+              </thead>
               <tbody>{data}</tbody>
             </table>
           </div>

src/components/dynamic-form/index.js

@@ -11,6 +11,7 @@ export default class DynamicForm extends React.Component {
       for (let key in prevState) {
         prevState[key] = '';
       }
+      delete prevState['submitted'];
       return { ...prevState };
     }
 
@@ -194,16 +195,21 @@ export default class DynamicForm extends React.Component {
     return formUI;
   };
   render() {
-    let title = this.props.title || 'Dynamic Form';
+    // let title = this.props.title || 'Dynamic Form';
     return (
-      <div>
+      <div
+        style={{
+          maxHeight: '400px',
+          overflowY: 'scroll',
+          paddingLeft: '4px'
+        }}
+      >
         <form
           className="ui form"
           onSubmit={e => {
             this.onSubmit(e);
           }}
         >
-          <h4 className="ui dividing header">{title}</h4>
           {this.renderForm()}
           <div>
             <button type="submit" className="ui button basic positive">