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/Invoice/InvoiceForm.js

@@ -44,8 +44,8 @@ const defaultInvoice = {
   index: 0,
   item_id: '',
   rate: '',
-  discount: 0,
-  quantity: '',
+  discount: '',
+  quantity: 1,
   description: '',
 };
 
@@ -232,7 +232,11 @@ function InvoiceForm({
   );
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_INVOICE)}>
+    <div className={classNames(
+      CLASSES.PAGE_FORM,
+      CLASSES.PAGE_FORM_STRIP_STYLE,
+      CLASSES.PAGE_FORM_INVOICE
+    )}>
       <Formik
         validationSchema={
           isNewMode ? CreateInvoiceFormSchema : EditInvoiceFormSchema
@@ -246,10 +250,13 @@ function InvoiceForm({
               onInvoiceNumberChanged={handleInvoiceNumberChanged}
             />
             <InvoiceNumberChangeWatcher invoiceNumber={invoiceNumber} />
-            <EditableItemsEntriesTable
-              defaultEntry={defaultInvoice}
-              filterSellableItems={true}
-            />
+
+            <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+              <EditableItemsEntriesTable
+                defaultEntry={defaultInvoice}
+                filterSellableItems={true}
+              />
+            </div>
             <InvoiceFormFooter />
             <InvoiceFloatingActions
               isSubmitting={isSubmitting}
@@ -269,7 +276,6 @@ export default compose(
   withDashboardActions,
   withMediaActions,
   withInvoiceDetail(),
-
   withSettings(({ invoiceSettings }) => ({
     invoiceNextNumber: invoiceSettings?.nextNumber,
     invoiceNumberPrefix: invoiceSettings?.numberPrefix,

client/src/containers/Sales/Invoice/InvoiceForm.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.string()
@@ -39,7 +40,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/Invoice/InvoiceFormHeader.js

@@ -1,188 +1,28 @@
-import React, { useCallback } from 'react';
-import {
-  FormGroup,
-  InputGroup,
-  Position,
-  ControlGroup,
-} from '@blueprintjs/core';
-import { DateInput } from '@blueprintjs/datetime';
-import { FastField, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
-import { momentFormatter, compose, tansformDateValue, saveInvoke } from 'utils';
+import React from 'react';
 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';
-
-function InvoiceFormHeader({
-  //#withCustomers
-  customers,
-  //#withDialogActions
-  openDialog,
+import InvoiceFormHeaderFields from './InvoiceFormHeaderFields';
+import { PageFormBigNumber } from 'components';
 
+/**
+ * Invoice form header section.
+ */
+export default function InvoiceFormHeader({
   // #ownProps
   onInvoiceNumberChanged,
 }) {
-  const handleInvoiceNumberChange = useCallback(() => {
-    openDialog('invoice-number-form', {});
-  }, [openDialog]);
-
-  const handleInvoiceNumberChanged = (event) => {
-    saveInvoke(onInvoiceNumberChanged, event.currentTarget.value);
-  };
-
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
-      <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
-        {/* ----------- Customer name ----------- */}
-        <FastField name={'customer_id'}>
-          {({ form, field: { value }, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'customer_name'} />}
-              inline={true}
-              className={classNames(
-                'form-group--customer-name',
-                CLASSES.FILL,
-              )}
-              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>
+      <InvoiceFormHeaderFields
+        onInvoiceNumberChanged={onInvoiceNumberChanged}
+      />
 
-        <Row>
-          <Col md={7} className={'col--invoice-date'}>
-            {/* ----------- Invoice date ----------- */}
-            <FastField name={'invoice_date'}>
-              {({ form, field: { value }, meta: { error, touched } }) => (
-                <FormGroup
-                  label={<T id={'invoice_date'} />}
-                  inline={true}
-                  labelInfo={<FieldRequiredHint />}
-                  className={classNames(
-                    'form-group--invoice-date',
-                    CLASSES.FILL,
-                  )}
-                  intent={inputIntent({ error, touched })}
-                  helperText={<ErrorMessage name="invoice_date" />}
-                >
-                  <DateInput
-                    {...momentFormatter('YYYY/MM/DD')}
-                    value={tansformDateValue(value)}
-                    onChange={handleDateChange((formattedDate) => {
-                      form.setFieldValue('invoice_date', formattedDate);
-                    })}
-                    popoverProps={{ position: Position.BOTTOM, minimal: true }}
-                  />
-                </FormGroup>
-              )}
-            </FastField>
-          </Col>
-
-          <Col md={5} className={'col--due-date'}>
-            {/* ----------- Due date ----------- */}
-            <FastField name={'due_date'}>
-              {({ form, field: { value }, meta: { error, touched } }) => (
-                <FormGroup
-                  label={<T id={'due_date'} />}
-                  inline={true}
-                  className={classNames(
-                    'form-group--due-date',
-                    CLASSES.FILL,
-                  )}
-                  intent={inputIntent({ error, touched })}
-                  helperText={<ErrorMessage name="due_date" />}
-                >
-                  <DateInput
-                    {...momentFormatter('YYYY/MM/DD')}
-                    value={tansformDateValue(value)}
-                    onChange={handleDateChange((formattedDate) => {
-                      form.setFieldValue('due_date', formattedDate);
-                    })}
-                    popoverProps={{ position: Position.BOTTOM, minimal: true }}
-                  />
-                </FormGroup>
-              )}
-            </FastField>
-          </Col>
-        </Row>
-
-        {/* ----------- Invoice number ----------- */}
-        <FastField name={'invoice_no'}>
-          {({ form, field, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'invoice_no'} />}
-              inline={true}
-              className={classNames('form-group--invoice-no', CLASSES.FILL)}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="invoice_no" />}
-            >
-              <ControlGroup fill={true}>
-                <InputGroup
-                  minimal={true}
-                  {...field}
-                  onBlur={handleInvoiceNumberChanged}
-                />
-                <InputPrependButton
-                  buttonProps={{
-                    onClick: handleInvoiceNumberChange,
-                    icon: <Icon icon={'settings-18'} />,
-                  }}
-                  tooltip={true}
-                  tooltipProps={{
-                    content: 'Setting your auto-generated invoice number',
-                    position: Position.BOTTOM_LEFT,
-                  }}
-                />
-              </ControlGroup>
-            </FormGroup>
-          )}
-        </FastField>
-
-        {/* ----------- Reference ----------- */}
-        <FastField name={'reference'}>
-          {({ 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={'Due Amount'}
+        amount={0}
+        currencyCode={'LYD'}
+      />
     </div>
   );
-}
-
-export default compose(
-  withCustomers(({ customers }) => ({
-    customers,
-  })),
-  withDialogActions,
-)(InvoiceFormHeader);
+}

client/src/containers/Sales/Invoice/InvoiceFormHeaderFields.js

@@ -0,0 +1,176 @@
+import React, { useCallback } from 'react';
+import {
+  FormGroup,
+  InputGroup,
+  Position,
+  ControlGroup,
+} from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { FastField, ErrorMessage } from 'formik';
+import { FormattedMessage as T } from 'react-intl';
+import { momentFormatter, compose, tansformDateValue, saveInvoke } from 'utils';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import {
+  ContactSelecetList,
+  FieldRequiredHint,
+  Icon,
+  InputPrependButton,
+} from 'components';
+
+import withCustomers from 'containers/Customers/withCustomers';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { inputIntent, handleDateChange } from 'utils';
+
+function InvoiceFormHeaderFields({
+  // #withCustomers
+  customers,
+
+  // #withDialogActions
+  openDialog,
+
+  // #ownProps
+  onInvoiceNumberChanged,
+}) {
+  const handleInvoiceNumberChange = useCallback(() => {
+    openDialog('invoice-number-form', {});
+  }, [openDialog]);
+
+  const handleInvoiceNumberChanged = (event) => {
+    saveInvoke(onInvoiceNumberChanged, 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('form-group--customer-name', CLASSES.FILL)}
+            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>
+
+      {/* ----------- Invoice date ----------- */}
+      <FastField name={'invoice_date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'invoice_date'} />}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames('form-group--invoice-date', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="invoice_date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('invoice_date', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Due date ----------- */}
+      <FastField name={'due_date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'due_date'} />}
+            inline={true}
+            className={classNames('form-group--due-date', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="due_date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('due_date', formattedDate);
+              })}
+              popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Invoice number ----------- */}
+      <FastField name={'invoice_no'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'invoice_no'} />}
+            inline={true}
+            className={classNames('form-group--invoice-no', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="invoice_no" />}
+          >
+            <ControlGroup fill={true}>
+              <InputGroup
+                minimal={true}
+                {...field}
+                onBlur={handleInvoiceNumberChanged}
+              />
+              <InputPrependButton
+                buttonProps={{
+                  onClick: handleInvoiceNumberChange,
+                  icon: <Icon icon={'settings-18'} />,
+                }}
+                tooltip={true}
+                tooltipProps={{
+                  content: 'Setting your auto-generated invoice number',
+                  position: Position.BOTTOM_LEFT,
+                }}
+              />
+            </ControlGroup>
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/* ----------- Reference ----------- */}
+      <FastField name={'reference'}>
+        {({ 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,
+)(InvoiceFormHeaderFields);

client/src/containers/Sales/Invoice/Invoices.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 withInvoiceActions from './withInvoiceActions';
 import withSettingsActions from 'containers/Settings/withSettingsActions';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
 import { compose } from 'utils';
 
@@ -24,15 +25,29 @@ function Invoices({
 
   // #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 fetchInvoice = useQuery(
     ['invoice', id],
     (key, _id) => requsetFetchInvoice(_id),
     { enabled: !!id },
-  );
+);
 
   const fetchSettings = useQuery(['settings'], () => requestFetchOptions({}));
 
@@ -64,8 +79,8 @@ function Invoices({
       name={'invoice-form'}
     >
       <InvoiceForm
-        onFormSubmit={handleFormSubmit}
         invoiceId={id}
+        onFormSubmit={handleFormSubmit}
         onCancelForm={handleCancel}
       />
     </DashboardInsider>
@@ -77,4 +92,5 @@ export default compose(
   withCustomersActions,
   withItemsActions,
   withSettingsActions,
+  withDashboardActions,
 )(Invoices);