implement search functionality

js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import PieceListStore from '../../stores/piece_list_store';
+import PieceListActions from '../../actions/piece_list_actions';
+
+import Input from 'react-bootstrap/lib/Input';
+import Glyphicon from 'react-bootstrap/lib/Glyphicon';
+import Button from 'react-bootstrap/lib/Button';
+
+let PieceListToolbar = React.createClass({
+
+    getInitialState() {
+        return PieceListStore.getState();
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    componentDidMount() {
+        PieceListStore.listen(this.onChange);
+    },
+
+    componentDidUnmount() {
+        PieceListStore.unlisten(this.onChange);
+    },
+
+    searchFor() {
+         let searchTerm = this.refs.search.getInputDOMNode().value;
+         PieceListActions.fetchPieceList(this.state.page, this.pageSize, searchTerm, this.state.orderBy, this.state.orderAsc);
+    },
+
+    render() {
+        let searchIcon = <Glyphicon glyph='search' />;
+
+        return (
+            <div className={this.props.className}>
+                <div className="row">
+                    <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+                        <div className="row">
+                            <div className="ascribe-piece-list-toolbar-search form-inline col-md-3 col-md-offset-right-2 pull-right">
+                                <Input type='text' ref="search" placeholder="Search..." onChange={this.searchFor} addonAfter={searchIcon} />
+                                &nbsp;&nbsp;
+                                <Button>
+                                    <Glyphicon glyph='filter' />
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+});
+
+export default PieceListToolbar;

js/components/piece_list.js

@@ -11,6 +11,7 @@ import AccordionListItemTableEditions from './ascribe_accordion_list/accordion_l
 import Pagination from './ascribe_pagination/pagination';
 
 import PieceListBulkModal from './ascribe_piece_list_bulk_modal/piece_list_bulk_modal';
+import PieceListToolbar from './ascribe_piece_list_toolbar/piece_list_toolbar';
 
 
 let PieceList = React.createClass({
@@ -50,6 +51,7 @@ let PieceList = React.createClass({
         
         return (
             <div>
+                <PieceListToolbar className="ascribe-piece-list-toolbar" />
                 <PieceListBulkModal className="ascribe-piece-list-bulk-modal" />
                 <AccordionList
                     className="ascribe-accordion-list"

sass/ascribe_piece_list_toolbar.scss

@@ -0,0 +1,7 @@
+.ascribe-piece-list-toolbar {
+    margin-bottom: 1.5em;
+}
+
+.ascribe-piece-list-toolbar-search {
+    padding-right:0;
+}

sass/main.scss

@@ -7,6 +7,8 @@
 @import './ascribe-fonts/ascribe-fonts';
 @import 'ascribe_accordion_list';
 @import 'ascribe_piece_list_bulk_modal';
+@import 'ascribe_piece_list_toolbar';
+@import 'offset_right';
 
 .hidden {
     display: none;
@@ -15,7 +17,7 @@
 .navbar-default {
     border-left:0;
     border-right:0;
-    margin-bottom: 3em;
+    margin-bottom: 1.5em;
 }
 
 .clear-margins-and-paddings {

sass/offset_right.scss

@@ -0,0 +1,164 @@
+/* Taken from: http://stackoverflow.com/a/27501063/1263876 */
+
+.col-xs-offset-right-12 {
+  margin-right: 100%;
+}
+.col-xs-offset-right-11 {
+  margin-right: 91.66666667%;
+}
+.col-xs-offset-right-10 {
+  margin-right: 83.33333333%;
+}
+.col-xs-offset-right-9 {
+  margin-right: 75%;
+}
+.col-xs-offset-right-8 {
+  margin-right: 66.66666667%;
+}
+.col-xs-offset-right-7 {
+  margin-right: 58.33333333%;
+}
+.col-xs-offset-right-6 {
+  margin-right: 50%;
+}
+.col-xs-offset-right-5 {
+  margin-right: 41.66666667%;
+}
+.col-xs-offset-right-4 {
+  margin-right: 33.33333333%;
+}
+.col-xs-offset-right-3 {
+  margin-right: 25%;
+}
+.col-xs-offset-right-2 {
+  margin-right: 16.66666667%;
+}
+.col-xs-offset-right-1 {
+  margin-right: 8.33333333%;
+}
+.col-xs-offset-right-0 {
+  margin-right: 0;
+}
+@media (min-width: 768px) {
+  .col-sm-offset-right-12 {
+    margin-right: 100%;
+  }
+  .col-sm-offset-right-11 {
+    margin-right: 91.66666667%;
+  }
+  .col-sm-offset-right-10 {
+    margin-right: 83.33333333%;
+  }
+  .col-sm-offset-right-9 {
+    margin-right: 75%;
+  }
+  .col-sm-offset-right-8 {
+    margin-right: 66.66666667%;
+  }
+  .col-sm-offset-right-7 {
+    margin-right: 58.33333333%;
+  }
+  .col-sm-offset-right-6 {
+    margin-right: 50%;
+  }
+  .col-sm-offset-right-5 {
+    margin-right: 41.66666667%;
+  }
+  .col-sm-offset-right-4 {
+    margin-right: 33.33333333%;
+  }
+  .col-sm-offset-right-3 {
+    margin-right: 25%;
+  }
+  .col-sm-offset-right-2 {
+    margin-right: 16.66666667%;
+  }
+  .col-sm-offset-right-1 {
+    margin-right: 8.33333333%;
+  }
+  .col-sm-offset-right-0 {
+    margin-right: 0;
+  }
+}
+@media (min-width: 992px) {
+  .col-md-offset-right-12 {
+    margin-right: 100%;
+  }
+  .col-md-offset-right-11 {
+    margin-right: 91.66666667%;
+  }
+  .col-md-offset-right-10 {
+    margin-right: 83.33333333%;
+  }
+  .col-md-offset-right-9 {
+    margin-right: 75%;
+  }
+  .col-md-offset-right-8 {
+    margin-right: 66.66666667%;
+  }
+  .col-md-offset-right-7 {
+    margin-right: 58.33333333%;
+  }
+  .col-md-offset-right-6 {
+    margin-right: 50%;
+  }
+  .col-md-offset-right-5 {
+    margin-right: 41.66666667%;
+  }
+  .col-md-offset-right-4 {
+    margin-right: 33.33333333%;
+  }
+  .col-md-offset-right-3 {
+    margin-right: 25%;
+  }
+  .col-md-offset-right-2 {
+    margin-right: 16.66666667%;
+  }
+  .col-md-offset-right-1 {
+    margin-right: 8.33333333%;
+  }
+  .col-md-offset-right-0 {
+    margin-right: 0;
+  }
+}
+@media (min-width: 1200px) {
+  .col-lg-offset-right-12 {
+    margin-right: 100%;
+  }
+  .col-lg-offset-right-11 {
+    margin-right: 91.66666667%;
+  }
+  .col-lg-offset-right-10 {
+    margin-right: 83.33333333%;
+  }
+  .col-lg-offset-right-9 {
+    margin-right: 75%;
+  }
+  .col-lg-offset-right-8 {
+    margin-right: 66.66666667%;
+  }
+  .col-lg-offset-right-7 {
+    margin-right: 58.33333333%;
+  }
+  .col-lg-offset-right-6 {
+    margin-right: 50%;
+  }
+  .col-lg-offset-right-5 {
+    margin-right: 41.66666667%;
+  }
+  .col-lg-offset-right-4 {
+    margin-right: 33.33333333%;
+  }
+  .col-lg-offset-right-3 {
+    margin-right: 25%;
+  }
+  .col-lg-offset-right-2 {
+    margin-right: 16.66666667%;
+  }
+  .col-lg-offset-right-1 {
+    margin-right: 8.33333333%;
+  }
+  .col-lg-offset-right-0 {
+    margin-right: 0;
+  }
+}