1
0
mirror of https://github.com/aclindsa/moneygo.git synced 2024-10-31 16:00:05 -04:00
moneygo/js/components/ReportsTab.js

95 lines
2.6 KiB
JavaScript

var React = require('react');
var ReactBootstrap = require('react-bootstrap');
var Button = ReactBootstrap.Button;
var Panel = ReactBootstrap.Panel;
var StackedBarChart = require('../components/StackedBarChart');
var models = require('../models')
var Report = models.Report;
class ReportsTab extends React.Component {
constructor() {
super();
this.onSelectSeries = this.handleSelectSeries.bind(this);
}
componentWillMount() {
this.props.onFetchReport("monthly_expenses");
}
componentWillReceiveProps(nextProps) {
if (nextProps.reports['monthly_expenses'] && !nextProps.selectedReport.report) {
this.props.onSelectReport(nextProps.reports['monthly_expenses'], []);
}
}
handleSelectSeries(series) {
if (series == Report.topLevelAccountName())
return;
var seriesTraversal = this.props.selectedReport.seriesTraversal.slice();
seriesTraversal.push(series);
this.props.onSelectReport(this.props.reports[this.props.selectedReport.report.ReportId], seriesTraversal);
}
render() {
var report = [];
if (this.props.selectedReport.report) {
var titleTracks = [];
var seriesTraversal = [];
for (var i = 0; i < this.props.selectedReport.seriesTraversal.length; i++) {
var name = this.props.selectedReport.report.Title;
if (i > 0)
name = this.props.selectedReport.seriesTraversal[i-1];
// Make a closure for going up the food chain
var self = this;
var navOnClick = function() {
var onSelectReport = self.props.onSelectReport;
var report = self.props.reports[self.props.selectedReport.report.ReportId];
var mySeriesTraversal = seriesTraversal.slice();
return function() {
onSelectReport(report, mySeriesTraversal);
};
}();
titleTracks.push((
<Button key={i*2} bsStyle="link"
onClick={navOnClick}>
{name}
</Button>
));
titleTracks.push((<span key={i*2+1}>/</span>));
seriesTraversal.push(this.props.selectedReport.seriesTraversal[i]);
}
if (titleTracks.length == 0) {
titleTracks.push((
<Button key={0} bsStyle="link">
{this.props.selectedReport.report.Title}
</Button>
));
} else {
var i = this.props.selectedReport.seriesTraversal.length-1;
titleTracks.push((
<Button key={i*2+2} bsStyle="link">
{this.props.selectedReport.seriesTraversal[i]}
</Button>
));
}
report = (<Panel header={titleTracks}>
<StackedBarChart
report={this.props.selectedReport.report}
onSelectSeries={this.onSelectSeries}
seriesTraversal={this.props.selectedReport.seriesTraversal} />
</Panel>
);
}
return (
<div>
{report}
</div>
);
}
}
module.exports = ReportsTab;