Allow fields to be removed

Author: Emmanouil Konstantinidis

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,3 +1,4 @@
+var _ = require('underscore');
 var React = require('react');
 
 var AddFieldsForm = require('./request/add-fields');
@@ -37,7 +38,8 @@ var Request = React.createClass({
     fields.push({
       name: fieldName,
       required: false,
-      type: 'Added Field'
+      type: 'Added Field',
+      isCustom: true
     });
 
     endpoint.fields = fields;
@@ -47,6 +49,21 @@ var Request = React.createClass({
     });
   },
 
+  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
@@ -105,6 +122,7 @@ var Request = React.createClass({
             <FieldsData
               fields={endpoint.fields}
               data={this.state.data}
+              removeCustomField={this.removeField}
               onChange={this.handleDataFieldChange} />
 
             <AddFieldsForm onAdd={this.addField} />

rest_framework_docs/static/rest_framework_docs/js/components/request.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 */