fix: edit item form.

client/src/containers/Items/ItemForm.js

@@ -41,6 +41,7 @@ const defaultInitialValues = {
   purchasable: true,
 };
 
+
 /**
  * Item form.
  */
@@ -119,14 +120,13 @@ function ItemForm({
         then: Yup.number().required(),
         otherwise: Yup.number().nullable(),
       })
-      .label(formatMessage({ id: 'Inventory account' })),
+      .label(formatMessage({ id: 'inventory_account' })),
     category_id: Yup.number().positive().nullable(),
     stock: Yup.string() || Yup.boolean(),
     sellable: Yup.boolean().required(),
     purchasable: Yup.boolean().required(),
   });
 
-
   /**
    * Initial values in create and edit mode.
    */
@@ -150,6 +150,14 @@ function ItemForm({
       : changePageTitle(formatMessage({ id: 'new_item' }));
   }, [changePageTitle, isNewMode, formatMessage]);
 
+  const transformApiErrors = (errors) => {
+    const fields = {};
+    if (errors.find(e => e.type === 'ITEM.NAME.ALREADY.EXISTS')) {
+      fields.name = formatMessage({ id: 'the_name_used_before' })
+    }
+    return fields;
+  }
+
   // Handles the form submit.
   const handleFormSubmit = (values, { setSubmitting, resetForm, setErrors }) => {
     setSubmitting(true);
@@ -173,8 +181,13 @@ function ItemForm({
       history.push('/items');
       queryCache.removeQueries(['items-table']);
     };
-    const onError = (response) => {
+    const onError = ({ response }) => {
       setSubmitting(false);
+
+      if (response.data.errors) {
+        const _errors = transformApiErrors(response.data.errors);
+        setErrors({ ..._errors });
+      }
     };
     if (isNewMode) {
       requestSubmitItem(form).then(onSuccess).catch(onError);
@@ -204,7 +217,7 @@ function ItemForm({
     } else {
       changePageSubtitle('');
     }
-  }, [values.item_type]);
+  }, [values.item_type, changePageSubtitle, formatMessage]);
 
   const initialAttachmentFiles = useMemo(() => {
     return itemDetail && itemDetail.media
@@ -240,24 +253,24 @@ function ItemForm({
       <form onSubmit={handleSubmit}>
         <div class={classNames(CLASSES.PAGE_FORM_BODY)}>
           <ItemFormPrimarySection
+            errors={errors}
+            touched={touched}
+            values={values}
             getFieldProps={getFieldProps}
             setFieldValue={setFieldValue}
-            errors={errors}
-            touched={touched}
-            values={values}
           />
           <ItemFormBody
-            getFieldProps={getFieldProps}
             touched={touched}
             errors={errors}
             values={values}
+            getFieldProps={getFieldProps}
             setFieldValue={setFieldValue}
           />
           <ItemFormInventorySection
             errors={errors}
             touched={touched}
-            setFieldValue={setFieldValue}
             values={values}
+            setFieldValue={setFieldValue}
             getFieldProps={getFieldProps}
           />
         </div>

client/src/containers/Items/ItemFormPrimarySection.js

@@ -9,7 +9,7 @@ import {
   Position,
   Tooltip,
 } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'react-intl';
 import {
   CategoriesSelectList,
   ErrorMessage,
@@ -83,7 +83,7 @@ function ItemFormPrimarySection({
               />
               <Radio
                 label={<T id={'non_inventory'} />}
-                value="non_inventory"
+                value="non-inventory"
               />
             </RadioGroup>
           </FormGroup>

client/src/containers/Items/ItemsDataTable.js

@@ -7,6 +7,7 @@ import {
   MenuDivider,
   Position,
   Intent,
+  Tag,
 } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Icon, DataTable, Money, If, Choose } from 'components';
@@ -15,6 +16,7 @@ import LoadingIndicator from 'components/LoadingIndicator';
 import withItems from 'containers/Items/withItems';
 import { compose } from 'utils';
 
+
 const ItemsDataTable = ({
   loading,
 
@@ -87,43 +89,58 @@ const ItemsDataTable = ({
       {
         Header: formatMessage({ id: 'item_name' }),
         accessor: 'name',
-        className: 'actions',
+        className: 'name',
+        width: 180,
       },
       {
-        Header: formatMessage({ id: 'sku' }),
+        Header: formatMessage({ id: 'item_code' }),
         accessor: 'sku',
         className: 'sku',
+        width: 120,
+      },
+      {
+        Header: formatMessage({ id: 'item_type' }),
+        accessor: (row) =>
+          row.type ? (
+            <Tag minimal={true} round={true} intent={Intent.NONE}>
+              {formatMessage({ id: row.type })}
+            </Tag>
+          ) : (
+            ''
+          ),
+        className: 'item_type',
+        width: 120,
       },
       {
         Header: formatMessage({ id: 'category' }),
         accessor: 'category.name',
         className: 'category',
+        width: 150,
       },
       {
         Header: formatMessage({ id: 'sell_price' }),
         accessor: (row) => <Money amount={row.sell_price} currency={'USD'} />,
         className: 'sell-price',
+        width: 150,
       },
       {
         Header: formatMessage({ id: 'cost_price' }),
         accessor: (row) => <Money amount={row.cost_price} currency={'USD'} />,
         className: 'cost-price',
+        width: 150,
+      },
+      {
+        Header: formatMessage({ id: 'quantity_on_hand' }),
+        accessor: 'quantity_on_hand',
+        className: 'quantity_on_hand',
+        width: 140,
+      },
+      {
+        Header: formatMessage({ id: 'average_rate' }),
+        accessor: 'average_cost_rate',
+        className: 'average_cost_rate',
+        width: 140,
       },
-      // {
-      //   Header: 'Cost Account',
-      //   accessor: 'cost_account.name',
-      //   className: "cost-account",
-      // },
-      // {
-      //   Header: 'Sell Account',
-      //   accessor: 'sell_account.name',
-      //   className: "sell-account",
-      // },
-      // {
-      //   Header: 'Inventory Account',
-      //   accessor: 'inventory_account.name',
-      //   className: "inventory-account",
-      // },
       {
         id: 'actions',
         Cell: ({ cell }) => (

client/src/containers/Items/ItemsList.js

@@ -189,8 +189,6 @@ function ItemsList({
   return (
     <DashboardInsider
       loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
-      // isLoading={fetchHook.isFetching}
-
       name={'items-list'}
     >
       <ItemsActionsBar

client/src/lang/en/index.js

@@ -812,4 +812,7 @@ export default {
   select_display_name_as:'Select display name as',
   opening_date: 'Opening date',
   item_code: 'Item code',
+  quantity_on_hand: 'Quantity on hand',
+  average_rate: 'Average rate',
+  the_name_used_before: 'The name is already used.'
 };

client/src/style/pages/items.scss

@@ -81,56 +81,21 @@
 }
 
 
-// .item-form{
-//   padding: 22px;
-//   padding-bottom: 90px;
 
-//   &__primary-section{
+.dashboard__insider--items-list{
-//     background-color: #FAFAFA;
-//     padding: 40px 22px 22px;
-//     margin: -22px -22px 22px;
-//     background-color: #FAFAFA;
-//   }
-//   &__accounts-section{
-//     h4{
-//       margin: 0;
-//       font-weight: 500;
-//       margin-bottom: 20px;
-//       color: #828282;
-//     }
-//     > div:first-of-type{
-//       padding-right: 15px !important;
-//     }
 
-//     > div ~ div{
-//       padding-left: 15px !important;
-//       border-left: 1px solid #e8e8e8;
-//     }
-//   }
 
-//   .#{$ns}-form-group{
+  .bigcapital-datatable{
-//     .#{$ns}-label{
-//       width: 130px;
-//     }
 
-//     .#{$ns}-form-content{
+    .table{
-//       width: 250px;
+      .tbody{
-//     }    
+        .item_type.td{
-//   }
 
-//   .form-group--item-type,
+          .bp3-tag{
-//   .form-group--item-name{
+            font-size: 13px;
-    
+          }
-//     .#{$ns}-form-content{
+        }
-//       width: 350px;
+      }
-//     }  
+    }
-//   }
+  }
-
+}
-//   .form-group--active{
-//     margin-bottom: 5px;
-
-//     .bp3-control.bp3-checkbox{
-//       margin: 0;
-//     }
-//   }
-// }