feat: fix accounts issue.

client/src/containers/Accounting/ManualJournalActionsBar.js

@@ -10,11 +10,12 @@ import {
   Popover,
   PopoverInteractionKind,
   Position,
-  Intent
+  Intent,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { useRouteMatch, useHistory } from 'react-router-dom';
 import { FormattedMessage as T } from 'react-intl';
+import { connect } from 'react-redux';
 
 import FilterDropdown from 'components/FilterDropdown';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
@@ -28,11 +29,9 @@ import withManualJournalsActions from 'containers/Accounting/withManualJournalsA
 
 import { compose } from 'utils';
 
-
-
 function ManualJournalActionsBar({
   // #withResourceDetail
-  resourceName = 'manual_journal',
+  resourceName = 'manual_journals',
   resourceFields,
 
   // #withManualJournals
@@ -43,12 +42,12 @@ function ManualJournalActionsBar({
 
   onFilterChanged,
   selectedRows,
-  onBulkDelete
+  onBulkDelete,
 }) {
   const { path } = useRouteMatch();
   const history = useHistory();
 
-  const viewsMenuItems = manualJournalsViews.map(view => {
+  const viewsMenuItems = manualJournalsViews.map((view) => {
     return (
       <MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />
     );
@@ -60,18 +59,25 @@ function ManualJournalActionsBar({
 
   const filterDropdown = FilterDropdown({
     fields: resourceFields,
-    onFilterChange: filterConditions => {
+    initialCondition: {
+      fieldKey: 'journal_number',
+      compatator: 'contains',
+      value: '',
+    },
+    onFilterChange: (filterConditions) => {
       addManualJournalsTableQueries({
-        filter_roles: filterConditions || ''
+        filter_roles: filterConditions || '',
       });
       onFilterChanged && onFilterChanged(filterConditions);
-    }
+    },
   });
-  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [selectedRows]);
+  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
+    selectedRows,
+  ]);
 
   // Handle delete button click.
   const handleBulkDelete = useCallback(() => {
-    onBulkDelete && onBulkDelete(selectedRows.map(r => r.id));
+    onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id));
   }, [onBulkDelete, selectedRows]);
 
   return (
@@ -85,8 +91,8 @@ function ManualJournalActionsBar({
         >
           <Button
             className={classNames(Classes.MINIMAL, 'button--table-views')}
-            icon={<Icon icon='table-16' iconSize={16} />}
-            text={<T id={'table_views'}/>}
+            icon={<Icon icon="table-16" iconSize={16} />}
+            text={<T id={'table_views'} />}
             rightIcon={'caret-down'}
           />
         </Popover>
@@ -95,27 +101,28 @@ function ManualJournalActionsBar({
 
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='plus' />}
-          text={<T id={'new_journal'}/>}
+          icon={<Icon icon="plus" />}
+          text={<T id={'new_journal'} />}
           onClick={onClickNewManualJournal}
         />
         <Popover
+          minimal={true}
           content={filterDropdown}
           interactionKind={PopoverInteractionKind.CLICK}
           position={Position.BOTTOM_LEFT}
         >
           <Button
             className={classNames(Classes.MINIMAL, 'button--filter')}
-            text='Filter'
-            icon={<Icon icon='filter-16' iconSize={16} />}
+            text="Filter"
+            icon={<Icon icon="filter-16" iconSize={16} />}
           />
         </Popover>
 
         <If condition={hasSelectedRows}>
           <Button
             className={Classes.MINIMAL}
-            icon={<Icon icon='trash-16' iconSize={16} />}
-            text={<T id={'delete'}/>}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+            text={<T id={'delete'} />}
             intent={Intent.DANGER}
             onClick={handleBulkDelete}
           />
@@ -123,20 +130,27 @@ function ManualJournalActionsBar({
 
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='file-import-16' iconSize={16} />}
-          text={<T id={'import'}/>}
+          icon={<Icon icon="file-import-16" iconSize={16} />}
+          text={<T id={'import'} />}
         />
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon='file-export-16' iconSize={16} />}
-          text={<T id={'export'}/>}
+          icon={<Icon icon="file-export-16" iconSize={16} />}
+          text={<T id={'export'} />}
         />
       </NavbarGroup>
     </DashboardActionsBar>
   );
 }
 
+const mapStateToProps = (state, props) => ({
+  resourceName: 'manual_journals',
+});
+
+const withManualJournalsActionsBar = connect(mapStateToProps);
+
 export default compose(
+  withManualJournalsActionsBar,
   withDialogActions,
   withResourceDetail(({ resourceFields }) => ({
     resourceFields,

client/src/containers/Accounting/ManualJournalsList.js

@@ -17,6 +17,7 @@ import withManualJournals from 'containers/Accounting/withManualJournals';
 import withManualJournalsActions from 'containers/Accounting/withManualJournalsActions';
 import withViewsActions from 'containers/Views/withViewsActions';
 import withRouteActions from 'containers/Router/withRouteActions';
+import withResourceActions from 'containers/Resources/withResourcesActions';
 
 import { compose } from 'utils';
 
@@ -30,6 +31,9 @@ function ManualJournalsTable({
   // #withViewsActions
   requestFetchResourceViews,
 
+  // #withResourceActions
+  requestFetchResourceFields,
+
   // #withManualJournals
   manualJournalsTableQuery,
 
@@ -50,10 +54,15 @@ function ManualJournalsTable({
 
   const { formatMessage } = useIntl();
 
-  const fetchViews = useQuery('journals-resource-views', () => {
+  const fetchViews = useQuery('manual-journals-resource-views', () => {
     return requestFetchResourceViews('manual_journals');
   });
 
+  const fetchResourceFields = useQuery(
+    'manual-journals-resource-fields',
+    () => requestFetchResourceFields('manual_journals'),
+  );
+
   const fetchManualJournals = useQuery(
     ['manual-journals-table', manualJournalsTableQuery],
     (key, q) => requestFetchManualJournalsTable(q),
@@ -108,8 +117,8 @@ function ManualJournalsTable({
       .then(() => {
         AppToaster.show({
           message: formatMessage(
-            { id: 'the_journals_has_been_successfully_deleted', },
-            { count: selectedRowsCount, },
+            { id: 'the_journals_has_been_successfully_deleted' },
+            { count: selectedRowsCount },
           ),
           intent: Intent.SUCCESS,
         });
@@ -189,7 +198,7 @@ function ManualJournalsTable({
 
   return (
     <DashboardInsider
-      loading={fetchViews.isFetching}
+      loading={fetchViews.isFetching || fetchResourceFields.isFetching}
       name={'manual-journals'}
     >
       <ManualJournalsActionsBar
@@ -265,6 +274,7 @@ export default compose(
   withDashboardActions,
   withManualJournalsActions,
   withViewsActions,
+  withResourceActions,
   withManualJournals(({ manualJournalsTableQuery }) => ({
     manualJournalsTableQuery,
   })),

client/src/containers/Accounting/withManualJournals.js

@@ -28,7 +28,7 @@ export default (mapState) => {
         manualJournalsTableQuery.page,
       ),
       manualJournalsTableQuery,
-      manualJournalsViews: getResourceViews(state, 'manual_journals'),
+      manualJournalsViews: getResourceViews(state, props, 'manual_journals'),
       manualJournalsItems: state.manualJournals.items,
 
       manualJournalsPagination: state.manualJournals.paginationMeta,