Merge pull request #41 from ekonstantinidis/boolean-fields

Author: ekonstantinidis

rest_framework_docs/static/rest_framework_docs/css/style.css

@@ -0,0 +1,61 @@
+var React = require('react');
+
+var FieldBoolean = React.createClass({
+  getInitialState: function() {
+    return {
+      checked: null
+    };
+  },
+
+  removeField: function (fieldName, event) {
+    event.preventDefault();
+    this.props.removeField(fieldName);
+  },
+
+  handleChange: function (value) {
+    this.props.onChange(value);
+  },
+
+  isChecked: function (value) {
+    if (this.props.value === undefined) return;
+    return this.props.value === value;
+  },
+
+  render: function () {
+    var labelName = this.props.name.replace('_', ' ');
+
+    return (
+      <div className='form-group'>
+        <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}
+            {labelName}
+        </label>
+        <div className='col-sm-8'>
+          <label className='radio-inline'>
+            <input
+              type='radio'
+              name={this.props.name}
+              checked={this.isChecked(true)}
+              onChange={this.handleChange.bind(this, true)} /> True
+          </label>
+          <label className='radio-inline'>
+            <input
+              type='radio'
+              name={this.props.name}
+              checked={this.isChecked(false)}
+              onChange={this.handleChange.bind(this, false)} /> False
+          </label>
+        </div>
+      </div>
+    );
+  }
+});
+
+module.exports = FieldBoolean;

rest_framework_docs/static/rest_framework_docs/js/components/fields/boolean.js

@@ -1,6 +1,6 @@
 var React = require('react');
 
-var Input = React.createClass({
+var FieldText = React.createClass({
 
   removeField: function (fieldName, event) {
     event.preventDefault();
@@ -12,6 +12,8 @@ var Input = React.createClass({
   },
 
   render: function () {
+    var labelName = this.props.name.replace('_', ' ');
+
     return (
       <div className="form-group">
         <label
@@ -24,7 +26,7 @@ var Input = React.createClass({
                 onClick={this.removeField.bind(this, this.props.name)}
                 />
             ) : null}
-            {this.props.name}
+            {labelName}
         </label>
         <div className="col-sm-8">
           <input
@@ -41,4 +43,4 @@ var Input = React.createClass({
   }
 });
 
-module.exports = Input;
+module.exports = FieldText;

rest_framework_docs/static/rest_framework_docs/js/components/helpers/input.js renamed to rest_framework_docs/static/rest_framework_docs/js/components/fields/text.js

@@ -16,9 +16,9 @@ var LiveAPIEndpoints = React.createClass({
 
   getData: function () {
     var method = this.refs.request.state.selectedMethod;
-    return RequestUtils.shouldAddData(method) ? null : (
+    return RequestUtils.shouldIncludeData(method) ? (
       this.refs.request.state.data
-    );
+    ) : null;
   },
 
   makeRequest: function (event) {

rest_framework_docs/static/rest_framework_docs/js/components/liveapi.js

@@ -2,12 +2,10 @@ 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');
+var Data = require('./request/data');
 var FieldUrl = require('./request/field-url');
 var Methods = require('./request/methods');
-var RequestUtils = require('../utils/request');
 
 var Request = React.createClass({
   getInitialState: function () {
@@ -33,20 +31,17 @@ 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;
+    if (_.findWhere(endpoint.fields, {'name': fieldName})) return;
 
-    fields.push({
+    endpoint.fields.push({
       name: fieldName,
       required: false,
-      type: 'Added Field',
+      type: 'text',
       isCustom: true
     });
 
-    endpoint.fields = fields;
-
     this.setState({
       endpoint: endpoint
     });
@@ -100,6 +95,7 @@ var Request = React.createClass({
 
   render: function () {
     var endpoint = this.state.endpoint;
+
     return (
       <div>
         <h3>Request</h3>
@@ -119,18 +115,15 @@ var Request = React.createClass({
           permissions={this.state.endpoint.permissions}
           handleHeaderChange={this.handleHeaderChange} />
 
-        {RequestUtils.shouldAddData(this.state.method) ? null : (
-          <div>
-            {this.state.endpoint.fields.length ? <Header title='Data' /> : null}
-            <FieldsData
-              fields={endpoint.fields}
-              data={this.state.data}
-              removeCustomField={this.removeField}
-              onChange={this.handleDataFieldChange} />
-
-            <AddFieldsForm onAdd={this.addField} />
-          </div>
-        )}
+        <Data
+          method={this.state.selectedMethod}
+          fields={endpoint.fields}
+          data={this.state.data}
+          removeCustomField={this.removeField}
+          onChange={this.handleDataFieldChange} />
+
+        <AddFieldsForm
+          onAdd={this.addField} />
       </div>
     );
   }

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

@@ -51,7 +51,7 @@ var AddFieldsForm = React.createClass({
           <div className="col-sm-2">
             <button
               type="button"
-              className='btn btn-sm btn-block btn-primary'
+              className='btn btn-sm btn-block btn-info'
               onClick={this.addField}>
               Add
             </button>

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

@@ -0,0 +1,82 @@
+var React = require('react');
+
+var FieldText = require('../fields/text');
+var FieldBoolean = require('../fields/boolean');
+var Header = require('../helpers/header');
+var RequestUtils = require('../../utils/request');
+
+var Data = React.createClass({
+  removeCustomField: function (fieldName) {
+    this.props.removeCustomField(fieldName);
+  },
+
+  handleBooleanChange: function (fieldName, value) {
+    this.props.onChange(value, fieldName);
+  },
+
+  handleTextChange: function (fieldName, event) {
+    this.props.onChange(event.target.value, fieldName);
+  },
+
+  _renderBooleanField: function (field, key) {
+    var value = this.props.data[field.name];
+
+    return (
+      <FieldBoolean
+        key={key}
+        name={field.name}
+        value={value}
+        required={field.required ? 'required' : false}
+        removeField={this.removeCustomField}
+        isCustom={field.isCustom ? 'isCustom' : false}
+        onChange={this.handleBooleanChange.bind(this, field.name)} />
+    );
+  },
+
+  _renderTextInput: function (field, key) {
+    var value = this.props.data[field.name];
+    var type = field.name == 'password' ? 'password' : 'text';
+    return (
+      <FieldText
+        key={key}
+        type={type}
+        name={field.name}
+        value={value}
+        placeholder={field.type}
+        required={field.required ? 'required' : false}
+        removeField={this.removeCustomField}
+        isCustom={field.isCustom ? 'isCustom' : false}
+        onChange={this.handleTextChange.bind(this, field.name)} />
+    );
+  },
+
+  _renderFields: function () {
+    return this.props.fields.map(function (field, key) {
+
+      switch (field.type) {
+      case ('BooleanField'):
+        return this._renderBooleanField(field, key);
+
+      case ('CharField'):
+      default:
+        return this._renderTextInput(field, key);
+
+      }
+    }, this);
+  },
+
+  render: function () {
+    if (!RequestUtils.shouldIncludeData(this.props.method)) {
+      return null;
+    }
+
+    return (
+      <div>
+        {this.props.fields.length ? <Header title='Data' /> : null}
+        {this._renderFields()}
+      </div>
+    );
+  }
+});
+
+module.exports = Data;

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

@@ -1,7 +1,7 @@
 var React = require('react');
 
 var Header = require('../helpers/header');
-var Input = require('../helpers/input');
+var FieldText = require('../fields/text');
 
 var FieldUrl = React.createClass({
 
@@ -25,7 +25,7 @@ var FieldUrl = React.createClass({
     return (
       <div>
         <Header title='API Endpoint' />
-        <Input
+        <FieldText
           type='text'
           name='Url Endpoint'
           value={this.state.url}

rest_framework_docs/static/rest_framework_docs/js/components/request/field-url.js

@@ -1,7 +1,7 @@
 var React = require('react');
 
 var Header = require('../helpers/header');
-var Input = require('../helpers/input');
+var FieldText = require('../fields/text');
 var RequestUtils = require('../../utils/request');
 
 var Headers = React.createClass({
@@ -30,7 +30,7 @@ var Headers = React.createClass({
     return (
       <div>
         <Header title='Headers' />
-        <Input
+        <FieldText
           name='authorization'
           value={this.state.authorization}
           placeholder='Token 1234567890'

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

@@ -30,7 +30,7 @@ var Methods = React.createClass({
 
   render: function () {
     return (
-      <div>
+      <div className='text-center'>
         <Header title='Method' />
         <div className='btn-group methods'>
           {this.state.methods.map(function (method, i) {

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

@@ -46,8 +46,7 @@ var Response = React.createClass({
         {hasToken ? (
           <div className='well well-default text-center'>
             <button className='btn btn-sm btn-info' onClick={this.saveToken}>
-              <i className='fa fa-key' />
-              Save Token
+              <i className='fa fa-key' /> Save Token
           </button>
             <h6>Your token will be lost when you refresh the page.</h6>
           </div>

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

@@ -1,10 +1,10 @@
 module.exports = {
 
-  shouldAddData: function (method) {
+  shouldIncludeData: function (method) {
     if (method === 'GET' || method === 'OPTIONS') {
-      return true;
+      return false;
     }
-    return false;
+    return true;
   },
 
   shouldAddHeader: function (permissions) {