WIP feature/Bulk

2026-02-18 13:50:31 +00:00 · 2020-05-20 01:49:36 +02:00
parent 10f636d2bc
commit 3753c3e791
20 changed files with 454 additions and 73 deletions
--- a/client/src/containers/Accounts/AccountsActionsBar.js
+++ b/client/src/containers/Accounts/AccountsActionsBar.js
@@ -44,6 +44,8 @@ function AccountsActionsBar({
  onFilterChanged,
  onBulkDelete,
  onBulkArchive,
+  onBulkActivate,
+  onBulkInactive
 }) {
  const history = useHistory();
  const [filterCount, setFilterCount] = useState(0);
@@ -78,6 +80,17 @@ function AccountsActionsBar({
    onBulkDelete && onBulkDelete(selectedRows.map(r => r.id));
  }, [onBulkDelete, selectedRows]);

+  const handelBulkActivate =useCallback(()=>{
+
+    onBulkActivate && onBulkActivate(selectedRows.map(r=>r.id))
+  },[onBulkActivate,selectedRows])
+
+const handelBulkInactive =useCallback(()=>{
+
+onBulkInactive && onBulkInactive(selectedRows.map(r=>r.id))
+
+},[onBulkInactive,selectedRows])
+
  return (
    <DashboardActionsBar>
      <NavbarGroup>
@@ -116,11 +129,18 @@ function AccountsActionsBar({
        </Popover>

        <If condition={hasSelectedRows}>
+       
          <Button
            className={Classes.MINIMAL}
+            icon={<Icon icon='multi-select' iconSize={15} />}
+            text={<T id={'activate'}/>}
+            onClick={handelBulkActivate}
+          />
+             <Button
+            className={Classes.MINIMAL}
            icon={<Icon icon='archive' iconSize={15} />}
-            text={<T id={'archive'}/>}
-            onClick={handleBulkArchive}
+            text={<T id={'inactivate'}/>}
+            onClick={handelBulkInactive}
          />
          <Button
            className={Classes.MINIMAL}
--- a/client/src/containers/Accounts/AccountsChart.js
+++ b/client/src/containers/Accounts/AccountsChart.js
@@ -44,6 +44,8 @@ function AccountsChart({
  requestFetchAccountsTable,
  requestDeleteBulkAccounts,
  addAccountsTableQueries,
+  requestBulkActivateAccounts,
+  requestBulkInactiveAccounts,

  // #withAccounts
  accountsTableQuery,
@@ -55,7 +57,8 @@ function AccountsChart({
  const [activateAccount, setActivateAccount] = useState(false);
  const [bulkDelete, setBulkDelete] = useState(false);
  const [selectedRows, setSelectedRows] = useState([]);
-
+  const [bulkActivate,setBulkActivate] =useState(false);
+  const [bulkInactiveAccounts,setBulkInactiveAccounts] =useState(false)
  const [tableLoading, setTableLoading] = useState(false);

  // Fetch accounts resource views and fields.
@@ -235,6 +238,65 @@ function AccountsChart({
  // Calculates the data table selected rows count.
  const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [selectedRows]);

+ 
+
+ // Handle bulk Activate accounts button click.,
+  const handleBulkActivate = useCallback((bulkActivateIds) => {
+    setBulkActivate(bulkActivateIds);
+}, [setBulkActivate]);
+
+
+ // Handle cancel Bulk Activate accounts bulk delete.
+  const handleCancelBulkActivate = useCallback(() => {
+  setBulkActivate(false);
+}, []);
+
+ // Handle Bulk activate account confirm.
+const handleConfirmBulkActivate = useCallback(() => {
+  requestBulkActivateAccounts(bulkActivate).then(() => {
+    setBulkActivate(false);
+    AppToaster.show({
+      message: formatMessage({ id: 'the_accounts_has_been_successfully_activated' }),
+      intent: Intent.SUCCESS,
+    });
+  }).catch((errors) => {
+    setBulkActivate(false);
+   
+  });
+}, [requestBulkActivateAccounts, bulkActivate]);
+
+
+
+ // Handle bulk Inactive accounts button click.,
+ const handleBulkInactive = useCallback((bulkInactiveIds) => {
+  setBulkInactiveAccounts(bulkInactiveIds);
+}, [setBulkInactiveAccounts]);
+
+
+  // Handle cancel Bulk Inactive accounts bulk delete.
+  const handleCancelBulkInactive = useCallback(() => {
+    setBulkInactiveAccounts(false);
+  }, []);
+
+ // Handle Bulk Inactive accounts confirm.
+ const handleConfirmBulkInactive = useCallback(() => {
+  requestBulkInactiveAccounts(bulkInactiveAccounts).then(() => {
+    setBulkInactiveAccounts(false);
+    AppToaster.show({
+      message: formatMessage({ id: 'the_accounts_has_been_successfully_inactivated' }),
+      intent: Intent.SUCCESS,
+    });
+  }).catch((errors) => {
+    setBulkInactiveAccounts(false);
+   
+  });
+}, [requestBulkInactiveAccounts, bulkInactiveAccounts]);
+
+
+
+
+
+
  return (
    <DashboardInsider loading={fetchHook.isFetching} name={'accounts-chart'}>
      <DashboardActionsBar
@@ -242,6 +304,8 @@ function AccountsChart({
        onFilterChanged={handleFilterChanged}
        onBulkDelete={handleBulkDelete}
        onBulkArchive={handleBulkArchive}
+        onBulkActivate={handleBulkActivate}
+        onBulkInactive={handleBulkInactive}
      />

      <DashboardPageContent>
@@ -321,6 +385,29 @@ function AccountsChart({
            <T id={'once_delete_these_accounts_you_will_not_able_restore_them'} />
          </p>
        </Alert>
+
+        <Alert
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={`${formatMessage({id:'activate'})} (${selectedRowsCount})`}
+          intent={Intent.WARNING}
+          isOpen={bulkActivate}
+          onCancel={handleCancelBulkActivate}
+          onConfirm={handleConfirmBulkActivate}>
+          <p>
+            <T id={'are_sure_to_activate_this_accounts'} />
+          </p>
+        </Alert>
+        <Alert
+          cancelButtonText={<T id={'cancel'} />}
+          confirmButtonText={`${formatMessage({id:'inactivate'})} (${selectedRowsCount})`}
+          intent={Intent.WARNING}
+          isOpen={bulkInactiveAccounts}
+          onCancel={handleCancelBulkInactive}
+          onConfirm={handleConfirmBulkInactive}>
+          <p>
+            <T id={'are_sure_to_inactive_this_accounts'} />
+          </p>
+        </Alert>
      </DashboardPageContent>
    </DashboardInsider>
  );
--- a/client/src/containers/Accounts/withAccountsActions.js
+++ b/client/src/containers/Accounts/withAccountsActions.js
@@ -8,6 +8,8 @@ import {
  submitAccount,
  fetchAccount,
  deleteBulkAccounts,
+  bulkActivateAccounts,
+  bulkInactiveAccounts
 } from 'store/accounts/accounts.actions';

 const mapActionsToProps = (dispatch) => ({
@@ -19,6 +21,8 @@ const mapActionsToProps = (dispatch) => ({
  requestActivateAccount: (id) => dispatch(activateAccount({ id })),
  requestFetchAccount: (id) => dispatch(fetchAccount({ id })),
  requestDeleteBulkAccounts: (ids) => dispatch(deleteBulkAccounts({ ids })),
+  requestBulkActivateAccounts:(ids)=>dispatch(bulkActivateAccounts({ids})),
+  requestBulkInactiveAccounts:(ids)=>dispatch(bulkInactiveAccounts({ids})),
 });

 export default connect(null, mapActionsToProps);
--- a/client/src/containers/ExchangeRates/ExchangeRate.js
+++ b/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>
  );
--- a/client/src/containers/ExchangeRates/ExchangeRateActionsBar.js
+++ b/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,
  }))
--- a/client/src/containers/ExchangeRates/withExchangeRatesActions.js
+++ b/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',
--- a/client/src/containers/Items/ItemCategoriesList.js
+++ b/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);
--- a/client/src/containers/Items/ItemCategoriesTable.js
+++ b/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>
  );
--- a/client/src/containers/Items/ItemsCategoryActionsBar.js
+++ b/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,
--- a/client/src/containers/Items/withItemCategoriesActions.js
+++ b/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);