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

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

@@ -13,10 +13,12 @@ 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 BillFloatingActions from './BillFloatingActions';
 import BillFormFooter from './BillFormFooter';
+
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withMediaActions from 'containers/Media/withMediaActions';
 import withBillActions from './withBillActions';
@@ -41,6 +43,7 @@ function BillForm({
 
   //#withDashboard
   changePageTitle,
+  changePageSubtitle,
 
   //#withBillDetail
   bill,
@@ -234,6 +237,7 @@ function BillForm({
             setSubmitting(false);
             saveBillSubmit({ action: 'update', ...payload });
             resetForm();
+            changePageSubtitle('');
           })
           .catch((errors) => {
             handleErrors(errors, { setErrors });
@@ -301,10 +305,22 @@ function BillForm({
       orderingIndex([...formik.values.entries, defaultBill]),
     );
   };
+
+  const handleBillNumberChanged = useCallback((billNumber) => {
+    changePageSubtitle(billNumber);
+  }, []);
+
+  // Clear page subtitle once unmount bill form page.
+  useEffect(() => () => {
+    changePageSubtitle('');
+  }, [changePageSubtitle]);
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_BILL)}>
       <form onSubmit={formik.handleSubmit}>
-        <BillFormHeader formik={formik} />
+        <BillFormHeader
+          formik={formik}
+          onBillNumberChanged={handleBillNumberChanged} />
 
         <EstimatesItemsTable
           formik={formik}

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

@@ -27,6 +27,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 
 function BillFormHeader({
   formik: { errors, touched, setFieldValue, getFieldProps, values },
+  onBillNumberChanged,
 
   //#withVendors
   vendorItems,
@@ -48,6 +49,10 @@ function BillFormHeader({
     [setFieldValue],
   );
 
+  const handleBillNumberBlur = (event) => {
+    onBillNumberChanged && onBillNumberChanged(event.currentTarget.value);
+  };
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <div className={'page-form__primary-section'}>
@@ -135,6 +140,7 @@ function BillFormHeader({
             intent={errors.bill_number && touched.bill_number && Intent.DANGER}
             minimal={true}
             {...getFieldProps('bill_number')}
+            onBlur={handleBillNumberBlur}
           />
         </FormGroup>
 

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

@@ -5,8 +5,7 @@ import {
   getBillPaginationMetaFactory,
   getBillTableQueryFactory,
   getVendorPayableBillsFactory,
-  getPayableBillsByPaymentMadeFactory,
-  getPaymentMadeFormPayableBillsFactory
+  getVendorPayableBillsEntriesFactory,
 } from 'store/Bills/bills.selectors';
 
 export default (mapState) => {
@@ -14,8 +13,7 @@ export default (mapState) => {
   const getBillsPaginationMeta = getBillPaginationMetaFactory();
   const getBillTableQuery = getBillTableQueryFactory();
   const getVendorPayableBills = getVendorPayableBillsFactory();
-  const getPayableBillsByPaymentMade = getPayableBillsByPaymentMadeFactory();
-  const getPaymentMadeFormPayableBills = getPaymentMadeFormPayableBillsFactory();
+  const getVendorPayableBillsEntries = getVendorPayableBillsEntriesFactory();
 
   const mapStateToProps = (state, props) => {
     const tableQuery = getBillTableQuery(state, props);
@@ -29,9 +27,8 @@ export default (mapState) => {
       billsPageination: getBillsPaginationMeta(state, props, tableQuery),
       billsLoading: state.bills.loading,
       nextBillNumberChanged: state.bills.nextBillNumberChanged,
-
-      // vendorPayableBills: getVendorPayableBills(state, props),
-      paymentMadePayableBills: getPaymentMadeFormPayableBills(state, props), 
+      vendorPayableBills: getVendorPayableBills(state, props),
+      vendorPayableBillsEntries: getVendorPayableBillsEntries(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };