feat: expand sidebar once open form editor page.

feat: rounding money amount.
feat: optimize page form structure.
feat: refactoring make journal and expense form with FastField component.

client/src/containers/Sales/Estimate/EstimateForm.js

@@ -14,7 +14,7 @@ import {
 } from './EstimateForm.schema';
 
 import EstimateFormHeader from './EstimateFormHeader';
-import EditableItemsEntriesTable from 'containers/Entries/EditableItemsEntriesTable';
+import EstimateFormBody from './EstimateFormBody';
 import EstimateFloatingActions from './EstimateFloatingActions';
 import EstimateFormFooter from './EstimateFormFooter';
 import EstimateNumberWatcher from './EstimateNumberWatcher';
@@ -43,9 +43,9 @@ const MIN_LINES_NUMBER = 4;
 const defaultEstimate = {
   index: 0,
   item_id: '',
-  rate: '',
-  discount: 0,
-  quantity: '',
+  rate: 0,
+  discount: '',
+  quantity: 1,
   description: '',
 };
 
@@ -242,7 +242,11 @@ const EstimateForm = ({
   );
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_ESTIMATE)}>
+    <div className={classNames(
+      CLASSES.PAGE_FORM,
+      CLASSES.PAGE_FORM_STRIP_STYLE,
+      CLASSES.PAGE_FORM_ESTIMATE,
+    )}>
       <Formik
         validationSchema={
           isNewMode ? CreateEstimateFormSchema : EditEstimateFormSchema
@@ -256,7 +260,7 @@ const EstimateForm = ({
               onEstimateNumberChanged={handleEstimateNumberChange}
             />
             <EstimateNumberWatcher estimateNumber={estimateNumber} />
-            <EditableItemsEntriesTable filterSellableItems={true} />
+            <EstimateFormBody />
             <EstimateFormFooter />
             <EstimateFloatingActions
               isSubmitting={isSubmitting}

client/src/containers/Sales/Estimate/EstimateForm.schema.js

@@ -1,6 +1,7 @@
 import * as Yup from 'yup';
 import { formatMessage } from 'services/intl';
 import { DATATYPES_LENGTH } from 'common/dataTypes';
+import { isBlank } from 'utils';
 
 const Schema = Yup.object().shape({
   customer_id: Yup.number()
@@ -40,7 +41,7 @@ const Schema = Yup.object().shape({
       item_id: Yup.number()
         .nullable()
         .when(['quantity', 'rate'], {
-          is: (quantity, rate) => quantity || rate,
+          is: (quantity, rate) => !isBlank(quantity) && !isBlank(rate),
           then: Yup.number().required(),
         }),
       discount: Yup.number().nullable().min(0).max(DATATYPES_LENGTH.INT_10),

client/src/containers/Sales/Estimate/EstimateFormBody.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import EditableItemsEntriesTable from 'containers/Entries/EditableItemsEntriesTable';
+
+export default function EstimateFormBody() {
+
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+      <EditableItemsEntriesTable filterSellableItems={true} />
+
+    </div>
+  )
+}

client/src/containers/Sales/Estimate/EstimateFormHeader.js

@@ -1,183 +1,26 @@
-import React, { useCallback } from 'react';
-import {
-  FormGroup,
-  InputGroup,
-  Position,
-  ControlGroup,
-} from '@blueprintjs/core';
-import { DateInput } from '@blueprintjs/datetime';
-import { FormattedMessage as T } from 'react-intl';
-import { FastField, ErrorMessage } from 'formik';
-import { momentFormatter, compose, tansformDateValue, saveInvoke } from 'utils';
+import React from 'react';
+import { compose } from 'utils';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
-import {
-  ContactSelecetList,
-  FieldRequiredHint,
-  Icon,
-  InputPrependButton,
-  Row,
-  Col,
-} from 'components';
+
+import { PageFormBigNumber } from 'components';
 
 import withCustomers from 'containers/Customers/withCustomers';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 
-import { inputIntent, handleDateChange } from 'utils';
-import { formatMessage } from 'services/intl';
+import EstimateFormHeaderFields from './EstimateFormHeaderFields';
 
 function EstimateFormHeader({
-  //#withCustomers
-  customers,
-  // #withDialogActions
-  openDialog,
   // #ownProps
   onEstimateNumberChanged,
 }) {
-  const handleEstimateNumberChange = useCallback(() => {
-    openDialog('estimate-number-form', {});
-  }, [openDialog]);
-
-  const handleEstimateNumberChanged = (event) => {
-    saveInvoke(onEstimateNumberChanged, event.currentTarget.value);
-  };
-
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
-      <div className={'page-form__primary-section'}>
-        {/* ----------- Customer name ----------- */}
-        <FastField name={'customer_id'}>
-          {({ form, field: { value }, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'customer_name'} />}
-              inline={true}
-              className={classNames(
-                CLASSES.FILL,
-                'form-group--customer',
-              )}
-              labelInfo={<FieldRequiredHint />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name={'customer_id'} />}
-            >
-              <ContactSelecetList
-                contactsList={customers}
-                selectedContactId={value}
-                defaultSelectText={<T id={'select_customer_account'} />}
-                onContactSelected={(customer) => {
-                  form.setFieldValue('customer_id', customer.id);
-                }}
-                popoverFill={true}
-              />
-            </FormGroup>
-          )}
-        </FastField>
+      <EstimateFormHeaderFields
+        onEstimateNumberChanged={onEstimateNumberChanged}
+      />
 
-        <Row>
-          <Col md={8} className={'col--estimate-date'}>
-            {/* ----------- Estimate date ----------- */}
-            <FastField name={'estimate_date'}>
-              {({ form, field: { value }, meta: { error, touched } }) => (
-                <FormGroup
-                  label={<T id={'estimate_date'} />}
-                  inline={true}
-                  labelInfo={<FieldRequiredHint />}
-                  className={classNames(
-                    CLASSES.FILL,
-                    'form-group--estimate-date',
-                  )}
-                  intent={inputIntent({ error, touched })}
-                  helperText={<ErrorMessage name="estimate_date" />}
-                >
-                  <DateInput
-                    {...momentFormatter('YYYY/MM/DD')}
-                    value={tansformDateValue(value)}
-                    onChange={handleDateChange((formattedDate) => {
-                      form.setFieldValue('estimate_date', formatMessage);
-                    })}
-                    popoverProps={{ position: Position.BOTTOM, minimal: true }}
-                  />
-                </FormGroup>
-              )}
-            </FastField>
-          </Col>
-
-          <Col md={4} className={'col--expiration-date'}>
-            {/* ----------- Expiration date ----------- */}
-            <FastField name={'expiration_date'}>
-              {({ form, field: { value }, meta: { error, touched } }) => (
-                <FormGroup
-                  label={<T id={'expiration_date'} />}
-                  inline={true}
-                  className={classNames(
-                    CLASSES.FORM_GROUP_LIST_SELECT,
-                    CLASSES.FILL,
-                    'form-group--expiration-date',
-                  )}
-                  intent={inputIntent({ error, touched })}
-                  helperText={<ErrorMessage name="expiration_date" />}
-                >
-                  <DateInput
-                    {...momentFormatter('YYYY/MM/DD')}
-                    value={tansformDateValue(value)}
-                    onChange={handleDateChange((formattedDate) => {
-                      form.setFieldValue('expiration_date', formattedDate);
-                    })}
-                    popoverProps={{ position: Position.BOTTOM, minimal: true }}
-                  />
-                </FormGroup>
-              )}
-            </FastField>
-          </Col>
-        </Row>
-
-        {/* ----------- Estimate number ----------- */}
-        <FastField name={'estimate_number'}>
-          {({ form, field, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'estimate'} />}
-              inline={true}
-              className={('form-group--estimate-number', CLASSES.FILL)}
-              labelInfo={<FieldRequiredHint />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="estimate_number" />}
-            >
-              <ControlGroup fill={true}>
-                <InputGroup
-                  minimal={true}
-                  {...field}
-                  onBlur={handleEstimateNumberChanged}
-                />
-                <InputPrependButton
-                  buttonProps={{
-                    onClick: handleEstimateNumberChange,
-                    icon: <Icon icon={'settings-18'} />,
-                  }}
-                  tooltip={true}
-                  tooltipProps={{
-                    content: 'Setting your auto-generated estimate number',
-                    position: Position.BOTTOM_LEFT,
-                  }}
-                />
-              </ControlGroup>
-            </FormGroup>
-          )}
-        </FastField>
-
-        {/* ----------- Reference ----------- */}
-        <FastField name={'reference'}>
-          {({ form, field, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'reference'} />}
-              inline={true}
-              className={classNames('form-group--reference', CLASSES.FILL)}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="reference" />}
-            >
-              <InputGroup minimal={true} {...field} />
-            </FormGroup>
-          )}
-        </FastField>
-      </div>
+      <PageFormBigNumber label={'Amount'} amount={0} currencyCode={'LYD'} />
     </div>
   );
 }

client/src/containers/Sales/Estimate/EstimateFormHeaderFields.js

@@ -0,0 +1,182 @@
+import React, { useCallback } from 'react';
+import {
+  FormGroup,
+  InputGroup,
+  Position,
+  ControlGroup,
+} from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { FormattedMessage as T } from 'react-intl';
+import { FastField, ErrorMessage } from 'formik';
+import { momentFormatter, compose, tansformDateValue, saveInvoke } from 'utils';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import {
+  ContactSelecetList,
+  FieldRequiredHint,
+  Icon,
+  InputPrependButton,
+  Row,
+  Col,
+} from 'components';
+
+import withCustomers from 'containers/Customers/withCustomers';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { inputIntent, handleDateChange } from 'utils';
+import { formatMessage } from 'services/intl';
+
+function EstimateFormHeader({
+  //#withCustomers
+  customers,
+  // #withDialogActions
+  openDialog,
+  // #ownProps
+  onEstimateNumberChanged,
+}) {
+  const handleEstimateNumberChange = useCallback(() => {
+    openDialog('estimate-number-form', {});
+  }, [openDialog]);
+
+  const handleEstimateNumberChanged = (event) => {
+    saveInvoke(onEstimateNumberChanged, event.currentTarget.value);
+  };
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+      {/* ----------- Customer name ----------- */}
+      <FastField name={'customer_id'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'customer_name'} />}
+            inline={true}
+            className={classNames(CLASSES.FILL, 'form-group--customer')}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'customer_id'} />}
+          >
+            <ContactSelecetList
+              contactsList={customers}
+              selectedContactId={value}
+              defaultSelectText={<T id={'select_customer_account'} />}
+              onContactSelected={(customer) => {
+                form.setFieldValue('customer_id', customer.id);
+              }}
+              popoverFill={true}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Estimate date ----------- */}
+      <FastField name={'estimate_date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'estimate_date'} />}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames(CLASSES.FILL, 'form-group--estimate-date')}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="estimate_date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('estimate_date', formatMessage);
+              })}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Expiration date ----------- */}
+      <FastField name={'expiration_date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'expiration_date'} />}
+            inline={true}
+            className={classNames(
+              CLASSES.FORM_GROUP_LIST_SELECT,
+              CLASSES.FILL,
+              'form-group--expiration-date',
+            )}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="expiration_date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('expiration_date', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Estimate number ----------- */}
+      <FastField name={'estimate_number'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'estimate'} />}
+            inline={true}
+            className={('form-group--estimate-number', CLASSES.FILL)}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="estimate_number" />}
+          >
+            <ControlGroup fill={true}>
+              <InputGroup
+                minimal={true}
+                {...field}
+                onBlur={handleEstimateNumberChanged}
+              />
+              <InputPrependButton
+                buttonProps={{
+                  onClick: handleEstimateNumberChange,
+                  icon: <Icon icon={'settings-18'} />,
+                }}
+                tooltip={true}
+                tooltipProps={{
+                  content: 'Setting your auto-generated estimate number',
+                  position: Position.BOTTOM_LEFT,
+                }}
+              />
+            </ControlGroup>
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Reference ----------- */}
+      <FastField name={'reference'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'reference'} />}
+            inline={true}
+            className={classNames('form-group--reference', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="reference" />}
+          >
+            <InputGroup minimal={true} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
+
+export default compose(
+  withCustomers(({ customers }) => ({
+    customers,
+  })),
+  withDialogActions,
+)(EstimateFormHeader);

client/src/containers/Sales/Estimate/Estimates.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import { useQuery } from 'react-query';
 
@@ -9,6 +9,7 @@ import withCustomersActions from 'containers/Customers/withCustomersActions';
 import withItemsActions from 'containers/Items/withItemsActions';
 import withEstimateActions from './withEstimateActions';
 import withSettingsActions from 'containers/Settings/withSettingsActions';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
 import { compose } from 'utils';
 
@@ -24,10 +25,24 @@ function Estimates({
 
   // #withSettingsActions
   requestFetchOptions,
+
+  // #withDashboardActions
+  setSidebarShrink,
+  resetSidebarPreviousExpand
 }) {
   const history = useHistory();
   const { id } = useParams();
 
+  useEffect(() => {
+    // Shrink the sidebar by foce.
+    setSidebarShrink();
+
+    return () => {
+      // Reset the sidebar to the previous status.
+      resetSidebarPreviousExpand();
+    };
+  }, [resetSidebarPreviousExpand, setSidebarShrink]);
+
   const fetchEstimate = useQuery(
     ['estimate', id],
     (key, _id) => requsetFetchEstimate(_id),
@@ -78,4 +93,5 @@ export default compose(
   withCustomersActions,
   withItemsActions,
   withSettingsActions,
+  withDashboardActions,
 )(Estimates);