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

client/src/containers/Items/ItemForm.js

@@ -6,7 +6,7 @@ import {
 } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
 import { useHistory } from 'react-router-dom';
-import { pick } from 'lodash';
+import { pick, pickBy } from 'lodash';
 import { useIntl } from 'react-intl';
 import classNames from 'classnames';
 
@@ -23,7 +23,24 @@ import useMedia from 'hooks/useMedia';
 import withItemDetail from 'containers/Items/withItemDetail';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
-import { compose } from 'utils';
+import { compose, transformToForm } from 'utils';
+
+const defaultInitialValues = {
+  active: true,
+  name: '',
+  type: 'service',
+  sku: '',
+  cost_price: '',
+  sell_price: '',
+  cost_account_id: '',
+  sell_account_id: '',
+  inventory_account_id: '',
+  category_id: '',
+  note: '',
+  sellable: true,
+  purchasable: true,
+};
+
 
 /**
  * Item form.
@@ -71,54 +88,60 @@ function ItemForm({
       .required()
       .label(formatMessage({ id: 'item_type_' })),
     sku: Yup.string().trim(),
-    cost_price: Yup.number(),
+    cost_price: Yup.number()
-    sell_price: Yup.number(),
+      .when(['purchasable'], {
+        is: true,
+        then: Yup.number().required(),
+        otherwise: Yup.number().nullable(true),
+      }),
+    sell_price: Yup.number()
+      .when(['sellable'], {
+        is: true,
+        then: Yup.number().required(),
+        otherwise: Yup.number().nullable(true),
+      }),
     cost_account_id: Yup.number()
-      .required()
+      .when(['purchasable'], {
+        is: true,
+        then: Yup.number().required(),
+        otherwise: Yup.number().nullable(true),
+      })
       .label(formatMessage({ id: 'cost_account_id' })),
     sell_account_id: Yup.number()
-      .required()
+      .when(['sellable'], {
+        is: true,
+        then: Yup.number().required(),
+        otherwise: Yup.number().nullable(),
+      })
       .label(formatMessage({ id: 'sell_account_id' })),
-    inventory_account_id: Yup.number().when('type', {
+    inventory_account_id: Yup.number()
-      is: (value) => value === 'inventory',
+      .when(['type'], {
-      then: Yup.number().required(),
+        is: (value) => value === 'inventory',
-      otherwise: Yup.number().nullable(),
+        then: Yup.number().required(),
-    }),
+        otherwise: Yup.number().nullable(),
-    category_id: Yup.number().nullable(),
+      })
+      .label(formatMessage({ id: 'inventory_account' })),
+    category_id: Yup.number().positive().nullable(),
     stock: Yup.string() || Yup.boolean(),
     sellable: Yup.boolean().required(),
     purchasable: Yup.boolean().required(),
   });
 
-  const defaultInitialValues = useMemo(
+  /**
-    () => ({
+   * Initial values in create and edit mode.
-      active: true,
+   */
-      name: '',
-      type: 'service',
-      sku: '',
-      cost_price: 0,
-      sell_price: 0,
-      cost_account_id: null,
-      sell_account_id: null,
-      inventory_account_id: null,
-      category_id: null,
-      note: '',
-      sellable: true,
-      purchasable: true,
-    }),
-    [],
-  );
   const initialValues = useMemo(
     () => ({
-      ...(itemDetail
+      ...defaultInitialValues,
-        ? {
+
-            ...pick(itemDetail, Object.keys(defaultInitialValues)),
+      /**
-          }
+       * We only care about the fields in the form. Previously unfilled optional
-        : {
+       * values such as `notes` come back from the API as null, so remove those
-            ...defaultInitialValues,
+       * as well.
-          }),
+       */
+      ...transformToForm(itemDetail, defaultInitialValues),
     }),
-    [itemDetail, defaultInitialValues],
+    [],
   );
 
   useEffect(() => {
@@ -127,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);
@@ -141,7 +172,7 @@ function ItemForm({
               'the_item_has_been_successfully_edited',
           },
           {
-            number: itemDetail.id,
+            number: itemId,
           },
         ),
         intent: Intent.SUCCESS,
@@ -150,13 +181,18 @@ 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);
     } else {
-      requestEditItem(form).then(onSuccess).catch(onError);
+      requestEditItem(itemId, form).then(onSuccess).catch(onError);
     }
   };
 
@@ -181,7 +217,7 @@ function ItemForm({
     } else {
       changePageSubtitle('');
     }
-  }, [values.item_type]);
+  }, [values.item_type, changePageSubtitle, formatMessage]);
 
   const initialAttachmentFiles = useMemo(() => {
     return itemDetail && itemDetail.media
@@ -217,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/ItemFormBody.js

@@ -36,15 +36,15 @@ function ItemFormBody({
     <div class="page-form__section page-form__section--selling-cost">
       <Row>
         <Col xs={6}>
-          
           {/*------------- Sellable checkbox ------------- */}
-          <FormGroup
+          <FormGroup inline={true} className={'form-group--sellable'}>
-            inline={true}
-            className={'form-group--sellable'}
-          >
             <Checkbox
               inline={true}
-              label={<h3><T id={'i_purchase_this_item'} /></h3>}
+              label={
+                <h3>
+                  <T id={'i_purchase_this_item'} />
+                </h3>
+              }
               checked={values.sellable}
               {...getFieldProps('sellable')}
             />
@@ -54,26 +54,22 @@ function ItemFormBody({
           <FormGroup
             label={<T id={'selling_price'} />}
             className={'form-group--item-selling-price'}
-            intent={
+            intent={errors.sell_price && touched.sell_price && Intent.DANGER}
-              errors.selling_price && touched.selling_price && Intent.DANGER
-            }
             helperText={
-              <ErrorMessage {...{ errors, touched }} name="selling_price" />
+              <ErrorMessage {...{ errors, touched }} name="sell_price" />
             }
             inline={true}
           >
             <MoneyInputGroup
-              value={values.selling_price}
+              value={values.sell_price}
               prefix={'$'}
               onChange={(e, value) => {
-                setFieldValue('selling_price', value);
+                setFieldValue('sell_price', value);
               }}
               inputGroupProps={{
                 medium: true,
                 intent:
-                  errors.selling_price &&
+                  errors.sell_price && touched.sell_price && Intent.DANGER,
-                  touched.selling_price &&
-                  Intent.DANGER,
               }}
               disabled={!values.sellable}
             />
@@ -107,18 +103,18 @@ function ItemFormBody({
               filterByTypes={['income']}
             />
           </FormGroup>
-
         </Col>
 
         <Col xs={6}>
           {/*------------- Purchasable checbox ------------- */}
-          <FormGroup
+          <FormGroup inline={true} className={'form-group--purchasable'}>
-            inline={true}
-            className={'form-group--purchasable'}
-          >
             <Checkbox
               inline={true}
-              label={<h3><T id={'i_sell_this_item'} /></h3>}
+              label={
+                <h3>
+                  <T id={'i_sell_this_item'} />
+                </h3>
+              }
               defaultChecked={values.purchasable}
               {...getFieldProps('purchasable')}
             />
@@ -169,7 +165,7 @@ function ItemFormBody({
             <AccountsSelectList
               accounts={accountsList}
               onAccountSelected={(account) => {
-                setFieldValue('cost_account_id', account.id)
+                setFieldValue('cost_account_id', account.id);
               }}
               defaultSelectText={<T id={'select_account'} />}
               selectedAccountId={values.cost_account_id}

client/src/containers/Items/ItemFormInventorySection.js

@@ -1,11 +1,17 @@
 import React from 'react';
-import { FormGroup, Intent, InputGroup, Classes } from '@blueprintjs/core';
+import {
-import { AccountsSelectList, ErrorMessage, Col, Row } from 'components';
+  FormGroup,
+  Intent,
+  InputGroup,
+  Position,
+} from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { AccountsSelectList, ErrorMessage, Col, Row, Hint } from 'components';
+import { CLASSES } from 'common/classes';
 import { FormattedMessage as T } from 'react-intl';
 import classNames from 'classnames';
 import withAccounts from 'containers/Accounts/withAccounts';
-
+import { compose, tansformDateValue, momentFormatter } from 'utils';
-import { compose } from 'utils';
 
 /**
  * Item form inventory sections.
@@ -21,12 +27,12 @@ function ItemFormInventorySection({
 }) {
   return (
     <div class="page-form__section page-form__section--inventory">
+      <h3>
+        <T id={'inventory_information'} />
+      </h3>
+
       <Row>
         <Col xs={6}>
-          <h3>
-            <T id={'inventory_information'} />
-          </h3>
-
           {/*------------- Inventory account ------------- */}
           <FormGroup
             label={<T id={'inventory_account'} />}
@@ -45,7 +51,7 @@ function ItemFormInventorySection({
             className={classNames(
               'form-group--item-inventory_account',
               'form-group--select-list',
-              Classes.FILL,
+              CLASSES.FILL,
             )}
           >
             <AccountsSelectList
@@ -59,26 +65,50 @@ function ItemFormInventorySection({
           </FormGroup>
 
           <FormGroup
-            label={<T id={'opening_stock'} />}
+            label={<T id={'opening_quantity'} />}
-            className={'form-group--item-stock'}
+            labelInfo={<Hint />}
+            className={'form-group--opening_quantity'}
             inline={true}
           >
             <InputGroup
               medium={true}
-              intent={errors.stock && Intent.DANGER}
+              intent={errors.opening_quantity && Intent.DANGER}
-              {...getFieldProps('stock')}
+              {...getFieldProps('opening_quantity')}
             />
           </FormGroup>
 
           <FormGroup
-            label={'Opening average cost'}
+            label={<T id={'opening_date'} />}
-            className={'form-group--item-stock'}
+            labelInfo={<Hint />}
+            className={classNames(
+              'form-group--select-list',
+              'form-group--opening_date',
+              CLASSES.FILL,
+            )}
+            inline={true}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(values.payment_date)}
+              onChange={(value) => {
+                setFieldValue('opening_date', value);
+              }}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+            />
+          </FormGroup>
+        </Col>
+
+        <Col xs={6}>
+          <FormGroup
+            label={'Opening average rate'}
+            labelInfo={<Hint />}
+            className={'form-group--opening_average_rate'}
             inline={true}
           >
             <InputGroup
               medium={true}
-              intent={errors.stock && Intent.DANGER}
+              intent={errors.opening_average_rate && Intent.DANGER}
-              {...getFieldProps('stock')}
+              {...getFieldProps('opening_average_rate')}
             />
           </FormGroup>
         </Col>

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,
@@ -39,6 +39,14 @@ function ItemFormPrimarySection({
   // #withItemCategories
   categoriesList,
 }) {
+
+  const itemTypeHintContent = (
+    <>
+      <div class="mb1"><strong>{'Service: '}</strong>{'Services that you provide to customers. '}</div>
+      <div class="mb1"><strong>{'Inventory: '}</strong>{'Products you buy and/or sell and that you track quantities of.'}</div>
+      <div class="mb1"><strong>{'Non-Inventory: '}</strong>{'Products you buy and/or sell but don’t need to (or can’t) track quantities of, for example, nuts and bolts used in an installation.'}</div>
+    </>);
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
       <Row>
@@ -47,7 +55,12 @@ function ItemFormPrimarySection({
           <FormGroup
             medium={true}
             label={<T id={'item_type'} />}
-            labelInfo={<FieldRequiredHint />}
+            labelInfo={
+              <span>
+                <FieldRequiredHint />
+                <Hint content={itemTypeHintContent} position={Position.BOTTOM_LEFT} />
+              </span>
+            }
             className={'form-group--item-type'}
             intent={errors.type && touched.type && Intent.DANGER}
             helperText={<ErrorMessage {...{ errors, touched }} name="type" />}
@@ -56,49 +69,21 @@ function ItemFormPrimarySection({
             <RadioGroup
               inline={true}
               onChange={handleStringChange((value) => {
-                setFieldValue('item_type', value);
+                setFieldValue('type', value);
               })}
-              selectedValue={values.item_type}
+              selectedValue={values.type}
             >
               <Radio
-                label={
+                label={<T id={'service'} />}
-                  <Tooltip
-                    className={Classes.TOOLTIP_INDICATOR}
-                    content={'Services that you provide to customers.'}
-                    position={Position.BOTTOM_LEFT}
-                  >
-                    <T id={'service'} />
-                  </Tooltip>
-                }
                 value="service"
               />
               <Radio
-                label={
+                label={<T id={'inventory'} />}
-                  <Tooltip
-                    className={Classes.TOOLTIP_INDICATOR}
-                    content={
-                      'Products you buy and/or sell and that you track quantities of.'
-                    }
-                    position={Position.BOTTOM_LEFT}
-                  >
-                    <T id={'inventory'} />
-                  </Tooltip>
-                }
                 value="inventory"
               />
               <Radio
-                label={
+                label={<T id={'non_inventory'} />}
-                  <Tooltip
+                value="non-inventory"
-                    className={Classes.TOOLTIP_INDICATOR}
-                    content={
-                      'Products you buy and/or sell but don’t need to (or can’t) track quantities of, for example, nuts and bolts used in an installation.'
-                    }
-                    position={Position.BOTTOM_LEFT}
-                  >
-                    <T id={'non_inventory'} />
-                  </Tooltip>
-                }
-                value="non_inventory"
               />
             </RadioGroup>
           </FormGroup>
@@ -121,7 +106,7 @@ function ItemFormPrimarySection({
 
           {/*----------- SKU ----------*/}
           <FormGroup
-            label={<T id={'sku'} />}
+            label={<T id={'item_code'} />}
             labelInfo={<Hint />}
             className={'form-group--item-sku'}
             intent={errors.sku && touched.sku && Intent.DANGER}

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

@@ -97,6 +97,16 @@ function ItemsList({
         intent: Intent.SUCCESS,
       });
       setDeleteItem(false);
+    }).catch(({ errors }) => {
+      if (errors.find(error => error.type === 'ITEM_HAS_ASSOCIATED_TRANSACTINS')) {
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_item_has_associated_transactions',
+          }),
+          intent: Intent.DANGER,
+        });
+      }
+      setDeleteItem(false);
     });
   }, [requestDeleteItem, deleteItem, formatMessage]);
 
@@ -189,8 +199,6 @@ function ItemsList({
   return (
     <DashboardInsider
       loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
-      // isLoading={fetchHook.isFetching}
-
       name={'items-list'}
     >
       <ItemsActionsBar

client/src/lang/en/index.js

@@ -100,7 +100,7 @@ export default {
   cost_price: 'Cost Price',
   inventory_information: 'Inventory Information',
   inventory_account: 'Inventory Account',
-  opening_stock: 'Opening Stock',
+  opening_quantity: 'Opening quantity',
   save: 'Save',
   save_as_draft: 'Save as Draft',
   active: 'Active',
@@ -810,4 +810,10 @@ export default {
   i_purchase_this_item: 'I purchase this item from a vendor.',
   i_sell_this_item: 'I sell this item to a customer.',
   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.',
+  the_item_has_associated_transactions: 'The item has associated transactions.'
 };

client/src/store/items/items.actions.js

@@ -80,7 +80,7 @@ export const deleteItem = ({ id }) => {
           resolve(response);
         })
         .catch((error) => {
-          reject(error);
+          reject(error?.response?.data);
         });
     });
 };

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;
-//     }
-//   }
-// }

client/src/utils.js

@@ -278,3 +278,10 @@ export const itemsStartWith = (items, char) => {
 export const saveInvoke = (func, ...rest) => {
   return func && func(...rest);
 }
+
+export const transformToForm = (obj, emptyInitialValues) => {
+  return _.pickBy(
+    obj,
+    (val, key) => val !== null && Object.keys(emptyInitialValues).includes(key),
+  )
+}