Merge remote-tracking branch 'origin/fix/last_tasks'

client/src/containers/ExchangeRates/ExchangeRate.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useCallback, useMemo } from 'react';
-import { useQuery } from 'react-query';
+import { useQuery, queryCache } from 'react-query';
 import { useParams } from 'react-router-dom';
 import { Alert, Intent } from '@blueprintjs/core';
 import {
@@ -14,6 +14,7 @@ import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import ExchangeRateTable from './ExchangeRateTable';
 import ExchangeRateActionsBar from './ExchangeRateActionsBar';
 
+import withDialog from 'connectors/Dialog.connector';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withResourceActions from 'containers/Resources/withResourcesActions';
 import withExchangeRatesActions from 'containers/ExchangeRates/withExchangeRatesActions';
@@ -24,7 +25,7 @@ function ExchangeRate({
   // #withDashboardActions
   changePageTitle,
 
-  //#withResourceActions
+  // #withResourceActions
   requestFetchResourceFields,
 
   // #withExchangeRatesActions
@@ -32,12 +33,16 @@ function ExchangeRate({
   requestDeleteExchangeRate,
   addExchangeRatesTableQueries,
   requestDeleteBulkExchangeRates,
+
+  // #withDialog
+  openDialog,
 }) {
   const { id } = useParams();
   const [deleteExchangeRate, setDeleteExchangeRate] = useState(false);
   const [selectedRows, setSelectedRows] = useState([]);
   const { formatMessage } = useIntl();
   const [bulkDelete, setBulkDelete] = useState(false);
+  const [filter, setFilter] = useState({});
 
   const fetchExchangeRates = useQuery('exchange-rates-table', () =>
     requestFetchExchangeRates(),
@@ -56,21 +61,28 @@ function ExchangeRate({
     [setDeleteExchangeRate],
   );
 
-  const handelEditExchangeRate = (exchange_rate) => {};
+  const handelEditExchangeRate = (exchange_rate) => {
+    openDialog('exchangeRate-form', { action: 'edit', id: exchange_rate.id });
+  };
 
   const handelCancelExchangeRateDelete = useCallback(() => {
     setDeleteExchangeRate(false);
   }, [setDeleteExchangeRate]);
 
   const handelConfirmExchangeRateDelete = useCallback(() => {
-    requestDeleteExchangeRate(deleteExchangeRate.id).then(() => {
-      setDeleteExchangeRate(false);
-      AppToaster.show({
-        message: formatMessage({
-          id: 'the_exchange_rate_has_been_successfully_deleted',
-        }),
+    requestDeleteExchangeRate(deleteExchangeRate.id)
+      .then(() => {
+        setDeleteExchangeRate(false);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_exchange_rates_has_been_successfully_deleted',
+          }),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(() => {
+        setDeleteExchangeRate(false);
       });
-    });
   }, [deleteExchangeRate, requestDeleteExchangeRate, formatMessage]);
 
   // Handle fetch data of Exchange_rates datatable.
@@ -88,6 +100,7 @@ function ExchangeRate({
     [addExchangeRatesTableQueries],
   );
 
+  // Handle selected rows change.
   const handleSelectedRowsChange = useCallback(
     (exchange_rates) => {
       setSelectedRows(exchange_rates);
@@ -97,8 +110,8 @@ function ExchangeRate({
 
   // Handle Exchange Rates bulk delete.
   const handleBulkDelete = useCallback(
-    (exchangeRates) => {
-      setBulkDelete(exchangeRates);
+    (exchangeRatesIds) => {
+      setBulkDelete(exchangeRatesIds);
     },
     [setBulkDelete],
   );
@@ -131,7 +144,7 @@ function ExchangeRate({
   ]);
 
   return (
-    <DashboardInsider>
+    <DashboardInsider loading={fetchExchangeRates.isFetching}>
       <ExchangeRateActionsBar
         onDeleteExchangeRate={handelDeleteExchangeRate}
         selectedRows={selectedRows}
@@ -146,7 +159,7 @@ function ExchangeRate({
         />
         <Alert
           cancelButtonText={<T id={'cancel'} />}
-          confirmButtonText={<T id={'move_to_trash'} />}
+          confirmButtonText={<T id={'delete'} />}
           icon="trash"
           intent={Intent.DANGER}
           isOpen={deleteExchangeRate}
@@ -187,4 +200,5 @@ export default compose(
   withExchangeRatesActions,
   withResourceActions,
   withDashboardActions,
+  withDialog,
 )(ExchangeRate);

client/src/containers/ExchangeRates/ExchangeRateActionsBar.js

@@ -10,18 +10,23 @@ import {
   PopoverInteractionKind,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
-import Icon from 'components/Icon';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
 import { connect } from 'react-redux';
 
+import { If } from 'components';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-import withDialog from 'connectors/Dialog.connector';
+import Icon from 'components/Icon';
 
 import FilterDropdown from 'components/FilterDropdown';
 import withResourceDetail from 'containers/Resources/withResourceDetails';
+import withDialog from 'connectors/Dialog.connector';
 
 import { compose } from 'utils';
-import { FormattedMessage as T, useIntl } from 'react-intl';
 
+/**
+ * Exchange rate actions bar.
+ */
 function ExchangeRateActionsBar({
   // #withDialog.
   openDialog,
@@ -51,13 +56,6 @@ function ExchangeRateActionsBar({
     },
   });
 
-  // const handelDeleteExchangeRate = useCallback(
-  //   (exchangeRate) => {
-  //     onDeleteExchangeRate(exchangeRate);
-  //   },
-  //   [selectedRows, onDeleteExchangeRate]
-  // );
-
   const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
     selectedRows,
   ]);
@@ -86,17 +84,15 @@ function ExchangeRateActionsBar({
           <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} />}
           />
         </Popover>
 
-        {hasSelectedRows && (
+        <If condition={hasSelectedRows}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon="trash-16" iconSize={16} />}
@@ -104,7 +100,8 @@ function ExchangeRateActionsBar({
             intent={Intent.DANGER}
             onClick={handelBulkDelete}
           />
-        )}
+        </If>
+
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon="file-import-16" iconSize={16} />}

client/src/containers/ExchangeRates/ExchangeRateTable.js

@@ -1,16 +1,15 @@
-import React, { useCallback, useMemo,useState } from 'react';
+import React, { useCallback, useMemo, useState, useEffect } from 'react';
 import Icon from 'components/Icon';
 import DialogConnect from 'connectors/Dialog.connector';
 import DataTable from 'components/DataTable';
-import { Button, Popover, Menu, MenuItem, Position } from '@blueprintjs/core';
+import { Button, Popover, Menu, MenuItem, Position,Intent } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-
+import LoadingIndicator from 'components/LoadingIndicator';
 import withExchangeRatesActions from 'containers/ExchangeRates/withExchangeRatesActions';
 import withExchangeRates from 'containers/ExchangeRates/withExchangeRates';
 
 import { compose } from 'utils';
 
-
 function ExchangeRateTable({
   // #withExchangeRates
   exchangeRatesList,
@@ -25,7 +24,6 @@ function ExchangeRateTable({
   onEditExchangeRate,
   onSelectedRowsChange,
 }) {
-
   const [initialMount, setInitialMount] = useState(false);
   const { formatMessage } = useIntl();
 
@@ -47,11 +45,12 @@ function ExchangeRateTable({
         />
         <MenuItem
           text={<T id={'delete_exchange_rate'} />}
+          intent={Intent.DANGER}
           onClick={handleDeleteExchangeRate(ExchangeRate)}
         />
       </Menu>
     ),
-    [handelEditExchangeRate, handleDeleteExchangeRate]
+    [handelEditExchangeRate, handleDeleteExchangeRate],
   );
 
   const columns = useMemo(() => [
@@ -92,24 +91,32 @@ function ExchangeRateTable({
     },
   ], [actionMenuList,formatMessage]);
 
-  const selectionColumn = useMemo(() => ({
-    minWidth: 42,
-    width: 42,
-    maxWidth: 42,
-  }), []);
+  const selectionColumn = useMemo(
+    () => ({
+      minWidth: 42,
+      width: 42,
+      maxWidth: 42,
+    }),
+    [],
+  );
 
   const handelFetchData = useCallback(
     (...params) => {
       onFetchData && onFetchData(...params);
     },
-    [onFetchData]
+    [onFetchData],
   );
 
-  const handelSelectedRowsChange = useCallback((selectRows) => {
-    onSelectedRowsChange && onSelectedRowsChange(selectRows.map((c) => c.original));
-  }, [onSelectedRowsChange]);
+  const handelSelectedRowsChange = useCallback(
+    (selectRows) => {
+      onSelectedRowsChange &&
+        onSelectedRowsChange(selectRows.map((c) => c.original));
+    },
+    [onSelectedRowsChange],
+  );
 
   return (
+    <LoadingIndicator loading={loading} mount={false}>
     <DataTable
       columns={columns}
       data={exchangeRatesList}
@@ -122,14 +129,15 @@ function ExchangeRateTable({
       onSelectedRowsChange={handelSelectedRowsChange}
       spinnerProps={{ size: 30 }}
     />
+    </LoadingIndicator>
   );
 }
 
 export default compose(
   DialogConnect,
   withExchangeRatesActions,
-  withExchangeRates(({ exchangeRatesList ,exchangeRatesLoading }) => ({
+  withExchangeRates(({ exchangeRatesList, exchangeRatesLoading }) => ({
     exchangeRatesList,
-    exchangeRatesLoading
-  }))
+    exchangeRatesLoading,
+  })),
 )(ExchangeRateTable);