WIP / Feature & Fix Expense /Customer

client/src/containers/Expenses/ExpenseForm.js

@@ -11,7 +11,7 @@ import moment from 'moment';
 import { Intent, FormGroup, TextArea } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { pick } from 'lodash';
-import { useQuery } from 'react-query';
+import { useQuery, queryCache } from 'react-query';
 import { Col, Row } from 'react-grid-system';
 
 import ExpenseFormHeader from './ExpenseFormHeader';
@@ -45,12 +45,14 @@ function ExpenseForm({
 
   //#withExpenseDetail
   // @todo expenseDetail to expense
-  expenseDetail,
+  expense,
 
   // #own Props
   expenseId,
   onFormSubmit,
   onCancelForm,
+  onClickAddNewRow,
+  onClickRemoveRow,
 }) {
   const { formatMessage } = useIntl();
   const [payload, setPayload] = useState({});
@@ -75,14 +77,14 @@ function ExpenseForm({
   };
 
   useEffect(() => {
-    if (expenseDetail && expenseDetail.id) {
+    if (expense && expense.id) {
       changePageTitle(formatMessage({ id: 'edit_expense' }));
       // changePageSubtitle(`No. ${expenseDetail.payment_account_id}`);
     } else {
       changePageTitle(formatMessage({ id: 'new_expense' }));
     }
     // @todo not functions just states.
-  }, [changePageTitle, changePageSubtitle, expenseDetail, formatMessage]);
+  }, [changePageTitle, changePageSubtitle, expense, formatMessage]);
 
   const validationSchema = Yup.object().shape({
     beneficiary: Yup.string()
@@ -106,7 +108,13 @@ function ExpenseForm({
         index: Yup.number().nullable(),
         amount: Yup.number().nullable(),
         // @todo expense_account_id is required.
-        expense_account_id: Yup.number().nullable(),
+        // expense_account_id: Yup.number().nullable(),
+        expense_account_id: Yup.number()
+          .nullable()
+          .when(['amount'], {
+            is: (amount) => amount,
+            then: Yup.number().required(),
+          }),
         description: Yup.string().nullable(),
       }),
     ),
@@ -116,6 +124,7 @@ function ExpenseForm({
     (payload) => {
       onFormSubmit && onFormSubmit(payload);
     },
+
     [onFormSubmit],
   );
 
@@ -147,32 +156,43 @@ function ExpenseForm({
     [defaultCategory],
   );
 
+  const orderingCategoriesIndex = (categories) => {
+    return categories.map((category, index) => ({
+      ...category,
+      index: index + 1,
+    }));
+  };
+
   const initialValues = useMemo(
     () => ({
-      ...(expenseDetail
+      ...(expense
         ? {
-            ...pick(expenseDetail, Object.keys(defaultInitialValues)),
-            categories: expenseDetail.categories.map((category) => ({
+            ...pick(expense, Object.keys(defaultInitialValues)),
+            categories: expense.categories.map((category) => ({
               ...pick(category, Object.keys(defaultCategory)),
-              }),
-            ),
+            })),
           }
         : {
             ...defaultInitialValues,
+            categories: orderingCategoriesIndex(
+              defaultInitialValues.categories,
+            ),
           }),
     }),
-    [expenseDetail, defaultInitialValues, defaultCategory],
+    [expense, defaultInitialValues, defaultCategory],
   );
 
+  console.log(initialValues.categories, 'ERR');
+
   const initialAttachmentFiles = useMemo(() => {
-    return expenseDetail && expenseDetail.media
-      ? expenseDetail.media.map((attach) => ({
+    return expense && expense.media
+      ? expense.media.map((attach) => ({
           preview: attach.attachment_file,
           uploaded: true,
           metadata: { ...attach },
         }))
       : [];
-  }, [expenseDetail]);
+  }, [expense]);
 
   const formik = useFormik({
     enableReinitialize: true,
@@ -182,11 +202,12 @@ function ExpenseForm({
     },
     onSubmit: async (values, { setSubmitting, setErrors, resetForm }) => {
       const categories = values.categories.filter(
-        (category) => category.amount || category.index,
+        (category) =>
+          category.amount && category.index && category.expense_account_id,
       );
       const form = {
         ...values,
-        published: payload.publish,
+        publish: payload.publish,
         categories,
       };
 
@@ -194,8 +215,8 @@ function ExpenseForm({
         new Promise((resolve, reject) => {
           const requestForm = { ...form, media_ids: mdeiaIds };
 
-          if (expenseDetail && expenseDetail.id) {
-            requestEditExpense(expenseDetail.id, requestForm)
+          if (expense && expense.id) {
+            requestEditExpense(expense.id, requestForm)
               .then((response) => {
                 AppToaster.show({
                   message: formatMessage(
@@ -208,10 +229,8 @@ function ExpenseForm({
                 saveInvokeSubmit({ action: 'update', ...payload });
                 clearSavedMediaIds([]);
                 resetForm();
-                resolve(response);
               })
               .catch((errors) => {
-                // @todo handle errors.
                 if (errors.find((e) => e.type === 'TOTAL.AMOUNT.EQUALS.ZERO')) {
                 }
                 setErrors(
@@ -235,10 +254,11 @@ function ExpenseForm({
                   intent: Intent.SUCCESS,
                 });
                 setSubmitting(false);
+                formik.resetForm();
                 saveInvokeSubmit({ action: 'new', ...payload });
                 clearSavedMediaIds();
-                resetForm();
-                resolve(response);
+
+                // resolve(response);
               })
               .catch((errors) => {
                 setSubmitting(false);
@@ -263,11 +283,14 @@ function ExpenseForm({
   const handleSubmitClick = useCallback(
     (payload) => {
       setPayload(payload);
+      // formik.resetForm();
       formik.handleSubmit();
     },
     [setPayload, formik],
   );
 
+  console.log(formik.values, 'VALUES');
+
   const handleCancelClick = useCallback(
     (payload) => {
       onCancelForm && onCancelForm(payload);
@@ -285,7 +308,7 @@ function ExpenseForm({
     },
     [setDeletedFiles, deletedFiles],
   );
-  // @todo @mohamed
+
   const fetchHook = useQuery('expense-form', () => requestFetchExpensesTable());
 
   return (
@@ -318,13 +341,15 @@ function ExpenseForm({
             hint={'Attachments: Maxiumum size: 20MB'}
           />
         </div>
-
-        <ExpenseFloatingFooter
-          formik={formik}
-          onSubmitClick={handleSubmitClick}
-          onCancelClick={handleCancelClick}
-        />
       </form>
+      <ExpenseFloatingFooter
+        formik={formik}
+        onSubmitClick={handleSubmitClick}
+        expense={expense}
+        onCancelClick={handleCancelClick}
+        // onClickAddNewRow={}
+        // onClickRemoveRow={}
+      />
     </div>
   );
 }