From 8ca68da81601d5f69c4be1d17a8bc9998dc159d5 Mon Sep 17 00:00:00 2001 From: Aaron Lindsay Date: Tue, 11 Aug 2015 07:00:58 -0400 Subject: [PATCH] Add pagination for transactions, 'New Transaction' button --- static/account_register.js | 111 ++++++++++++++++++++++++++++--------- static/stylesheet.css | 10 ++++ 2 files changed, 96 insertions(+), 25 deletions(-) diff --git a/static/account_register.js b/static/account_register.js index e82c34d..3e2c99d 100644 --- a/static/account_register.js +++ b/static/account_register.js @@ -1,6 +1,7 @@ // Import all the objects we want to use from ReactBootstrap var Modal = ReactBootstrap.Modal; +var Pagination = ReactBootstrap.Pagination; var Label = ReactBootstrap.Label; var Table = ReactBootstrap.Table; @@ -8,6 +9,9 @@ var Grid = ReactBootstrap.Grid; var Row = ReactBootstrap.Row; var Col = ReactBootstrap.Col; +var Button = ReactBootstrap.Button; +var ButtonToolbar = ReactBootstrap.ButtonToolbar; + var DateTimePicker = ReactWidgets.DateTimePicker; const TransactionRow = React.createClass({ @@ -273,7 +277,7 @@ const AddEditTransactionModal = React.createClass({ - + {deleteButton} @@ -289,11 +293,23 @@ const AccountRegister = React.createClass({ return { editingTransaction: false, selectedTransaction: new Transaction(), - transactions: [] + transactions: [], + pageSize: 20, + numPages: 0, + currentPage: 0, + height: 0 }; }, - handleEditTransaction: function(transaction, fieldName) { - //TODO select fieldName first when editing + resize: function() { + var div = React.findDOMNode(this); + this.setState({height: div.parentElement.clientHeight - 30}); + }, + componentDidMount: function() { + this.resize(); + var self = this; + $(window).resize(function() {self.resize();}); + }, + handleEditTransaction: function(transaction) { this.setState({ selectedTransaction: transaction, editingTransaction: true @@ -304,6 +320,19 @@ const AccountRegister = React.createClass({ editingTransaction: false }); }, + handleNewTransactionClicked: function() { + var newTransaction = new Transaction(); + newTransaction.Status = TransactionStatus.Entered; + newTransaction.Date = new Date(); + newTransaction.Splits.push(new Split()); + newTransaction.Splits.push(new Split()); + newTransaction.Splits[0].AccountId = this.props.selectedAccount.AccountId; + + this.setState({ + editingTransaction: true, + selectedTransaction: newTransaction + }); + }, ajaxError: function(jqXHR, status, error) { var e = new Error(); e.ErrorId = 5; @@ -314,7 +343,7 @@ const AccountRegister = React.createClass({ $.ajax({ type: "GET", dataType: "json", - url: "account/"+account.AccountId+"/transactions?sort=date-desc&limit=50&page="+page, + url: "account/"+account.AccountId+"/transactions?sort=date-desc&limit="+this.state.pageSize+"&page="+page, success: function(data, status, jqXHR) { var e = new Error(); var transactions = []; @@ -331,19 +360,38 @@ const AccountRegister = React.createClass({ var a = new Account(); a.fromJSON(data.account); - this.setState({transactions: transactions}); + var pages = Math.ceil(data.totaltransactions / this.state.pageSize); + + this.setState({ + transactions: transactions, + numPages: pages + }); }.bind(this), error: this.ajaxError }); }, + handleSelectPage: function(event, selectedEvent) { + var newpage = selectedEvent.eventKey - 1; + // Don't do pages that don't make sense + if (newpage < 0) + newpage = 0; + if (newpage >= this.state.numPages) + newpage = this.state.numPages-1; + if (newpage != this.state.currentPage) { + if (this.props.selectedAccount != null) { + this.getTransactionPage(this.props.selectedAccount, newpage); + } + this.setState({currentPage: newpage}); + } + }, onNewTransaction: function() { - this.getTransactionPage(this.props.selectedAccount, 0); + this.getTransactionPage(this.props.selectedAccount, this.state.currentPage); }, onUpdatedTransaction: function() { - this.getTransactionPage(this.props.selectedAccount, 0); + this.getTransactionPage(this.props.selectedAccount, this.state.currentPage); }, onDeletedTransaction: function() { - this.getTransactionPage(this.props.selectedAccount, 0); + this.getTransactionPage(this.props.selectedAccount, this.state.currentPage); }, createNewTransaction: function(transaction) { $.ajax({ @@ -419,10 +467,10 @@ const AccountRegister = React.createClass({ if (nextProps.selectedAccount != this.props.selectedAccount) { this.setState({ selectedTransaction: new Transaction(), - transactions: [] + transactions: [], + currentPage: 0 }); this.getTransactionPage(nextProps.selectedAccount, 0); - console.log("TODO begin fetching transactions for new account"); } }, render: function() { @@ -432,18 +480,9 @@ const AccountRegister = React.createClass({ if (this.props.selectedAccount != null) { name = this.props.selectedAccount.Name; - var newTransaction = new Transaction(); - newTransaction.Description = "Create New Transaction..."; - newTransaction.Status = TransactionStatus.Entered; - newTransaction.Date = new Date(); - newTransaction.Splits.push(new Split()); - newTransaction.Splits.push(new Split()); - newTransaction.Splits[0].AccountId = this.props.selectedAccount.AccountId; - var transactionRows = []; - var allTransactions = [newTransaction].concat(this.state.transactions); - for (var i = 0; i < allTransactions.length; i++) { - var t = allTransactions[i]; + for (var i = 0; i < this.state.transactions.length; i++) { + var t = this.state.transactions[i]; transactionRows.push(( {transactionRows} - + ); } + var style = {height: this.state.height + "px"}; + var disabled = (this.props.selectedAccount == null) ? "disabled" : ""; + return ( -
+
- {name} + Transactions for '{name}' + + + + + + + + {register}
); diff --git a/static/stylesheet.css b/static/stylesheet.css index 486221f..2ba1365 100644 --- a/static/stylesheet.css +++ b/static/stylesheet.css @@ -71,6 +71,12 @@ div.accounttree-root div { right: 15px; bottom: 15px; } +.transactions-container { + display: block; + width: 100%; + height: 100%; + overflow: auto; +} .transactions-column { padding: 15px; border-right: 1px solid #DDD; @@ -96,3 +102,7 @@ div.accounttree-root div { font-weight: 700; text-align: center; } + +.skinny-pagination { + margin: 0px; +}