Fix: PaymentReceive & ExchangeRate & itemCategories

client/src/containers/ExchangeRates/ExchangeRateActionsBar.js

@@ -20,7 +20,7 @@ import FilterDropdown from 'components/FilterDropdown';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withResourceDetail from 'containers/Resources/withResourceDetails';
-
+import withExchangeRatesActions from './withExchangeRatesActions';
 import { compose } from 'utils';
 
 /**
@@ -33,6 +33,9 @@ function ExchangeRateActionsBar({
   // #withResourceDetail
   resourceFields,
 
+  //#withExchangeRatesActions
+  addExchangeRatesTableQueries,
+
   // #ownProps
   selectedRows = [],
   onDeleteExchangeRate,
@@ -46,14 +49,20 @@ function ExchangeRateActionsBar({
     openDialog('exchangeRate-form', {});
   };
 
-  const filterDropdown = FilterDropdown({
-    fields: resourceFields,
-    onFilterChange: (filterConditions) => {
-      setFilterCount(filterConditions.length || 0);
-
-      onFilterChanged && onFilterChanged(filterConditions);
-    },
-  });
+  // const filterDropdown = FilterDropdown({
+  //   initialCondition: {
+  //   fieldKey: '',
+  //     compatator: 'contains',
+  //     value: '',
+  //   },
+  //   fields: resourceFields,
+  //   onFilterChange: (filterConditions) => {
+  //     addExchangeRatesTableQueries({
+  //       filter_roles: filterConditions || '',
+  //     });
+  //     onFilterChanged && onFilterChanged(filterConditions);
+  //   },
+  // });
 
   const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
     selectedRows,
@@ -76,16 +85,18 @@ function ExchangeRateActionsBar({
 
         <Popover
           minimal={true}
-          content={filterDropdown}
+          // content={filterDropdown}
           interactionKind={PopoverInteractionKind.CLICK}
           position={Position.BOTTOM_LEFT}
         >
           <Button
             className={classNames(Classes.MINIMAL, 'button--filter')}
             text={
-              filterCount <= 0 ?
-                (<T id={'filter'} />) :
-                (`${filterCount} ${formatMessage({ id: 'filters_applied' })}`)
+              filterCount <= 0 ? (
+                <T id={'filter'} />
+              ) : (
+                `${filterCount} ${formatMessage({ id: 'filters_applied' })}`
+              )
             }
             icon={<Icon icon="filter-16" iconSize={16} />}
           />
@@ -117,7 +128,7 @@ function ExchangeRateActionsBar({
 }
 
 const mapStateToProps = (state, props) => ({
-  resourceName: 'exchange_rates',
+  resourceName: '',
 });
 
 const withExchangeRateActionBar = connect(mapStateToProps);
@@ -128,4 +139,5 @@ export default compose(
   withResourceDetail(({ resourceFields }) => ({
     resourceFields,
   })),
+  withExchangeRatesActions,
 )(ExchangeRateActionsBar);

client/src/containers/ExchangeRates/ExchangeRateTable.js

@@ -1,9 +1,16 @@
 import React, { useCallback, useMemo, useState, useEffect } from 'react';
-import { Button, Popover, Menu, MenuItem, Position,Intent } from '@blueprintjs/core';
+import {
+  Button,
+  Popover,
+  Menu,
+  MenuItem,
+  Position,
+  Intent,
+} from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
+import moment from 'moment';
 
-import Icon from 'components/Icon';
-import DataTable from 'components/DataTable';
+import { DataTable, Money, Icon } from 'components';
 import LoadingIndicator from 'components/LoadingIndicator';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -30,10 +37,12 @@ function ExchangeRateTable({
   const [initialMount, setInitialMount] = useState(false);
   const { formatMessage } = useIntl();
 
-  const handelEditExchangeRate = (exchange_rate) => () => {
-    openDialog('exchangeRate-form', { action: 'edit', id: exchange_rate.id });
-    onEditExchangeRate(exchange_rate.id);
-  };
+  const handelEditExchangeRate = useCallback(
+    (exchange_rate) => () => {
+      openDialog('exchangeRate-form', { action: 'edit', id: exchange_rate.id });
+    },
+    [openDialog],
+  );
 
   const handleDeleteExchangeRate = (exchange_rate) => () => {
     onDeleteExchangeRate(exchange_rate);
@@ -50,49 +59,53 @@ function ExchangeRateTable({
           text={<T id={'delete_exchange_rate'} />}
           intent={Intent.DANGER}
           onClick={handleDeleteExchangeRate(ExchangeRate)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
         />
       </Menu>
     ),
     [handelEditExchangeRate, handleDeleteExchangeRate],
   );
 
-  const columns = useMemo(() => [
-    {
-      id: 'date',
-      Header: formatMessage({ id: 'date' }),
-      // accessor: 'date',
-      width: 150,
-    },
-    {
-      id: 'currency_code',
-      Header: formatMessage({ id: 'currency_code' }),
-      accessor: 'currency_code',
-      className: 'currency_code',
-      width: 150,
-    },
-    {
-      id: 'exchange_rate',
-      Header: formatMessage({ id: 'exchange_rate' }),
-      accessor: 'exchange_rate',
-      className: 'exchange_rate',
-      width: 150,
-    },
-    {
-      id: 'actions',
-      Header: '',
-      Cell: ({ cell }) => (
-        <Popover
-          content={actionMenuList(cell.row.original)}
-          position={Position.RIGHT_BOTTOM}
-        >
-          <Button icon={<Icon icon='more-h-16' iconSize={16} />} />
-        </Popover>
-      ),
-      className: 'actions',
-      width: 50,
-      disableResizing: false,
-    },
-  ], [actionMenuList,formatMessage]);
+  const columns = useMemo(
+    () => [
+      {
+        id: 'date',
+        Header: formatMessage({ id: 'date' }),
+        accessor: (r) => moment(r.date).format('YYYY MMM DD'),
+        width: 150,
+      },
+      {
+        id: 'currency_code',
+        Header: formatMessage({ id: 'currency_code' }),
+        accessor: 'currency_code',
+        className: 'currency_code',
+        width: 150,
+      },
+      {
+        id: 'exchange_rate',
+        Header: formatMessage({ id: 'exchange_rate' }),
+        accessor: (r) => <Money amount={r.exchange_rate} currency={'USD'} />,
+        className: 'exchange_rate',
+        width: 150,
+      },
+      {
+        id: 'actions',
+        Header: '',
+        Cell: ({ cell }) => (
+          <Popover
+            content={actionMenuList(cell.row.original)}
+            position={Position.RIGHT_BOTTOM}
+          >
+            <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+          </Popover>
+        ),
+        className: 'actions',
+        width: 50,
+        disableResizing: false,
+      },
+    ],
+    [actionMenuList, formatMessage],
+  );
 
   const selectionColumn = useMemo(
     () => ({
@@ -120,18 +133,18 @@ function ExchangeRateTable({
 
   return (
     <LoadingIndicator loading={loading} mount={false}>
-    <DataTable
-      columns={columns}
-      data={exchangeRatesList}
-      onFetchData={handelFetchData}
-      loading={exchangeRatesLoading && !initialMount}
-      manualSortBy={true}
-      selectionColumn={selectionColumn}
-      expandable={true}
-      treeGraph={true}
-      onSelectedRowsChange={handelSelectedRowsChange}
-      spinnerProps={{ size: 30 }}
-    />
+      <DataTable
+        columns={columns}
+        data={exchangeRatesList}
+        onFetchData={handelFetchData}
+        loading={exchangeRatesLoading && !initialMount}
+        manualSortBy={true}
+        selectionColumn={selectionColumn}
+        expandable={true}
+        treeGraph={true}
+        onSelectedRowsChange={handelSelectedRowsChange}
+        spinnerProps={{ size: 30 }}
+      />
     </LoadingIndicator>
   );
 }

client/src/containers/ExchangeRates/withExchangeRateDetail.js

@@ -0,0 +1,8 @@
+import { connect } from 'react-redux';
+import { getExchangeRateById } from 'store/ExchangeRate/exchange.selector';
+
+const mapStateToProps = (state, props) => ({
+  exchangeRate: getExchangeRateById(state, props),
+});
+
+export default connect(mapStateToProps);