Author: jruchaud Date: 2015-04-29 20:13:27 +0000 (Wed, 29 Apr 2015) New Revision: 1304 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1304 Log: Create filter on tags Modified: wit/css/style.less wit/js/components/FilterLogs.js Modified: wit/css/style.less =================================================================== --- wit/css/style.less 2015-04-29 16:48:57 UTC (rev 1303) +++ wit/css/style.less 2015-04-29 20:13:27 UTC (rev 1304) @@ -33,3 +33,7 @@ font-family: Digital; } } + +.checkbox-label { + margin-right: 10px; +} Modified: wit/js/components/FilterLogs.js =================================================================== --- wit/js/components/FilterLogs.js 2015-04-29 16:48:57 UTC (rev 1303) +++ wit/js/components/FilterLogs.js 2015-04-29 20:13:27 UTC (rev 1304) @@ -35,7 +35,14 @@ var r = ""; if (tagObject.duration) { - r += tagObject.duration + " - " + tags.join(', ') + "\n"; + var self = this; + var filterTags = tags.filter(function(tag) { + return self.state.tags[tag]; + }); + + if (filterTags.length) { + r += tagObject.duration + " - " + filterTags.join(', ') + "\n"; + } } var keys = Object.keys(tagObject); @@ -81,20 +88,38 @@ }, getInitialState: function() { - return {data: null}; + return {data: null, tags: {}}; }, componentWillReceiveProps: function(nextProps) { - var state = {}; + this.createTree(nextProps); + }, + + filterTag: function(e) { + this.state.tags[e.target.name] = e.target.checked; + this.createTree({ + data: this.props.data, + tags: this.state.tags + }); + }, + + createTree: function(currentState) { + var data = {}, + tags = {}; - nextProps.data.forEach(function(log) { + currentState.data.forEach(function(log) { var date = moment(log.startDate).format("MM/DD/YY"); var diff = moment(moment(log.endDate).diff(log.startDate)).utcOffset(0); - var current = state[date] = state[date] || {}; + var current = data[date] = data[date] || {}; log.tags.forEach(function(tag) { - current = current[tag] = current[tag] || {}; + + if (!currentState.tags || currentState.tags[tag]) { + current = current[tag] = current[tag] || {}; + } + + tags[tag] = true; }); if (current.diff) { @@ -106,20 +131,27 @@ current.duration = current.diff.format("HH:mm:ss"); }); - this.setState({data: state}); + this.setState({data: data, tags: currentState.tags || tags}); }, renderTd: function(date, tags, tagObject) { var r = []; if (tagObject.duration) { - r.push( - <tr> - <td>{date}</td> - <td>{tagObject.duration}</td> - <td>{tags.join(', ')}</td> - </tr> - ); + var self = this; + var filterTags = tags.filter(function(tag) { + return self.state.tags[tag]; + }); + + if (filterTags.length) { + r.push( + <tr> + <td>{date}</td> + <td>{tagObject.duration}</td> + <td>{filterTags.join(', ')}</td> + </tr> + ); + } } var keys = Object.keys(tagObject); @@ -146,7 +178,19 @@ items = items.concat(r); } } - + + var tags = []; + for (var tag of Object.keys(this.state.tags)) { + tags.push( + <div className="pull-left"> + <label className="checkbox-label"> + <input type="checkbox" name={tag} checked={this.state.tags[tag] ? "checked" : ""} /> + {tag} + </label> + </div> + ); + } + return ( <div className={classString}> <h1>{items.length ? "Result" : "No result"}</h1> @@ -154,6 +198,10 @@ <div className={items.length ? "" : "hidden"}> <div ref="actions" className="btn-group" role="group"> <button type="button" className="btn btn-primary" onClick={this.onClipboardCSV}> + Filter <span className="glyphicon glyphicon-tag" aria-hidden="true"></span> + </button> + + <button type="button" className="btn btn-primary" onClick={this.onClipboardCSV}> CSV <span className="glyphicon glyphicon-copy" aria-hidden="true"></span> </button> <button type="button" className="btn btn-primary" onClick={this.onClipboardTXT}> @@ -168,6 +216,10 @@ </button> </div> + <div onChange={this.filterTag}> + {tags} + </div> + <table className="table"> <thead> <tr>