diff --git a/client/homebrew/pages/userPage/userPage.jsx b/client/homebrew/pages/userPage/userPage.jsx index 206e58fc7..df96b9804 100644 --- a/client/homebrew/pages/userPage/userPage.jsx +++ b/client/homebrew/pages/userPage/userPage.jsx @@ -31,8 +31,9 @@ const UserPage = createClass({ }, getInitialState : function() { return { - sortType : 'alpha', - sortDir : 'asc' + sortType : 'alpha', + sortDir : 'asc', + filterString : '' }; }, getUsernameWithS : function() { @@ -52,7 +53,7 @@ const UserPage = createClass({ }, sortBrewOrder : function(brew){ - if(!brew.title){brew.title = 'No Title';}; + if(!brew.title){brew.title = 'No Title';} const mapping = { 'alpha' : _.deburr(brew.title.toLowerCase()), 'created' : moment(brew.createdAt).format(), @@ -91,6 +92,26 @@ const UserPage = createClass({ ; }, + handleFilterTextChange : function(e){ + this.setState({ + filterString : e.target.value + }); + return; + }, + + renderFilterOption : function(){ + return + + ; + }, + renderSortOptions : function(){ return
@@ -115,6 +136,7 @@ const UserPage = createClass({ {`${(this.state.sortDir == 'asc' ? '\u25B2 ASC' : '\u25BC DESC')}`} + {this.renderFilterOption()}
@@ -122,7 +144,12 @@ const UserPage = createClass({ }, getSortedBrews : function(){ - return _.groupBy(this.props.brews, (brew)=>{ + const testString = _.deburr(this.state.filterString).toLowerCase(); + const brewCollection = this.state.filterString ? _.filter(this.props.brews, (brew)=>{ + return (_.deburr(brew.title).toLowerCase().includes(testString)) || + (_.deburr(brew.description).toLowerCase().includes(testString)); + }) : this.props.brews; + return _.groupBy(brewCollection, (brew)=>{ return (brew.published ? 'published' : 'private'); }); }, diff --git a/client/homebrew/pages/userPage/userPage.less b/client/homebrew/pages/userPage/userPage.less index c7e8621e3..d968aab9a 100644 --- a/client/homebrew/pages/userPage/userPage.less +++ b/client/homebrew/pages/userPage/userPage.less @@ -34,8 +34,9 @@ font-family : 'Open Sans', sans-serif; position : fixed; top : 35px; + left : calc(50vw - 408px); border : 2px solid #58180D; - width : 675px; + width : 800px; background-color : #EEE5CE; padding : 2px; text-align : center; @@ -52,6 +53,9 @@ vertical-align : middle; tbody tr{ background-color: transparent !important; + i{ + padding-right : 5px + } button{ background-color : transparent; color : #58180D;