From 7d1952344dd9677ed12e3e5c0ccc57fc001c7b42 Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Sat, 23 May 2020 13:53:49 +0200
Subject: [PATCH 1/2] WIP feature/editItem

---
 client/src/containers/Items/ItemForm.js       | 161 ++++++++++++++----
 client/src/containers/Items/ItemFormPage.js   |  38 ++++-
 client/src/containers/Items/ItemsDataTable.js |  18 +-
 client/src/containers/Items/ItemsList.js      |  15 +-
 client/src/containers/Items/withItemDetail.js |   9 +
 .../src/containers/Items/withItemsActions.js  |   2 +
 client/src/routes/dashboard.js                |   7 +
 server/src/http/controllers/Items.js          |   2 +-
 8 files changed, 203 insertions(+), 49 deletions(-)
 create mode 100644 client/src/containers/Items/withItemDetail.js

diff --git a/client/src/containers/Items/ItemForm.js b/client/src/containers/Items/ItemForm.js
index 41856af91..cde7897fc 100644
--- a/client/src/containers/Items/ItemForm.js
+++ b/client/src/containers/Items/ItemForm.js
@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo, useCallback,useEffect } from 'react';
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
 import {
@@ -15,35 +15,61 @@ import { Row, Col } from 'react-grid-system';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Select } from '@blueprintjs/select';
 import { queryCache } from 'react-query';
-
+import {useParams} from 'react-router-dom';
 import AppToaster from 'components/AppToaster';
-import AccountsConnect from 'connectors/Accounts.connector';
-import ItemsConnect from 'connectors/Items.connect';
 import { compose } from 'utils';
 import ErrorMessage from 'components/ErrorMessage';
 import classNames from 'classnames';
 import Icon from 'components/Icon';
-import ItemCategoryConnect from 'connectors/ItemsCategory.connect';
+import withItemsActions from 'containers/Items/withItemsActions';
+import withItemCategories from 'containers/Items/withItemCategories'
+import withAccounts from 'containers/Accounts/withAccounts';
+import withMediaActions from 'containers/Media/withMediaActions';
+
 import MoneyInputGroup from 'components/MoneyInputGroup';
 import { useHistory } from 'react-router-dom';
 import Dragzone from 'components/Dragzone';
-import MediaConnect from 'connectors/Media.connect';
 import useMedia from 'hooks/useMedia';
+import withItems from './withItems';
+import withItemDetail from 'containers/Items/withItemDetail'
+import { pick } from 'lodash';
+import withDashboardActions from 'containers/Dashboard/withDashboard';
 
 
 const ItemForm = ({
+
+  // #withItemActions
   requestSubmitItem,
+  requestEditItem,
 
+ 
   accounts,
-  categories,
+  accountsTypes,
+  itemDetail,
 
+  
+
+  // #withDashboard
+    changePageTitle,
+
+ // #withItemCategories
+  categoriesList,
+
+  
+
+// #withMediaActions
   requestSubmitMedia,
   requestDeleteMedia,
+
+  
 }) => {
+
   const [selectedAccounts, setSelectedAccounts] = useState({});
+  const [selectedAccountType, setSelectedAccountType] = useState(null);
+  
   const history = useHistory();
   const { formatMessage } = useIntl();
-
+  const {id} =useParams();
   const {
     files,
     setFiles,
@@ -81,7 +107,7 @@ const ItemForm = ({
     stock: Yup.string() || Yup.boolean(),
   });
 
-  const initialValues = useMemo(
+  const defaultInitialValues = useMemo(
     () => ({
       active: true,
       name: '',
@@ -97,6 +123,21 @@ const ItemForm = ({
     }),
     []
   );
+  const initialValues = useMemo(() => ({
+    ...(itemDetail) ? {
+      ...pick(itemDetail, Object.keys(defaultInitialValues)),
+ 
+    } : {
+      ...defaultInitialValues,
+    }
+  }), [itemDetail, defaultInitialValues]);
+
+
+  useEffect(() => {
+    itemDetail && itemDetail.id ?
+      changePageTitle(formatMessage({id:'edit_item_details'})) :
+      changePageTitle(formatMessage({id:'new_item'}));
+  }, [changePageTitle,itemDetail]);
 
   const {
     getFieldProps,
@@ -112,24 +153,47 @@ const ItemForm = ({
     initialValues: {
       ...initialValues,
     },
-    onSubmit: (values, { setSubmitting }) => {
+    onSubmit: (values, { setSubmitting,resetForm,setErrors }) => {
+
       const saveItem = (mediaIds) => {
         const formValues = { ...values, media_ids: mediaIds };
+        if(itemDetail && itemDetail.id ){
 
-        return requestSubmitItem(formValues).then((response) => {
-          AppToaster.show({
-            message: formatMessage({
-              id: 'service_has_been_successful_created',
-            }, {
-              name: values.name,
-              service: formatMessage({ id: 'item' }),
-            }),
-            intent: Intent.SUCCESS,
+          requestEditItem(itemDetail.id,formValues)
+          .then((response)=>{
+            AppToaster.show({
+              message:formatMessage({
+                id:'the_item_has_been_successfully_edited',
+              },{
+                number:itemDetail.id
+              }),
+              intent:Intent.SUCCESS
+            });
+            setSubmitting(false);
+            resetForm();
+          }).catch((errors)=>{
+            setSubmitting(false)
           });
-          queryCache.removeQueries(['items-table']);
-          history.push('/dashboard/items');
-        });
-      };
+
+        }else{
+         
+          requestSubmitItem(formValues).then((response) => {
+            AppToaster.show({
+              message: formatMessage({
+                id: 'service_has_been_successful_created',
+              }, {
+                name: values.name,
+                service: formatMessage({ id: 'item' }),
+              }),
+              intent: Intent.SUCCESS,
+            });
+            queryCache.removeQueries(['items-table']);
+            history.push('/items');
+          });
+        };
+        }
+
+         
 
       Promise.all([saveMedia(), deleteMedia()]).then(
         ([savedMediaResponses]) => {
@@ -152,6 +216,7 @@ const ItemForm = ({
     []
   );
 
+
   // Filter Account Items
   const filterAccounts = (query, account, _index, exactMatch) => {
     const normalizedTitle = account.name.toLowerCase();
@@ -163,6 +228,19 @@ const ItemForm = ({
     }
   };
 
+  
+// Set default
+  // useEffect(()=>{
+
+  //   if(itemDetail && itemDetail.id){
+  //     const defaultType = itemDetail.find(
+  //       (t) => t.id === itemDetail.id
+  //     );
+
+  //     defaultType && setSelectedAccountType(defaultType);
+  //   }
+
+  // },[])
   const onItemAccountSelect = useCallback(
     (filedName) => {
       return (account) => {
@@ -183,6 +261,7 @@ const ItemForm = ({
     []
   );
 
+
   const getSelectedAccountLabel = useCallback(
     (fieldName, defaultLabel) => {
       return typeof selectedAccounts[fieldName] !== 'undefined'
@@ -199,10 +278,18 @@ const ItemForm = ({
     setFieldValue(fieldKey, value);
   };
 
-  const initialAttachmentFiles = useMemo(() => {
-    return [];
-  }, []);
-
+ 
+  const initialAttachmentFiles =useMemo(()=>{
+    return itemDetail && itemDetail.media
+    ? itemDetail.media.map((attach)=>({
+    
+      preview:attach.attachment_file,
+      upload:true,
+      metadata:{...attach}
+    
+    })):[];
+    
+      },[itemDetail])
   const handleDropFiles = useCallback((_files) => {
     setFiles(_files.filter((file) => file.uploaded === false));
   }, []);
@@ -297,7 +384,7 @@ const ItemForm = ({
                 )}
               >
                 <Select
-                  items={categories}
+                  items={categoriesList}
                   itemRenderer={categoryItem}
                   itemPredicate={filterAccounts}
                   popoverProps={{ minimal: true }}
@@ -532,7 +619,8 @@ const ItemForm = ({
 
         <div class='form__floating-footer'>
           <Button intent={Intent.PRIMARY} disabled={isSubmitting} type='submit'>
-            <T id={'save'}/> 
+          
+           { itemDetail && itemDetail.id ? <T id={'edit'}/> : <T id={'save'}/> }
           </Button>
 
           <Button className={'ml1'} disabled={isSubmitting}>
@@ -549,8 +637,15 @@ const ItemForm = ({
 };
 
 export default compose(
-  AccountsConnect,
-  ItemsConnect,
-  ItemCategoryConnect,
-  MediaConnect
+  withAccounts(({accounts,accountsTypes})=>({
+    accounts,
+    accountsTypes
+  })),
+  withItemsActions,
+  withItemDetail,
+  withItemCategories(({ categoriesList }) => ({
+    categoriesList,
+  })),
+  withDashboardActions,
+  withMediaActions,
 )(ItemForm);
diff --git a/client/src/containers/Items/ItemFormPage.js b/client/src/containers/Items/ItemFormPage.js
index fe55a3a28..ecdf4b837 100644
--- a/client/src/containers/Items/ItemFormPage.js
+++ b/client/src/containers/Items/ItemFormPage.js
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import React, { useEffect,useCallback } from 'react';
+import { useParams,useHistory } from 'react-router-dom';
 import { useQuery } from 'react-query';
 
 import ItemForm from 'containers/Items/ItemForm';
@@ -11,6 +11,7 @@ import withItemCategoriesActions from 'containers/Items/withItemCategoriesAction
 
 import { compose } from 'utils';
 import { FormattedMessage as T, useIntl } from 'react-intl';
+import withItemsActions from './withItemsActions';
 
 
 const ItemFormContainer = ({
@@ -20,16 +21,15 @@ const ItemFormContainer = ({
   // #withAccountsActions
   requestFetchAccounts,
 
+  // #withItemsActions
+  requestFetchItems,
+
   // #withItemCategoriesActions
   requestFetchItemCategories,
 }) => {
   const { id } = useParams();
   const {formatMessage} =useIntl()
-  useEffect(() => {
-    id ?
-      changePageTitle(formatMessage({id:'edit_item_details'})) :
-      changePageTitle(formatMessage({id:'new_item'}));
-  }, [id, changePageTitle]);
+  const history = useHistory();
 
   const fetchAccounts = useQuery('accounts-list',
     (key) => requestFetchAccounts());
@@ -37,11 +37,30 @@ const ItemFormContainer = ({
   const fetchCategories = useQuery('item-categories-list',
     (key) => requestFetchItemCategories());
 
+ const fetchItemDetail = useQuery(
+  id && ['item-detail-list', id],
+  (key) => requestFetchItems());
+
+const handleFormSubmit =useCallback((payload)=>{
+
+  payload.redirect && history.push('/items/new');
+
+},[history]) 
+
+const handleCancel =useCallback(()=>{
+
+  history.push('/items/new');
+},[])
+
   return (
     <DashboardInsider
-      loading={fetchAccounts.isFetching || fetchCategories.isFetching}
+      loading={fetchItemDetail.isFetching || fetchAccounts.isFetching || fetchCategories.isFetching }
       name={'item-form'}>
-      <ItemForm />
+      <ItemForm 
+      itemId={id} 
+      onFormSubmit={handleFormSubmit}
+      onCancelForm={handleCancel}
+      />
     </DashboardInsider>
   );
 };
@@ -50,4 +69,5 @@ export default compose(
   withDashboard,
   withAccountsActions,
   withItemCategoriesActions,
+  withItemsActions
 )(ItemFormContainer);
diff --git a/client/src/containers/Items/ItemsDataTable.js b/client/src/containers/Items/ItemsDataTable.js
index c1fd3e4ee..948592498 100644
--- a/client/src/containers/Items/ItemsDataTable.js
+++ b/client/src/containers/Items/ItemsDataTable.js
@@ -8,7 +8,6 @@ import {
   Position,
 } from '@blueprintjs/core'
 import { FormattedMessage as T, useIntl } from 'react-intl';
-
 import {compose} from 'utils';
 import DataTable from 'components/DataTable';
 import Icon from 'components/Icon';
@@ -17,7 +16,6 @@ import Money from 'components/Money';
 import withItems from 'containers/Items/withItems';
 import LoadingIndicator from 'components/LoadingIndicator';
 
-
 const ItemsDataTable = ({
   loading,
 
@@ -31,17 +29,25 @@ const ItemsDataTable = ({
   onFetchData,
   onSelectedRowsChange,
 }) => {
+
   
   const {formatMessage} = useIntl();
   const [initialMount, setInitialMount] = useState(false);
-
+  
   useEffect(() => {
     if (!itemsTableLoading) {
       setInitialMount(true);
     }
   }, [itemsTableLoading, setInitialMount]);
 
-  const handleEditItem = (item) => () => { onEditItem(item); };
+  const handleEditItem = useCallback(
+    (item) => () => {
+      onEditItem && onEditItem(item);
+    },
+    [onEditItem]
+  );
+
+
   const handleDeleteItem = (item) => () => { onDeleteItem(item); };
   
   const actionMenuList = useCallback((item) =>
@@ -51,8 +57,9 @@ const ItemsDataTable = ({
       <MenuItem text={<T id={'edit_item'}/>} onClick={handleEditItem(item)} />
       <MenuItem text={<T id={'delete_item'}/>} onClick={handleDeleteItem(item)} />
     </Menu>), [handleEditItem, handleDeleteItem]);
-
+ 
   const columns = useMemo(() => [
+    
     {
       Header: formatMessage({ id:'item_name' }),
       accessor: 'name',
@@ -136,6 +143,7 @@ const ItemsDataTable = ({
 };
 
 export default compose(
+
   withItems(({ itemsCurrentPage, itemsTableLoading }) => ({
     itemsCurrentPage,
     itemsTableLoading,
diff --git a/client/src/containers/Items/ItemsList.js b/client/src/containers/Items/ItemsList.js
index 74cd4e69d..9648b4519 100644
--- a/client/src/containers/Items/ItemsList.js
+++ b/client/src/containers/Items/ItemsList.js
@@ -2,6 +2,7 @@ import React, { useEffect, useCallback, useState } from 'react';
 import {
   Route,
   Switch,
+  useHistory
 } from 'react-router-dom';
 import {
   Intent,
@@ -49,6 +50,8 @@ function ItemsList({
 
   const { formatMessage } = useIntl();
 
+  const history = useHistory();
+
   useEffect(() => {
     changePageTitle(formatMessage({id:'items_list'}));
   }, [changePageTitle]);
@@ -68,7 +71,14 @@ function ItemsList({
     setDeleteItem(item);
   }, [setDeleteItem]);
 
-  const handleEditItem = () => {};
+  const handleEditItem = useCallback(
+    (item) => {
+      history.push(`/items/${item.id}/edit`);
+    },
+    [history]
+  );
+
+ 
 
   // Handle cancel delete the item.
   const handleCancelDeleteItem = useCallback(() => {
@@ -121,6 +131,9 @@ function ItemsList({
     setSelectedRows(accounts);
   }, [setSelectedRows]);
   
+ 
+
+
   return (
     <DashboardInsider
       isLoading={fetchHook.isFetching}
diff --git a/client/src/containers/Items/withItemDetail.js b/client/src/containers/Items/withItemDetail.js
new file mode 100644
index 000000000..6bca8f896
--- /dev/null
+++ b/client/src/containers/Items/withItemDetail.js
@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import t from 'store/types';
+import { getItemById } from 'store/items/items.reducer';
+
+const mapStateToProps = (state, props) => ({
+  itemDetail: getItemById(state, props.itemId),
+});
+
+export default connect(mapStateToProps);
diff --git a/client/src/containers/Items/withItemsActions.js b/client/src/containers/Items/withItemsActions.js
index 10611caa0..9be79e2e3 100644
--- a/client/src/containers/Items/withItemsActions.js
+++ b/client/src/containers/Items/withItemsActions.js
@@ -3,6 +3,7 @@ import {
   fetchItems,
   deleteItem,
   submitItem,
+  editItem,
 } from 'store/items/items.actions';
 import t from 'store/types';
 
@@ -10,6 +11,7 @@ export const mapDispatchToProps = (dispatch) => ({
   requestFetchItems: (query) => dispatch(fetchItems({ query })),
   requestDeleteItem: (id) => dispatch(deleteItem({ id })),
   requestSubmitItem: (form) => dispatch(submitItem({ form })),
+  requestEditItem:(id,form) => dispatch(editItem({id,form})),
   addBulkActionItem: (id) => dispatch({
     type: t.ITEM_BULK_ACTION_ADD, itemId: id
   }),
diff --git a/client/src/routes/dashboard.js b/client/src/routes/dashboard.js
index 19fdec1fc..bdf159650 100644
--- a/client/src/routes/dashboard.js
+++ b/client/src/routes/dashboard.js
@@ -82,6 +82,13 @@ export default [
     }),
     breadcrumb: 'Categories',
   },
+  {
+    path: `/items/:id/edit`,
+    component: LazyLoader({
+      loader: () => import('containers/Items/ItemFormPage'),
+    }),
+    breadcrumb: 'Edit Item',
+  },
   {
     path: `/items/new`,
     component: LazyLoader({
diff --git a/server/src/http/controllers/Items.js b/server/src/http/controllers/Items.js
index b8c6e1916..4d84e431f 100644
--- a/server/src/http/controllers/Items.js
+++ b/server/src/http/controllers/Items.js
@@ -199,7 +199,7 @@ export default {
       check('sell_price').exists().isNumeric(),
       check('cost_account_id').exists().isInt(),
       check('sell_account_id').exists().isInt(),
-      check('category_id').optional().isInt(),
+      check('category_id').optional({ nullable: true }).isInt().toInt(),
       check('note').optional(),
       check('attachment').optional(),
       check('')

From 9ef180a805e20bce953c7b43027fd34ad80853d9 Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Sat, 23 May 2020 19:39:20 +0200
Subject: [PATCH 2/2] WIP feature/Bulk delete items

---
 client/src/containers/Items/ItemForm.js       | 32 +++++-------
 .../src/containers/Items/ItemsActionsBar.js   | 21 +++++---
 client/src/containers/Items/ItemsDataTable.js |  3 ++
 client/src/containers/Items/ItemsList.js      | 50 +++++++++++++++++--
 .../src/containers/Items/withItemsActions.js  |  2 +
 client/src/lang/en/index.js                   |  5 +-
 client/src/store/items/items.actions.js       | 16 ++++++
 client/src/store/items/items.types.js         |  2 +
 8 files changed, 101 insertions(+), 30 deletions(-)

diff --git a/client/src/containers/Items/ItemForm.js b/client/src/containers/Items/ItemForm.js
index cde7897fc..0faf86e95 100644
--- a/client/src/containers/Items/ItemForm.js
+++ b/client/src/containers/Items/ItemForm.js
@@ -15,7 +15,7 @@ import { Row, Col } from 'react-grid-system';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Select } from '@blueprintjs/select';
 import { queryCache } from 'react-query';
-import {useParams} from 'react-router-dom';
+import {useParams ,useHistory} from 'react-router-dom';
 import AppToaster from 'components/AppToaster';
 import { compose } from 'utils';
 import ErrorMessage from 'components/ErrorMessage';
@@ -27,13 +27,13 @@ import withAccounts from 'containers/Accounts/withAccounts';
 import withMediaActions from 'containers/Media/withMediaActions';
 
 import MoneyInputGroup from 'components/MoneyInputGroup';
-import { useHistory } from 'react-router-dom';
 import Dragzone from 'components/Dragzone';
 import useMedia from 'hooks/useMedia';
 import withItems from './withItems';
 import withItemDetail from 'containers/Items/withItemDetail'
 import { pick } from 'lodash';
 import withDashboardActions from 'containers/Dashboard/withDashboard';
+import withAccountDetail from 'containers/Accounts/withAccountDetail';
 
 
 const ItemForm = ({
@@ -42,11 +42,10 @@ const ItemForm = ({
   requestSubmitItem,
   requestEditItem,
 
- 
   accounts,
-  accountsTypes,
   itemDetail,
-
+  onFormSubmit,
+  onCancelForm, 
   
 
   // #withDashboard
@@ -65,7 +64,7 @@ const ItemForm = ({
 }) => {
 
   const [selectedAccounts, setSelectedAccounts] = useState({});
-  const [selectedAccountType, setSelectedAccountType] = useState(null);
+  const [payload, setPayload] = useState({});
   
   const history = useHistory();
   const { formatMessage } = useIntl();
@@ -132,6 +131,9 @@ const ItemForm = ({
     }
   }), [itemDetail, defaultInitialValues]);
 
+  const saveInvokeSubmit = useCallback((payload) => {
+    onFormSubmit && onFormSubmit(payload)
+  }, [onFormSubmit]);
 
   useEffect(() => {
     itemDetail && itemDetail.id ?
@@ -170,6 +172,8 @@ const ItemForm = ({
               intent:Intent.SUCCESS
             });
             setSubmitting(false);
+            saveInvokeSubmit({action:'update',...payload})
+            history.push('/items');
             resetForm();
           }).catch((errors)=>{
             setSubmitting(false)
@@ -229,18 +233,6 @@ const ItemForm = ({
   };
 
   
-// Set default
-  // useEffect(()=>{
-
-  //   if(itemDetail && itemDetail.id){
-  //     const defaultType = itemDetail.find(
-  //       (t) => t.id === itemDetail.id
-  //     );
-
-  //     defaultType && setSelectedAccountType(defaultType);
-  //   }
-
-  // },[])
   const onItemAccountSelect = useCallback(
     (filedName) => {
       return (account) => {
@@ -637,10 +629,10 @@ const ItemForm = ({
 };
 
 export default compose(
-  withAccounts(({accounts,accountsTypes})=>({
+  withAccounts(({accounts})=>({
     accounts,
-    accountsTypes
   })),
+  withAccountDetail,
   withItemsActions,
   withItemDetail,
   withItemCategories(({ categoriesList }) => ({
diff --git a/client/src/containers/Items/ItemsActionsBar.js b/client/src/containers/Items/ItemsActionsBar.js
index 99f647168..1b061c2bd 100644
--- a/client/src/containers/Items/ItemsActionsBar.js
+++ b/client/src/containers/Items/ItemsActionsBar.js
@@ -17,7 +17,7 @@ import { compose } from 'utils';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import Icon from 'components/Icon';
 import FilterDropdown from 'components/FilterDropdown';
-import DialogConnect from 'connectors/Dialog.connector';
+import withDialog from 'connectors/Dialog.connector';
 import withResourceDetail from 'containers/Resources/withResourceDetails';
 import withItems from 'containers/Items/withItems';
 import { If } from 'components';
@@ -34,6 +34,7 @@ const ItemsActionsBar = ({
 
   onFilterChanged,
   selectedRows = [],
+  onBulkDelete,
 }) => {
   const { path } = useRouteMatch();
   const history = useHistory();
@@ -43,9 +44,11 @@ const ItemsActionsBar = ({
     <MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />
   ));
 
-  const onClickNewItem = () => {
+ 
+  const onClickNewItem = useCallback(() => {
     history.push('/items/new');
-  };
+  }, [history]);
+
   const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
     selectedRows,
   ]);
@@ -61,6 +64,11 @@ const ItemsActionsBar = ({
   const onClickNewCategory = useCallback(() => {
     openDialog('item-form', {});
   }, [openDialog]);
+  
+  const handleBulkDelete = useCallback(() => {
+    onBulkDelete && onBulkDelete(selectedRows.map(r => r.id));
+  }, [onBulkDelete, selectedRows]);
+
 
   return (
     <DashboardActionsBar>
@@ -116,9 +124,10 @@ const ItemsActionsBar = ({
         <If condition={hasSelectedRows}>
           <Button
             className={Classes.MINIMAL}
+            icon={<Icon icon='trash' iconSize={15} />}
+            text={<T id={'delete'}/>}
             intent={Intent.DANGER}
-            icon={<Icon icon='trash' />}
-            text={<T id={'delete'} />}
+            onClick={handleBulkDelete}
           />
         </If>
 
@@ -138,7 +147,7 @@ const ItemsActionsBar = ({
 };
 
 export default compose(
-  DialogConnect,
+  withDialog,
   withItems(({ itemsViews }) => ({
     itemsViews,
   })),
diff --git a/client/src/containers/Items/ItemsDataTable.js b/client/src/containers/Items/ItemsDataTable.js
index 948592498..5fe5e6260 100644
--- a/client/src/containers/Items/ItemsDataTable.js
+++ b/client/src/containers/Items/ItemsDataTable.js
@@ -137,6 +137,9 @@ const ItemsDataTable = ({
         onFetchData={handleFetchData}
         loading={itemsTableLoading && !initialMount}
         noInitialFetch={true}
+        expandable={true} 
+        treeGraph={true}
+        spinnerProps={{size: 30}}
         onSelectedRowsChange={handleSelectedRowsChange} />
     </LoadingIndicator>
   );
diff --git a/client/src/containers/Items/ItemsList.js b/client/src/containers/Items/ItemsList.js
index 9648b4519..e7e2a4df9 100644
--- a/client/src/containers/Items/ItemsList.js
+++ b/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>
diff --git a/client/src/containers/Items/withItemsActions.js b/client/src/containers/Items/withItemsActions.js
index 9be79e2e3..fc8cafe94 100644
--- a/client/src/containers/Items/withItemsActions.js
+++ b/client/src/containers/Items/withItemsActions.js
@@ -4,12 +4,14 @@ import {
   deleteItem,
   submitItem,
   editItem,
+  deleteBulkItems
 } from 'store/items/items.actions';
 import t from 'store/types';
 
 export const mapDispatchToProps = (dispatch) => ({
   requestFetchItems: (query) => dispatch(fetchItems({ query })),
   requestDeleteItem: (id) => dispatch(deleteItem({ id })),
+  requestDeleteBulkItems:(ids)=>dispatch(deleteBulkItems({ids})),
   requestSubmitItem: (form) => dispatch(submitItem({ form })),
   requestEditItem:(id,form) => dispatch(editItem({id,form})),
   addBulkActionItem: (id) => dispatch({
diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js
index b32e523f8..0d0e5a735 100644
--- a/client/src/lang/en/index.js
+++ b/client/src/lang/en/index.js
@@ -322,7 +322,10 @@ export default {
   organization_industry_:'Organization industry',
   base_currency_:'Base currency',
   date_format_:'Date format',
-  view_name_:'View name'
+  category_name_:'Category name',
+  view_name_:'View name',
+  the_items_has_been_successfully_deleted: 'The items have been successfully deleted.',
+  once_delete_these_items_you_will_not_able_restore_them: 'Once you delete these items, you won\'t be able to retrieve them later. Are you sure you want to delete them?',
 };
 
 
diff --git a/client/src/store/items/items.actions.js b/client/src/store/items/items.actions.js
index bbb1a3eef..461bd949b 100644
--- a/client/src/store/items/items.actions.js
+++ b/client/src/store/items/items.actions.js
@@ -76,3 +76,19 @@ export const deleteItem = ({ id }) => {
       }).catch((error) => { reject(error); });
   });
 };
+
+
+
+export const deleteBulkItems = ({ ids }) => {
+  return dispatch => new Promise((resolve, reject) => {
+    ApiService.delete(`items`, { params: { ids }}).then((response) => {
+      dispatch({
+        type: t.ITEMS_BULK_DELETE,
+        payload: { ids }
+      });
+      resolve(response);
+    }).catch((error) => {
+      reject(error);
+    });
+  });
+};
diff --git a/client/src/store/items/items.types.js b/client/src/store/items/items.types.js
index 3d9c5b621..44561af21 100644
--- a/client/src/store/items/items.types.js
+++ b/client/src/store/items/items.types.js
@@ -12,4 +12,6 @@ export default {
 
   ITEMS_TABLE_LOADING: 'ITEMS_TABLE_LOADING',
   ITEMS_SET_CURRENT_VIEW: 'ITEMS_SET_CURRENT_VIEW',
+  ITEMS_BULK_DELETE:'ITEMS_BULK_DELETE'
+
 };