WIP feature/Bulk delete items

client/src/containers/Items/ItemsList.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, useState } from 'react';
+import React, { useEffect, useCallback, useState,useMemo } from 'react';
 import {
   Route,
   Switch,
@@ -43,10 +43,12 @@ function ItemsList({
   requestDeleteItem,
   requestFetchItems,
   addItemsTableQueries,
+  requestDeleteBulkItems,
 }) {
   const [deleteItem, setDeleteItem] = useState(false);
   const [selectedRows, setSelectedRows] = useState([]);
   const [tableLoading, setTableLoading] = useState(false);
+  const [bulkDelete, setBulkDelete] = useState(false);
 
   const { formatMessage } = useIntl();
 
@@ -130,8 +132,35 @@ function ItemsList({
   const handleSelectedRowsChange = useCallback((accounts) => {
     setSelectedRows(accounts);
   }, [setSelectedRows]);
-  
  
+   // Calculates the data table selected rows count.
+   const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [selectedRows]);
+
+ 
+
+  // Handle items bulk delete button click.,
+
+  const handleBulkDelete = useCallback((itemsIds) => {
+    setBulkDelete(itemsIds);
+  }, [setBulkDelete]);
+
+   // Handle confirm items bulk delete.
+   const handleConfirmBulkDelete = useCallback(() => {
+    requestDeleteBulkItems(bulkDelete).then(() => {
+      setBulkDelete(false);
+      AppToaster.show({
+        message: formatMessage({ id: 'the_items_has_been_successfully_deleted' }),
+        intent: Intent.SUCCESS,
+      });
+    }).catch((errors) => {
+      setBulkDelete(false);
+    });
+  }, [requestDeleteBulkItems, bulkDelete]);
+
+    // Handle cancel accounts bulk delete.
+    const handleCancelBulkDelete = useCallback(() => {
+      setBulkDelete(false);
+    }, []);
 
 
   return (
@@ -140,8 +169,9 @@ function ItemsList({
       name={'items-list'}>
 
       <ItemsActionsBar
+        selectedRows={selectedRows} 
         onFilterChanged={handleFilterChanged}
-        selectedRows={selectedRows} />
+        onBulkDelete={handleBulkDelete}/>
 
       <DashboardPageContent>
         <Switch>
@@ -174,6 +204,20 @@ function ItemsList({
                   id={'once_delete_this_item_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>
+            <T id={'once_delete_these_items_you_will_not_able_restore_them'} />
+          </p>
+        </Alert>
           </Route>
         </Switch>
       </DashboardPageContent>