feat: content & item detail.

client/src/containers/Items/ItemsDataTable.js

@@ -12,6 +12,7 @@ import withItems from 'containers/Items/withItems';
 import withItemsActions from 'containers/Items/withItemsActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { useItemsListContext } from './ItemsListProvider';
 import { useItemsTableColumns, ItemsActionMenuList } from './components';
@@ -30,6 +31,9 @@ function ItemsDataTable({
   // #withAlertsActions
   openAlert,
 
+  // #withDrawerActions
+  openDrawer,
+
   // #withItems
   itemsTableState,
 
@@ -93,6 +97,11 @@ function ItemsDataTable({
     history.push(`/items/new?duplicate=${id}`, { action: id });
   };
 
+  // Handle view detail item.
+  const handleViewDetailItem = ({ id }) => {
+    openDrawer('item-detail-drawer', { itemId: id });
+  };
+
   // Cannot continue in case the items has empty status.
   if (isEmptyStatus) {
     return <ItemsEmptyStatus />;
@@ -129,6 +138,7 @@ function ItemsDataTable({
         onActivateItem: handleActivateItem,
         onMakeAdjustment: handleMakeAdjustment,
         onDuplicate: handleDuplicate,
+        onViewDetails: handleViewDetailItem,
       }}
       noResults={<T id={'there_is_no_items_in_the_table_yet'} />}
       {...tableProps}
@@ -139,6 +149,7 @@ function ItemsDataTable({
 export default compose(
   withItemsActions,
   withAlertsActions,
+  withDrawerActions,
   withDialogActions,
   withItems(({ itemsTableState }) => ({ itemsTableState })),
 )(ItemsDataTable);

client/src/containers/Items/components.js

@@ -10,7 +10,7 @@ import {
   Popover,
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import {  FormattedMessage as T } from 'components';
+import { FormattedMessage as T } from 'components';
 import { isNumber } from 'lodash';
 import { Icon, Money, If } from 'components';
 import { isBlank, safeCallback } from 'utils';
@@ -80,14 +80,15 @@ export function ItemsActionMenuList({
     onMakeAdjustment,
     onDeleteItem,
     onDuplicate,
+    onViewDetails,
   },
 }) {
-  
   return (
     <Menu>
       <MenuItem
         icon={<Icon icon="reader-18" />}
         text={<T id={'view_details'} />}
+        onClick={safeCallback(onViewDetails, original)}
       />
       <MenuDivider />
       <MenuItem