WIP feature/Bulk

client/src/containers/ExchangeRates/ExchangeRate.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback,useMemo } from 'react';
 import { useQuery } from 'react-query';
 import { useParams } from 'react-router-dom';
 import { Alert, Intent } from '@blueprintjs/core';
@@ -15,7 +15,7 @@ import withExchangeRatesActions from 'containers/ExchangeRates/withExchangeRates
 
 import { compose } from 'utils';
 
-import { FormattedMessage as T, useIntl } from 'react-intl';
+  import { FormattedMessage as T, useIntl, FormattedHTMLMessage } from 'react-intl';
 
 function ExchangeRate({
   // #withDashboard
@@ -28,19 +28,21 @@ function ExchangeRate({
   requestFetchExchangeRates,
   requestDeleteExchangeRate,
   addExchangeRatesTableQueries,
+  requestDeleteBulkExchangeRates,
+
 }) {
   const { id } = useParams();
   const [deleteExchangeRate, setDeleteExchangeRate] = useState(false);
   const [selectedRows, setSelectedRows] = useState([]);
   const { formatMessage } = useIntl();
- 
+  const [bulkDelete, setBulkDelete] = useState(false);
+
   // const fetchExchangeRates = useQuery('exchange-rates-table', () => {
   //   return Promise.all([requestFetchExchangeRates()]);
   // });
 
    const fetchExchangeRates = useQuery('exchange-rates-table',
-    () => requestFetchExchangeRates(),
-    { refetchInterval: 3000 });
+    () => requestFetchExchangeRates());
 
 
   useEffect(() => {
@@ -93,11 +95,48 @@ function ExchangeRate({
     [setSelectedRows]
   );
 
+ // Handle Exchange Rates bulk delete.
+ const handleBulkDelete = useCallback(
+  (exchangeRates) => {
+    setBulkDelete(exchangeRates);
+  },
+  [setBulkDelete]
+);
+
+ //Handel cancel itemCategories bulk delete.
+ const handleCancelBulkDelete =useCallback(()=>{
+  setBulkDelete(false)
+},[])
+
+// handle confirm Exchange Rates bulk delete.
+const handleConfirmBulkDelete = useCallback(() => {
+  requestDeleteBulkExchangeRates(bulkDelete)
+    .then(() => {
+      setBulkDelete(false);
+      AppToaster.show({
+        message: formatMessage({
+          id: 'the_exchange_rates_has_been_successfully_deleted',
+        }),
+        intent: Intent.SUCCESS,
+      });
+    })
+    .catch((errors) => {
+      setBulkDelete(false);
+    });
+}, [requestDeleteBulkExchangeRates, bulkDelete]);
+
+
+  // Calculates the data table selected rows count.
+  const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [selectedRows]);
+
+
   return (
     <DashboardInsider>
       <ExchangeRateActionsBar
         onDeleteExchangeRate={handelDeleteExchangeRate}
         selectedRows={selectedRows}
+        onBulkDelete={handleBulkDelete}
+
       />
       <DashboardPageContent>
         <ExchangeRateTable
@@ -116,10 +155,25 @@ function ExchangeRate({
           onConfirm={handelConfirmExchangeRateDelete}
         >
           <p>
-            Are you sure you want to move <b>filename</b> to Trash? You will be
-            able to restore it later, but it will become private to you.
+            <FormattedHTMLMessage id={'once_delete_this_exchange_rate_you_will_able_to_restore_it'}/>
           </p>
         </Alert>
+        <Alert
+        cancelButtonText={<T id={'cancel'} />}
+        confirmButtonText={`${formatMessage({id:'delete'})} (${selectedRowsCount})`}
+        icon='trash'
+        intent={Intent.DANGER}
+        isOpen={bulkDelete}
+        onCancel={handleCancelBulkDelete}
+        onConfirm={handleConfirmBulkDelete}
+      >
+        <p>
+          <FormattedHTMLMessage
+            id={'once_delete_these_exchange_rates_you_will_not_able_restore_them'}
+          />
+        </p>
+      </Alert>
+
       </DashboardPageContent>
     </DashboardInsider>
   );

client/src/containers/ExchangeRates/ExchangeRateActionsBar.js

@@ -13,7 +13,7 @@ import Icon from 'components/Icon';
 import { connect } from 'react-redux';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-import DialogConnect from 'connectors/Dialog.connector';
+import withDialog from 'connectors/Dialog.connector';
 
 import FilterDropdown from 'components/FilterDropdown';
 import withResourceDetail from 'containers/Resources/withResourceDetails';
@@ -28,10 +28,12 @@ function ExchangeRateActionsBar({
 
   // #withResourceDetail
   resourceFields,
-
+  
+  // #ownProps
   selectedRows = [],
   onDeleteExchangeRate,
   onFilterChanged,
+  onBulkDelete
 }) {
   const [filterCount, setFilterCount] = useState(0);
 
@@ -48,17 +50,21 @@ function ExchangeRateActionsBar({
     },
   });
 
-  const handelDeleteExchangeRate = useCallback(
-    (exchangeRate) => {
-      onDeleteExchangeRate(exchangeRate);
-    },
-    [selectedRows, onDeleteExchangeRate]
-  );
+  // const handelDeleteExchangeRate = useCallback(
+  //   (exchangeRate) => {
+  //     onDeleteExchangeRate(exchangeRate);
+  //   },
+  //   [selectedRows, onDeleteExchangeRate]
+  // );
 
   const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
     selectedRows,
   ]);
 
+  const handelBulkDelete =useCallback(()=>{
+    onBulkDelete && onBulkDelete(selectedRows.map(r=>r.id));
+  },[onBulkDelete,selectedRows])
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -92,7 +98,7 @@ function ExchangeRateActionsBar({
             icon={<Icon icon='trash' iconSize={15} />}
             text={<T id={'delete'} />}
             intent={Intent.DANGER}
-            onClick={handelDeleteExchangeRate}
+            onClick={handelBulkDelete}
           />
         )}
         <Button
@@ -118,7 +124,7 @@ const withExchangeRateActionBar = connect(mapStateToProps);
 
 export default compose(
   withExchangeRateActionBar,
-  DialogConnect,
+  withDialog,
   withResourceDetail(({ resourceFields }) => ({
     resourceFields,
   }))

client/src/containers/ExchangeRates/withExchangeRatesActions.js

@@ -4,6 +4,7 @@ import {
   fetchExchangeRates,
   deleteExchangeRate,
   editExchangeRate,
+  deleteBulkExchangeRates
 } from 'store/ExchangeRate/exchange.actions';
 
 const mapActionsToProps = (dispatch) => ({
@@ -11,6 +12,7 @@ const mapActionsToProps = (dispatch) => ({
   requestFetchExchangeRates: () => dispatch(fetchExchangeRates()),
   requestDeleteExchangeRate: (id) => dispatch(deleteExchangeRate(id)),
   requestEditExchangeRate: (id, form) => dispatch(editExchangeRate(id, form)),
+  requestDeleteBulkExchangeRates:(ids)=>dispatch(deleteBulkExchangeRates({ids})),
   addExchangeRatesTableQueries: (queries) =>
     dispatch({
       type: 'ExchangeRates_TABLE_QUERIES_ADD',