feat: style bill form.

feat: add row and column of grid components.

client/src/containers/Purchases/Bill/BillForm.js

@@ -9,11 +9,10 @@ import * as Yup from 'yup';
 import { useFormik } from 'formik';
 import moment from 'moment';
 import { Intent, FormGroup, TextArea } from '@blueprintjs/core';
-import { Row, Col } from 'react-grid-system';
-
+import classNames from 'classnames';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { pick } from 'lodash';
-
+import { CLASSES } from 'common/classes';
 import BillFormHeader from './BillFormHeader';
 import EstimatesItemsTable from 'containers/Sales/Estimate/EntriesItemsTable';
 import BillFormFooter from './BillFormFooter';
@@ -25,7 +24,7 @@ import withBillActions from './withBillActions';
 import withBillDetail from './withBillDetail';
 import withSettings from 'containers/Settings/withSettings';
 
-import { AppToaster } from 'components';
+import { AppToaster, Row, Col  } from 'components';
 import Dragzone from 'components/Dragzone';
 import useMedia from 'hooks/useMedia';
 
@@ -306,34 +305,40 @@ function BillForm({
     );
   };
   return (
-    <div className={'bill-form'}>
+    <div className={classNames(
+      CLASSES.PAGE_FORM,
+      CLASSES.PAGE_FORM_BILL,
+    )}>
       <form onSubmit={formik.handleSubmit}>
         <BillFormHeader formik={formik} />
+
         <EstimatesItemsTable
           formik={formik}
           entries={formik.values.entries}
           onClickAddNewRow={onClickAddNewRow}
           onClickClearAllLines={onClickCleanAllLines}
         />
-        <Row>
-          <Col>
-            <FormGroup label={<T id={'note'} />} className={'form-group--'}>
-              <TextArea
-                growVertically={true}
-                {...formik.getFieldProps('note')}
-              />
-            </FormGroup>
-          </Col>
+        <div class="page-form__footer">
+          <Row>
+            <Col md={8}>
+              <FormGroup label={<T id={'note'} />} className={'form-group--note'}>
+                <TextArea
+                  growVertically={true}
+                  {...formik.getFieldProps('note')}
+                />
+              </FormGroup>
+            </Col>
 
-          <Col>
-            <Dragzone
-              initialFiles={initialAttachmentFiles}
-              onDrop={handleDropFiles}
-              onDeleteFile={handleDeleteFile}
-              hint={'Attachments: Maxiumum size: 20MB'}
-            />
-          </Col>
-        </Row>
+            <Col md={4}>
+              <Dragzone
+                initialFiles={initialAttachmentFiles}
+                onDrop={handleDropFiles}
+                onDeleteFile={handleDeleteFile}
+                hint={'Attachments: Maxiumum size: 20MB'}
+              />
+            </Col>
+          </Row>
+        </div>
       </form>
       <BillFormFooter
         formik={formik}

client/src/containers/Purchases/Bill/BillFormHeader.js

@@ -1,24 +1,23 @@
-import React, { useMemo, useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import {
   FormGroup,
   InputGroup,
   Intent,
   Position,
   MenuItem,
-  Classes,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FormattedMessage as T } from 'react-intl';
-import { Row, Col } from 'react-grid-system';
 import moment from 'moment';
 import { momentFormatter, compose, tansformDateValue } from 'utils';
 import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
 import {
   ListSelect,
   ErrorMessage,
   FieldRequiredHint,
-  Icon,
-  InputPrependButton,
+  Row,
+  Col,
 } from 'components';
 
 // import withCustomers from 'containers/Customers/withCustomers';
@@ -30,13 +29,7 @@ function BillFormHeader({
   formik: { errors, touched, setFieldValue, getFieldProps, values },
 
   //#withVendors
-  vendorsCurrentPage,
   vendorItems,
-  //#withAccouts
-  accountsList,
-
-  // #withDialog
-  openDialog,
 }) {
   const handleDateChange = useCallback(
     (date_filed) => (date) => {
@@ -80,18 +73,18 @@ function BillFormHeader({
     }
   };
 
-  const handleBillNumberChange = useCallback(() => {
-    openDialog('bill-number-form', {});
-  }, [openDialog]);
-
   return (
-    <div className="page-form page-form--bill">
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <div className={'page-form__primary-section'}>
-        {/* Vendor  account name */}
+        {/* Vendor name */}
         <FormGroup
           label={<T id={'vendor_name'} />}
           inline={true}
-          className={classNames('form-group--select-list', Classes.FILL)}
+          className={classNames(
+            'form-group--select-list',
+            'form-group--vendor',
+            CLASSES.FILL,
+          )}
           labelInfo={<FieldRequiredHint />}
           intent={errors.vendor_id && touched.vendor_id && Intent.DANGER}
           helperText={
@@ -111,13 +104,15 @@ function BillFormHeader({
             labelProp={'display_name'}
           />
         </FormGroup>
-        <Row>
-          <Col>
+
+        <Row className={'row--bill-date'}>
+          <Col md={7}>
+            {/* Bill date */}
             <FormGroup
               label={<T id={'bill_date'} />}
               inline={true}
               labelInfo={<FieldRequiredHint />}
-              className={classNames('form-group--select-list', Classes.FILL)}
+              className={classNames('form-group--select-list', CLASSES.FILL)}
               intent={errors.bill_date && touched.bill_date && Intent.DANGER}
               helperText={
                 <ErrorMessage name="bill_date" {...{ errors, touched }} />
@@ -131,11 +126,17 @@ function BillFormHeader({
               />
             </FormGroup>
           </Col>
-          <Col>
+
+          <Col md={5}>
+            {/* Due date */}
             <FormGroup
               label={<T id={'due_date'} />}
               inline={true}
-              className={classNames('form-group--select-list', Classes.FILL)}
+              className={classNames(
+                'form-group--due-date',
+                'form-group--select-list',
+                CLASSES.FILL
+              )}
               intent={errors.due_date && touched.due_date && Intent.DANGER}
               helperText={
                 <ErrorMessage name="due_date" {...{ errors, touched }} />
@@ -150,12 +151,12 @@ function BillFormHeader({
             </FormGroup>
           </Col>
         </Row>
-        {/* bill number */}
+
+        {/* Bill number */}
         <FormGroup
           label={<T id={'bill_number'} />}
           inline={true}
-          className={('form-group--bill_number', Classes.FILL)}
-          labelInfo={<FieldRequiredHint />}
+          className={('form-group--bill_number', CLASSES.FILL)}
           intent={errors.bill_number && touched.bill_number && Intent.DANGER}
           helperText={
             <ErrorMessage name="bill_number" {...{ errors, touched }} />
@@ -164,43 +165,35 @@ function BillFormHeader({
           <InputGroup
             intent={errors.bill_number && touched.bill_number && Intent.DANGER}
             minimal={true}
-            rightElement={
-              <InputPrependButton
-                buttonProps={{
-                  onClick: handleBillNumberChange,
-                  icon: <Icon icon={'settings-18'} />,
-                }}
-                tooltip={true}
-                tooltipProps={{
-                  content: 'Setting your auto-generated bill number',
-                  position: Position.BOTTOM_LEFT,
-                }}
-              />
-            }
             {...getFieldProps('bill_number')}
           />
         </FormGroup>
-      </div>
-      <FormGroup
-        label={<T id={'reference'} />}
-        inline={true}
-        className={classNames('form-group--reference', Classes.FILL)}
-        intent={errors.reference_no && touched.reference_no && Intent.DANGER}
-        helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
-      >
-        <InputGroup
+
+        {/* Reference */}
+        <FormGroup
+          label={<T id={'reference'} />}
+          inline={true}
+          className={classNames('form-group--reference', CLASSES.FILL)}
           intent={errors.reference_no && touched.reference_no && Intent.DANGER}
-          minimal={true}
-          {...getFieldProps('reference_no')}
-        />
-      </FormGroup>
+          helperText={
+            <ErrorMessage name="reference" {...{ errors, touched }} />
+          }
+        >
+          <InputGroup
+            intent={
+              errors.reference_no && touched.reference_no && Intent.DANGER
+            }
+            minimal={true}
+            {...getFieldProps('reference_no')}
+          />
+        </FormGroup>
+      </div>
     </div>
   );
 }
 
 export default compose(
-  withVendors(({ vendorsCurrentPage, vendorItems }) => ({
-    vendorsCurrentPage,
+  withVendors(({ vendorItems }) => ({
     vendorItems,
   })),
   withAccounts(({ accountsList }) => ({