Merge branch 'master' of https://github.com/abouolia/Ratteb

client/src/containers/Alerts/Item/InventoryAdjustmentDeleteAlert.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import {
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+  useIntl,
+} from 'react-intl';
+import { Intent, Alert } from '@blueprintjs/core';
+import { queryCache } from 'react-query';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withInventoryAdjustmentActions from 'containers/Items/withInventoryAdjustmentActions';
+
+import { compose } from 'utils';
+
+/**
+ * Inventory Adjustment delete alerts.
+ */
+function InventoryAdjustmentDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { inventoryId },
+  // #withInventoryAdjustmentActions
+  requestDeleteInventoryAdjustment,
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+
+  // handle cancel delete  alert.
+  const handleCancelInventoryAdjustmentDelete = () => {
+    closeAlert(name);
+  };
+
+  const handleConfirmInventoryAdjustmentDelete = () => {
+    requestDeleteInventoryAdjustment(inventoryId)
+      .then(() => {
+        closeAlert(name);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_adjustment_has_been_deleted_successfully',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('inventory-adjustment-list');
+      })
+      .catch((errors) => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelInventoryAdjustmentDelete}
+      onConfirm={handleConfirmInventoryAdjustmentDelete}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={
+            'once_delete_this_inventory_a_adjustment_you_will_able_to_restore_it'
+          }
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withInventoryAdjustmentActions,
+)(InventoryAdjustmentDeleteAlert);

client/src/containers/Alerts/Item/ItemActivateAlert.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import {
+  FormattedMessage as T,
+  useIntl,
+} from 'react-intl';
+import { Intent, Alert } from '@blueprintjs/core';
+import { queryCache } from 'react-query';
+import { AppToaster } from 'components';
+
+import withItemsActions from 'containers/Items/withItemsActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ *  Item activate alert.
+ */
+function ItemActivateAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { itemId },
+
+  // #withItemsActions
+  requestActivateItem,
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+
+  // Handle activate item alert cancel.
+  const handleCancelActivateItem = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm item activated.
+  const handleConfirmItemActivate = () => {
+    requestActivateItem(itemId)
+      .then(() => {
+        closeAlert(name);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_item_has_been_activated_successfully',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('items-table');
+      })
+      .catch((error) => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'activate'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelActivateItem}
+      onConfirm={handleConfirmItemActivate}
+    >
+      <p>
+        <T id={'are_sure_to_activate_this_item'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withItemsActions,
+)(ItemActivateAlert);

client/src/containers/Alerts/Item/ItemBulkDeleteAlert.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import withItemsActions from 'containers/Items/withItemsActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Item bulk delete alert.
+ */
+function ItemBulkDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { itemsIds },
+
+  // #withItemsActions
+  requestDeleteBulkItems,
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+
+  // handle cancel item bulk delete alert.
+  const handleCancelBulkDelete = () => {
+    closeAlert(name);
+  };
+  // Handle confirm items bulk delete.
+  const handleConfirmBulkDelete = () => {
+    requestDeleteBulkItems(itemsIds)
+      .then(() => {
+        closeAlert(name);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_items_has_been_deleted_successfully',
+          }),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((errors) => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={
+        <T id={'delete_count'} values={{ count: itemsIds.length }} />
+      }
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelBulkDelete}
+      onConfirm={handleConfirmBulkDelete}
+    >
+      <p>
+        <T id={'once_delete_these_items_you_will_not_able_restore_them'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withItemsActions,
+)(ItemBulkDeleteAlert);

client/src/containers/Alerts/Item/ItemCategoryBulkDeleteAlert.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+  useIntl,
+} from 'react-intl';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+
+import withItemCategoriesActions from 'containers/Items/withItemCategoriesActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Item category bulk delete alerts.
+ */
+function ItemCategoryBulkDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { itemCategoriesIds },
+
+  // #withItemCategoriesActions
+  requestDeleteBulkItemCategories,
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+
+  // handle cancel bulk delete alert.
+  const handleCancelBulkDelete = () => {
+    closeAlert(name);
+  };
+
+  // handle confirm itemCategories bulk delete.
+  const handleConfirmBulkDelete = () => {
+    requestDeleteBulkItemCategories(itemCategoriesIds)
+      .then(() => {
+        closeAlert(name);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_item_categories_has_been_deleted_successfully',
+          }),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((errors) => {
+        closeAlert(name);
+      });
+  };
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={
+        <T id={'delete_count'} values={{ count: itemCategoriesIds.length }} />
+      }
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelBulkDelete}
+      onConfirm={handleConfirmBulkDelete}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={
+            'once_delete_these_item_categories_you_will_not_able_restore_them'
+          }
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withItemCategoriesActions,
+)(ItemCategoryBulkDeleteAlert);

client/src/containers/Alerts/Item/ItemCategoryDeleteAlert.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import {
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+  useIntl,
+} from 'react-intl';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+import { queryCache } from 'react-query';
+
+import withItemCategoriesActions from 'containers/Items/withItemCategoriesActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Item Category delete alerts.
+ */
+function ItemCategoryDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { itemCategoryId },
+
+  // #withItemCategoriesActions
+  requestDeleteItemCategory,
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+
+  // handle cancel delete item category alert.
+  const handleCancelItemCategoryDelete = () => {
+    closeAlert(name);
+  };
+
+  // Handle alert confirm delete item category.
+  const handleConfirmItemDelete = () => {
+    requestDeleteItemCategory(itemCategoryId)
+      .then(() => {
+        closeAlert(name);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_item_category_has_been_deleted_successfully',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('items-categories-list');
+      })
+      .catch(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelItemCategoryDelete}
+      onConfirm={handleConfirmItemDelete}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={'once_delete_this_item_category_you_will_able_to_restore_it'}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withItemCategoriesActions,
+)(ItemCategoryDeleteAlert);

client/src/containers/Alerts/Item/ItemDeleteAlert.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import {
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+  useIntl,
+} from 'react-intl';
+import { Intent, Alert } from '@blueprintjs/core';
+import { queryCache } from 'react-query';
+import { AppToaster } from 'components';
+
+import { handleDeleteErrors } from 'containers/Items/utils';
+
+import withItemsActions from 'containers/Items/withItemsActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Item delete alerts.
+ */
+function ItemDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { itemId },
+
+  // #withItemsActions
+  requestDeleteItem,
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+
+  // handle cancel delete item alert.
+  const handleCancelItemDelete = () => {
+    closeAlert(name);
+  };
+
+  const handleConfirmDeleteItem = () => {
+    requestDeleteItem(itemId)
+      .then(() => {
+        closeAlert(name);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_item_has_been_deleted_successfully',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('items-table');
+      })
+      .catch(({ errors }) => {
+        handleDeleteErrors(errors);
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelItemDelete}
+      onConfirm={handleConfirmDeleteItem}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={'once_delete_this_item_you_will_able_to_restore_it'}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withItemsActions,
+)(ItemDeleteAlert);

client/src/containers/Alerts/Item/ItemInactivateAlert.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import {
+  FormattedMessage as T,
+  useIntl,
+} from 'react-intl';
+import { Intent, Alert } from '@blueprintjs/core';
+import { queryCache } from 'react-query';
+import { AppToaster } from 'components';
+
+import withItemsActions from 'containers/Items/withItemsActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Item inactivate alert.
+ */
+function ItemInactivateAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { itemId },
+
+  // #withItemsActions
+  requestInactiveItem,
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { formatMessage } = useIntl();
+
+  // handle cancel inactivate alert.
+  const handleCancelInactivateItem = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm item Inactive.
+  const handleConfirmItemInactive = () => {
+    requestInactiveItem(itemId)
+      .then(() => {
+        closeAlert(name);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_item_has_been_inactivated_successfully',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('items-table');
+      })
+      .catch((error) => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'inactivate'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleCancelInactivateItem}
+      onConfirm={handleConfirmItemInactive}
+    >
+      <p>
+        <T id={'are_sure_to_inactive_this_item'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withItemsActions,
+)(ItemInactivateAlert);

client/src/containers/Items/InventoryAdjustmentDataTable.js

@@ -175,22 +175,15 @@ function InventoryAdjustmentDataTable({
     },
     [addInventoryAdjustmentTableQueries],
   );
-  
-
+ 
   const handleSelectedRowsChange = useCallback(
     (selectedRows) => {
-      saveInvoke(
-        onSelectedRowsChange,
-        selectedRows.map((s) => s.original),
-      );
+      onSelectedRowsChange &&
+        onSelectedRowsChange(selectedRows.map((s) => s.original));
     },
     [onSelectedRowsChange],
   );
 
-  // const showEmptyStatus = [
-
-  // ].every((condition) => condition === true);
-
   return (
     <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
       <LoadingIndicator loading={inventoryAdjustmentLoading && !isLoadedBefore}>

client/src/containers/Items/InventoryAdjustmentList.js

@@ -1,19 +1,20 @@
-import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import { useQuery } from 'react-query';
-import { Alert, Intent } from '@blueprintjs/core';
+import { Route, Switch } from 'react-router-dom';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 
-import AppToaster from 'components/AppToaster';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 
+import ItemsAlerts from './ItemsAlerts';
 import InventoryAdjustmentDataTable from './InventoryAdjustmentDataTable';
+
 import withInventoryAdjustmentActions from './withInventoryAdjustmentActions';
 import withInventoryAdjustments from './withInventoryAdjustments';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
 
 import { compose } from 'utils';
-import { Route, Switch } from 'react-router-dom';
 
 /**
  * Inventory Adjustment List.
@@ -25,69 +26,33 @@ function InventoryAdjustmentList({
   // #withInventoryAdjustments
   inventoryAdjustmentTableQuery,
 
+  // #withAlertsActions.
+  openAlert,
+
   // #withInventoryAdjustmentsActions
   requestFetchInventoryAdjustmentTable,
-  requestDeleteInventoryAdjustment,
+  setSelectedRowsInventoryAdjustments,
 }) {
   const { formatMessage } = useIntl();
-  const [selectedRows, setSelectedRows] = useState([]);
-  const [deleteInventoryAdjustment, setDeleteInventoryAdjustment] = useState(
-    false,
-  );
 
   useEffect(() => {
     changePageTitle(formatMessage({ id: 'inventory_adjustment_list' }));
   }, [changePageTitle, formatMessage]);
 
   const fetchInventoryAdjustments = useQuery(
-    ['inventory-adjustment-list' ,inventoryAdjustmentTableQuery],
+    ['inventory-adjustment-list', inventoryAdjustmentTableQuery],
     (key, query) => requestFetchInventoryAdjustmentTable({ ...query }),
   );
 
   // Handle selected rows change.
-  const handleSelectedRowsChange = useCallback(
-    (inventory) => {
-      setSelectedRows(inventory);
-    },
-    [setSelectedRows],
-  );
-
-  const handleDeleteInventoryAdjustment = useCallback(
-    (adjustment) => {
-      setDeleteInventoryAdjustment(adjustment);
-    },
-    [setDeleteInventoryAdjustment],
-  );
-
-  const handleCancelInventoryAdjustmentDelete = useCallback(() => {
-    setDeleteInventoryAdjustment(false);
-  }, [setDeleteInventoryAdjustment]);
-
-  const handleConfirmInventoryAdjustmentDelete = useCallback(() => {
-    requestDeleteInventoryAdjustment(deleteInventoryAdjustment.id)
-      .then(() => {
-        setDeleteInventoryAdjustment(false);
-        AppToaster.show({
-          message: formatMessage({
-            id: 'the_adjustment_has_been_deleted_successfully',
-          }),
-          intent: Intent.SUCCESS,
-        });
-      })
-      .catch((errors) => {
-        setDeleteInventoryAdjustment(false);
-      });
-  }, [
-    deleteInventoryAdjustment,
-    requestDeleteInventoryAdjustment,
-    formatMessage,
-  ]);
-
-  // Calculates the data table selected rows count.
-  const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
-    selectedRows,
-  ]);
+  const handleSelectedRowsChange = (selectedRows) => {
+    const selectedRowsIds = selectedRows.map((r) => r.id);
+    setSelectedRowsInventoryAdjustments(selectedRowsIds);
+  };
 
+  const handleDeleteInventoryAdjustment = ({ id }) => {
+    openAlert('inventory-adjustment-delete', { inventoryId: id });
+  };
   return (
     <DashboardInsider name={'inventory_adjustments'}>
       <DashboardPageContent>
@@ -95,27 +60,10 @@ function InventoryAdjustmentList({
           <Route exact={true}>
             <InventoryAdjustmentDataTable
               onDeleteInventoryAdjustment={handleDeleteInventoryAdjustment}
-              onSelectedRowsChange={handleSelectedRowsChange}
             />
           </Route>
         </Switch>
-        <Alert
-          cancelButtonText={<T id={'cancel'} />}
-          confirmButtonText={<T id={'delete'} />}
-          icon={'trash'}
-          intent={Intent.DANGER}
-          isOpen={deleteInventoryAdjustment}
-          onCancel={handleCancelInventoryAdjustmentDelete}
-          onConfirm={handleConfirmInventoryAdjustmentDelete}
-        >
-          <p>
-            <T
-              id={
-                'once_delete_this_inventory_a_adjustment_you_will_able_to_restore_it'
-              }
-            />
-          </p>
-        </Alert>
+        <ItemsAlerts />
       </DashboardPageContent>
     </DashboardInsider>
   );
@@ -127,4 +75,5 @@ export default compose(
   withInventoryAdjustments(({ inventoryAdjustmentTableQuery }) => ({
     inventoryAdjustmentTableQuery,
   })),
+  withAlertsActions,
 )(InventoryAdjustmentList);

client/src/containers/Items/ItemCategoriesList.js

@@ -1,23 +1,20 @@
-import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import React, { useEffect, useCallback } 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, useIntl } from 'react-intl';
 
-import AppToaster from 'components/AppToaster';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
+
+import ItemsAlerts from './ItemsAlerts';
 import ItemCategoriesDataTable from 'containers/Items/ItemCategoriesTable';
 import ItemsCategoryActionsBar from 'containers/Items/ItemsCategoryActionsBar';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
-import withResourceActions from 'containers/Resources/withResourcesActions';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withItemCategoriesActions from 'containers/Items/withItemCategoriesActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+
 import { compose } from 'utils';
 
 /**
@@ -27,15 +24,12 @@ const ItemCategoryList = ({
   // #withDashboardActions
   changePageTitle,
 
-  // #withViewsActions
-  requestFetchResourceViews,
-  requestFetchResourceFields,
+  // #withAlertsActions.
+  openAlert,
 
   // #withItemCategoriesActions
   requestFetchItemCategories,
-  requestDeleteItemCategory,
-  requestDeleteBulkItemCategories,
-  addItemCategoriesTableQueries,
+  setSelectedRowsCategories,
 
   // #withDialog
   openDialog,
@@ -43,12 +37,6 @@ const ItemCategoryList = ({
   const { id } = useParams();
   const { formatMessage } = useIntl();
 
-  const [selectedRows, setSelectedRows] = useState([]);
-  const [filter, setFilter] = useState({});
-  const [deleteCategory, setDeleteCategory] = useState(false);
-  const [bulkDelete, setBulkDelete] = useState(false);
-  const [tableLoading, setTableLoading] = useState(false);
-
   useEffect(() => {
     id
       ? changePageTitle(formatMessage({ id: 'edit_category_details' }))
@@ -59,156 +47,35 @@ const ItemCategoryList = ({
     requestFetchItemCategories(),
   );
 
-  const fetchResourceFields = useQuery(
-    ['resource-fields', 'item_category'],
-    (key, resourceName) => requestFetchResourceFields(resourceName),
-  );
-
   const handleFilterChanged = useCallback(() => {}, []);
 
   // Handle selected rows change.
-  const handleSelectedRowsChange = useCallback(
-    (itemCategories) => {
-      setSelectedRows(itemCategories);
-    },
-    [setSelectedRows],
-  );
-
-  const handleFetchData = useCallback(
-    ({ pageIndex, pageSize, sortBy }) => {
-      const page = pageIndex + 1;
-
-      addItemCategoriesTableQueries({
-        ...(sortBy.length > 0
-          ? {
-              column_sort_by: sortBy[0].id,
-              sort_order: sortBy[0].desc ? 'desc' : 'asc',
-            }
-          : {}),
-        page_size: pageSize,
-        page,
-      });
-    },
-    [addItemCategoriesTableQueries],
-  );
-
-  const handleDeleteCategory = (itemCategory) => {
-    setDeleteCategory(itemCategory);
-  };
-  const handleCancelItemDelete = () => {
-    setDeleteCategory(false);
+  const handleSelectedRowsChange = (selectedRows) => {
+    const selectedRowsIds = selectedRows.map((r) => r.id);
+    setSelectedRowsCategories(selectedRowsIds);
   };
 
-  // Handle alert confirm delete item category.
-  const handleConfirmItemDelete = () => {
-    requestDeleteItemCategory(deleteCategory.id)
-      .then(() => {
-        setDeleteCategory(false);
-        AppToaster.show({
-          message: formatMessage({
-            id: 'the_item_category_has_been_deleted_successfully',
-          }),
-          intent: Intent.SUCCESS,
-        });
-      })
-      .catch(() => {
-        setDeleteCategory(false);
-      });
+  // Handle delete Item.
+  const handleDeleteCategory = ({ id }) => {
+    openAlert('item-category-delete', { itemCategoryId: id });
   };
 
+  // Handle Edit item category.
   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_deleted_successfully',
-          }),
-          intent: Intent.SUCCESS,
-        });
-      })
-      .catch((errors) => {
-        setBulkDelete(false);
-      });
-  }, [requestDeleteBulkItemCategories, bulkDelete, formatMessage]);
-
-  //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
-      loading={fetchResourceFields.isFetching || fetchCategories.isFetching}
-      name={'item-category-list'}
-    >
-      <ItemsCategoryActionsBar
-        selectedRows={selectedRows}
-        onFilterChanged={handleFilterChanged}
-        onBulkDelete={handleBulkDelete}
-      />
+    <DashboardInsider name={'item-category-list'}>
+      <ItemsCategoryActionsBar onFilterChanged={handleFilterChanged} />
       <DashboardPageContent>
         <ItemCategoriesDataTable
-          onEditCategory={handleEditCategory}
-          onFetchData={handleFetchData}
-          onSelectedRowsChange={handleSelectedRowsChange}
           onDeleteCategory={handleDeleteCategory}
+          onEditCategory={handleEditCategory}
+          onSelectedRowsChange={handleSelectedRowsChange}
         />
-
-        <Alert
-          cancelButtonText={<T id={'cancel'} />}
-          confirmButtonText={<T id={'delete'} />}
-          icon="trash"
-          intent={Intent.DANGER}
-          isOpen={deleteCategory}
-          onCancel={handleCancelItemDelete}
-          onConfirm={handleConfirmItemDelete}
-        >
-          <p>
-            <FormattedHTMLMessage
-              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>
       </DashboardPageContent>
+      <ItemsAlerts />
     </DashboardInsider>
   );
 };
@@ -217,5 +84,5 @@ export default compose(
   withItemCategoriesActions,
   withDashboardActions,
   withDialogActions,
-  withResourceActions,
+  withAlertsActions,
 )(ItemCategoryList);

client/src/containers/Items/ItemCategoriesTable.js

@@ -14,6 +14,7 @@ import classNames from 'classnames';
 import Icon from 'components/Icon';
 import LoadingIndicator from 'components/LoadingIndicator';
 import { compose } from 'utils';
+import { useIsValuePassed } from 'hooks';
 import DataTable from 'components/DataTable';
 
 import { CLASSES } from 'common/classes';
@@ -32,10 +33,10 @@ const ItemsCategoryList = ({
   // #ownProps
   onFetchData,
   onDeleteCategory,
-  onEditCategory,
   onSelectedRowsChange,
 }) => {
   const { formatMessage } = useIntl();
+  const isLoadedBefore = useIsValuePassed(categoriesTableLoading, false);
 
   const handelEditCategory = useCallback(
     (category) => () => {
@@ -143,7 +144,10 @@ const ItemsCategoryList = ({
 
   return (
     <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <LoadingIndicator mount={false}>
+      <LoadingIndicator
+        loading={categoriesTableLoading && !isLoadedBefore}
+        mount={false}
+      >
         <DataTable
           noInitialFetch={true}
           columns={columns}
@@ -154,7 +158,6 @@ const ItemsCategoryList = ({
           expandable={true}
           sticky={true}
           onSelectedRowsChange={handleSelectedRowsChange}
-          loading={categoriesTableLoading}
           rowContextMenu={handleRowContextMenu}
         />
       </LoadingIndicator>

client/src/containers/Items/ItemsActionsBar.js

@@ -22,6 +22,7 @@ import { If, DashboardActionViewsList } from 'components';
 import withResourceDetail from 'containers/Resources/withResourceDetails';
 import withItems from 'containers/Items/withItems';
 import withItemsActions from './withItemsActions';
+import withAlertActions from 'containers/Alert/withAlertActions';
 
 import { compose } from 'utils';
 import { connect } from 'react-redux';
@@ -32,27 +33,23 @@ const ItemsActionsBar = ({
 
   // #withItems
   itemsViews,
+  itemsSelectedRows,
 
   //#withItemActions
   addItemsTableQueries,
   changeItemsCurrentView,
 
+  // #withAlertActions
+  openAlert,
   onFilterChanged,
-  selectedRows = [],
-  onBulkDelete,
 }) => {
   const { formatMessage } = useIntl();
   const history = useHistory();
-  const [filterCount, setFilterCount] = useState(0);
 
   const onClickNewItem = useCallback(() => {
     history.push('/items/new');
   }, [history]);
 
-  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
-    selectedRows,
-  ]);
-
   const filterDropdown = FilterDropdown({
     fields: resourceFields,
     initialCondition: {
@@ -68,10 +65,6 @@ const ItemsActionsBar = ({
     },
   });
 
-  const handleBulkDelete = useCallback(() => {
-    onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id));
-  }, [onBulkDelete, selectedRows]);
-
   const handleTabChange = (viewId) => {
     changeItemsCurrentView(viewId.id || -1);
     addItemsTableQueries({
@@ -79,6 +72,11 @@ const ItemsActionsBar = ({
     });
   };
 
+  // Handle cancel/confirm items bulk.
+  const handleBulkDelete = () => {
+    openAlert('items-bulk-delete', { itemsIds: itemsSelectedRows });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -105,18 +103,12 @@ const ItemsActionsBar = ({
         >
           <Button
             className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={
-              filterCount <= 0 ? (
-                <T id={'filter'} />
-              ) : (
-                `${filterCount} ${formatMessage({ id: 'filters_applied' })}`
-              )
-            }
+            text={`${formatMessage({ id: 'filters_applied' })}`}
             icon={<Icon icon="filter-16" iconSize={16} />}
           />
         </Popover>
 
-        <If condition={hasSelectedRows}>
+        <If condition={itemsSelectedRows.length}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon="trash-16" iconSize={16} />}
@@ -149,11 +141,13 @@ const withItemsActionsBar = connect(mapStateToProps);
 
 export default compose(
   withItemsActionsBar,
-  withItems(({ itemsViews }) => ({
+  withItems(({ itemsViews, itemsSelectedRows }) => ({
     itemsViews,
+    itemsSelectedRows,
   })),
   withResourceDetail(({ resourceFields }) => ({
     resourceFields,
   })),
   withItemsActions,
+  withAlertActions,
 )(ItemsActionsBar);

client/src/containers/Items/ItemsAlerts.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import ItemDeleteAlert from 'containers/Alerts/Item/ItemDeleteAlert';
+import ItemInactivateAlert from 'containers/Alerts/Item/ItemInactivateAlert';
+import ItemActivateAlert from 'containers/Alerts/Item/ItemActivateAlert';
+import ItemBulkDeleteAlert from 'containers/Alerts/Item/ItemBulkDeleteAlert';
+import ItemCategoryDeleteAlert from 'containers/Alerts/Item/ItemCategoryDeleteAlert';
+import ItemCategoryBulkDeleteAlert from 'containers/Alerts/Item/ItemCategoryBulkDeleteAlert';
+import InventoryAdjustmentDeleteAlert from 'containers/Alerts/Item/InventoryAdjustmentDeleteAlert';
+
+/**
+ * Items alert.
+ */
+export default function ItemsAlerts() {
+  return (
+    <div>
+      <ItemDeleteAlert name={'item-delete'} />
+      <ItemInactivateAlert name={'item-inactivate'} />
+      <ItemActivateAlert name={'item-activate'} />
+      <ItemBulkDeleteAlert name={'items-bulk-delete'} />
+      <ItemCategoryDeleteAlert name={'item-category-delete'} />
+      <ItemCategoryBulkDeleteAlert name={'item-categories-bulk-delete'} />
+      <InventoryAdjustmentDeleteAlert name={'inventory-adjustment-delete'} />
+    </div>
+  );
+}

client/src/containers/Items/ItemsCategoryActionsBar.js

@@ -11,38 +11,29 @@ import {
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
 import classNames from 'classnames';
-import { connect } from 'react-redux';
 import { If, Icon } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-import FilterDropdown from 'components/FilterDropdown';
 
-import withResourceDetail from 'containers/Resources/withResourceDetails';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
 import withItemCategories from './withItemCategories';
 import withItemCategoriesActions from './withItemCategoriesActions';
+import withAlertActions from 'containers/Alert/withAlertActions';
 
 import { compose } from 'utils';
 
 const ItemsCategoryActionsBar = ({
-  // #withResourceDetail
-  resourceFields,
-
   // #withDialog
   openDialog,
 
   // #withItemCategories
-  categoriesViews,
+  itemCategoriesSelectedRows,
 
-  // #withItemCategoriesActions
-  addItemCategoriesTableQueries,
+  // #withAlertActions
+  openAlert,
 
-  // #ownProps
-  selectedRows = [],
-  onFilterChanged,
-  onBulkDelete,
 }) => {
   const [filterCount, setFilterCount] = useState(0);
 
@@ -50,30 +41,12 @@ const ItemsCategoryActionsBar = ({
     openDialog('item-category-form', {});
   }, [openDialog]);
 
-  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
-    selectedRows,
-  ]);
-
-  // const filterDropdown = FilterDropdown({
-  //   fields: resourceFields,
-  //   initialCondition: {
-  //     fieldKey: 'name',
-  //     compatator: 'contains',
-  //     value: '',
-  //   },
-  //   onFilterChange: (filterConditions) => {
-  //     setFilterCount(filterConditions.length || 0);
-  //     addItemCategoriesTableQueries({
-  //       filter_roles: filterConditions || '',
-  //     });
-  //     onFilterChanged && onFilterChanged(filterConditions);
-  //   },
-  // });
-
-  const handelBulkDelete = useCallback(() => {
-    onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id));
-  }, [onBulkDelete, selectedRows]);
-
+  const handelBulkDelete = () => {
+    openAlert('item-categories-bulk-delete', {
+      itemCategoriesIds: itemCategoriesSelectedRows,
+    });
+  };
+  console.log(itemCategoriesSelectedRows, 'EE');
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -105,7 +78,7 @@ const ItemsCategoryActionsBar = ({
           />
         </Popover>
 
-        <If condition={hasSelectedRows}>
+        <If condition={itemCategoriesSelectedRows.length}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon="trash-16" iconSize={16} />}
@@ -130,20 +103,12 @@ const ItemsCategoryActionsBar = ({
   );
 };
 
-const mapStateToProps = (state, props) => ({
-  resourceName: 'items_categories',
-});
-const withItemsCategoriesActionsBar = connect(mapStateToProps);
-
 export default compose(
-  withItemsCategoriesActionsBar,
   withDialogActions,
   withDashboardActions,
-  withResourceDetail(({ resourceFields }) => ({
-    resourceFields,
+  withItemCategories(({ itemCategoriesSelectedRows }) => ({
+    itemCategoriesSelectedRows,
   })),
-  // withItemCategories(({ categoriesViews }) => ({
-  //   categoriesViews,
-  // })),
   withItemCategoriesActions,
+  withAlertActions,
 )(ItemsCategoryActionsBar);

client/src/containers/Items/ItemsList.js

@@ -1,22 +1,15 @@
 import React, { useEffect, useCallback, useState, useMemo } from 'react';
-import { Route, Switch, useHistory } from 'react-router-dom';
-import { Intent, Alert } from '@blueprintjs/core';
-import { useQuery, queryCache } from 'react-query';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import { useQuery } from 'react-query';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { compose } from 'utils';
 
-import ItemsViewsTabs from 'containers/Items/ItemsViewsTabs';
-import ItemsDataTable from './ItemsDataTable';
+import ItemsViewPage from './ItemsViewPage';
 import ItemsActionsBar from 'containers/Items/ItemsActionsBar';
+import ItemsAlerts from './ItemsAlerts';
 
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
-import AppToaster from 'components/AppToaster';
 
 import withItems from 'containers/Items/withItems';
 import withResourceActions from 'containers/Resources/withResourcesActions';
@@ -41,21 +34,10 @@ function ItemsList({
   itemsTableQuery,
 
   // #withItemsActions
-  requestDeleteItem,
   requestFetchItems,
-  requestInactiveItem,
-  requestActivateItem,
   addItemsTableQueries,
-  requestDeleteBulkItems,
 }) {
-  const [deleteItem, setDeleteItem] = useState(false);
-  const [inactiveItem, setInactiveItem] = useState(false);
-  const [activateItem, setActivateItem] = useState(false);
-  const [selectedRows, setSelectedRows] = useState([]);
-  const [bulkDelete, setBulkDelete] = useState(false);
-
   const { formatMessage } = useIntl();
-  const history = useHistory();
 
   useEffect(() => {
     changePageTitle(formatMessage({ id: 'items_list' }));
@@ -78,76 +60,6 @@ function ItemsList({
     requestFetchItems({ ..._query }),
   );
 
-  // Handle click delete item.
-  const handleDeleteItem = useCallback(
-    (item) => {
-      setDeleteItem(item);
-    },
-    [setDeleteItem],
-  );
-
-  const handleEditItem = useCallback(
-    (item) => {
-      history.push(`/items/${item.id}/edit`);
-    },
-    [history],
-  );
-
-  // Handle cancel delete the item.
-  const handleCancelDeleteItem = useCallback(() => {
-    setDeleteItem(false);
-  }, [setDeleteItem]);
-
-  const handleDeleteErrors = (errors) => {
-    if (
-      errors.find((error) => error.type === 'ITEM_HAS_ASSOCIATED_TRANSACTINS')
-    ) {
-      AppToaster.show({
-        message: formatMessage({
-          id: 'the_item_has_associated_transactions',
-        }),
-        intent: Intent.DANGER,
-      });
-    }
-
-    if (
-      errors.find(
-        (error) => error.type === 'ITEM_HAS_ASSOCIATED_INVENTORY_ADJUSTMENT',
-      )
-    ) {
-      AppToaster.show({
-        message: formatMessage({
-          id:
-            'you_could_not_delete_item_that_has_associated_inventory_adjustments_transacions',
-        }),
-        intent: Intent.DANGER,
-      });
-    }
-  };
-
-  // handle confirm delete item.
-  const handleConfirmDeleteItem = useCallback(() => {
-    requestDeleteItem(deleteItem.id)
-      .then(() => {
-        AppToaster.show({
-          message: formatMessage({
-            id: 'the_item_has_been_deleted_successfully',
-          }),
-          intent: Intent.SUCCESS,
-        });
-        queryCache.invalidateQueries('items-table');
-        setDeleteItem(false);
-      })
-      .catch(({ errors }) => {
-        setDeleteItem(false);
-        handleDeleteErrors(errors);
-      });
-  }, [requestDeleteItem, deleteItem, formatMessage]);
-
-  const handleFetchData = useCallback(({ pageIndex, pageSize, sortBy }) => {}, [
-    addItemsTableQueries,
-  ]);
-
   // Handle filter change to re-fetch the items.
   const handleFilterChanged = useCallback(
     (filterConditions) => {
@@ -158,193 +70,17 @@ function ItemsList({
     [addItemsTableQueries],
   );
 
-  // Handle selected rows change.
-  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_deleted_successfully',
-          }),
-          intent: Intent.SUCCESS,
-        });
-      })
-      .catch((errors) => {
-        setBulkDelete(false);
-      });
-  }, [requestDeleteBulkItems, bulkDelete, formatMessage]);
-
-  // Handle cancel accounts bulk delete.
-  const handleCancelBulkDelete = useCallback(() => {
-    setBulkDelete(false);
-  }, []);
-
-  // Handle cancel/confirm item inactive.
-  const handleInactiveItem = useCallback((item) => {
-    setInactiveItem(item);
-  }, []);
-
-  // Handle cancel inactive item alert.
-  const handleCancelInactiveItem = useCallback(() => {
-    setInactiveItem(false);
-  }, []);
-
-  // Handle confirm item Inactive.
-  const handleConfirmItemInactive = useCallback(() => {
-    requestInactiveItem(inactiveItem.id)
-      .then(() => {
-        setInactiveItem(false);
-        AppToaster.show({
-          message: formatMessage({
-            id: 'the_item_has_been_inactivated_successfully',
-          }),
-          intent: Intent.SUCCESS,
-        });
-        queryCache.invalidateQueries('items-table');
-      })
-      .catch((error) => {
-        setInactiveItem(false);
-      });
-  }, [inactiveItem, requestInactiveItem, formatMessage]);
-
-  // Handle activate item click.
-  const handleActivateItem = useCallback((item) => {
-    setActivateItem(item);
-  });
-
-  // Handle activate item alert cancel.
-  const handleCancelActivateItem = useCallback(() => {
-    setActivateItem(false);
-  });
-
-  // Handle activate item confirm.
-  const handleConfirmItemActivate = useCallback(() => {
-    requestActivateItem(activateItem.id)
-      .then(() => {
-        setActivateItem(false);
-        AppToaster.show({
-          message: formatMessage({
-            id: 'the_item_has_been_activated_successfully',
-          }),
-          intent: Intent.SUCCESS,
-        });
-        queryCache.invalidateQueries('items-table');
-      })
-      .catch((error) => {
-        setActivateItem(false);
-      });
-  }, [activateItem, requestActivateItem, formatMessage]);
-
   return (
     <DashboardInsider
       loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
       name={'items-list'}
     >
-      <ItemsActionsBar
-        selectedRows={selectedRows}
-        onFilterChanged={handleFilterChanged}
-        onBulkDelete={handleBulkDelete}
-      />
+      <ItemsActionsBar onFilterChanged={handleFilterChanged} />
 
       <DashboardPageContent>
-        <Switch>
-          <Route
-            exact={true}
-            path={['/items/:custom_view_id/custom_view', '/items']}
-          >
-            <ItemsViewsTabs />
-
-            <ItemsDataTable
-              onDeleteItem={handleDeleteItem}
-              onEditItem={handleEditItem}
-              onInactiveItem={handleInactiveItem}
-              onActivateItem={handleActivateItem}
-              onSelectedRowsChange={handleSelectedRowsChange}
-              itemsViewLoading={fetchItems.isFetching}
-            />
-            <Alert
-              cancelButtonText={<T id={'cancel'} />}
-              confirmButtonText={<T id={'delete'} />}
-              icon="trash"
-              intent={Intent.DANGER}
-              isOpen={deleteItem}
-              onCancel={handleCancelDeleteItem}
-              onConfirm={handleConfirmDeleteItem}
-            >
-              <p>
-                <FormattedHTMLMessage
-                  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>
-            <Alert
-              cancelButtonText={<T id={'cancel'} />}
-              confirmButtonText={<T id={'inactivate'} />}
-              intent={Intent.WARNING}
-              isOpen={inactiveItem}
-              onCancel={handleCancelInactiveItem}
-              onConfirm={handleConfirmItemInactive}
-            >
-              <p>
-                <T id={'are_sure_to_inactive_this_item'} />
-              </p>
-            </Alert>
-            <Alert
-              cancelButtonText={<T id={'cancel'} />}
-              confirmButtonText={<T id={'activate'} />}
-              intent={Intent.WARNING}
-              isOpen={activateItem}
-              onCancel={handleCancelActivateItem}
-              onConfirm={handleConfirmItemActivate}
-            >
-              <p>
-                <T id={'are_sure_to_activate_this_item'} />
-              </p>
-            </Alert>
-          </Route>
-        </Switch>
+        <ItemsViewPage />
       </DashboardPageContent>
+      <ItemsAlerts />
     </DashboardInsider>
   );
 }

client/src/containers/Items/ItemsViewPage.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Switch, Route, useHistory } from 'react-router-dom';
+
+import ItemsViewsTabs from 'containers/Items/ItemsViewsTabs';
+import ItemsDataTable from 'containers/Items/ItemsDataTable';
+import withItemsActions from 'containers/Items/withItemsActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import { compose } from 'utils';
+
+function ItemsViewPage({
+  // #withAlertsActions.
+  openAlert,
+
+  // #withItemsActions.
+  setSelectedRowsItems,
+}) {
+  const history = useHistory();
+
+  // Handle delete action Item.
+  const handleDeleteItem = ({ id }) => {
+    openAlert('item-delete', { itemId: id });
+  };
+
+  // Handle cancel/confirm item inactive.
+  const handleInactiveItem = ({ id }) => {
+    openAlert('item-inactivate', { itemId: id });
+  };
+
+  // Handle cancel/confirm item activate.
+  const handleActivateItem = ({ id }) => {
+    openAlert('item-activate', { itemId: id });
+  };
+
+  // Handle select item rows.
+  const handleSelectedRowsChange = (selectedRows) => {
+    const selectedRowsIds = selectedRows.map((r) => r.id);
+    setSelectedRowsItems(selectedRowsIds);
+  };
+
+  // Handle Edit item.
+  const handleEditItem = ({ id }) => {
+    history.push(`/items/${id}/edit`);
+  };
+
+  return (
+    <Switch>
+      <Route
+        exact={true}
+        path={['/items/:custom_view_id/custom_view', '/items']}
+      >
+        <ItemsViewsTabs />
+
+        <ItemsDataTable
+          onDeleteItem={handleDeleteItem}
+          onEditItem={handleEditItem}
+          onInactiveItem={handleInactiveItem}
+          onActivateItem={handleActivateItem}
+          onSelectedRowsChange={handleSelectedRowsChange}
+        />
+      </Route>
+    </Switch>
+  );
+}
+
+export default compose(withAlertsActions, withItemsActions)(ItemsViewPage);

client/src/containers/Items/utils.js

@@ -1,10 +1,40 @@
-import { formatMessage } from "services/intl";
+import { formatMessage } from 'services/intl';
+import { Intent } from '@blueprintjs/core';
+import { AppToaster } from 'components';
 
 export const transitionItemTypeKeyToLabel = (itemTypeKey) => {
   const table = {
-    'service': formatMessage({ id: 'service' }),
-    'inventory': formatMessage({ id: 'inventory' }),
+    service: formatMessage({ id: 'service' }),
+    inventory: formatMessage({ id: 'inventory' }),
     'non-inventory': formatMessage({ id: 'non_inventory' }),
   };
   return typeof table[itemTypeKey] === 'string' ? table[itemTypeKey] : '';
-};
+};
+
+// handle delete errors.
+export const handleDeleteErrors = (errors) => {
+  if (
+    errors.find((error) => error.type === 'ITEM_HAS_ASSOCIATED_TRANSACTINS')
+  ) {
+    AppToaster.show({
+      message: formatMessage({
+        id: 'the_item_has_associated_transactions',
+      }),
+      intent: Intent.DANGER,
+    });
+  }
+
+  if (
+    errors.find(
+      (error) => error.type === 'ITEM_HAS_ASSOCIATED_INVENTORY_ADJUSTMENT',
+    )
+  ) {
+    AppToaster.show({
+      message: formatMessage({
+        id:
+          'you_could_not_delete_item_that_has_associated_inventory_adjustments_transacions',
+      }),
+      intent: Intent.DANGER,
+    });
+  }
+};

client/src/containers/Items/withInventoryAdjustments.js

@@ -27,6 +27,7 @@ export default (mapState) => {
         query,
       ),
       inventoryAdjustmentLoading: state.inventoryAdjustments.loading,
+      inventoryAdjustmentsSelectedRows: state.inventoryAdjustments.selectedRows,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/Items/withItemCategories.js

@@ -10,6 +10,7 @@ export default (mapState) => {
       categoriesList: getItemsCategoriesList(state, props),
       itemCategoriesViews: getResourceViews(state, props, 'items_categories'),
       categoriesTableLoading: state.itemCategories.loading,
+      itemCategoriesSelectedRows: state.itemCategories.selectedRows,
     };
     return mapState ? mapState(mapped, state, props) : mapState;
   };

client/src/containers/Items/withItemCategoriesActions.js

@@ -28,6 +28,11 @@ export const mapDispatchToProps = (dispatch) => ({
       type: t.ITEM_CATEGORIES_TABLE_QUERIES_ADD,
       queries,
     }),
+  setSelectedRowsCategories: (selectedRows) =>
+    dispatch({
+      type: t.ITEM_CATEGORY_SELECTED_ROW_SET,
+      payload: { selectedRows },
+    }),
 });
 
 export default connect(null, mapDispatchToProps);

client/src/containers/Items/withItems.js

@@ -21,6 +21,7 @@ export default (mapState) => {
       itemsCurrentPage: getItemsCurrentPage(state, props),
       itemsBulkSelected: state.items.bulkActions,
       itemsTableLoading: state.items.loading,
+      itemsSelectedRows: state.items.selectedRows,
       itemsTableQuery: getItemsTableQuery(state, props),
       itemsPagination: getItemsPaginationMeta(state, props),
       itemsCurrentViewId: getItemsCurrentViewId(state, props),

client/src/containers/Items/withItemsActions.js

@@ -17,7 +17,7 @@ export const mapDispatchToProps = (dispatch) => ({
   requestDeleteItem: (id) => dispatch(deleteItem({ id })),
   requestDeleteBulkItems: (ids) => dispatch(deleteBulkItems({ ids })),
   requestSubmitItem: (form) => dispatch(submitItem({ form })),
-  requestEditItem: (id, form) => dispatch(editItem( id, form )),
+  requestEditItem: (id, form) => dispatch(editItem(id, form)),
   requestInactiveItem: (id) => dispatch(inactiveItem({ id })),
   requestActivateItem: (id) => dispatch(activateItem({ id })),
   addBulkActionItem: (id) =>
@@ -47,6 +47,11 @@ export const mapDispatchToProps = (dispatch) => ({
       type: t.ITEMS_SET_CURRENT_VIEW,
       currentViewId: parseInt(id, 10),
     }),
+  setSelectedRowsItems: (selectedRows) =>
+    dispatch({
+      type: t.ITEM_SELECTED_ROWS_SET,
+      payload: { selectedRows },
+    }),
 });
 
 export default connect(null, mapDispatchToProps);

client/src/store/inventoryAdjustments/inventoryAdjustment.reducer.js

@@ -14,6 +14,7 @@ const initialState = {
     page_size: 12,
     page: 1,
   },
+  selectedRows: [],
 };
 
 export default createReducer(initialState, {
@@ -62,6 +63,10 @@ export default createReducer(initialState, {
   [t.INVENTORY_ADJUSTMENTS_SET_CURRENT_VIEW]: (state, action) => {
     state.currentViewId = action.currentViewId;
   },
+  [t.INVENTORY_ADJUSTMENTS_SELECTED_ROW_SET]: (state, action) => {
+    const { selectedRows } = action.payload;
+    state.selectedRows = selectedRows;
+  },
 
   ...viewPaginationSetReducer(t.INVENTORY_ADJUSTMENTS_PAGINATION_SET),
   ...createTableQueryReducers('INVENTORY_ADJUSTMENTS'),

client/src/store/inventoryAdjustments/inventoryAdjustment.type.js

@@ -6,9 +6,10 @@ export default {
 
   INVENTORY_ADJUSTMENTS_PAGINATION_SET: 'INVENTORY_ADJUSTMENTS_PAGINATION_SET',
 
-
   INVENTORY_ADJUSTMENTS_TABLE_QUERIES_ADD:
     'INVENTORY_ADJUSTMENTS/TABLE_QUERIES_ADD',
   INVENTORY_ADJUSTMENTS_SET_CURRENT_VIEW:
     'INVENTORY_ADJUSTMENTS_SET_CURRENT_VIEW',
+  INVENTORY_ADJUSTMENTS_SELECTED_ROW_SET:
+    'INVENTORY_ADJUSTMENTS_SELECTED_ROW_SET',
 };

client/src/store/itemCategories/itemsCategory.reducer.js

@@ -4,6 +4,7 @@ import { createReducer } from '@reduxjs/toolkit';
 const initialState = {
   categories: {},
   loading: false,
+  selectedRows: [],
 };
 
 export default createReducer(initialState, {
@@ -45,6 +46,11 @@ export default createReducer(initialState, {
     });
     state.categories = categories;
   },
+  
+  [t.ITEM_CATEGORY_SELECTED_ROW_SET]: (state, action) => {
+    const { selectedRows } = action.payload;
+    state.selectedRows = selectedRows;
+  },
 });
 
 export const getCategoryId = (state, id) => {

client/src/store/itemCategories/itemsCategory.type.js

@@ -6,4 +6,5 @@ export default {
   ITEM_CATEGORIES_BULK_DELETE: 'ITEM_CATEGORIES_BULK_DELETE',
   ITEM_CATEGORIES_TABLE_QUERIES_ADD: 'ITEM_CATEGORIES_TABLE_QUERIES_ADD',
   ITEM_CATEGORIES_SET_CURRENT_VIEW: 'ITEM_CATEGORIES_SET_CURRENT_VIEW',
+  ITEM_CATEGORY_SELECTED_ROW_SET: 'ITEM_CATEGORY_SELECTED_ROW_SET',
 };

client/src/store/items/items.reducer.js

@@ -18,6 +18,7 @@ const initialState = {
     page_size: 12,
     page: 1,
   },
+  selectedRows: [],
 };
 
 export default createReducer(initialState, {
@@ -58,6 +59,11 @@ export default createReducer(initialState, {
   [t.ITEM_BULK_ACTION_ADD]: (state, action) => {
     state.bulkActions[action.itemId] = true;
   },
+  
+  [t.ITEM_SELECTED_ROWS_SET]: (state, action) => {
+    const { selectedRows } = action.payload;
+    state.selectedRows = selectedRows;
+  },
 
   [t.ITEM_BULK_ACTION_REMOVE]: (state, action) => {
     delete state.bulkActions[action.itemId];

client/src/store/items/items.types.js

@@ -13,4 +13,5 @@ export default {
   ITEMS_TABLE_LOADING: 'ITEMS_TABLE_LOADING',
   ITEMS_SET_CURRENT_VIEW: 'ITEMS_SET_CURRENT_VIEW',
   ITEMS_BULK_DELETE: 'ITEMS_BULK_DELETE',
+  ITEM_SELECTED_ROWS_SET: 'ITEM_SELECTED_ROWS_SET',
 };