mirror of
https://github.com/aclindsa/moneygo.git
synced 2025-07-01 20:08:39 -04:00
Add new account dropdown with search to top bar
This commit is contained in:
@ -1,10 +1,23 @@
|
||||
var React = require('react');
|
||||
var ReactDOM = require('react-dom');
|
||||
|
||||
var ReactBootstrap = require('react-bootstrap');
|
||||
var Jumbotron = ReactBootstrap.Jumbotron;
|
||||
var Tabs = ReactBootstrap.Tabs;
|
||||
var Tab = ReactBootstrap.Tab;
|
||||
var Nav = ReactBootstrap.Nav;
|
||||
var NavDropdown = ReactBootstrap.NavDropdown;
|
||||
var NavItem = ReactBootstrap.NavItem;
|
||||
var Col = ReactBootstrap.Col;
|
||||
var Row = ReactBootstrap.Row;
|
||||
var Modal = ReactBootstrap.Modal;
|
||||
var FormControl = ReactBootstrap.FormControl;
|
||||
var InputGroup = ReactBootstrap.InputGroup;
|
||||
var Button = ReactBootstrap.Button;
|
||||
var Glyphicon = ReactBootstrap.Glyphicon;
|
||||
|
||||
var MenuItem = ReactBootstrap.MenuItem;
|
||||
var SplitButton = ReactBootstrap.SplitButton;
|
||||
|
||||
var TopBarContainer = require('../containers/TopBarContainer');
|
||||
var NewUserModalContainer = require('../containers/NewUserModalContainer');
|
||||
@ -12,28 +25,43 @@ var AccountSettingsModalContainer = require('../containers/AccountSettingsModalC
|
||||
var AccountsTabContainer = require('../containers/AccountsTabContainer');
|
||||
var SecuritiesTabContainer = require('../containers/SecuritiesTabContainer');
|
||||
var ReportsTabContainer = require('../containers/ReportsTabContainer');
|
||||
var AddEditAccountModal = require('./AddEditAccountModal');
|
||||
|
||||
var AccountTree = require('./AccountTree');
|
||||
|
||||
var utils = require('../utils');
|
||||
|
||||
class MoneyGoApp extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
tab: 1,
|
||||
accountFilter: "",
|
||||
showNewUserModal: false,
|
||||
showAccountSettingsModal: false
|
||||
showSettingsModal: false,
|
||||
creatingNewAccount: false
|
||||
};
|
||||
this.onShowSettings = this.handleShowSettings.bind(this);
|
||||
this.onHideSettings = this.handleHideSettings.bind(this);
|
||||
this.onShowNewUser = this.handleShowNewUser.bind(this);
|
||||
this.onHideNewUser = this.handleHideNewUser.bind(this);
|
||||
this.onSelectTab = this.handleSelectTab.bind(this);
|
||||
this.onAccountSelected = this.handleAccountSelected.bind(this);
|
||||
this.onNewAccount = this.handleNewAccount.bind(this);
|
||||
this.onNewAccountCancel = this.handleNewAccountCancel.bind(this);
|
||||
this.onCreateAccount = this.handleCreateAccount.bind(this);
|
||||
this.onAccountFilterChange = this.handleAccountFilterChange.bind(this);
|
||||
this.onClearAccountFilter = this.handleClearAccountFilter.bind(this);
|
||||
}
|
||||
componentDidMount() {
|
||||
this.props.tryResumingSession();
|
||||
this.props.fetchCurrencies();
|
||||
}
|
||||
handleShowSettings() {
|
||||
this.setState({showAccountSettingsModal: true});
|
||||
this.setState({showSettingsModal: true});
|
||||
}
|
||||
handleHideSettings(user) {
|
||||
this.setState({showAccountSettingsModal: false});
|
||||
this.setState({showSettingsModal: false});
|
||||
}
|
||||
handleShowNewUser() {
|
||||
this.setState({showNewUserModal: true});
|
||||
@ -41,27 +69,117 @@ class MoneyGoApp extends React.Component {
|
||||
handleHideNewUser() {
|
||||
this.setState({showNewUserModal: false});
|
||||
}
|
||||
handleSelectTab(key) {
|
||||
console.log(key);
|
||||
if (key != undefined) {
|
||||
this.setState({tab: key});
|
||||
}
|
||||
}
|
||||
handleAccountSelected(account) {
|
||||
this.setState({
|
||||
tab: 1,
|
||||
accountFilter: ""});
|
||||
this.props.onSelectAccount(account.AccountId);
|
||||
this.props.onFetchTransactionPage(account, 20, 0);
|
||||
}
|
||||
handleNewAccount() {
|
||||
this.setState({creatingNewAccount: true});
|
||||
}
|
||||
handleNewAccountCancel() {
|
||||
this.setState({creatingNewAccount: false});
|
||||
}
|
||||
handleCreateAccount(account) {
|
||||
this.props.onCreateAccount(account);
|
||||
this.setState({creatingNewAccount: false});
|
||||
}
|
||||
handleAccountFilterChange() {
|
||||
this.setState({accountFilter: ReactDOM.findDOMNode(this.refs.accountFilter).value});
|
||||
}
|
||||
handleClearAccountFilter() {
|
||||
this.setState({accountFilter: ""});
|
||||
}
|
||||
render() {
|
||||
var mainContent;
|
||||
if (this.props.user.isUser())
|
||||
if (this.props.user.isUser()) {
|
||||
var accountElements = [];
|
||||
if (this.state.accountFilter.length > 0) {
|
||||
var filterRegex = new RegExp(this.state.accountFilter, "i")
|
||||
for (var accountId in this.props.accounts) {
|
||||
var account = this.props.accounts[accountId];
|
||||
var fullName = utils.getAccountDisplayName(account, this.props.accounts);
|
||||
if (fullName.match(filterRegex)) {
|
||||
var clojure = function(self, account) {
|
||||
return function() {
|
||||
self.handleAccountSelected(account);
|
||||
};
|
||||
}(this, account);
|
||||
accountElements.push((<MenuItem key={accountId} onSelect={clojure}>{fullName}</MenuItem>));
|
||||
}
|
||||
}
|
||||
} else {
|
||||
accountElements.push((<MenuItem key={1} divider />));
|
||||
accountElements.push((<AccountTree key={2}
|
||||
accounts={this.props.accounts}
|
||||
accountChildren={this.props.accountChildren}
|
||||
selectedAccount={this.props.selectedAccount}
|
||||
onSelectAccount={this.onAccountSelected}
|
||||
onSelectKey={1} />));
|
||||
}
|
||||
|
||||
mainContent = (
|
||||
<Tabs defaultActiveKey={1} id='mainNavigationTabs'>
|
||||
<Tab title="Accounts" eventKey={1} >
|
||||
<AccountsTabContainer
|
||||
className="fullheight" />
|
||||
</Tab>
|
||||
<Tab title="Securities" eventKey={2} >
|
||||
<SecuritiesTabContainer
|
||||
className="fullheight" />
|
||||
</Tab>
|
||||
<Tab title="Scheduled Transactions" eventKey={3} >Scheduled transactions go here...</Tab>
|
||||
<Tab title="Budgets" eventKey={4} >Budgets go here...</Tab>
|
||||
<Tab title="Reports" eventKey={5} >
|
||||
<ReportsTabContainer
|
||||
className="fullheight" />
|
||||
</Tab>
|
||||
</Tabs>);
|
||||
else
|
||||
<Tab.Container id="main-ui-navigation" activeKey={this.state.tab} onSelect={this.onSelectTab}>
|
||||
<Row className="clearfix">
|
||||
<Col sm={12}>
|
||||
<Nav bsStyle="tabs">
|
||||
<NavDropdown eventKey={1} title="Accounts">
|
||||
<MenuItem onSelect={this.onNewAccount}>New Account</MenuItem>
|
||||
<MenuItem divider />
|
||||
<MenuItem disabled className="account-filter-menuitem">
|
||||
<InputGroup>
|
||||
<FormControl
|
||||
onKeyDown={function(e){if (e.key == " ") e.stopPropagation();}}
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
value={this.state.accountFilter}
|
||||
onChange={this.onAccountFilterChange}
|
||||
ref="accountFilter" />
|
||||
<InputGroup.Button>
|
||||
<Button className="clear-account-filter" onClick={this.onClearAccountFilter}>
|
||||
<Glyphicon glyph="remove"/>
|
||||
</Button>
|
||||
</InputGroup.Button>
|
||||
</InputGroup>
|
||||
</MenuItem>
|
||||
{accountElements}
|
||||
</NavDropdown>
|
||||
<NavItem eventKey={2}>Securities</NavItem>
|
||||
<NavItem eventKey={3}>Scheduled Transactions</NavItem>
|
||||
<NavItem eventKey={4}>Budgets</NavItem>
|
||||
<NavItem eventKey={5}>Reports</NavItem>
|
||||
</Nav>
|
||||
</Col>
|
||||
<Col sm={12}>
|
||||
<Tab.Content>
|
||||
<Tab.Pane eventKey={1}>
|
||||
<AccountsTabContainer/>
|
||||
</Tab.Pane>
|
||||
<Tab.Pane eventKey={2}>
|
||||
<SecuritiesTabContainer/>
|
||||
</Tab.Pane>
|
||||
<Tab.Pane eventKey={3}>
|
||||
Scheduled transactions go here...
|
||||
</Tab.Pane>
|
||||
<Tab.Pane eventKey={4}>
|
||||
Budgets go here...
|
||||
</Tab.Pane>
|
||||
<Tab.Pane eventKey={5}>
|
||||
<ReportsTabContainer/>
|
||||
</Tab.Pane>
|
||||
</Tab.Content>
|
||||
</Col>
|
||||
</Row>
|
||||
</Tab.Container>);
|
||||
} else {
|
||||
mainContent = (
|
||||
<Jumbotron>
|
||||
<center>
|
||||
@ -69,21 +187,30 @@ class MoneyGoApp extends React.Component {
|
||||
<p><i>Go</i> manage your money.</p>
|
||||
</center>
|
||||
</Jumbotron>);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fullheight ui">
|
||||
<div className="ui">
|
||||
<TopBarContainer
|
||||
onCreateNewUser={this.onShowNewUser}
|
||||
onAccountSettings={this.onShowSettings} />
|
||||
onSettings={this.onShowSettings} />
|
||||
{mainContent}
|
||||
<NewUserModalContainer
|
||||
show={this.state.showNewUserModal}
|
||||
onSubmit={this.onHideNewUser}
|
||||
onCancel={this.onHideNewUser}/>
|
||||
<AccountSettingsModalContainer
|
||||
show={this.state.showAccountSettingsModal}
|
||||
show={this.state.showSettingsModal}
|
||||
onSubmit={this.onHideSettings}
|
||||
onCancel={this.onHideSettings}/>
|
||||
<AddEditAccountModal
|
||||
show={this.state.creatingNewAccount}
|
||||
initialParentAccount={this.props.selectedAccount}
|
||||
accounts={this.props.accounts}
|
||||
accountChildren={this.props.accountChildren}
|
||||
onCancel={this.onNewAccountCancel}
|
||||
onSubmit={this.onCreateAccount}
|
||||
security_list={this.props.security_list}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user