feat: expand sidebar once open form editor page.

feat: rounding money amount.
feat: optimize page form structure.
feat: refactoring make journal and expense form with FastField component.

client/src/containers/Expenses/ExpenseForm.js

@@ -1,21 +1,19 @@
 import React, {
   useMemo,
-  useState,
   useEffect,
-  useRef,
-  useCallback,
 } from 'react';
-import * as Yup from 'yup';
-import { useFormik } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import { useIntl } from 'react-intl';
+import { defaultTo, pick } from 'lodash';
+import { Formik, Form } from 'formik';
 import moment from 'moment';
-import { Intent, FormGroup, TextArea } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
-import { pick } from 'lodash';
-import { useHistory } from 'react-router-dom';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
 
 import ExpenseFormHeader from './ExpenseFormHeader';
-import ExpenseTable from './ExpenseTable';
+import ExpenseFormBody from './ExpenseFormBody';
 import ExpenseFloatingFooter from './ExpenseFloatingActions';
+import ExpenseFormFooter from './ExpenseFormFooter';
 
 import withExpensesActions from 'containers/Expenses/withExpensesActions';
 import withExpenseDetail from 'containers/Expenses/withExpenseDetail';
@@ -30,12 +28,28 @@ import {
   CreateExpenseFormSchema,
   EditExpenseFormSchema,
 } from './ExpenseForm.schema';
-import useMedia from 'hooks/useMedia';
-import { compose, repeatValue, transformToForm } from 'utils';
+import {
+  transformErrors,
+} from './utils';
+import { compose, repeatValue, orderingLinesIndexes } from 'utils';
 
 const MIN_LINES_NUMBER = 4;
-const ERROR = {
-  EXPENSE_ALREADY_PUBLISHED: 'EXPENSE.ALREADY.PUBLISHED',
+
+const defaultCategory = {
+  index: 0,
+  amount: '',
+  expense_account_id: '',
+  description: '',
+};
+
+const defaultInitialValues = {
+  payment_account_id: '',
+  beneficiary: '',
+  payment_date: moment(new Date()).format('YYYY-MM-DD'),
+  description: '',
+  reference_no: '',
+  currency_code: '',
+  categories: [...repeatValue(defaultCategory, MIN_LINES_NUMBER)],
 };
 
 /**
@@ -46,106 +60,49 @@ function ExpenseForm({
   requestSubmitMedia,
   requestDeleteMedia,
 
-  //#withExpensesActions
+  // #withExpensesActions
   requestSubmitExpense,
   requestEditExpense,
   requestFetchExpensesTable,
+
   // #withDashboard
   changePageTitle,
   changePageSubtitle,
 
-  //#withExpenseDetail
+  // #withExpenseDetail
   expense,
 
   // #withSettings
   baseCurrency,
   preferredPaymentAccount,
 
-  // #own Props
+  // #ownProps
   expenseId,
   onFormSubmit,
   onCancelForm,
 }) {
-  const [submitPayload, setSubmitPayload] = useState({});
-  const history = useHistory();
-
   const isNewMode = !expenseId;
   const { formatMessage } = useIntl();
 
-  const {
-    setFiles,
-    saveMedia,
-    deletedFiles,
-    setDeletedFiles,
-    deleteMedia,
-  } = useMedia({
-    saveCallback: requestSubmitMedia,
-    deleteCallback: requestDeleteMedia,
-  });
-
   const validationSchema = isNewMode
     ? CreateExpenseFormSchema
     : EditExpenseFormSchema;
-
-  const handleDropFiles = useCallback((_files) => {
-    setFiles(_files.filter((file) => file.uploaded === false));
-  }, []);
-
-  const savedMediaIds = useRef([]);
-  const clearSavedMediaIds = () => {
-    savedMediaIds.current = [];
-  };
-
+ 
   useEffect(() => {
-    if (expense && expense.id) {
-      changePageTitle(formatMessage({ id: 'edit_expense' }));
-    } else {
+    if (isNewMode) {
       changePageTitle(formatMessage({ id: 'new_expense' }));
+    } else {
+      changePageTitle(formatMessage({ id: 'edit_expense' }));
     }
-  }, [changePageTitle, expense, formatMessage]);
-
-  const saveInvokeSubmit = useCallback(
-    (payload) => {
-      onFormSubmit && onFormSubmit(payload);
-    },
-    [onFormSubmit],
-  );
-
-  const defaultCategory = useMemo(
-    () => ({
-      index: 0,
-      amount: 0,
-      expense_account_id: null,
-      description: '',
-    }),
-    [],
-  );
-
-  const defaultInitialValues = useMemo(
-    () => ({
-      payment_account_id: parseInt(preferredPaymentAccount),
-      beneficiary: '',
-      payment_date: moment(new Date()).format('YYYY-MM-DD'),
-      description: '',
-      reference_no: '',
-      currency_code: baseCurrency,
-      categories: [...repeatValue(defaultCategory, MIN_LINES_NUMBER)],
-    }),
-    [defaultCategory],
-  );
-
-  const orderingCategoriesIndex = (categories) => {
-    return categories.map((category, index) => ({
-      ...category,
-      index: index + 1,
-    }));
-  };
+  }, [changePageTitle, isNewMode, formatMessage]);
 
   const initialValues = useMemo(
     () => ({
       ...(expense
         ? {
             ...pick(expense, Object.keys(defaultInitialValues)),
+            currency_code: baseCurrency,
+            payment_account_id: defaultTo(preferredPaymentAccount, ''),
             categories: [
               ...expense.categories.map((category) => ({
                 ...pick(category, Object.keys(defaultCategory)),
@@ -158,225 +115,87 @@ function ExpenseForm({
           }
         : {
             ...defaultInitialValues,
-            categories: orderingCategoriesIndex(
+            categories: orderingLinesIndexes(
               defaultInitialValues.categories,
             ),
           }),
     }),
-    [expense, defaultInitialValues, defaultCategory],
+    [expense, baseCurrency, preferredPaymentAccount],
   );
 
-  const initialAttachmentFiles = useMemo(() => {
-    return expense && expense.media
-      ? expense.media.map((attach) => ({
-          preview: attach.attachment_file,
-          uploaded: true,
-          metadata: { ...attach },
-        }))
-      : [];
-  }, [expense]);
+  const handleSubmit = (values, { setSubmitting, setErrors, resetForm }) => {
+    setSubmitting(true);
+    const totalAmount = values.categories.reduce((total, item) => {
+      return total + item.amount;
+    }, 0);
 
-  // Transform API errors in toasts messages.
-  const transformErrors = (errors, { setErrors }) => {
-    const hasError = (errorType) => errors.some((e) => e.type === errorType);
-
-    if (hasError(ERROR.EXPENSE_ALREADY_PUBLISHED)) {
-      setErrors(
-        AppToaster.show({
-          message: formatMessage({
-            id: 'the_expense_is_already_published',
-          }),
+    if (totalAmount <= 0) {
+      AppToaster.show({
+        message: formatMessage({
+          id: 'amount_cannot_be_zero_or_empty',
         }),
-      );
+        intent: Intent.DANGER,
+      });
+      return;
+    }
+
+    const categories = values.categories.filter(
+      (category) =>
+        category.amount && category.index && category.expense_account_id,
+    );
+
+    const form = {
+      ...values,
+      publish: 1,
+      categories,
+    };
+    // Handle request success.
+    const handleSuccess = (response) => {
+      AppToaster.show({
+        message: formatMessage(
+          { id: isNewMode ?
+            'the_expense_has_been_successfully_created' : 
+            'the_expense_has_been_successfully_edited' },
+          { number: values.payment_account_id },
+        ),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
+      resetForm();
+    };
+
+    // Handle request error
+    const handleError = (error) => {
+      transformErrors(error, { setErrors });
+      setSubmitting(false);
+    };
+    if (isNewMode) {
+      requestSubmitExpense(form).then(handleSuccess).catch(handleError);
+    } else {
+      requestEditExpense(expense.id, form).then(handleSuccess).catch(handleError);
     }
   };
-
-  const {
-    values,
-    errors,
-    touched,
-    isSubmitting,
-    setFieldValue,
-    handleSubmit,
-    getFieldProps,
-    submitForm,
-    resetForm,
-  } = useFormik({
-    enableReinitialize: true,
-    validationSchema,
-    initialValues: {
-      ...initialValues,
-    },
-    onSubmit: (values, { setSubmitting, setErrors, resetForm }) => {
-      setSubmitting(true);
-      const totalAmount = values.categories.reduce((total, item) => {
-        return total + item.amount;
-      }, 0);
-
-      if (totalAmount <= 0) {
-        AppToaster.show({
-          message: formatMessage({
-            id: 'amount_cannot_be_zero_or_empty',
-          }),
-          intent: Intent.DANGER,
-        });
-        return;
-      }
-
-      const categories = values.categories.filter(
-        (category) =>
-          category.amount && category.index && category.expense_account_id,
-      );
-
-      const form = {
-        ...values,
-        publish: submitPayload.publish,
-        categories,
-      };
-      const saveExpense = (mdeiaIds) =>
-        new Promise((resolve, reject) => {
-          const requestForm = { ...form, media_ids: mdeiaIds };
-
-          if (expense && expense.id) {
-            requestEditExpense(expense.id, requestForm)
-              .then((response) => {
-                AppToaster.show({
-                  message: formatMessage(
-                    { id: 'the_expense_has_been_successfully_edited' },
-                    { number: values.payment_account_id },
-                  ),
-                  intent: Intent.SUCCESS,
-                });
-                setSubmitting(false);
-                saveInvokeSubmit({ action: 'update', ...submitPayload });
-                clearSavedMediaIds([]);
-                resetForm();
-              })
-              .catch((errors) => {
-                transformErrors(errors, { setErrors });
-                setSubmitting(false);
-              });
-          } else {
-            requestSubmitExpense(requestForm)
-              .then((response) => {
-                AppToaster.show({
-                  message: formatMessage(
-                    { id: 'the_expense_has_been_successfully_created' },
-                    { number: values.payment_account_id },
-                  ),
-                  intent: Intent.SUCCESS,
-                });
-                setSubmitting(false);
-
-                if (submitPayload.resetForm) {
-                  resetForm();
-                }
-                saveInvokeSubmit({ action: 'new', ...submitPayload });
-                clearSavedMediaIds();
-              })
-              .catch((errors) => {
-                transformErrors(errors, { setErrors });
-                setSubmitting(false);
-              });
-          }
-        });
-
-      Promise.all([saveMedia(), deleteMedia()])
-        .then(([savedMediaResponses]) => {
-          const mediaIds = savedMediaResponses.map((res) => res.data.media.id);
-          savedMediaIds.current = mediaIds;
-          return savedMediaResponses;
-        })
-        .then(() => {
-          return saveExpense(savedMediaIds.current);
-        });
-    },
-  });
-
-  const handleSubmitClick = useCallback(
-    (event, payload) => {
-      setSubmitPayload({ ...payload });
-    },
-    [setSubmitPayload],
-  );
-
-  const handleCancelClick = useCallback(() => {
-    history.goBack();
-  }, [history]);
-
-
-  const handleDeleteFile = useCallback(
-    (_deletedFiles) => {
-      _deletedFiles.forEach((deletedFile) => {
-        if (deletedFile.uploaded && deletedFile.metadata.id) {
-          setDeletedFiles([...deletedFiles, deletedFile.metadata.id]);
-        }
-      });
-    },
-    [setDeletedFiles, deletedFiles],
-  );
-
-  // Handle click on add a new line/row.
-  const handleClickAddNewRow = () => {
-    setFieldValue(
-      'categories',
-      orderingCategoriesIndex([...values.categories, defaultCategory]),
-    );
-  };
-
-  const handleClearAllLines = () => {
-    setFieldValue(
-      'categories',
-      orderingCategoriesIndex([
-        ...repeatValue(defaultCategory, MIN_LINES_NUMBER),
-      ]),
-    );
-  };
-
+ 
   return (
-    <div className={'expense-form'}>
-      <form onSubmit={handleSubmit}>
-        <ExpenseFormHeader
-          errors={errors}
-          touched={touched}
-          values={values}
-          setFieldValue={setFieldValue}
-          getFieldProps={getFieldProps}
-        />
-
-        <ExpenseTable
-          categories={values.categories}
-          onClickAddNewRow={handleClickAddNewRow}
-          onClickClearAllLines={handleClearAllLines}
-          errors={errors}
-          setFieldValue={setFieldValue}
-          defaultRow={defaultCategory}
-        />
-        <div class="expense-form-footer">
-          <FormGroup
-            label={<T id={'description'} />}
-            className={'form-group--description'}
-          >
-            <TextArea growVertically={true} {...getFieldProps('description')} />
-          </FormGroup>
-
-          <Dragzone
-            initialFiles={initialAttachmentFiles}
-            onDrop={handleDropFiles}
-            onDeleteFile={handleDeleteFile}
-            hint={'Attachments: Maxiumum size: 20MB'}
-          />
-        </div>
-
-        <ExpenseFloatingFooter
-          isSubmitting={isSubmitting}
-          onSubmitClick={handleSubmitClick}
-          onCancelClick={handleCancelClick}
-          onSubmitForm={submitForm}
-          onResetForm={resetForm}
-          expense={expense}
-        />
-      </form>
+    <div className={classNames(
+      CLASSES.PAGE_FORM,
+      CLASSES.PAGE_FORM_STRIP_STYLE,
+      CLASSES.PAGE_FORM_EXPENSE
+    )}>
+      <Formik
+        validationSchema={validationSchema}
+        initialValues={initialValues}
+        onSubmit={handleSubmit}
+      >
+        {({ isSubmitting, values }) => (
+          <Form>
+            <ExpenseFormHeader />
+            <ExpenseFormBody />
+            <ExpenseFormFooter />
+            <ExpenseFloatingFooter />
+          </Form>
+        )}
+      </Formik>
     </div>
   );
 }
@@ -389,6 +208,6 @@ export default compose(
   withExpenseDetail(),
   withSettings(({ organizationSettings, expenseSettings }) => ({
     baseCurrency: organizationSettings?.baseCurrency,
-    preferredPaymentAccount: expenseSettings?.preferredPaymentAccount,
+    preferredPaymentAccount: parseInt(expenseSettings?.preferredPaymentAccount, 10),
   })),
 )(ExpenseForm);