WIP Make journal entries page.

client/src/components/AccountsSelectList.js

@@ -2,7 +2,9 @@ import React, {useMemo, useCallback, useState} from 'react';
 import {omit} from 'lodash';
 import {
   MenuItem,
-  Button
+  FormGroup,
+  Button,
+  Intent,
 } from '@blueprintjs/core';
 import {Select} from '@blueprintjs/select';
 // import MultiSelect from 'components/MultiSelect';
@@ -10,6 +12,7 @@ import {Select} from '@blueprintjs/select';
 export default function AccountsMultiSelect({
   accounts,
   onAccountSelected,
+  error,
 }) {
   const [selectedAccount, setSelectedAccount] = useState(null); 
 
@@ -30,18 +33,20 @@ export default function AccountsMultiSelect({
   }, [setSelectedAccount, onAccountSelected]);
 
   return (
+ 
     <Select
       items={accounts}
       noResults={<MenuItem disabled={true} text='No results.' />}
       itemRenderer={accountItem}
       popoverProps={{ minimal: true }}
       filterable={true}
-      onItemSelect={onAccountSelect}
+      onItemSelect={onAccountSelect}        
     >
       <Button
         rightIcon='caret-down'
         text={selectedAccount ? selectedAccount.name : 'Select account'}
       />
     </Select>
+
   );
 }

client/src/components/DataTableCells/AccountsListFieldCell.js

@@ -1,24 +1,36 @@
-import React from 'react';
+import React, {useCallback} from 'react';
 import AccountsSelectList from 'components/AccountsSelectList';
 import classNames from 'classnames';
 import {
   FormGroup,
   Classes,
+  Intent,
 } from '@blueprintjs/core';
 
 // Account cell renderer.
 const AccountCellRenderer = ({
+  column: { id, value },
   row: { index, original },
-  payload: { accounts }
+  payload: { accounts, updateData, errors },
 }) => {
+  const handleAccountSelected = useCallback((account) => {
+    updateData(index, id, account.id);
+  }, [updateData, index, id]);
+
+  const { account_id = false } = (errors[index] || {});
+
   return (
     <FormGroup
-      className={classNames('form-group--select-list',
-        'form-group--account', Classes.FILL)}
+      intent={account_id ? Intent.DANGER : ''}
+      className={classNames(
+        'form-group--select-list',
+        'form-group--account',
+        Classes.FILL)}
       >
       <AccountsSelectList
         accounts={accounts}
-        onAccountSelected={() => {}} />
+        onAccountSelected={handleAccountSelected}
+        error={account_id} />
     </FormGroup>
   );
 };

client/src/components/DataTableCells/MoneyFieldCell.js

@@ -15,7 +15,7 @@ const MoneyFieldCellRenderer = ({
   }, []);
 
   const onBlur = () => {
-    payload.updateData(index, id, value)
+    payload.updateData(index, id, parseFloat(value));
   };
 
   return (<MoneyInputGroup

client/src/containers/Dashboard/Accounting/MakeJournalEntriesForm.js

@@ -1,11 +1,11 @@
 
 
-import React, {useState, useEffect} from 'react';
+import React, {useMemo, useEffect} from 'react';
 import * as Yup from 'yup';
 import MakeJournalEntriesHeader from './MakeJournalEntriesHeader';
 import MakeJournalEntriesFooter from './MakeJournalEntriesFooter';
 import MakeJournalEntriesTable from './MakeJournalEntriesTable';
-import {Formik, useFormik} from "formik";
+import {useFormik} from "formik";
 import MakeJournalEntriesConnect from 'connectors/MakeJournalEntries.connect';
 import AccountsConnect from 'connectors/Accounts.connector';
 import DashboardConnect from 'connectors/Dashboard.connector';
@@ -30,6 +30,7 @@ function MakeJournalEntriesForm({
   });
 
   const validationSchema = Yup.object().shape({
+    journal_number: Yup.string().required(),
     date: Yup.date().required(),
     reference: Yup.string(),
     description: Yup.string(),
@@ -37,42 +38,66 @@ function MakeJournalEntriesForm({
       Yup.object().shape({
         credit: Yup.number().nullable(),
         debit: Yup.number().nullable(),
+        account_id: Yup.number().nullable().when(['credit', 'debit'], {
+          is: (credit, debit) => credit || debit,
+          then: Yup.number().required(),
+        }),
+        note: Yup.string().nullable(),
       }),
     )
   });
 
-  const defaultEntry = {
+  const defaultEntry = useMemo(() => ({
     account_id: null,
     credit: null,
     debit: null,
-    note: '',    
-  };
+    note: '',
+  }), []);
 
   const formik = useFormik({
     enableReinitialize: true,
     validationSchema,
     initialValues: {
-      reference: '',
+      journal_number: '',
       date: moment(new Date()).format('YYYY-MM-DD'),
       description: '',
+      reference: '',
       entries: [
         defaultEntry,
         defaultEntry,
         defaultEntry,
         defaultEntry,
+        defaultEntry,
+        defaultEntry,
       ],
     },
     onSubmit: (values) => {
       const form = values.entries.filter((entry) => (
         (entry.credit || entry.debit)
       ));
-      makeJournalEntries(values).then((response) => {
-        AppToaster.show({
-          message: 'the_account_has_been_submit',
-        });
-      }).catch((error) => {
+      const getTotal = (type = 'credit') => {
+        return form.reduce((total, item) => {
+          return item[type] ? item[type] + total : total;
+        }, 0);
+      }
+      const totalCredit = getTotal('credit');
+      const totalDebit = getTotal('debit');
 
-      });
+      if (totalCredit !== totalDebit) {
+        AppToaster.show({
+          message: 'credit_and_debit_not_equal',
+        });
+        return;
+      }
+
+      makeJournalEntries({ ...values, entries: form })
+        .then((response) => {
+          AppToaster.show({
+            message: 'manual_journal_has_been_submit',
+          }); 
+        }).catch((error) => {
+
+        });
     },
   });
 

client/src/containers/Dashboard/Accounting/MakeJournalEntriesTable.js

@@ -1,9 +1,9 @@
 import React, {useState, useMemo, useCallback} from 'react';
-import DataTable from 'components/DataTable';
 import {
   Button,
   Intent,
 } from '@blueprintjs/core';
+import DataTable from 'components/DataTable';
 import Icon from 'components/Icon';
 import AccountsConnect from 'connectors/Accounts.connector.js';
 import {compose, formattedAmount} from 'utils';
@@ -11,7 +11,8 @@ import {
   AccountsListFieldCell,
   MoneyFieldCell,
   InputGroupCell,
-} from 'comp}onents/DataTableCells';
+} from 'components/DataTableCells';
+import { omit } from 'lodash';
 
 // Actions cell renderer.
 const ActionsCellRenderer = ({
@@ -50,7 +51,7 @@ const TotalAccountCellRenderer = (chainedComponent) => (props) => {
 // Total credit/debit cell renderer.
 const TotalCreditDebitCellRenderer = (chainedComponent, type) => (props) => {
   if (props.data.length === (props.row.index + 2)) {
-    const total = props.data.reduce((total, entry) => {
+      const total = props.data.reduce((total, entry) => {
       const amount = parseInt(entry[type], 10);
       const computed = amount ? total + amount : total;
 
@@ -82,18 +83,20 @@ function MakeJournalEntriesTable({
 
   // Handles update datatable data.
   const handleUpdateData = useCallback((rowIndex, columnId, value) => {
-    setRow((old) =>
-      old.map((row, index) => {
-        if (index === rowIndex) {
-          return {
-            ...old[rowIndex],
-            [columnId]: value,
-          }
-        }
-        return row
-      })
-    )
-  }, []);
+    const newRows = rows.map((row, index) => {
+      if (index === rowIndex) {
+        return {
+          ...rows[rowIndex],
+          [columnId]: value,
+        };
+      }
+      return { ...row };
+    });
+    setRow(newRows);
+    formik.setFieldValue('entries', newRows.map(row => ({
+      ...omit(row, ['rowType']),
+    })));
+  }, [rows, formik]);
 
   // Handles click remove datatable row.
   const handleRemoveRow = useCallback((rowIndex) => {
@@ -119,6 +122,7 @@ function MakeJournalEntriesTable({
     },
     {
       Header: 'Account',
+      id: 'account_id',
       accessor: 'account',
       Cell: TotalAccountCellRenderer(AccountsListFieldCell),
       className: "account",
@@ -174,6 +178,7 @@ function MakeJournalEntriesTable({
   const rowClassNames = useCallback((row) => ({
     'row--total': rows.length === (row.index + 2),
   }), [rows]);
+
   return (
     <div class="make-journal-entries__table">
       <DataTable
@@ -182,6 +187,7 @@ function MakeJournalEntriesTable({
         rowClassNames={rowClassNames}
         payload={{
           accounts,
+          errors: formik.errors.entries || [],
           updateData: handleUpdateData,
           removeRow: handleRemoveRow,
         }}/>

client/src/style/objects/form.scss

@@ -98,6 +98,12 @@ label{
   &.bp3-fill{
     width: 100%;
   }
+
+  &.bp3-intent-danger{
+    .bp3-button:not(.bp3-minimal){
+      border-color: #db3737;
+    }
+  }  
 }
 
 

client/src/style/pages/make-journal-entries.scss

@@ -1,5 +1,6 @@
 
 .make-journal-entries{
+  padding-bottom: 80px;
 
   &__header{
     padding: 25px 27px 20px;
@@ -74,6 +75,14 @@
             padding-right: 8px;
           }
 
+          .form-group--select-list{
+            &.bp3-intent-danger{
+              .bp3-button:not(.bp3-minimal){
+                border-color: #efa8a8;
+              }
+            }  
+          }
+
           &:last-of-type{
 
             .td{

client/src/utils.js

@@ -1,5 +1,8 @@
 import moment from 'moment';
 import _ from 'lodash';
+import Currency from 'js-money/lib/currency';
+import accounting from 'accounting';
+
 
 export function removeEmptyFromObject(obj) {
   obj = Object.assign({}, obj);
@@ -131,4 +134,12 @@ export const defaultExpanderReducer = (tableRows, level) => {
   };
   walker(tableRows);
   return expended;
+}
+
+
+export function formattedAmount(cents, currency) {
+  const { symbol, decimal_digits: precision } = Currency[currency];
+  const amount = cents / Math.pow(10, precision);
+
+  return accounting.formatMoney(amount, { symbol, precision });
 }