ascribe
/
onion
mirror of https://github.com/ascribe/onion.git
1
0
Fork 0
Code Issues Releases Wiki Activity

implement search functionality

This commit is contained in:
Tim Daubenschütz 2015-06-02 10:10:09 +02:00
parent c2c2049229
commit eb5d6f6cc3
5 changed files with 232 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js Normal file
View File

@ -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;

2
js/components/piece_list.js
View File

@ -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"

7
sass/ascribe_piece_list_toolbar.scss Normal file
View File

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

4
sass/main.scss
View File

@ -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 {

164
sass/offset_right.scss Normal file
View File

@ -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;
}
}