Fix : Auto-Increment Dialog

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

@@ -18,8 +18,10 @@ import InvoiceFormHeader from './InvoiceFormHeader';
 import EntriesItemsTable from 'containers/Sales/Estimate/EntriesItemsTable';
 import InvoiceFloatingActions from './InvoiceFloatingActions';
 
+import withInvoices from './withInvoices';
 import withInvoiceActions from './withInvoiceActions';
 import withInvoiceDetail from './withInvoiceDetail';
+
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withMediaActions from 'containers/Media/withMediaActions';
 import withSettings from 'containers/Settings/withSettings';
@@ -33,26 +35,35 @@ import { compose, repeatValue } from 'utils';
 
 const MIN_LINES_NUMBER = 4;
 
+/**
+ * Invoice form.
+ */
+
 function InvoiceForm({
-  //#WithMedia
+  // #WithMedia
   requestSubmitMedia,
   requestDeleteMedia,
 
-  //#WithInvoiceActions
+  // #WithInvoiceActions
   requestSubmitInvoice,
   requestEditInvoice,
+  setInvoiceNumberChanged,
 
-  //#withDashboard
+  // #withDashboard
   changePageTitle,
+  changePageSubtitle,
 
   // #withSettings
   invoiceNextNumber,
   invoiceNumberPrefix,
 
-  //#withInvoiceDetail
+  // #withInvoiceDetail
   invoice,
 
-  //#own Props
+  // #withInvoices
+  invoiceNumberChanged,
+
+  // #own Props
   invoiceId,
   onFormSubmit,
   onCancelForm,
@@ -79,13 +90,20 @@ function InvoiceForm({
   const clearSavedMediaIds = () => {
     savedMediaIds.current = [];
   };
+
+  const invoiceNumber = invoiceNumberPrefix
+    ? `${invoiceNumberPrefix}-${invoiceNextNumber}`
+    : invoiceNextNumber;
+
   useEffect(() => {
     if (invoice && invoice.id) {
       changePageTitle(formatMessage({ id: 'edit_invoice' }));
+      changePageSubtitle(`No. ${invoice.invoice_no}`);
     } else {
+      changePageSubtitle(`No. ${invoiceNumber}`);
       changePageTitle(formatMessage({ id: 'new_invoice' }));
     }
-  }, [changePageTitle, invoice, formatMessage]);
+  }, [changePageTitle, changePageSubtitle, invoice, formatMessage]);
 
   const validationSchema = Yup.object().shape({
     customer_id: Yup.string()
@@ -151,10 +169,6 @@ function InvoiceForm({
     [],
   );
 
-  const invoiceNumber = invoiceNumberPrefix
-    ? `${invoiceNumberPrefix}-${invoiceNextNumber}`
-    : invoiceNextNumber;
-
   const defaultInitialValues = useMemo(
     () => ({
       customer_id: '',
@@ -290,10 +304,18 @@ function InvoiceForm({
       }
     },
   });
-
   useEffect(() => {
-    formik.setFieldValue('invoice_no', invoiceNumber);
-  }, [invoiceNumber]);
+    if (invoiceNumberChanged) {
+      formik.setFieldValue('invoice_no', invoiceNumber);
+      changePageSubtitle(`No. ${invoiceNumber}`);
+      setInvoiceNumberChanged(false);
+    }
+  }, [
+    invoiceNumber,
+    invoiceNumberChanged,
+    formik.setFieldValue,
+    changePageSubtitle,
+  ]);
 
   const handleSubmitClick = useCallback(
     (payload) => {
@@ -335,10 +357,20 @@ function InvoiceForm({
     );
   };
 
+  const handleInvoiceNumberChanged = useCallback(
+    (invoiceNumber) => {
+      changePageSubtitle(`No. ${invoiceNumber}`);
+    },
+    [changePageSubtitle],
+  );
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_INVOICE)}>
       <form onSubmit={formik.handleSubmit}>
-        <InvoiceFormHeader formik={formik} />
+        <InvoiceFormHeader
+          onInvoiceNumberChanged={handleInvoiceNumberChanged}
+          formik={formik}
+        />
         <EntriesItemsTable
           entries={formik.values.entries}
           onClickAddNewRow={handleClickAddNewRow}
@@ -404,4 +436,5 @@ export default compose(
     invoiceNextNumber: invoiceSettings?.nextNumber,
     invoiceNumberPrefix: invoiceSettings?.numberPrefix,
   })),
+  withInvoices(({ invoiceNumberChanged }) => ({ invoiceNumberChanged })),
 )(InvoiceForm);

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

@@ -9,7 +9,7 @@ import {
 import { DateInput } from '@blueprintjs/datetime';
 import { FormattedMessage as T } from 'react-intl';
 import moment from 'moment';
-import { momentFormatter, compose, tansformDateValue } from 'utils';
+import { momentFormatter, compose, tansformDateValue, saveInvoke } from 'utils';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import {
@@ -32,6 +32,9 @@ function InvoiceFormHeader({
   customers,
   //#withDialogActions
   openDialog,
+
+  // #ownProps
+  onInvoiceNumberChanged,
 }) {
   const handleDateChange = useCallback(
     (date_filed) => (date) => {
@@ -41,17 +44,6 @@ function InvoiceFormHeader({
     [setFieldValue],
   );
 
-  const CustomerRenderer = useCallback(
-    (cutomer, { handleClick }) => (
-      <MenuItem
-        key={cutomer.id}
-        text={cutomer.display_name}
-        onClick={handleClick}
-      />
-    ),
-    [],
-  );
-
   // handle change customer
   const onChangeCustomer = useCallback(
     (filedName) => {
@@ -66,6 +58,10 @@ function InvoiceFormHeader({
     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)}>
@@ -144,6 +140,7 @@ function InvoiceFormHeader({
             </FormGroup>
           </Col>
         </Row>
+        
         {/* ----------- Invoice number ----------- */}
         <FormGroup
           label={<T id={'invoice_no'} />}
@@ -171,6 +168,7 @@ function InvoiceFormHeader({
               />
             }
             {...getFieldProps('invoice_no')}
+            onBlur={handleInvoiceNumberChanged}
           />
         </FormGroup>
 

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

@@ -27,6 +27,11 @@ const mapDipatchToProps = (dispatch) => ({
       type: t.INVOICES_TABLE_QUERIES_ADD,
       _queries,
     }),
+
+    setInvoiceNumberChanged: (isChanged) => dispatch({
+      type: t.INVOICE_NUMBER_CHANGED,
+      payload: { isChanged },
+    }),
 });
 
 export default connect(null, mapDipatchToProps);

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

@@ -4,7 +4,7 @@ import {
   getInvoiceCurrentPageFactory,
   getInvoicePaginationMetaFactory,
   getInvoiceTableQueryFactory,
-  getCustomerReceivableInvoicesEntriesFactory
+  getCustomerReceivableInvoicesEntriesFactory,
 } from 'store/Invoice/invoices.selector';
 
 export default (mapState) => {
@@ -25,7 +25,12 @@ export default (mapState) => {
       invoicesTableQuery: query,
       invoicesPageination: getInvoicesPaginationMeta(state, props, query),
       invoicesLoading: state.salesInvoices.loading,
-      customerInvoiceEntries: getCustomerReceivableInvoicesEntries(state, props),
+      customerInvoiceEntries: getCustomerReceivableInvoicesEntries(
+        state,
+        props,
+      ),
+
+      invoiceNumberChanged: state.salesInvoices.journalNumberChanged,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };