- feat: Update react-query package to V 2.1.1.

- feat: Favicon setup.
- feat: Fix accounts inactivate/activate 1 account.
- feat: Seed accounts, expenses and manual journals resource fields.
- feat: Validate make journal receivable/payable without contact.
- feat: Validate make journal contact without receivable or payable.
- feat: More components abstractions.
- feat: Use reselect.js to memorize components properties.
- fix: Journal type of manual journal.
- fix: Sidebar style optimization.
- fix: Data-table check-box style optimization.
- fix: Data-table spinner style dimensions.
- fix: Submit journal with contact_id and contact_type.

client/src/containers/Expenses/ExpensesList.js

@@ -12,18 +12,21 @@ import ExpenseDataTable from 'containers/Expenses/ExpenseDataTable';
 import ExpenseActionsBar from 'containers/Expenses/ExpenseActionsBar';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withResourceActions from 'containers/Resources/withResourcesActions';
 import withExpenses from 'containers/Expenses/withExpenses';
 import withExpensesActions from 'containers/Expenses/withExpensesActions';
 import withViewsActions from 'containers/Views/withViewsActions';
 
 import { compose } from 'utils';
 
+
 function ExpensesList({
   // #withDashboardActions
   changePageTitle,
 
   // #withViewsActions
   requestFetchResourceViews,
+  requestFetchResourceFields,
 
   // #withExpenses
   expensesTableQuery,
@@ -44,13 +47,18 @@ function ExpensesList({
   const [selectedRows, setSelectedRows] = useState([]);
   const [bulkDelete, setBulkDelete] = useState(false);
 
-  const fetchViews = useQuery('expenses-resource-views', () => {
-    return requestFetchResourceViews('expenses');
-  });
+  const fetchResourceViews = useQuery(
+    ['resource-views', 'expenses'],
+    (key, resourceName) => requestFetchResourceViews(resourceName),
+  );
 
-  const fetchExpenses = useQuery(
-    ['expenses-table', expensesTableQuery],
-    () => requestFetchExpensesTable(),
+  const fetchResourceFields = useQuery(
+    ['resource-fields', 'expenses'],
+    (key, resourceName) => requestFetchResourceFields(resourceName),
+  );
+
+  const fetchExpenses = useQuery(['expenses-table', expensesTableQuery], () =>
+    requestFetchExpensesTable(),
   );
 
   useEffect(() => {
@@ -132,6 +140,8 @@ function ExpensesList({
   // Handle fetch data of manual jouranls datatable.
   const handleFetchData = useCallback(
     ({ pageIndex, pageSize, sortBy }) => {
+      const page = pageIndex + 1;
+
       addExpensesTableQueries({
         ...(sortBy.length > 0
           ? {
@@ -139,6 +149,8 @@ function ExpensesList({
               sort_order: sortBy[0].desc ? 'desc' : 'asc',
             }
           : {}),
+        page_size: pageSize,
+        page,
       });
     },
     [addExpensesTableQueries],
@@ -166,7 +178,7 @@ function ExpensesList({
 
   return (
     <DashboardInsider
-      loading={fetchViews.isFetching}
+      loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
       name={'expenses'}
     >
       <ExpenseActionsBar
@@ -187,6 +199,7 @@ function ExpensesList({
             <ExpenseViewTabs />
 
             <ExpenseDataTable
+              loading={fetchExpenses.isFetching}
               onDeleteExpense={handleDeleteExpense}
               onFetchData={handleFetchData}
               onEditExpense={handleEidtExpense}
@@ -237,4 +250,5 @@ export default compose(
   withExpensesActions,
   withExpenses(({ expensesTableQuery }) => ({ expensesTableQuery })),
   withViewsActions,
+  withResourceActions
 )(ExpensesList);