Merge remote-tracking branch 'origin/task_expense_journal'

client/src/containers/Expenses/ExpenseDataTable.js

@@ -12,6 +12,7 @@ import {
   Tag,
 } from '@blueprintjs/core';
 import { useParams } from 'react-router-dom';
+import { withRouter } from 'react-router';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import moment from 'moment';
 
@@ -28,6 +29,7 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withViewDetails from 'containers/Views/withViewDetails';
 import withExpenses from 'containers/Expenses/withExpenses';
 import withExpensesActions from 'containers/Expenses/withExpensesActions';
+import withCurrentView from 'containers/Views/withCurrentView';
 
 function ExpensesDataTable({
   //#withExpenes
@@ -55,6 +57,10 @@ function ExpensesDataTable({
   const [initialMount, setInitialMount] = useState(false);
   const { formatMessage } = useIntl();
 
+  useEffect(()=>{
+    setInitialMount(false)
+  },[customViewId])
+
   useUpdateEffect(() => {
     if (!expensesLoading) {
       setInitialMount(true);
@@ -260,7 +266,7 @@ function ExpensesDataTable({
           selectionColumn={true}
           noInitialFetch={true}
           sticky={true}
-          loading={expensesLoading}
+          loading={expensesLoading && !initialMount}
           onSelectedRowsChange={handleSelectedRowsChange}
           rowContextMenu={onRowContextMenu}
           pagination={true}
@@ -274,6 +280,8 @@ function ExpensesDataTable({
 }
 
 export default compose(
+  withRouter,
+  withCurrentView,
   withDialogActions,
   withDashboardActions,
   withExpensesActions,

client/src/containers/Expenses/ExpenseForm.js

@@ -29,6 +29,9 @@ import useMedia from 'hooks/useMedia';
 import { compose, repeatValue } from 'utils';
 
 const MIN_LINES_NUMBER = 4;
+const ERROR = {
+  EXPENSE_ALREADY_PUBLISHED: 'EXPENSE.ALREADY.PUBLISHED',
+};
 
 function ExpenseForm({
   // #withMedia
@@ -187,6 +190,21 @@ function ExpenseForm({
       : [];
   }, [expense]);
 
+  // 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',
+          }),
+        }),
+      );
+    }
+  };
+
   const formik = useFormik({
     enableReinitialize: true,
     validationSchema,
@@ -237,16 +255,7 @@ function ExpenseForm({
                 resetForm();
               })
               .catch((errors) => {
-                if (errors.find((e) => e.type === 'TOTAL.AMOUNT.EQUALS.ZERO')) {
-                }
-                setErrors(
-                  AppToaster.show({
-                    message: formatMessage({
-                      id: 'total_amount_equals_zero',
-                    }),
-                    intent: Intent.DANGER,
-                  }),
-                );
+                transformErrors(errors, { setErrors });
                 setSubmitting(false);
               });
           } else {
@@ -265,6 +274,7 @@ function ExpenseForm({
                 clearSavedMediaIds();
               })
               .catch((errors) => {
+                transformErrors(errors, { setErrors });
                 setSubmitting(false);
               });
           }
@@ -335,7 +345,6 @@ function ExpenseForm({
           formik={formik}
           defaultRow={defaultCategory}
         />
-
         <div class="expense-form-footer">
           <FormGroup
             label={<T id={'description'} />}

client/src/containers/Expenses/ExpenseViewTabs.js

@@ -1,15 +1,12 @@
 import React, { useEffect, useRef } from 'react';
 import { useHistory } from 'react-router';
-import {
-  Alignment,
-  Navbar,
-  NavbarGroup,
-} from '@blueprintjs/core';
+import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
 import { useParams, withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { pick, debounce } from 'lodash';
 
 import { DashboardViewsTabs } from 'components';
+import { useUpdateEffect } from 'hooks';
 
 import withExpenses from './withExpenses';
 import withExpensesActions from './withExpensesActions';
@@ -32,9 +29,13 @@ function ExpenseViewTabs({
   // #withDashboardActions
   setTopbarEditView,
   changePageSubtitle,
+
+  // props
+  customViewChanged,
+  onViewChanged,
 }) {
   const history = useHistory();
-  const { custom_view_id: customViewId } = useParams();
+  const { custom_view_id: customViewId = null } = useParams();
 
   useEffect(() => {
     changeExpensesView(customViewId || -1);
@@ -51,6 +52,10 @@ function ExpenseViewTabs({
     };
   }, [customViewId, addExpensesTableQueries, changeExpensesView]);
 
+  useUpdateEffect(() => {
+    onViewChanged && onViewChanged(customViewId);
+  }, [customViewId]);
+
   const debounceChangeHistory = useRef(
     debounce((toUrl) => {
       history.push(toUrl);
@@ -59,7 +64,7 @@ function ExpenseViewTabs({
 
   const handleTabsChange = (viewId) => {
     const toPath = viewId ? `${viewId}/custom_view` : '';
-    debounceChangeHistory.current(`/expenses/${toPath}`);
+    debounceChangeHistory.current(`/expenses-list/${toPath}`);
     setTopbarEditView(viewId);
   };
 
@@ -78,7 +83,7 @@ function ExpenseViewTabs({
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
           initialViewId={customViewId}
-          baseUrl={'/expenses'}
+          baseUrl={'/expenses-list'}
           tabs={tabs}
           onNewViewTabClick={handleClickNewView}
           onChange={handleTabsChange}

client/src/containers/Expenses/ExpensesList.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useMemo, useCallback } from 'react';
 import { Route, Switch, useHistory, useParams } from 'react-router-dom';
-import { useQuery } from 'react-query';
+import { useQuery, queryCache } from 'react-query';
 import { Alert, Intent } from '@blueprintjs/core';
 import AppToaster from 'components/AppToaster';
 import { FormattedMessage as T, useIntl } from 'react-intl';
@@ -45,6 +45,7 @@ function ExpensesList({
   const [deleteExpense, setDeleteExpense] = useState(false);
   const [selectedRows, setSelectedRows] = useState([]);
   const [bulkDelete, setBulkDelete] = useState(false);
+  const [publishExpense, setPublishExpense] = useState(false);
 
   const fetchResourceViews = useQuery(
     ['resource-views', 'expenses'],
@@ -155,18 +156,35 @@ function ExpensesList({
     [addExpensesTableQueries],
   );
 
-  const handlePublishExpense = useCallback(
-    (expense) => {
-      requestPublishExpense(expense.id).then(() => {
+  //   const fetchExpenses = useQuery(['expenses-table', expensesTableQuery], () =>
+  //   requestFetchExpensesTable(),
+  // );
+
+  const handlePublishExpense = useCallback((expense) => {
+    setPublishExpense(expense);
+  }, []);
+
+  const handleCancelPublishExpense = useCallback(() => {
+    setPublishExpense(false);
+  });
+
+  // Handle publish expense confirm.
+  const handleConfirmPublishExpense = useCallback(() => {
+    requestPublishExpense(publishExpense.id)
+      .then(() => {
+        setPublishExpense(false);
         AppToaster.show({
-          message: formatMessage({ id: 'the_expense_id_has_been_published' }),
+          message: formatMessage({
+            id: 'the_expense_has_been_published',
+          }),
           intent: Intent.SUCCESS,
         });
+        queryCache.invalidateQueries('expenses-table');
+      })
+      .catch((error) => {
+        setPublishExpense(false);
       });
-      fetchExpenses.refetch();
-    },
-    [requestPublishExpense, formatMessage],
-  );
+  }, [publishExpense, requestPublishExpense, formatMessage]);
 
   // Handle selected rows change.
   const handleSelectedRowsChange = useCallback(
@@ -190,11 +208,11 @@ function ExpensesList({
       <DashboardPageContent>
         <Switch>
           <Route
-          // exact={true}
-          // path={[
-          //   '/expenses/:custom_view_id/custom_view',
-          //   '/expenses/new',
-          // ]}
+            exact={true}
+            // path={[
+            //   '/expenses/:custom_view_id/custom_view',
+            //   'expenses',
+            // ]}
           >
             <ExpenseViewTabs />
 
@@ -240,14 +258,26 @@ function ExpensesList({
             />
           </p>
         </Alert>
+        <Alert
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={<T id={'publish'} />}
+          intent={Intent.WARNING}
+          isOpen={publishExpense}
+          onCancel={handleCancelPublishExpense}
+          onConfirm={handleConfirmPublishExpense}
+        >
+          <p>
+            <T id={'are_sure_to_publish_this_expense'} />
+          </p>
+        </Alert>
       </DashboardPageContent>
     </DashboardInsider>
   );
 }
 
 export default compose(
-  withDashboardActions,
   withExpensesActions,
+  withDashboardActions,
   withViewsActions,
   withResourceActions,
   withExpenses(({ expensesTableQuery }) => ({ expensesTableQuery })),