feat: Control selected account from selectedAccountId prop.

feat: Allow to reset form of manual journal and expense.

client/src/containers/Accounting/MakeJournalEntriesForm.js

@@ -26,7 +26,15 @@ import Dragzone from 'components/Dragzone';
 import withMediaActions from 'containers/Media/withMediaActions';
 
 import useMedia from 'hooks/useMedia';
-import { compose } from 'utils';
+import { compose, repeatValue } from 'utils';
+
+const ERROR = {
+  JOURNAL_NUMBER_ALREADY_EXISTS: 'JOURNAL.NUMBER.ALREADY.EXISTS',
+  CUSTOMERS_NOT_WITH_RECEVIABLE_ACC: 'CUSTOMERS.NOT.WITH.RECEIVABLE.ACCOUNT',
+  VENDORS_NOT_WITH_PAYABLE_ACCOUNT: 'VENDORS.NOT.WITH.PAYABLE.ACCOUNT',
+  PAYABLE_ENTRIES_HAS_NO_VENDORS: 'PAYABLE.ENTRIES.HAS.NO.VENDORS',
+  RECEIVABLE_ENTRIES_HAS_NO_CUSTOMERS: 'RECEIVABLE.ENTRIES.HAS.NO.CUSTOMERS',
+};
 
 /**
  * Journal entries form.
@@ -139,7 +147,7 @@ function MakeJournalEntriesForm({
       date: moment(new Date()).format('YYYY-MM-DD'),
       description: '',
       reference: '',
-      entries: [defaultEntry, defaultEntry, defaultEntry, defaultEntry],
+      entries: [...repeatValue(defaultEntry, 4)],
     }),
     [defaultEntry],
   );
@@ -171,44 +179,50 @@ function MakeJournalEntriesForm({
       : [];
   }, [manualJournal]);
 
+  // Transform API errors in toasts messages.
   const transformErrors = (errors, { setErrors }) => {
     const hasError = (errorType) => errors.some((e) => e.type === errorType);
 
-    if (hasError('CUSTOMERS.NOT.WITH.RECEIVABLE.ACCOUNT')) {
+    if (hasError(ERROR.CUSTOMERS_NOT_WITH_RECEVIABLE_ACC)) {
       AppToaster.show({
-        message:
-          'customers_should_assign_with_receivable_account_only',
+        message: formatMessage({
+          id: 'customers_should_assign_with_receivable_account_only',
+        }),
         intent: Intent.DANGER,
       });
     }
-    if (hasError('VENDORS.NOT.WITH.PAYABLE.ACCOUNT')) {
+    if (hasError(ERROR.PAYABLE_ENTRIES_HAS_NO_VENDORS)) {
       AppToaster.show({
-        message: 'vendors_should_assign_with_payable_account_only',
+        message: formatMessage({
+          id: 'vendors_should_assign_with_payable_account_only',
+        }),
         intent: Intent.DANGER,
       });
     }
-    if (hasError('RECEIVABLE.ENTRIES.HAS.NO.CUSTOMERS')) {
+    if (hasError(ERROR.RECEIVABLE_ENTRIES_HAS_NO_CUSTOMERS)) {
       AppToaster.show({
-        message:
-          'entries_with_receivable_account_no_assigned_with_customers',
-        intent: Intent.DANGER,
-      });
-      }
-    if (hasError('PAYABLE.ENTRIES.HAS.NO.VENDORS')) {
-      AppToaster.show({
-        message:
-          'entries_with_payable_account_no_assigned_with_vendors',
+        message: formatMessage({
+          id: 'entries_with_receivable_account_no_assigned_with_customers',
+        }),
         intent: Intent.DANGER,
       });
     }
-    if (hasError('JOURNAL.NUMBER.ALREADY.EXISTS')) {
+    if (hasError(ERROR.PAYABLE_ENTRIES_HAS_NO_VENDORS)) {
+      AppToaster.show({
+        message: formatMessage({
+          id: 'entries_with_payable_account_no_assigned_with_vendors',
+        }),
+        intent: Intent.DANGER,
+      });
+    }
+    if (hasError(ERROR.JOURNAL_NUMBER_ALREADY_EXISTS)) {
       setErrors({
         journal_number: formatMessage({
           id: 'journal_number_is_already_used',
         }),
       });
     }
-  }
+  };
 
   const formik = useFormik({
     enableReinitialize: true,
@@ -313,6 +327,7 @@ function MakeJournalEntriesForm({
   const handleSubmitClick = useCallback(
     (payload) => {
       setPayload(payload);
+      // formik.resetForm();
       formik.handleSubmit();
     },
     [setPayload, formik],
@@ -336,15 +351,30 @@ function MakeJournalEntriesForm({
     [setDeletedFiles, deletedFiles],
   );
 
+  // Handle click on add a new line/row.
+  const handleClickAddNewRow = () => {
+    formik.setFieldValue('entries', [...formik.values.entries, defaultEntry]);
+  };
+
+  // Handle click `Clear all lines` button.
+  const handleClickClearLines = () => {
+    formik.setFieldValue(
+      'entries',
+      reorderingEntriesIndex([...repeatValue(defaultEntry, 4)]),
+    );
+  };
+
   return (
     <div class="make-journal-entries">
       <form onSubmit={formik.handleSubmit}>
         <MakeJournalEntriesHeader formik={formik} />
 
         <MakeJournalEntriesTable
-          initialValues={initialValues}
+          values={formik.values}
           formik={formik}
           defaultRow={defaultEntry}
+          onClickClearAllLines={handleClickClearLines}
+          onClickAddNewRow={handleClickAddNewRow}
         />
 
         <MakeJournalEntriesFooter

client/src/containers/Accounting/MakeJournalEntriesHeader.js

@@ -11,7 +11,7 @@ import { FormattedMessage as T } from 'react-intl';
 import { Row, Col } from 'react-grid-system';
 import moment from 'moment';
 import classNames from 'classnames';
-import { momentFormatter } from 'utils';
+import { momentFormatter, tansformDateValue } from 'utils';
 import {
   CurrenciesSelectList,
   ErrorMessage,
@@ -20,6 +20,7 @@ import {
   FieldRequiredHint,
 } from 'components';
 
+
 export default function MakeJournalEntriesHeader({
   formik: { errors, touched, values, setFieldValue, getFieldProps },
 }) {
@@ -72,8 +73,8 @@ export default function MakeJournalEntriesHeader({
           >
             <DateInput
               {...momentFormatter('YYYY/MM/DD')}
-              defaultValue={new Date()}
               onChange={handleDateChange}
+              value={tansformDateValue(values.date)}
               popoverProps={{
                 position: Position.BOTTOM,
                 minimal: true,

client/src/containers/Accounting/MakeJournalEntriesTable.js

@@ -6,7 +6,7 @@ import { omit } from 'lodash';
 import DataTable from 'components/DataTable';
 import Icon from 'components/Icon';
 import { Hint } from 'components';
-import { compose, formattedAmount } from 'utils';
+import { compose, formattedAmount, transformUpdatedRows } from 'utils';
 import {
   AccountsListFieldCell,
   MoneyFieldCell,
@@ -16,6 +16,19 @@ import {
 import withAccounts from 'containers/Accounts/withAccounts';
 import withCustomers from 'containers/Customers/withCustomers';
 
+// Contact header cell.
+function ContactHeaderCell() {
+  return (
+    <>
+      <T id={'contact'} />
+      <Hint
+        content={<T id={'contact_column_hint'} />}
+        position={Position.LEFT_BOTTOM}
+      />
+    </>
+  );
+}
+
 // Actions cell renderer.
 const ActionsCellRenderer = ({
   row: { index },
@@ -87,64 +100,22 @@ function MakeJournalEntriesTable({
   // #ownPorps
   onClickRemoveRow,
   onClickAddNewRow,
+  onClickClearAllLines,
   defaultRow,
-  initialValues,
-  formik: { errors, values, setFieldValue },
+  values,
+  formik: { errors, setFieldValue },
 }) {
-  const [rows, setRow] = useState([]);
+  const [rows, setRows] = useState([]);
   const { formatMessage } = useIntl();
+
   useEffect(() => {
-    setRow([
-      ...initialValues.entries.map((e) => ({ ...e, rowType: 'editor' })),
-      defaultRow,
-      defaultRow,
-    ]);
-  }, [initialValues, defaultRow]);
+    setRows([...values.entries.map((e) => ({ ...e, rowType: 'editor' }))]);
+  }, [values, setRows]);
 
-  // Handles update datatable data.
-  const handleUpdateData = useCallback(
-    (rowIndex, columnIdOrBulk, value) => {
-      const columnId = typeof columnIdOrBulk !== 'object' 
-        ? columnIdOrBulk : null;
-
-      const updateTable = typeof columnIdOrBulk === 'object'
-        ? columnIdOrBulk : null;
-
-      const newData = updateTable ? updateTable : { [columnId]: value };
-
-      const newRows = rows.map((row, index) => {
-        if (index === rowIndex) {
-          return { ...rows[rowIndex], ...newData };
-        }
-        return { ...row };
-      });
-      setRow(newRows);
-      setFieldValue(
-        'entries',
-        newRows.map((row) => ({
-          ...omit(row, ['rowType']),
-        })),
-      );
-    },
-    [rows, setFieldValue],
-  );
-
-  // Handles click remove datatable row.
-  const handleRemoveRow = useCallback(
-    (rowIndex) => {
-      const removeIndex = parseInt(rowIndex, 10);
-      const newRows = rows.filter((row, index) => index !== removeIndex);
-
-      setRow([...newRows]);
-      setFieldValue(
-        'entries',
-        newRows
-          .filter((row) => row.rowType === 'editor')
-          .map((row) => ({ ...omit(row, ['rowType']) })),
-      );
-      onClickRemoveRow && onClickRemoveRow(removeIndex);
-    },
-    [rows, setFieldValue, onClickRemoveRow],
+  // Final table rows editor rows and total and final blank row.
+  const tableRows = useMemo(
+    () => [...rows, { rowType: 'total' }, { rowType: 'final_space' }],
+    [rows],
   );
 
   // Memorized data table columns.
@@ -189,15 +160,7 @@ function MakeJournalEntriesTable({
         width: 150,
       },
       {
-        Header: (
-          <>
-            <T id={'contact'} />
-            <Hint
-              content={<T id={'contact_column_hint'} />}
-              position={Position.LEFT_BOTTOM}
-            />
-          </>
-        ),
+        Header: ContactHeaderCell,
         id: 'contact_id',
         accessor: 'contact_id',
         Cell: NoteCellRenderer(ContactsListFieldCell),
@@ -228,10 +191,47 @@ function MakeJournalEntriesTable({
 
   // Handles click new line.
   const onClickNewRow = useCallback(() => {
-    setRow([...rows, { ...defaultRow, rowType: 'editor' }]);
     onClickAddNewRow && onClickAddNewRow();
   }, [defaultRow, rows, onClickAddNewRow]);
 
+  // Handles update datatable data.
+  const handleUpdateData = useCallback(
+    (rowIndex, columnIdOrObj, value) => {
+      const newRows = transformUpdatedRows(
+        rows,
+        rowIndex,
+        columnIdOrObj,
+        value,
+      );
+      setFieldValue(
+        'entries',
+        newRows
+          .filter((row) => row.rowType === 'editor')
+          .map((row) => ({
+            ...omit(row, ['rowType']),
+          })),
+      );
+    },
+    [rows, setFieldValue],
+  );
+
+  const handleRemoveRow = useCallback(
+    (rowIndex) => {
+      const removeIndex = parseInt(rowIndex, 10);
+      const newRows = rows.filter((row, index) => index !== removeIndex);
+
+      setFieldValue(
+        'entries',
+        newRows
+          .filter((row) => row.rowType === 'editor')
+          .map((row) => ({ ...omit(row, ['rowType']) })),
+      );
+      onClickRemoveRow && onClickRemoveRow(removeIndex);
+    },
+    [rows, setFieldValue, onClickRemoveRow],
+  );
+
+  // Rows class names callback.
   const rowClassNames = useCallback(
     (row) => ({
       'row--total': rows.length === row.index + 2,
@@ -239,11 +239,15 @@ function MakeJournalEntriesTable({
     [rows],
   );
 
+  const handleClickClearAllLines = () => {
+    onClickClearAllLines && onClickClearAllLines();
+  };
+
   return (
     <div class="make-journal-entries__table">
       <DataTable
         columns={columns}
-        data={rows}
+        data={tableRows}
         rowClassNames={rowClassNames}
         sticky={true}
         payload={{
@@ -272,7 +276,7 @@ function MakeJournalEntriesTable({
         <Button
           small={true}
           className={'button--secondary button--clear-lines ml1'}
-          onClick={onClickNewRow}
+          onClick={handleClickClearAllLines}
         >
           <T id={'clear_all_lines'} />
         </Button>