Merge pull request #40 from ekonstantinidis/move-packagejson

Add Extra Field to Live API

Author: ekonstantinidis

rest_framework_docs/static/rest_framework_docs/css/style.css

@@ -2,6 +2,11 @@ var React = require('react');
 
 var Input = React.createClass({
 
+  removeField: function (fieldName, event) {
+    event.preventDefault();
+    this.props.removeField(fieldName);
+  },
+
   handleChange: function (value) {
     this.props.onChange(value);
   },
@@ -12,6 +17,13 @@ var Input = React.createClass({
         <label
           htmlFor={this.props.name}
           className="col-sm-4 control-label">
+            {this.props.isCustom ? (
+              <i
+                className='fa fa-minus-circle'
+                title='Remove Field'
+                onClick={this.removeField.bind(this, this.props.name)}
+                />
+            ) : null}
             {this.props.name}
         </label>
         <div className="col-sm-8">

rest_framework_docs/static/rest_framework_docs/js/components/helpers/input.js

@@ -1,5 +1,7 @@
+var _ = require('underscore');
 var React = require('react');
 
+var AddFieldsForm = require('./request/add-fields');
 var Header = require('./helpers/header');
 var Headers = require('./request/headers');
 var FieldsData = require('./request/fields-data');
@@ -29,6 +31,42 @@ var Request = React.createClass({
     });
   },
 
+  addField: function (fieldName) {
+    var endpoint = this.state.endpoint;
+    var fields = endpoint.fields;
+
+    // Check if field already exists
+    if (_.findWhere(fields, {'name': fieldName})) return;
+
+    fields.push({
+      name: fieldName,
+      required: false,
+      type: 'Added Field',
+      isCustom: true
+    });
+
+    endpoint.fields = fields;
+
+    this.setState({
+      endpoint: endpoint
+    });
+  },
+
+  removeField: function (fieldName) {
+    var data = this.state.data;
+    var endpoint = this.state.endpoint;
+    var fields = endpoint.fields;
+
+    data = _.omit(data, fieldName);
+    fields = _.without(fields, _.findWhere(fields, {name: fieldName}));
+    endpoint.fields = fields;
+
+    this.setState({
+      data: data,
+      endpoint: endpoint
+    });
+  },
+
   setSelectedMethod: function (method) {
     this.setState({
       selectedMethod: method
@@ -87,7 +125,10 @@ var Request = React.createClass({
             <FieldsData
               fields={endpoint.fields}
               data={this.state.data}
+              removeCustomField={this.removeField}
               onChange={this.handleDataFieldChange} />
+
+            <AddFieldsForm onAdd={this.addField} />
           </div>
         )}
       </div>

rest_framework_docs/static/rest_framework_docs/js/components/request.js

@@ -0,0 +1,65 @@
+var React = require('react');
+
+var Header = require('../helpers/header');
+
+var AddFieldsForm = React.createClass({
+
+  getInitialState: function() {
+    return {
+      fieldName: ''
+    };
+  },
+
+  addField: function () {
+    if (this.state.fieldName) {
+      this.props.onAdd(this.state.fieldName);
+      this.setState({
+        fieldName: ''
+      });
+    }
+  },
+
+  handleKeyPress: function (event) {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      this.addField();
+    }
+  },
+
+  handleChange: function (event) {
+    this.setState({
+      fieldName: event.target.value
+    });
+  },
+
+  render: function () {
+    return (
+      <div>
+        <Header title='Add Extra Fields' />
+
+        <div className='form-group'>
+          <label className='col-sm-4 control-label'>Field Name</label>
+          <div className="col-sm-6">
+            <input
+              type='text'
+              className='form-control input-sm'
+              placeholder='ie. email_address'
+              onKeyPress = {this.handleKeyPress}
+              onChange={this.handleChange}
+              value={this.state.fieldName} />
+          </div>
+          <div className="col-sm-2">
+            <button
+              type="button"
+              className='btn btn-sm btn-block btn-primary'
+              onClick={this.addField}>
+              Add
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+});
+
+module.exports = AddFieldsForm;

rest_framework_docs/static/rest_framework_docs/js/components/request/add-fields.js

@@ -4,6 +4,10 @@ var Input = require('../helpers/input');
 
 var FieldsData = React.createClass({
 
+  removeCustomField: function (fieldName) {
+    this.props.removeCustomField(fieldName);
+  },
+
   handleChange: function (fieldName, event) {
     this.props.onChange(event.target.value, fieldName);
   },
@@ -21,6 +25,8 @@ var FieldsData = React.createClass({
           value={value}
           placeholder={field.type}
           required={field.required ? 'required' : false}
+          removeField={this.removeCustomField}
+          isCustom={field.isCustom ? 'isCustom' : false}
           onChange={this.handleChange.bind(this, field.name)} />
       );
     }, this);

rest_framework_docs/static/rest_framework_docs/js/components/request/fields-data.js

@@ -208,6 +208,17 @@ body {
         &.options.active { background-color: @OptionsColor; }
       }
     }
+
+    .form-group {
+
+      label {
+
+        .fa {
+          margin-right: 5px;
+          color: @brand-danger;
+        }
+      }
+    }
   }
 
   .response {
@@ -236,7 +247,7 @@ body {
 /* @end Modal API */
 
 
-/* @group jQuery / JSON View */
+/* @group Response / JSON View */
 
 .json-key {
   color: brown;
@@ -250,7 +261,7 @@ body {
   color: olive;
 }
 
-/* @end jQuery / JSON View */
+/* @end Response / JSON View */
 
 
 /* @group Github Ribbon - SVG */