WIP feature/Bulk

client/src/containers/Items/ItemCategoriesList.js

@@ -1,13 +1,18 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback,useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import { useQuery } from 'react-query';
 import { Alert, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T, FormattedHTMLMessage, useIntl } from 'react-intl';
+import {
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+  useIntl,
+} from 'react-intl';
 
 import AppToaster from 'components/AppToaster';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import ItemCategoriesDataTable from 'containers/Items/ItemCategoriesTable';
 import ItemsCategoryActionsBar from 'containers/Items/ItemsCategoryActionsBar';
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 
 import withDialog from 'connectors/Dialog.connector';
 import withDashboardActions from 'containers/Dashboard/withDashboard';
@@ -15,7 +20,6 @@ import withItemCategoriesActions from 'containers/Items/withItemCategoriesAction
 
 import { compose } from 'utils';
 
-
 const ItemCategoryList = ({
   // #withDashboardActions
   changePageTitle,
@@ -23,6 +27,7 @@ const ItemCategoryList = ({
   // #withItemCategoriesActions
   requestFetchItemCategories,
   requestDeleteItemCategory,
+  requestDeleteBulkItemCategories,
 
   // #withDialog
   openDialog,
@@ -32,26 +37,31 @@ const ItemCategoryList = ({
   const [selectedRows, setSelectedRows] = useState([]);
   const [filter, setFilter] = useState({});
   const [deleteCategory, setDeleteCategory] = useState(false);
+  const [bulkDelete, setBulkDelete] = useState(false);
+  const [tableLoading, setTableLoading] = useState(false);
 
-  const {formatMessage} = useIntl();
+  const { formatMessage } = useIntl();
 
   useEffect(() => {
     id
-      ? changePageTitle(formatMessage({ id:'edit_category_details' }))
-      : changePageTitle(formatMessage({ id:'category_list' }));
+      ? changePageTitle(formatMessage({ id: 'edit_category_details' }))
+      : changePageTitle(formatMessage({ id: 'category_list' }));
   }, []);
 
-  const fetchCategories = useQuery(['items-categories-table', filter],
-    (key, query) => requestFetchItemCategories(query));
+  const fetchCategories = useQuery(
+    ['items-categories-table', filter],
+    (key, query) => requestFetchItemCategories(query)
+  );
 
-  const handleFilterChanged = useCallback(() => { 
-    
-  }, []);
+  const handleFilterChanged = useCallback(() => {}, []);
 
   // Handle selected rows change.
-  const handleSelectedRowsChange = useCallback((itemCategories) => {
-    setSelectedRows(itemCategories);
-  }, [setSelectedRows]);
+  const handleSelectedRowsChange = useCallback(
+    (itemCategories) => {
+      setSelectedRows(itemCategories);
+    },
+    [setSelectedRows]
+  );
 
   // Handle fetch data of accounts datatable.
   const handleFetchData = useCallback(({ pageIndex, pageSize, sortBy }) => {
@@ -65,44 +75,92 @@ const ItemCategoryList = ({
     });
   }, []);
 
-  const handleDeleteCategory = (itemCategory) => { setDeleteCategory(itemCategory); };
-  const handleCancelItemDelete = () => { setDeleteCategory(false) };
+  const handleDeleteCategory = (itemCategory) => {
+    setDeleteCategory(itemCategory);
+  };
+  const handleCancelItemDelete = () => {
+    setDeleteCategory(false);
+  };
 
   // Handle alert confirm delete item category.
   const handleConfirmItemDelete = () => {
-    requestDeleteItemCategory(deleteCategory.id).then(() => {
-      setDeleteCategory(false);
-      AppToaster.show({
-        message: formatMessage({
-          id: 'the_item_category_has_been_successfully_deleted'
-        }),
-        intent: Intent.SUCCESS,
+    requestDeleteItemCategory(deleteCategory.id)
+      .then(() => {
+        setDeleteCategory(false);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_item_category_has_been_successfully_deleted',
+          }),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(() => {
+        setDeleteCategory(false);
       });
-    }).catch(() => {
-      setDeleteCategory(false);
-    });
   };
 
   const handleEditCategory = (category) => {
     openDialog('item-category-form', { action: 'edit', id: category.id });
   };
 
+  // Handle itemCategories bulk delete.
+  const handleBulkDelete = useCallback(
+    (itemsCategoriesIds) => {
+      setBulkDelete(itemsCategoriesIds);
+    },
+    [setBulkDelete]
+  );
+
+  // handle confirm itemCategories bulk delete.
+  const handleConfirmBulkDelete = useCallback(() => {
+    requestDeleteBulkItemCategories(bulkDelete)
+      .then(() => {
+        setBulkDelete(false);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_item_categories_has_been_successfully_deleted',
+          }),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((errors) => {
+        setBulkDelete(false);
+      });
+  }, [requestDeleteBulkItemCategories, bulkDelete]);
+
+
+  //Handel cancel itemCategories bulk delete.
+  const handleCancelBulkDelete =useCallback(()=>{
+    setBulkDelete(false)
+  },[])
+
+
+    // Calculates the data table selected rows count.
+    const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [selectedRows]);
+
+
   return (
     <DashboardInsider name={'item-category-list'}>
+      
       <ItemsCategoryActionsBar
+        selectedRows={selectedRows}
         onFilterChanged={handleFilterChanged}
-        selectedRows={selectedRows} />
+        onBulkDelete={handleBulkDelete}
+      />
 
       <ItemCategoriesDataTable
-        onSelectedRowsChange={handleSelectedRowsChange}
-        onFetchData={handleFetchData}
         onEditCategory={handleEditCategory}
-        onDeleteCategory={handleDeleteCategory} />
+        onFetchData={handleFetchData}
+        onSelectedRowsChange={handleSelectedRowsChange}
+        onDeleteCategory={handleDeleteCategory}
+        loading={tableLoading}
+        
+      />
 
       <Alert
         cancelButtonText={<T id={'cancel'} />}
         confirmButtonText={<T id={'delete'} />}
-        icon="trash"
+        icon='trash'
         intent={Intent.DANGER}
         isOpen={deleteCategory}
         onCancel={handleCancelItemDelete}
@@ -110,15 +168,33 @@ const ItemCategoryList = ({
       >
         <p>
           <FormattedHTMLMessage
-            id={'once_delete_this_item_category_you_will_able_to_restore_it'} />
+            id={'once_delete_this_item_category_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_item_categories_you_will_not_able_restore_them'}
+          />
+        </p>
+      </Alert>
+
     </DashboardInsider>
   );
 };
 
 export default compose(
+  withItemCategoriesActions,
   withDashboardActions,
   withDialog,
-  withItemCategoriesActions,
 )(ItemCategoryList);

client/src/containers/Items/ItemCategoriesTable.js

@@ -89,16 +89,26 @@ const ItemsCategoryList = ({
     onSelectedRowsChange && onSelectedRowsChange(selectedRows.map(s => s.original));
   }, [onSelectedRowsChange]);
 
+  const selectionColumn = useMemo(() => ({
+    minWidth: 42,
+    width: 42,
+    maxWidth: 42,
+  }), []);
+
+
   return (
-    <LoadingIndicator spinnerSize={30}>
+    <LoadingIndicator mount={false} >
       <DataTable
+        noInitialFetch={true}
         columns={columns}
         data={categoriesList}
         onFetchData={handelFetchData}
         manualSortBy={true}
-        selectionColumn={true}
+        selectionColumn={selectionColumn}
         expandable={true}
         onSelectedRowsChange={handleSelectedRowsChange}
+        treeGraph={true}
+        spinnerProps={{size:30}}
       />
     </LoadingIndicator>
   );

client/src/containers/Items/ItemsCategoryActionsBar.js

@@ -1,6 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-import { compose } from 'utils';
+import React, { useCallback, useMemo,useState } from 'react';
 import {
   NavbarGroup,
   Button,
@@ -13,45 +11,56 @@ import {
 import classNames from 'classnames';
 import { connect } from 'react-redux';
 import { If } from 'components';
-
 import Icon from 'components/Icon';
-import DialogConnect from 'connectors/Dialog.connector';
+
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import FilterDropdown from 'components/FilterDropdown';
 
 import withResourceDetail from 'containers/Resources/withResourceDetails';
+import withDialog from 'connectors/Dialog.connector';
 import withDashboard from 'containers/Dashboard/withDashboard';
 
+import { compose } from 'utils';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 
 const ItemsCategoryActionsBar = ({
   // #withResourceDetail
-  resourceName = 'item_category',
   resourceFields,
   
   // #withDialog
   openDialog,
 
   // #ownProps
-  onDeleteCategory,
+  selectedRows=[],
   onFilterChanged,
-  selectedRows,
+  onBulkDelete
 }) => {
+
+  const [filterCount, setFilterCount] = useState(0);
+
   const onClickNewCategory = useCallback(() => {
     openDialog('item-category-form', {});
   }, [openDialog]);
 
-  const handleDeleteCategory = useCallback((category) => {
-    onDeleteCategory(selectedRows);
-  }, [selectedRows, onDeleteCategory]);
-
   const hasSelectedRows = useMemo(() => selectedRows.length > 0, [selectedRows]);
 
+  // const handleDeleteCategory = useCallback((category) => {
+  //   onDeleteCategory(selectedRows);
+  // }, [selectedRows, onDeleteCategory]);
+
+
   const filterDropdown = FilterDropdown({
     fields: resourceFields,
     onFilterChange: (filterConditions) => {
+      setFilterCount(filterConditions.length || 0);
       onFilterChanged && onFilterChanged(filterConditions);
     },
   });
+
+  const handelBulkDelete =useCallback(()=>{
+    onBulkDelete && onBulkDelete(selectedRows.map(r=>r.id));
+  },[onBulkDelete,selectedRows])
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -69,7 +78,7 @@ const ItemsCategoryActionsBar = ({
         >
           <Button
             className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={<T id={'filter'}/>}
+            text={ filterCount <= 0 ? <T id={'filter'}/> : `${filterCount} filters applied`}
             icon={<Icon icon='filter' />}
           />
         </Popover>
@@ -80,7 +89,7 @@ const ItemsCategoryActionsBar = ({
             icon={<Icon icon='trash' iconSize={15} />}
             text={<T id={'delete'}/>}
             intent={Intent.DANGER}
-            onClick={handleDeleteCategory}
+            onClick={handelBulkDelete}
           />
         </If>
 
@@ -107,7 +116,7 @@ const withItemsCategoriesActionsBar = connect(mapStateToProps);
 
 export default compose(
   withItemsCategoriesActionsBar,
-  DialogConnect,
+  withDialog,
   withDashboard,
   withResourceDetail(({ resourceFields }) => ({
     resourceFields,

client/src/containers/Items/withItemCategoriesActions.js

@@ -4,6 +4,8 @@ import {
   submitItemCategory,
   deleteItemCategory,
   editItemCategory,
+  deleteBulkItemCategories
+ 
 } from 'store/itemCategories/itemsCategory.actions';
 
 export const mapDispatchToProps = (dispatch) => ({
@@ -11,6 +13,7 @@ export const mapDispatchToProps = (dispatch) => ({
   requestFetchItemCategories: (query) => dispatch(fetchItemCategories({ query })),
   requestDeleteItemCategory: (id) => dispatch(deleteItemCategory(id)),
   requestEditItemCategory: (id, form) => dispatch(editItemCategory(id, form)),
+  requestDeleteBulkItemCategories:(ids)=>dispatch(deleteBulkItemCategories({ids}))
 });
 
 export default connect(null, mapDispatchToProps);