fix: Ensure entries has atleast one empty line in expense and make journal form.

client/src/containers/Expenses/ExpenseForm/ExpenseForm.js

@@ -6,6 +6,7 @@ import { Formik, Form } from 'formik';
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 import { CLASSES } from 'common/classes';
+import * as R from 'ramda';
 
 import ExpenseFormHeader from './ExpenseFormHeader';
 import ExpenseFormBody from './ExpenseFormBody';
@@ -59,7 +60,6 @@ function ExpenseForm({
             ...defaultExpense,
             currency_code: baseCurrency,
             payment_account_id: defaultTo(preferredPaymentAccount, ''),
-            categories: orderingLinesIndexes(defaultExpense.categories),
           }),
     }),
     [expense, baseCurrency, preferredPaymentAccount],
@@ -77,15 +77,18 @@ function ExpenseForm({
       });
       return;
     }
+    // Filter expense entries that has no amount or expense account.
     const categories = values.categories.filter(
       (category) =>
-        category.amount && category.index && category.expense_account_id,
+        category.amount && category.expense_account_id,
     );
 
     const form = {
       ...values,
       publish: submitPayload.publish,
-      categories,
+      categories: R.compose(
+        orderingLinesIndexes,
+      )(categories),
     };
     // Handle request success.
     const handleSuccess = (response) => {

client/src/containers/Expenses/ExpenseForm/ExpenseFormEntriesTable.js

@@ -10,6 +10,7 @@ import {
   updateMinEntriesLines,
   updateAutoAddNewLine,
   updateRemoveLineByIndex,
+  orderingLinesIndexes,
 } from 'utils';
 
 /**

client/src/containers/Expenses/ExpenseForm/ExpenseFormPage.js

@@ -11,9 +11,10 @@ import { ExpenseFormPageProvider } from './ExpenseFormPageProvider';
  */
 export default function ExpenseFormPage() {
   const { id } = useParams();
+  const expenseId = parseInt(id, 10);
 
   return (
-    <ExpenseFormPageProvider expenseId={id}>
+    <ExpenseFormPageProvider expenseId={expenseId}>
       <ExpenseForm />
     </ExpenseFormPageProvider>
   );

client/src/containers/Expenses/ExpenseForm/utils.js

@@ -1,10 +1,12 @@
 import { AppToaster } from 'components';
 import moment from 'moment';
 import intl from 'react-intl-universal';
+import * as R from 'ramda';
 import {
   defaultFastFieldShouldUpdate,
   transformToForm,
   repeatValue,
+  ensureEntriesHasEmptyLine
 } from 'utils';
 
 const ERROR = {
@@ -27,7 +29,6 @@ export const transformErrors = (errors, { setErrors }) => {
 export const MIN_LINES_NUMBER = 4;
 
 export const defaultExpenseEntry = {
-  index: 0,
   amount: '',
   expense_account_id: '',
   description: '',
@@ -53,17 +54,23 @@ export const transformToEditForm = (
   defaultExpense,
   linesNumber = 4,
 ) => {
+  const expenseEntry = defaultExpense.categories[0];
+  const initialEntries = [
+    ...expense.categories.map((category) => ({
+      ...transformToForm(category, expenseEntry),
+    })),
+    ...repeatValue(
+      expenseEntry,
+      Math.max(linesNumber - expense.categories.length, 0),
+    ),
+  ];
+  const categories = R.compose(
+    ensureEntriesHasEmptyLine(MIN_LINES_NUMBER, expenseEntry),
+  )(initialEntries);
+
   return {
     ...transformToForm(expense, defaultExpense),
-    categories: [
-      ...expense.categories.map((category) => ({
-        ...transformToForm(category, defaultExpense.categories[0]),
-      })),
-      ...repeatValue(
-        expense,
-        Math.max(linesNumber - expense.categories.length, 0),
-      ),
-    ],
+    categories,
   };
 };