WIP Make journal entries page.

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,
         }}/>