feat(ExpenseForm): optimize style fo expense form.

src/containers/Expenses/ExpenseForm/ExpenseFormEntriesTable.js

@@ -10,7 +10,6 @@ import {
   updateMinEntriesLines,
   updateAutoAddNewLine,
   updateRemoveLineByIndex,
-  orderingLinesIndexes,
 } from 'utils';
 
 /**
@@ -75,7 +74,6 @@ export default function ExpenseFormEntriesTable({
         autoFocus: ['expense_account_id', 0],
         currencyCode
       }}
-      footer={true}
     />
   );
 }

src/containers/Expenses/ExpenseForm/components.js

@@ -62,14 +62,6 @@ const LandedCostHeaderCell = () => {
   );
 };
 
-/**
- * Amount footer cell.
- */
-function AmountFooterCell({ payload: { currencyCode }, rows }) {
-  const total = safeSumBy(rows, 'original.amount');
-  return <span>{formattedAmount(total, currencyCode)}</span>;
-}
-
 /**
  * Expense amount header cell.
  */
@@ -77,34 +69,17 @@ export function ExpenseAmountHeaderCell({ payload: { currencyCode } }) {
   return intl.get('amount_currency', { currency: currencyCode });
 }
 
-/**
- * Expense account footer cell.
- */
-function ExpenseAccountFooterCell() {
-  return <T id={'total'} />;
-}
-
 /**
  * Retrieve expense form table entries columns.
  */
 export function useExpenseFormTableColumns({ landedCost }) {
   return React.useMemo(
     () => [
-      {
-        Header: '#',
-        accessor: 'index',
-        Cell: ({ row: { index } }) => <span>{index + 1}</span>,
-        className: 'index',
-        width: 40,
-        disableResizing: true,
-        disableSortBy: true,
-      },
       {
         Header: ExpenseCategoryHeaderCell,
         id: 'expense_account_id',
         accessor: 'expense_account_id',
         Cell: AccountsListFieldCell,
-        Footer: ExpenseAccountFooterCell,
         className: 'expense_account_id',
         disableSortBy: true,
         width: 40,
@@ -115,7 +90,6 @@ export function useExpenseFormTableColumns({ landedCost }) {
         Header: ExpenseAmountHeaderCell,
         accessor: 'amount',
         Cell: MoneyFieldCell,
-        Footer: AmountFooterCell,
         disableSortBy: true,
         width: 40,
         className: 'amount',

src/containers/Expenses/ExpenseForm/utils.js

@@ -22,28 +22,7 @@ const ERROR = {
     'ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED',
 };
 
-// Transform API errors in toasts messages.
+export const MIN_LINES_NUMBER = 1;
-export const transformErrors = (errors, { setErrors }) => {
-  const hasError = (errorType) => errors.some((e) => e.type === errorType);
-
-  if (hasError(ERROR.EXPENSE_ALREADY_PUBLISHED)) {
-    setErrors(
-      AppToaster.show({
-        message: intl.get('the_expense_is_already_published'),
-      }),
-    );
-  }
-  if (hasError(ERROR.ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED)) {
-    setErrors(
-      AppToaster.show({
-        intent: Intent.DANGER,
-        message: 'ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED',
-      }),
-    );
-  }
-};
-
-export const MIN_LINES_NUMBER = 4;
 
 export const defaultExpenseEntry = {
   amount: '',
@@ -65,6 +44,29 @@ export const defaultExpense = {
   categories: [...repeatValue(defaultExpenseEntry, MIN_LINES_NUMBER)],
 };
 
+/**
+ * Transform API errors in toasts messages.
+ */
+export const transformErrors = (errors, { setErrors }) => {
+  const hasError = (errorType) => errors.some((e) => e.type === errorType);
+
+  if (hasError(ERROR.EXPENSE_ALREADY_PUBLISHED)) {
+    setErrors(
+      AppToaster.show({
+        message: intl.get('the_expense_is_already_published'),
+      }),
+    );
+  }
+  if (hasError(ERROR.ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED)) {
+    setErrors(
+      AppToaster.show({
+        intent: Intent.DANGER,
+        message: 'ENTRIES_ALLOCATED_COST_COULD_NOT_DELETED',
+      }),
+    );
+  }
+};
+
 /**
  * Transformes the expense to form initial values in edit mode.
  */