feat: styling item adjustment dialog.

client/src/containers/Accounts/utils.js

@@ -4,10 +4,10 @@ import { If } from 'components';
 export const accountNameAccessor = (account) => {
   return (
     <span>
-      <If condition={account.name}>
+      <span class={'account-name'}>{account.name}</span>
-        <span class={'account-name'}>{ account.name }</span>
+      <If condition={account.description}>
+        <span class={'account-desc'}>{account.description}</span>
       </If>
-      <span class={'account-desc'}>{ account.description }</span>
     </span>
   );
-}
+};

client/src/containers/Dialogs/InventoryAdjustmentFormDialog/DecrementAdjustmentFields.js

@@ -1,16 +1,16 @@
-import React, { useRef } from 'react';
+import React from 'react';
-import { FastField, ErrorMessage, useFormikContext } from 'formik';
+import { FastField, ErrorMessage } from 'formik';
-import { FormGroup, InputGroup, Intent } from '@blueprintjs/core';
+import { FormGroup, InputGroup } from '@blueprintjs/core';
 import { inputIntent } from 'utils';
-import { Row, Col, If, FieldRequiredHint } from 'components';
+import { Row, Col  } from 'components';
 import { FormattedMessage as T } from 'react-intl';
 import { decrementCalc, dec } from './utils';
 
 function DecrementAdjustmentFields() {
   return (
-    <Row>
+    <Row className={'row--decrement-fields'}>
       {/*------------ Quantity on hand  -----------*/}
-      <Col sm={3}>
+      <Col className={'col--quantity-on-hand'}>
         <FastField name={'quantity_on_hand'}>
           {({ field, meta: { error, touched } }) => (
             <FormGroup
@@ -23,8 +23,13 @@ function DecrementAdjustmentFields() {
           )}
         </FastField>
       </Col>
+
+      <Col className={'col--sign'}>
+        <span>–</span>
+      </Col>
+      
       {/*------------ Decrement -----------*/}
-      <Col sm={2}>
+      <Col className={'col--decrement'}>
         <FastField name={'quantity'}>
           {({
             form: { values, setFieldValue },
@@ -47,8 +52,12 @@ function DecrementAdjustmentFields() {
           )}
         </FastField>
       </Col>
+
+      <Col className={'col--sign'}>
+        <span>=</span>
+      </Col>
       {/*------------ New quantity -----------*/}
-      <Col sm={4}>
+      <Col className={'col--quantity'}>
         <FastField name={'new_quantity'}>
           {({
             form: { values, setFieldValue },

client/src/containers/Dialogs/InventoryAdjustmentFormDialog/IncrementAdjustmentFields.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { FastField, ErrorMessage, useFormikContext } from 'formik';
+import { FastField, ErrorMessage } from 'formik';
-import { FormGroup, InputGroup, Intent } from '@blueprintjs/core';
+import { FormGroup, InputGroup } from '@blueprintjs/core';
-import { Row, Col, FieldRequiredHint } from 'components';
+import { Row, Col } from 'components';
 import { inputIntent } from 'utils';
 import { FormattedMessage as T } from 'react-intl';
 import { decrementCalc, incrementCalc } from './utils';
@@ -10,7 +10,7 @@ function IncrementAdjustmentFields() {
   return (
     <Row>
       {/*------------ Quantity on hand  -----------*/}
-      <Col sm={3}>
+      <Col className={'col--quantity-on-hand'}>
         <FastField name={'quantity_on_hand'}>
           {({ field, meta: { error, touched } }) => (
             <FormGroup
@@ -23,8 +23,14 @@ function IncrementAdjustmentFields() {
           )}
         </FastField>
       </Col>
+
+      {/*------------ Sign -----------*/}
+      <Col className={'col--sign'}>
+        <span>+</span>
+      </Col>
+
       {/*------------ Increment -----------*/}
-      <Col sm={2}>
+      <Col className={'col--quantity'}>
         <FastField name={'quantity'}>
           {({
             form: { values, setFieldValue },
@@ -47,8 +53,9 @@ function IncrementAdjustmentFields() {
           )}
         </FastField>
       </Col>
+
       {/*------------ Cost -----------*/}
-      <Col sm={2}>
+      <Col className={'col--cost'}>
         <FastField name={'cost'}>
           {({ field, meta: { error, touched } }) => (
             <FormGroup
@@ -61,8 +68,14 @@ function IncrementAdjustmentFields() {
           )}
         </FastField>
       </Col>
+
+      {/*------------ Sign -----------*/}
+      <Col className={'col--sign'}>
+        <span>=</span>
+      </Col>
+
       {/*------------ New quantity -----------*/}
-      <Col sm={4}>
+      <Col className={'col--quantity-on-hand'}>
         <FastField name={'new_quantity'}>
           {({
             form: { values, setFieldValue },

client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogContent.js

@@ -1,17 +1,26 @@
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback } from 'react';
 import { Intent } from '@blueprintjs/core';
 import { Formik, Form } from 'formik';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import { useQuery, queryCache } from 'react-query';
 import moment from 'moment';
-import { omit } from 'lodash';
+import { omit, get } from 'lodash';
+
+import 'style/pages/Items/ItemAdjustmentDialog.scss';
 
 import { AppToaster, DialogContent } from 'components';
+
 import { CreateInventoryAdjustmentFormSchema } from './InventoryAdjustmentForm.schema';
+
 import InventoryAdjustmentFormDialogFields from './InventoryAdjustmentFormDialogFields';
 import InventoryAdjustmentFloatingActions from './InventoryAdjustmentFloatingActions';
+
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withInventoryAdjustmentActions from 'containers/Items/withInventoryAdjustmentActions';
+import withAccountsActions from 'containers/Accounts/withAccountsActions';
+import withItem from 'containers/Items/withItem';
+import withItemsActions from 'containers/Items/withItemsActions';
+
 import { compose } from 'utils';
 
 const defaultInitialValues = {
@@ -41,8 +50,14 @@ function InventoryAdjustmentFormDialogContent({
   // #withInventoryAdjustmentActions
   requestSubmitInventoryAdjustment,
 
+  // #withItemsActions
+  requestFetchItem,
+
+  // #withItem
+  item,
+
   // #ownProp
-  itemDetail,
+  itemId,
   dialogName,
 }) {
   const { formatMessage } = useIntl();
@@ -51,13 +66,15 @@ function InventoryAdjustmentFormDialogContent({
   // Fetches accounts list.
   const fetchAccount = useQuery('accounts-list', () => requestFetchAccounts());
 
-  const initialValues = useMemo(
+  // Fetches the item details.
-    () => ({
+  const fetchItem = useQuery(['item', itemId],
-      ...defaultInitialValues,
+    (key, id) => requestFetchItem(id));
-      ...itemDetail,
+
-    }),
+  // Initial form values.
-    [],
+  const initialValues = {
-  );
+    ...defaultInitialValues,
+    quantity_on_hand: get(item, 'quantity_on_hand', 0),
+  };
 
   // Handles the form submit.
   const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
@@ -65,7 +82,6 @@ function InventoryAdjustmentFormDialogContent({
       ...omit(values, ['quantity_on_hand', 'new_quantity', 'action']),
       publish: submitPayload.publish,
     };
-
     const onSuccess = ({ response }) => {
       closeDialog(dialogName);
       queryCache.invalidateQueries('accounts-list');
@@ -97,7 +113,7 @@ function InventoryAdjustmentFormDialogContent({
   );
 
   return (
-    <DialogContent>
+    <DialogContent isLoading={fetchAccount.isFetching || fetchItem.isFetching}>
       <Formik
         validationSchema={CreateInventoryAdjustmentFormSchema}
         initialValues={initialValues}
@@ -118,4 +134,9 @@ function InventoryAdjustmentFormDialogContent({
 export default compose(
   withInventoryAdjustmentActions,
   withDialogActions,
+  withAccountsActions,
+  withItem(({ item }) => ({
+    item: item
+  })),
+  withItemsActions,
 )(InventoryAdjustmentFormDialogContent);

client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.js

@@ -10,7 +10,7 @@ import {
 import classNames from 'classnames';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { DateInput } from '@blueprintjs/datetime';
-import { ListSelect, Choose, If, FieldRequiredHint } from 'components';
+import { ListSelect, FieldRequiredHint, Col, Row } from 'components';
 import {
   inputIntent,
   momentFormatter,
@@ -19,12 +19,12 @@ import {
 } from 'utils';
 import { CLASSES } from 'common/classes';
 import adjustmentType from 'common/adjustmentType';
-import IncrementAdjustmentFields from './IncrementAdjustmentFields';
+
-import DecrementAdjustmentFields from './DecrementAdjustmentFields';
 import AccountsSuggestField from 'components/AccountsSuggestField';
 import withAccounts from 'containers/Accounts/withAccounts';
 import { compose } from 'redux';
 import { decrementCalc, incrementCalc, dec } from './utils';
+import InventoryAdjustmentQuantityFields from './InventoryAdjustmentQuantityFields';
 
 /**
  * Inventory adjustment form dialogs fields.
@@ -38,83 +38,73 @@ function InventoryAdjustmentFormDialogFields({
 
   return (
     <div className={Classes.DIALOG_BODY}>
-      {/*------------ Date -----------*/}
+      <Row>
-      <FastField name={'date'}>
+        <Col xs={5}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
+          {/*------------ Date -----------*/}
-          <FormGroup
+          <FastField name={'date'}>
-            label={<T id={'date'} />}
+            {({ form, field: { value }, meta: { error, touched } }) => (
-            labelInfo={<FieldRequiredHint />}
+              <FormGroup
-            intent={inputIntent({ error, touched })}
+                label={<T id={'date'} />}
-            helperText={<ErrorMessage name="date" />}
+                labelInfo={<FieldRequiredHint />}
-            minimal={true}
+                intent={inputIntent({ error, touched })}
-            className={classNames(CLASSES.FILL)}
+                helperText={<ErrorMessage name="date" />}
-          >
+                minimal={true}
-            <DateInput
+                className={classNames(CLASSES.FILL, 'form-group--date')}
-              {...momentFormatter('YYYY/MM/DD')}
+              >
-              onChange={handleDateChange((formattedDate) => {
+                <DateInput
-                form.setFieldValue('date', formattedDate);
+                  {...momentFormatter('YYYY/MM/DD')}
-              })}
+                  onChange={handleDateChange((formattedDate) => {
-              value={tansformDateValue(value)}
+                    form.setFieldValue('date', formattedDate);
-              popoverProps={{
+                  })}
-                position: Position.BOTTOM,
+                  value={tansformDateValue(value)}
-                minimal: true,
+                  popoverProps={{
-              }}
+                    position: Position.BOTTOM,
-            />
+                    minimal: true,
-          </FormGroup>
+                  }}
-        )}
+                />
-      </FastField>
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+        <Col xs={5}>
+          {/*------------ Adjustment type -----------*/}
+          <FastField name={'type'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'adjustment_type'} />}
+                labelInfo={<FieldRequiredHint />}
+                helperText={<ErrorMessage name="type" />}
+                intent={inputIntent({ error, touched })}
+                className={classNames(CLASSES.FILL, 'form-group--type')}
+              >
+                <ListSelect
+                  items={adjustmentType}
+                  onItemSelect={(type) => {
+                    form.setFieldValue('type', type.value);
+                    type?.value == 'increment'
+                      ? form.setFieldValue(
+                          'new_quantity',
+                          incrementCalc(values),
+                        )
+                      : form.setFieldValue(
+                          'new_quantity',
+                          values.quantity_on_hand - values.quantity,
+                        );
+                  }}
+                  filterable={false}
+                  selectedItem={value}
+                  selectedItemProp={'value'}
+                  textProp={'name'}
+                  popoverProps={{ minimal: true }}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+
+      <InventoryAdjustmentQuantityFields />
 
-      {/*------------ Adjustment type -----------*/}
-      <FastField name={'type'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'adjustment_type'} />}
-            labelInfo={<FieldRequiredHint />}
-            helperText={<ErrorMessage name="type" />}
-            intent={inputIntent({ error, touched })}
-            className={classNames(CLASSES.FILL)}
-          >
-            <ListSelect
-              items={adjustmentType}
-              onItemSelect={(type) => {
-                form.setFieldValue('type', type.value);
-                type?.value == 'increment'
-                  ? form.setFieldValue('new_quantity', incrementCalc(values))
-                  : form.setFieldValue(
-                      'new_quantity',
-                      values.quantity_on_hand - values.quantity,
-                    );
-              }}
-              filterable={false}
-              selectedItem={value}
-              selectedItemProp={'value'}
-              textProp={'name'}
-              popoverProps={{ minimal: true }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
-      <Choose>
-        <Choose.When condition={values.type === 'decrement'}>
-          <DecrementAdjustmentFields />
-        </Choose.When>
-        <Choose.When condition={values.type === 'increment'}>
-          <IncrementAdjustmentFields />
-        </Choose.When>
-      </Choose>
-      {/*------------ Reason -----------*/}
-      <FastField name={'reason'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'reason'} />}
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="reason" />}
-          >
-            <InputGroup fill={true} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
       {/*------------ Adjustment account -----------*/}
       <FastField name={'adjustment_account_id'}>
         {({ form, field, meta: { error, touched } }) => (
@@ -123,6 +113,7 @@ function InventoryAdjustmentFormDialogFields({
             labelInfo={<FieldRequiredHint />}
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name="reason" />}
+            className={'from-group--adjustment-account'}
           >
             <AccountsSuggestField
               accounts={accountsList}
@@ -138,29 +129,37 @@ function InventoryAdjustmentFormDialogFields({
           </FormGroup>
         )}
       </FastField>
+
       {/*------------ Reference -----------*/}
       <FastField name={'reference_no'}>
         {({ form, field, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'reference_no'} />}
-            className={classNames(CLASSES.FILL)}
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name="reference_no" />}
+            className={'from-group--reference-no'}
           >
             <InputGroup {...field} />
           </FormGroup>
         )}
       </FastField>
+
       {/*------------ description -----------*/}
-      <FastField name={'description'}>
+      <FastField name={'adjustment_reasons'}>
         {({ field, meta: { error, touched } }) => (
           <FormGroup
-            label={<T id={'description'} />}
+            label={<T id={'adjustment_reasons'} />}
-            className={'form-group--description'}
+            className={'form-group--adjustment-reasons'}
             intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'description'} />}
+            helperText={<ErrorMessage name={'adjustment_reasons'} />}
+            placeholder={'Max 500 characters'}
           >
-            <TextArea growVertically={true} large={true} {...field} />
+            <TextArea
+              growVertically={true}
+              large={true}
+              placeholder={'Max 500 characters.'}
+              {...field}
+            />
           </FormGroup>
         )}
       </FastField>

client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentQuantityFields.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { Choose, If } from 'components';
+import IncrementAdjustmentFields from './IncrementAdjustmentFields';
+import DecrementAdjustmentFields from './DecrementAdjustmentFields';
+
+export default function InventoryAdjustmentQuantityFields() {
+  const { values } = useFormikContext();
+
+  return (
+    <div class="adjustment-fields">
+      <Choose>
+        <Choose.When condition={values.type === 'decrement'}>
+          <DecrementAdjustmentFields />
+        </Choose.When>
+        <Choose.When condition={values.type === 'increment'}>
+          <IncrementAdjustmentFields />
+        </Choose.When>
+      </Choose>
+    </div>
+  );
+}

client/src/containers/Dialogs/InventoryAdjustmentFormDialog/index.js

@@ -13,7 +13,7 @@ const InventoryAdjustmentFormDialogContent = lazy(() =>
  */
 function InventoryAdjustmentFormDialog({
   dialogName,
-  payload = { action: '', id: null },
+  payload = { action: '', itemId: null },
   isOpen,
 }) {
   return (
@@ -23,11 +23,12 @@ function InventoryAdjustmentFormDialog({
       isOpen={isOpen}
       canEscapeJeyClose={true}
       autoFocus={true}
+      className={'dialog--adjustment-item'}
     >
       <DialogSuspense>
         <InventoryAdjustmentFormDialogContent
           dialogName={dialogName}
-          itemDetail={payload}
+          itemId={payload.itemId}
         />
       </DialogSuspense>
     </Dialog>

client/src/containers/Items/ItemForm.js

@@ -6,7 +6,6 @@ import { useHistory } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 import classNames from 'classnames';
 import { defaultTo } from 'lodash';
-import moment from 'moment';
 
 import { CLASSES } from 'common/classes';
 import AppToaster from 'components/AppToaster';
@@ -18,7 +17,7 @@ import ItemFormInventorySection from './ItemFormInventorySection';
 import withItemsActions from 'containers/Items/withItemsActions';
 import withMediaActions from 'containers/Media/withMediaActions';
 import useMedia from 'hooks/useMedia';
-import withItemDetail from 'containers/Items/withItemDetail';
+import withItem from 'containers/Items/withItem';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withSettings from 'containers/Settings/withSettings';
 
@@ -56,7 +55,7 @@ function ItemForm({
   requestEditItem,
 
   itemId,
-  itemDetail,
+  item,
   onFormSubmit,
 
   // #withDashboardActions
@@ -106,12 +105,12 @@ function ItemForm({
        * as well.
        */
       ...transformToForm(
-        transformItemFormData(itemDetail, defaultInitialValues),
+        transformItemFormData(item, defaultInitialValues),
         defaultInitialValues,
       ),
     }),
     [
-      itemDetail,
+      item,
       preferredCostAccount,
       preferredSellAccount,
       preferredInventoryAccount,
@@ -177,20 +176,20 @@ function ItemForm({
   };
 
   useEffect(() => {
-    if (itemDetail && itemDetail.type) {
+    if (item && item.type) {
-      changePageSubtitle(transitionItemTypeKeyToLabel(itemDetail.type));
+      changePageSubtitle(transitionItemTypeKeyToLabel(item.type));
     }
-  }, [itemDetail, changePageSubtitle, formatMessage]);
+  }, [item, changePageSubtitle, formatMessage]);
 
   const initialAttachmentFiles = useMemo(() => {
-    return itemDetail && itemDetail.media
+    return item && item.media
-      ? itemDetail.media.map((attach) => ({
+      ? item.media.map((attach) => ({
           preview: attach.attachment_file,
           upload: true,
           metadata: { ...attach },
         }))
       : [];
-  }, [itemDetail]);
+  }, [item]);
 
   const handleDropFiles = useCallback(
     (_files) => {
@@ -233,7 +232,7 @@ function ItemForm({
         {({ isSubmitting, handleSubmit }) => (
           <Form>
             <div class={classNames(CLASSES.PAGE_FORM_BODY)}>
-              <ItemFormPrimarySection itemType={itemDetail?.type} />
+              <ItemFormPrimarySection itemType={item?.type} />
               <ItemFormBody />
               <ItemFormInventorySection />
             </div>
@@ -254,7 +253,7 @@ function ItemForm({
 
 export default compose(
   withItemsActions,
-  withItemDetail,
+  withItem(({ item }) => ({ item })),
   withDashboardActions,
   withMediaActions,
   withSettings(({ itemsSettings }) => ({

client/src/containers/Items/ItemsDataTable.js

@@ -79,8 +79,7 @@ function ItemsDataTable({
     (item) => () => {
       openDialog('inventory-adjustment-form', {
         action: 'make_adjustment',
-        item_id: item.id,
+        itemId: item.id,
-        quantity_on_hand: item.quantity_on_hand,
       });
     },
     [openDialog],

client/src/containers/Items/withItem.js

@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+import { getItemById } from 'store/items/items.reducer';
+
+export default (mapState) => {
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      item: getItemById(state, props.itemId),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+
+  return connect(mapStateToProps);
+};

client/src/containers/Items/withItemDetail.js

@@ -1,8 +0,0 @@
-import { connect } from 'react-redux';
-import { getItemById } from 'store/items/items.reducer';
-
-const mapStateToProps = (state, props) => ({
-  itemDetail: getItemById(state, props.itemId),
-});
-
-export default connect(mapStateToProps);

client/src/lang/en/index.js

@@ -970,4 +970,5 @@ export default {
     'You could not delete item that has associated inventory adjustments transactions',
   format: 'Format',
   current: 'Current',
+  adjustment_reasons: 'Adjustment reasons'
 };

client/src/style/pages/Items/ItemAdjustmentDialog.scss

@@ -0,0 +1,73 @@
+.dialog--adjustment-item {
+  .bp3-form-group {
+    margin-bottom: 15px;
+
+    label.bp3-label {
+      font-size: 13px;
+      margin-bottom: 3px;
+    }
+  }
+  .form-group {
+    &--adjustment-reasons {
+      .bp3-form-content {
+        textarea {
+          width: 100%;
+          min-width: 100%;
+          font-size: 14px;
+        }
+      }
+    }
+    &--reference-no,
+    &--adjustment-account {
+      max-width: 250px;
+    }
+  }
+  .adjustment-fields {
+    padding-top: 16px;
+    border-top: 2px solid #e9e9e9;
+    margin-bottom: 18px;
+    padding-bottom: 12px;
+    border-bottom: 2px solid #e9e9e9;
+
+    .row {
+      display: flex;
+      flex-wrap: nowrap;
+      margin-left: -0.3rem;
+      margin-right: -0.3rem;
+
+      .col {
+        padding-left: 0.3rem;
+        padding-right: 0.3rem;
+
+        .bp3-form-group {
+          margin-bottom: 0;
+        }
+      }
+      .col--quantity-on-hand {
+        width: 120px;
+      }
+      .col--sign {
+        display: flex;
+
+        span {
+          margin-top: auto;
+          margin-bottom: 12px;
+        }
+      }
+      .col--decrement,
+      .col--increment {
+        width: 100px;
+      }
+      .col--cost {
+        width: 95px;
+      }
+      .col--quantity {
+        width: 120px;
+      }
+    }
+  }
+
+  .bp3-dialog-footer {
+    padding-top: 10px;
+  }
+}