Support for adding a new bike.

8 years ago · 38b2b8c0a3
3 changed files with 113 additions and 69 deletions
--- a/bikeshop_project/assets/js/bikes/components/BikeForm/index.jsx
+++ b/bikeshop_project/assets/js/bikes/components/BikeForm/index.jsx
@ -22,11 +22,17 @@ const styles = {
 };

 class BikeForm extends React.Component {
-  constructor({ bike }) {
+  constructor({ bike, editing = false }) {
    super();
-    this.state = {
-      bike,
-    };
+    if (editing) {
+      this.state = {
+        bike,
+      };
+    } else {
+      this.state = {
+        bike: {},
+      };
+    }

    this.handleChange = this.handleChange.bind(this);
    this.handleSizeChange = this.handleSizeChange.bind(this);
@ -74,10 +80,11 @@ class BikeForm extends React.Component {
    const id = this.state.bike.id;
    const data = JSON.stringify(this.state.bike);
    const csrfToken = Cookies.get('csrftoken');
+    const url = this.props.editing ? `/api/v1/bikes/${id}/` : '/api/v1/bikes/';

-    fetch(`/api/v1/bikes/${id}/`, {
+    fetch(url, {
      credentials: 'same-origin',
-      method: 'PUT',
+      method: this.props.editing ? 'PUT' : 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': csrfToken,
@ -99,7 +106,8 @@ class BikeForm extends React.Component {
      cpic_searched_at,
      created_at,
      stolen,
-    } = this.state.bike;
+    } = this.props.bike;
+    const editing = this.props.editing;
    const createdAtFormatted = (moment(created_at).isValid()) ? moment(created_at).tz(timezone).fromNow() : '';
    const claimedAtFormatted = (moment(claimed_at).isValid()) ? moment(claimed_at).tz(timezone).fromNow() : '';
    const cpicSearchedAtFormatted = (moment(cpic_searched_at).isValid()) ? moment(cpic_searched_at).tz(timezone)
@ -159,53 +167,60 @@ class BikeForm extends React.Component {
              required
            />
          </div>
-          <div className="mdl-cell mdl-cell--6-col">
-            <TextField
-              floatingLabelText="Created at"
-              value={createdAtFormatted}
-              fullWidth
-              readOnly
-              disabled
-            />
-          </div>
-        </div>
-        <div className="mdl-grid">
-          <div className="mdl-cell mdl-cell--6-col">
-            <TextField
-              floatingLabelText="Claimed on"
-              value={claimedAtFormatted}
-              fullWidth
-              disabled
-            />
-          </div>
-          <div className="mdl-cell mdl-cell--6-col">
-            <TextField
-              floatingLabelText="Claimed by"
-              value={claimed_by}
-              fullWidth
-              disabled
-              readonly
-            />
-          </div>
+          {editing &&
+            <div className="mdl-cell mdl-cell--6-col">
+              <TextField
+                floatingLabelText="Created at"
+                value={createdAtFormatted}
+                fullWidth
+                readOnly
+                disabled
+              />
+            </div>
+          }
        </div>
-        <div className="content-grid mdl-grid" style={styles.bottom}>
-          <div className="mdl-cell mdl-cell--6-col">
-            <TextField floatingLabelText="CPIC searched" value={cpicSearchedAtFormatted} />
-          </div>
-          <div className="mdl-cell mdl-cell--4-col">
-            <Checkbox
-              name="stolen"
-              label="Stolen"
-              labelPosition="left"
-              style={styles.checkbox}
-              checked={stolen}
-              disabled
-            />
+        {editing &&
+          <div className="mdl-grid">
+            <div className="mdl-cell mdl-cell--6-col">
+              <TextField
+                floatingLabelText="Claimed on"
+                value={claimedAtFormatted}
+                fullWidth
+                disabled
+              />
+            </div>
+            <div className="mdl-cell mdl-cell--6-col">
+              <TextField
+                floatingLabelText="Claimed by"
+                value={claimed_by}
+                fullWidth
+                disabled
+                readonly
+              />
+            </div>
          </div>
-          <div className="mdl-cell mdl-cell--2-col">
-            <FlatButton label="Check" onTouchTap={this.handleCpicCheck} disabled={!!cpic_searched_at} primary />
+        }
+
+        {editing &&
+          <div className="content-grid mdl-grid" style={styles.bottom}>
+            <div className="mdl-cell mdl-cell--6-col">
+              <TextField floatingLabelText="CPIC searched" value={cpicSearchedAtFormatted} disabled />
+            </div>
+            <div className="mdl-cell mdl-cell--4-col">
+              <Checkbox
+                name="stolen"
+                label="Stolen"
+                labelPosition="left"
+                style={styles.checkbox}
+                checked={stolen}
+                disabled
+              />
+            </div>
+            <div className="mdl-cell mdl-cell--2-col">
+              <FlatButton label="Check" onTouchTap={this.handleCpicCheck} disabled={!!cpic_searched_at} primary />
+            </div>
          </div>
-        </div>
+        }
        <div className="mdl-grid" style={styles.bottom}>
          <div className="mdl-cell mdl-cell--8-col">
            <Source
@ -213,18 +228,20 @@ class BikeForm extends React.Component {
              onChange={this.handleSourceChange}
            />
          </div>
-          <div className="mdl-cell mdl-cell--4-col">
-            <div style={styles.block}>
-              <Checkbox
-                checked={this.state.bike.stripped}
-                name="stripped"
-                label="Stripped"
-                labelPosition="left"
-                style={styles.checkbox}
-                onCheck={this.handleChange}
-              />
+          {editing &&
+            <div className="mdl-cell mdl-cell--4-col">
+              <div style={styles.block}>
+                <Checkbox
+                  checked={this.state.bike.stripped}
+                  name="stripped"
+                  label="Stripped"
+                  labelPosition="left"
+                  style={styles.checkbox}
+                  onCheck={this.handleChange}
+                />
+              </div>
            </div>
-          </div>
+          }
        </div>
        <div className="mdl-grid">
          <div className="mdl-cell right">
--- a/bikeshop_project/assets/js/bikes/components/BikeModal/index.jsx
+++ b/bikeshop_project/assets/js/bikes/components/BikeModal/index.jsx
@ -9,6 +9,7 @@ import BikeForm from '../BikeForm';
 export default class BikeModal extends React.Component {
  static propTypes = {
    open: PropTypes.bool,
+    editing: PropTypes.bool,
  }

  constructor(props) {
@ -17,11 +18,17 @@ export default class BikeModal extends React.Component {
    this.state = {
      open: props.open,
      bike: undefined,
+      editing: props.editing,
    };
  }

-  componentWillReceiveProps(newProps) {
-    this.setState({ open: newProps.open || false, bike: newProps.bike || false });
+  componentWillReceiveProps = (newProps) => {
+    this.setState({
+      ...this.state,
+      open: newProps.open || false,
+      bike: newProps.bike || undefined,
+      editing: newProps.editing || false,
+    });
  }

  handleClose = () => {
@ -45,7 +52,7 @@ export default class BikeModal extends React.Component {

    const title = this.state.bike && this.state.bike.stolen ?
      (<div>
-        <h3>Edit Bike</h3>
+        <h3>{this.props.editing ? 'Edit Bike' : 'Add Bike'}</h3>
        <h4>STOLEN</h4>
      </div>) :
      <h3>Edit Bike</h3>;
@ -58,7 +65,7 @@ export default class BikeModal extends React.Component {
        open={this.state.open}
        autoScrollBodyContent
      >
-        { this.state.bike ? <BikeForm bike={this.state.bike} /> : <div>Unable to edit bike.</div>}
+        { this.state.bike ? <BikeForm bike={this.state.bike} editing={this.state.editing} /> : <div>Unable to edit bike.</div>}
      </Dialog>
    </div>);
  }
--- a/bikeshop_project/assets/js/bikes/components/BikeTable/index.jsx
+++ b/bikeshop_project/assets/js/bikes/components/BikeTable/index.jsx
@ -2,6 +2,8 @@ import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowCol
 import Cookies from 'js-cookie';
 import fetch from 'isomorphic-fetch';
 import FlatButton from 'material-ui/FlatButton';
+import FloatingActionButton from 'material-ui/FloatingActionButton';
+import ContentAdd from 'material-ui/svg-icons/content/add';
 import React from 'react';
 import { friendlySize } from '../Size';
 import BikeModal from '../BikeModal';
@ -28,6 +30,7 @@ export default class BikeTable extends React.Component {
      bikeModal: {
        open: false,
        bike: undefined,
+        editing: false,
      },
    };

@ -35,7 +38,6 @@ export default class BikeTable extends React.Component {
  }

  componentDidMount() {
-
    fetch('/api/v1/bikes/', {
      credentials: 'same-origin',
    })
@ -51,12 +53,23 @@ export default class BikeTable extends React.Component {
  }

  handleEditBike(bike) {
-    console.log('Bike edit!');
    this.setState({
      ...this.state,
      bikeModal: {
        open: true,
        bike,
+        editing: true,
+      },
+    });
+  }
+
+  handleAddBike = () => {
+    this.setState({
+      ...this.state,
+      bikeModal: {
+        open: true,
+        bike: {},
+        editing: false,
      },
    });
  }
@ -78,6 +91,9 @@ export default class BikeTable extends React.Component {
      <div className="mdl-grid">
        <div className="mdl-cell mdl-cell--12-col">
          <h3>Bikes</h3>
+          <FloatingActionButton onTouchTap={this.handleAddBike}>
+            <ContentAdd />
+          </FloatingActionButton>
          <Table selectable={false}>
            <TableHeader adjustForCheckbox={false} displaySelectAll={false}>
              <TableRow>
@ -99,7 +115,11 @@ export default class BikeTable extends React.Component {
            }
            </TableBody>
          </Table>
-          <BikeModal bike={this.state.bikeModal.bike} open={this.state.bikeModal.open} />
+          <BikeModal
+            bike={this.state.bikeModal.bike}
+            open={this.state.bikeModal.open}
+            editing={this.state.bikeModal.editing}
+          />
        </div>
      </div>
    );