Merge pull request #19 from pwizla/feature/check-items

Add ability to check for transaction + double amount display (real/bank)

src/App.js

@@ -1,88 +1,69 @@
 import React, { Component } from 'react';
 import './css/app.css';
 import './css/react-bootstrap-table-all.min.css';
+import _ from 'lodash';
 import Header from './components/header.jsx';
 import NewTransaction from './components/new-transaction';
 import TransactionsList from './components/transactions-list';
 import Total from './components/total';
 import BudgetTable from './components/budget-table';
+import SETTINGS from './lib/settings';
 
 class App extends Component {
   constructor() {
     super();
     this.handleAddTransaction = this.handleAddTransaction.bind(this);
-    this.getTotal = this.getTotal.bind(this);
+    this.handleToggleChecked = this.handleToggleChecked.bind(this);
+    this.saveLocally = this.saveLocally.bind(this);
+    this.getRealTotal = this.getRealTotal.bind(this);
+    this.getBankTotal = this.getBankTotal.bind(this);
     this.getBudget = this.getBudget.bind(this);
     this.state = {
       transactions: JSON.parse(localStorage.getItem('swimo-transactions')) || [],
-      total: JSON.parse(localStorage.getItem('swimo-total')) || 0,
-      budget: JSON.parse(localStorage.getItem('swimo-budget')) || {
-        'Courses': {
-          'enveloppe': 50,
-          'engaged': 0,
-          'restant': 0,
-        },
-        'Factures': {
-          'enveloppe': 150,
-          'engaged': 0,
-          'restant': 0,
-        },
-        'Impôts': {
-          'enveloppe': 230,
-          'engaged': 0,
-          'restant': 0,
-        },
-        'Loyer': {
-          'enveloppe': 375,
-          'engaged': 0,
-          'restant': 0,
-        },
-        'Plaisir Perso': {
-          'enveloppe': 30,
-          'engaged': 0,
-          'restant': 0,
-        },
-        'Salaire': {
-          'enveloppe': 1500,
-          'engaged': 0,
-          'restant': 0,
-        },
-        'Santé': {
-          'enveloppe': 78,
-          'engaged': 0,
-          'restant': 0,
-        },
-        'Sorties': {
-          'enveloppe': 30,
-          'engaged': 0,
-          'restant': 0,
-        },
-        'Transports': {
-          'enveloppe': 80,
-          'engaged': 0,
-          'restant': 0,
-        },
-        'Autres': {
-          'enveloppe': 0,
-          'engaged': 0,
-          'restant': 0,
-        },
-      },
+      realTotal: JSON.parse(localStorage.getItem('swimo-realTotal')) || 0,
+      bankTotal: JSON.parse(localStorage.getItem('swimo-bankTotal')) || 0,
+      budget: JSON.parse(localStorage.getItem('swimo-budget')) || SETTINGS.budget,
       flatBudget: JSON.parse(localStorage.getItem('swimo-flatbudget')) || [],
     };
   }
 
   componentDidMount() {
     this.getFlatBudget();
+    this.getBankTotal();
   }
 
   componentDidUpdate() {
     this.saveLocally();
   }
 
-  getTotal (amount) {
-    const newTotal = this.state.total + Number(amount);
-    this.setState({total: newTotal});
+  handleToggleChecked(event) {
+    const target = event.target;
+    const name = target.name;
+    const index = _.findIndex(this.state.transactions, (transac) => {
+      return String(transac.key) === String(name);
+    })
+    const newTransactions = this.state.transactions;
+    newTransactions[index].checked = !this.state.transactions[index].checked
+    console.log("newTransactions[index].checked: ", newTransactions[index].checked);
+    this.setState({newTransactions});
+    console.log("this.state.transactions[index] ", this.state.transactions[index]);
+    this.getBankTotal();
+  }
+
+  getRealTotal (amount) {
+    const newrealTotal = this.state.realTotal + Number(amount);
+    this.setState({realTotal: newrealTotal});
+  }
+
+  getBankTotal () {
+    let newBankTotal = 0;
+    this.state.transactions.map( (transac) => {
+      if (transac.checked) {
+        newBankTotal += Number(transac.amount);
+      }
+      return newBankTotal;
+    });
+    this.setState({bankTotal: newBankTotal});
   }
 
   getBudget (amount, category) {
@@ -113,14 +94,14 @@ class App extends Component {
     let transactions = this.state.transactions;
     transactions.push(obj);
     this.setState({transactions: transactions});
-    this.getTotal(obj.amount);
+    this.getRealTotal(obj.amount);
     this.getBudget(obj.amount, obj.category);
     this.getFlatBudget();
   }
 
   saveLocally() {
     localStorage.setItem('swimo-transactions', JSON.stringify(this.state.transactions));
-    localStorage.setItem('swimo-total', JSON.stringify(this.state.total));
+    localStorage.setItem('swimo-realTotal', JSON.stringify(this.state.realTotal));
     localStorage.setItem('swimo-budget', JSON.stringify(this.state.budget));
     localStorage.setItem('swimo-flatbudget', JSON.stringify(this.state.flatBudget));
   }
@@ -136,12 +117,15 @@ class App extends Component {
           />
           <Total
             transactions={this.state.transactions}
-            total={this.state.total}
+            realTotal={this.state.realTotal}
+            bankTotal={this.state.bankTotal}
           />
         </div>
         <div className="component-row">
           <TransactionsList
             transactions={this.state.transactions}
+            onSave={this.saveLocally}
+            onToggleChecked={this.handleToggleChecked}
           />
           <BudgetTable
             flatBudget={this.state.flatBudget}

src/components/checkbox.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+class Checkbox extends React.Component {
+  render() {
+    return (
+      <input
+        name={this.props.thisKey}
+        type='checkbox'
+        checked={this.props.checked}
+        onChange={this.props.onToggleChecked}
+      />
+    );
+  }
+}
+
+export default Checkbox;

src/components/new-transaction.jsx

@@ -9,6 +9,7 @@ class NewTransaction extends React.Component {
       description: '',
       category: '',
       amount: '',
+      checked: false,
     }
 
     this.handleInputChange = this.handleInputChange.bind(this);
@@ -38,6 +39,7 @@ class NewTransaction extends React.Component {
         description: this.state.description,
         category: this.state.category,
         amount: Number(this.state.amount).toFixed(2),
+        checked: this.state.checked,
       });
     }
     this.handleClearForm();
@@ -50,6 +52,7 @@ class NewTransaction extends React.Component {
       description: '',
       category: '',
       amount: '',
+      checked: false,
     })
   }
 

src/components/total.jsx

@@ -4,35 +4,58 @@ import SETTINGS from '../lib/settings';
 class Total extends React.Component {
 
   render() {
-    // used to highlight total amount in specific case(s)
+    // used to highlight realTotal amount in specific case(s)
     const threshold = SETTINGS.warningThreshold;
-    const total = this.props.total;
+    const realTotal = this.props.realTotal;
+    const bankTotal = this.props.bankTotal;
+    console.log("realTotal: ", realTotal);
+    console.log("bankTotal: ", bankTotal);
     return (
       <div className="component-container subtle-highlight priority-box">
         <div className="total-box">
           <div className="title-box">
             Solde
           </div>
-          {total >= threshold &&
+          {realTotal >= threshold &&
             <div className="total-amount pull-right">
-              {total.toFixed(2)} €
+              Réel: {realTotal.toFixed(2)} €
             </div>
           }
-          {(total < threshold && total > 0) &&
+          {(realTotal < threshold && realTotal > 0) &&
             <div className="total-amount warning">
-              {total.toFixed(2)} €
+              Réel: {realTotal.toFixed(2)} €
             </div>
           }
-          {total < 0 &&
+          {realTotal <= 0 &&
             <div className="total-amount danger">
               <span className="pull-left">
                 &nbsp;&nbsp;&nbsp;!!!
               </span>
               <span className="pull-right">
-                {total.toFixed(2)} €&nbsp;
+                Réel: {realTotal.toFixed(2)} €&nbsp;
               </span>
             </div>
           }
+          {bankTotal >= threshold &&
+            <div className="total-amount pull-right grey">
+              Banque: {bankTotal.toFixed(2)} €
+            </div>
+          }
+          {(bankTotal < threshold && bankTotal > 0) &&
+            <div className="total-amount warning">
+              Banque: {bankTotal.toFixed(2)} €
+            </div>
+          }
+          {bankTotal <= 0 &&
+            <div className="total-amount danger">
+              <span className="pull-left">
+                &nbsp;&nbsp;&nbsp;!!!
+              </span>
+              <span className="pull-right">
+                Banque: {bankTotal.toFixed(2)} €&nbsp;
+              </span>
+            </div>
+          } 
         </div>
       </div>
     );

src/components/transactions-list.jsx

@@ -1,22 +1,31 @@
 import React from 'react';
 import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
+import Checkbox from './checkbox';
 
 class TransactionsList extends React.Component {
   constructor(props) {
-     super(props);
+    super(props);
 
-     this.options = {
-       defaultSortName: 'date',
-       defaultSortOrder: 'desc',
-     };
-   }
+    this.checkboxFormatter = this.checkboxFormatter.bind(this);
+
+    this.options = {
+      defaultSortName: 'date',
+      defaultSortOrder: 'desc',
+    };
+  }
+
+  checkboxFormatter(cell, row) {
+    return(
+      <Checkbox
+        thisKey={row.key}
+        checked={row.checked}
+        onToggleChecked={this.props.onToggleChecked}
+      />
+    );
+  }
 
   render() {
     const transactions = this.props.transactions;
-    const selectRow = {
-      mode: 'checkbox',
-      bgColor: 'rgba(18,84,181,.4)'
-     };
 
     return (
       <div className="component-container transac-table">
@@ -32,7 +41,6 @@ class TransactionsList extends React.Component {
           <BootstrapTable
             data={transactions}
             options={this.options}
-            selectRow={selectRow}
             hover={true}
             bordered={false}
             tableHeaderClass='swimo-table-header'
@@ -55,28 +63,36 @@ class TransactionsList extends React.Component {
             </TableHeaderColumn>
             <TableHeaderColumn
               dataSort={true}
-              width='30%'
+              width='35%'
               headerAlign='left'
               dataAlign='left'
               dataField='description'>
                 Description
             </TableHeaderColumn>
             <TableHeaderColumn
               dataSort={true}
-              width='30%'
+              width='20%'
               headerAlign='left'
               dataAlign='left'
               dataField='category'>
                 Catégorie
             </TableHeaderColumn>
             <TableHeaderColumn
               dataSort={true}
-              width='20%'
-              headerAlign='right'
+              width='15%'
               dataAlign='right'
               dataField='amount'>
                 Montant
             </TableHeaderColumn>
+            <TableHeaderColumn
+              dataSort={true}
+              width='10%'
+              headerAlign='right'
+              dataAlign='right'
+              dataField='checked'
+              dataFormat={this.checkboxFormatter}>
+                &#10004;
+            </TableHeaderColumn>
           </BootstrapTable>
         }
       </div>

src/css/app.css

@@ -60,7 +60,6 @@
   font-weight: bold;
   font-size: 24pt;
   text-align: right;
-  margin-top: -30px;
 }
 
 .new-transac-form-item {
@@ -116,12 +115,12 @@
 }
 
 .budget-table-body {
-  font-size: 11pt;
+  font-size: 10pt;
 }
 
 .swimo-table-header,
 .swimo-table-body{
-  font-size: 11pt;
+  font-size: 10pt;
   text-align: left;
   padding: 8px;
   border: none;
@@ -148,6 +147,10 @@
   color: #FFF;
 }
 
+.grey {
+  color: #AAA;
+}
+
 @media screen and (max-width: 999px) {
   .title-box,
   .total-amount,