feat: item read-only details drawer style.

client/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import ItemDetailActionsBar from './ItemDetailActionsBar';
+import ItemDetailHeader from './ItemDetailHeader';
+
+import { Card } from 'components';
+
+/**
+ * Item detail.
+ */
+export default function ItemDetail() {
+  return (
+    <div className="item-drawer">
+      <ItemDetailActionsBar />
+
+      <Card>
+        <ItemDetailHeader />
+      </Card>
+    </div>
+  );
+}

client/src/containers/Drawers/ItemDetailDrawer/ItemDetail.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import { useItemDetailDrawerContext } from './ItemDetailDrawerProvider';
-import ItemDetailActionsBar from './ItemDetailActionsBar';
-import ItemDetailList from './ItemDetailList';
-import { Card } from 'components';
-
-/**
- * Item detail.
- */
-export default function ItemDetail() {
-  const { itemId, item } = useItemDetailDrawerContext();
-
-  return (
-    <div className="view-detail-drawer">
-      <ItemDetailActionsBar itemId={itemId} />
-      <Card>
-        <ItemDetailList item={item} />
-      </Card>
-    </div>
-  );
-}

client/src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.js

@@ -9,38 +9,39 @@ import {
 } from '@blueprintjs/core';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
+import { useItemDetailDrawerContext } from './ItemDetailDrawerProvider';
+
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { Icon, FormattedMessage as T } from 'components';
 
-import { safeCallback, compose } from 'utils';
+import { compose } from 'utils';
 
+/**
+ * Item action-bar of readonly details drawer.
+ */
 function ItemDetailActionsBar({
-  itemId,
-
   // #withAlertsActions
   openAlert,
 
   // #withDrawerActions
   closeDrawer,
 }) {
+  // Item readonly drawer context.
+  const { itemId } = useItemDetailDrawerContext();
+
   const history = useHistory();
 
   // Handle edit item.
-  const onEditItem = () => {
+  const handleEditItem = () => {
-    return itemId
+    history.push(`/items/${itemId}/edit`);
-      ? (history.push(`/items/${itemId}/edit`),
+    closeDrawer('item-detail-drawer');
-        closeDrawer('item-detail-drawer'))
-      : null;
   };
 
   // Handle delete item.
-  const onDeleteItem = () => {
+  const handleDeleteItem = () => {
-    return itemId
+    openAlert('item-delete', { itemId });
-      ? (openAlert('item-delete', { itemId }),
-        closeDrawer('item-detail-drawer'))
-      : null;
   };
 
   return (
@@ -50,7 +51,7 @@ function ItemDetailActionsBar({
           className={Classes.MINIMAL}
           icon={<Icon icon="pen-18" />}
           text={<T id={'edit_item'} />}
-          onClick={safeCallback(onEditItem)}
+          onClick={handleEditItem}
         />
         <NavbarDivider />
         <Button
@@ -58,7 +59,7 @@ function ItemDetailActionsBar({
           icon={<Icon icon={'trash-16'} iconSize={16} />}
           text={<T id={'delete'} />}
           intent={Intent.DANGER}
-          onClick={safeCallback(onDeleteItem)}
+          onClick={handleDeleteItem}
         />
       </NavbarGroup>
     </DashboardActionsBar>

client/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerContent.js

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
+import 'style/components/Drawers/ItemDrawer.scss';
 
-import ItemDetail from './ItemDetail';
+import ItemContentDetails from './ItemContentDetails';
 import { ItemDetailDrawerProvider } from './ItemDetailDrawerProvider';
 
 /**
@@ -10,11 +10,11 @@ import { ItemDetailDrawerProvider } from './ItemDetailDrawerProvider';
  */
 export default function ItemDetailDrawerContent({
   // #ownProp
-  item,
+  itemId,
 }) {
   return (
-    <ItemDetailDrawerProvider itemId={item}>
+    <ItemDetailDrawerProvider itemId={itemId}>
-      <ItemDetail />
+      <ItemContentDetails />
     </ItemDetailDrawerProvider>
   );
 }

client/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js

@@ -17,6 +17,7 @@ function ItemDetailDrawerProvider({ itemId, ...props }) {
   const provider = {
     item,
     itemId,
+    isItemLoading,
   };
 
   return (

client/src/containers/Drawers/ItemDetailDrawer/ItemDetailHeader.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { defaultTo } from 'lodash';
+import classNames from 'classnames';
+
+import { If, DetailsMenu, DetailItem } from 'components';
+import { useItemDetailDrawerContext } from './ItemDetailDrawerProvider';
+
+/**
+ * Item header drawer of readonly details.
+ */
+export default function ItemDetailHeader() {
+  const { item } = useItemDetailDrawerContext();
+
+  return (
+    <div class="item-drawer__content">
+      <DetailsMenu direction={'vertical'}>
+        <DetailItem
+          name={'name'}
+          label={intl.get('item_name')}
+          children={item.name}
+        />
+        <DetailItem
+          label={intl.get('sell_price')}
+          children={item.sell_price_formatted}
+        />
+        <DetailItem
+          label={intl.get('cost_price')}
+          children={item.cost_price_formatted}
+        />
+      </DetailsMenu>
+
+      <DetailsMenu direction={'horizantal'}>
+        <DetailItem label={intl.get('item_type')} children={item.type} />
+        <DetailItem
+          label={intl.get('item_code')}
+          children={defaultTo(item.code, '-')}
+        />
+        <If condition={item.type === 'inventory'}>
+          <DetailItem name={'quantity'} label={intl.get('quantity_on_hand')}>
+            <span
+              className={classNames({
+                mines: item.quantity_on_hand <= 0,
+                plus: item.quantity_on_hand > 0,
+              })}
+            >
+              {defaultTo(item.quantity_on_hand, '-')}
+            </span>
+          </DetailItem>
+        </If>
+        <DetailItem
+          label={intl.get('category_name')}
+          children={defaultTo(item.category?.name, '-')}
+        />
+        <DetailItem
+          label={intl.get('cost_account_id')}
+          children={defaultTo(item.cost_account?.name, '-')}
+        />
+        <If condition={item.type === 'inventory'}>
+          <DetailItem
+            label={intl.get('inventory_account')}
+            children={defaultTo(item?.inventory_account?.name, '-')}
+          />
+        </If>
+        <DetailItem
+          label={intl.get('sell_account_id')}
+          children={defaultTo(item?.sell_account?.name, '-')}
+        />
+        <DetailItem
+          label={intl.get('item.sell_description')}
+          children={defaultTo(item.sell_description, '-')}
+        />
+        <DetailItem
+          label={intl.get('item.purchase_description')}
+          children={defaultTo(item.cost_description, '-')}
+        />
+      </DetailsMenu>
+    </div>
+  );
+}

client/src/containers/Drawers/ItemDetailDrawer/ItemDetailList.js

@@ -1,49 +0,0 @@
-import React from 'react';
-import intl from 'react-intl-universal';
-
-import { DetailItem } from '../../../components/Details';
-
-export default function ItemDetailList({
-  item: {
-    name,
-    code,
-    type,
-    category,
-    sell_price_formatted,
-    cost_price_formatted,
-    cost_account,
-    sell_account,
-  },
-}) {
-  return (
-    <div className="details-menu">
-      <div className="details-menu--vertical">
-        <DetailItem label={intl.get('item_name')} children={name} />
-        <DetailItem label={intl.get('item_code')} children={code} />
-        <DetailItem
-          label={intl.get('sell_price')}
-          children={sell_price_formatted}
-        />
-        <DetailItem
-          label={intl.get('cost_price')}
-          children={cost_price_formatted}
-        />
-      </div>
-      <div className="details-menu--horizontal">
-        <DetailItem label={intl.get('item_type')} children={type} />
-        <DetailItem
-          label={intl.get('category_name')}
-          children={category?.name ? category?.name : '--'}
-        />
-        <DetailItem
-          label={intl.get('cost_account_id')}
-          children={cost_account?.name}
-        />
-        <DetailItem
-          label={intl.get('sell_account_id')}
-          children={sell_account?.name}
-        />
-      </div>
-    </div>
-  );
-}

client/src/containers/Drawers/ItemDetailDrawer/index.js

@@ -21,7 +21,7 @@ function ItemDetailDrawer({
   return (
     <Drawer isOpen={isOpen} name={name} size={'750px'}>
       <DrawerSuspense>
-        <ItemDetailDrawerContent item={itemId} />
+        <ItemDetailDrawerContent itemId={itemId} />
       </DrawerSuspense>
     </Drawer>
   );

client/src/containers/Items/ItemsUniversalSearch.js

@@ -9,12 +9,14 @@ function ItemUniversalSearchSelectComponent({
   // #ownProps
   resourceType,
   resourceId,
+  onAction,
 
   // #withDrawerActions
   openDrawer,
 }) {
   if (resourceType === RESOURCES_TYPES.ITEM) {
-
+    openDrawer('item-detail-drawer', { itemId: resourceId });
+    onAction && onAction();
   }
   return null;
 }
@@ -29,6 +31,7 @@ export const ItemUniversalSearchSelectAction = withDrawerActions(
  * @returns
  */
 const transfromItemsToSearch = (item) => ({
+  id: item.id,
   text: item.name,
   subText: item.code,
   label: item.type,

client/src/lang/en/index.json

@@ -1209,5 +1209,7 @@
   "invoice_preview.dialog.title": "Invoice PDF Preview",
   "estimate_preview.dialog.title":"Estimate PDF Preview",
   "receipt_preview.dialog.title":"Receipt PDF Preview",
-  "edit_contact":"Edit {name}"
+  "edit_contact":"Edit {name}",
+  "item.sell_description": "Sell description",
+  "item.purchase_description": "Purchase description"
 }

client/src/style/components/Details.scss

@@ -7,6 +7,7 @@
 
     .detail-item{
       flex-direction: column;
+      flex-grow: 1;
 
       &__content{
         margin: 5px 0;

client/src/style/components/Drawers/ItemDrawer.scss

@@ -0,0 +1,45 @@
+.item-drawer {
+
+  .card {
+    margin: 15px;
+    padding: 22px 15px;
+  }
+
+  &__content {
+
+    .detail-item--name {
+      width: 30%;
+
+      .detail-item__content {
+        font-weight: 600;
+      }
+    }
+
+    .detail-item--quantity {
+
+      .detail-item__content {
+        font-weight: 600;
+
+        .mines {
+          color: #c23030;
+        }
+      }
+    }
+
+    .details-menu--vertical {
+      padding-bottom: 15px;
+      border-bottom: 1px solid #e2e2e2;
+    }
+
+    .details-menu--horizantal {
+
+      .detail-item:not(:first-of-type) {
+        margin-top: 16px;
+      }
+
+      .detail-item__label {
+        min-width: 180px;
+      }
+    }
+  }
+}