Fix : Estimate-Number-Dialog

client/src/containers/Dialogs/EstimateNumberDialog/EstimateNumberDialogContent.js

@@ -5,6 +5,7 @@ import { useQuery, queryCache } from 'react-query';
 import ReferenceNumberForm from 'containers/JournalNumber/ReferenceNumberForm';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withSettingsActions from 'containers/Settings/withSettingsActions';
+import withEstimateActions from 'containers/Sales/Estimate/withEstimateActions';
 import withSettings from 'containers/Settings/withSettings';
 
 import { compose, optionsMapToArray } from 'utils';
@@ -23,6 +24,9 @@ function EstimateNumberDialogContent({
 
   // #withDialogActions
   closeDialog,
+
+  // #withEstimateActions
+  setEstimateNumberChanged,
 }) {
   const fetchSettings = useQuery(['settings'], () => requestFetchOptions({}));
 
@@ -37,6 +41,7 @@ function EstimateNumberDialogContent({
 
         setTimeout(() => {
           queryCache.invalidateQueries('settings');
+          setEstimateNumberChanged(true);
         }, 250);
       })
       .catch(() => {
@@ -67,4 +72,5 @@ export default compose(
     nextNumber: estimatesSettings?.next_number,
     numberPrefix: estimatesSettings?.number_prefix,
   })),
+  withEstimateActions,
 )(EstimateNumberDialogContent);

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

@@ -20,6 +20,7 @@ import EstimateFloatingActions from './EstimateFloatingActions';
 
 import withEstimateActions from './withEstimateActions';
 import withEstimateDetail from './withEstimateDetail';
+import withEstimates from './withEstimates';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withMediaActions from 'containers/Media/withMediaActions';
 import withSettings from 'containers/Settings/withSettings';
@@ -41,7 +42,7 @@ const EstimateForm = ({
   //#WithEstimateActions
   requestSubmitEstimate,
   requestEditEstimate,
-
+  setEstimateNumberChanged,
   //#withDashboard
   changePageTitle,
   changePageSubtitle,
@@ -53,6 +54,9 @@ const EstimateForm = ({
   //#withEstimateDetail
   estimate,
 
+  // #withEstimates
+  estimateNumberChanged,
+
   //#own Props
   estimateId,
   onFormSubmit,
@@ -81,10 +85,16 @@ const EstimateForm = ({
     savedMediaIds.current = [];
   };
 
+  const estimateNumber = estimateNumberPrefix
+    ? `${estimateNumberPrefix}-${estimateNextNumber}`
+    : estimateNextNumber;
+
   useEffect(() => {
     if (estimate && estimate.id) {
       changePageTitle(formatMessage({ id: 'edit_estimate' }));
+      changePageSubtitle(`No. ${estimate.estimate_number}`);
     } else {
+      changePageSubtitle(`No. ${estimateNumber}`);
       changePageTitle(formatMessage({ id: 'new_estimate' }));
     }
   }, [changePageTitle, estimate, formatMessage]);
@@ -153,9 +163,6 @@ const EstimateForm = ({
     }),
     [],
   );
-  const estimateNumber = estimateNumberPrefix
-    ? `${estimateNumberPrefix}-${estimateNextNumber}`
-    : estimateNextNumber;
 
   const defaultInitialValues = useMemo(
     () => ({
@@ -290,9 +297,20 @@ const EstimateForm = ({
       }
     },
   });
+
   useEffect(() => {
-    formik.setFieldValue('estimate_number', estimateNumber);
-  }, [estimateNumber]);
+    if (estimateNumberChanged) {
+      formik.setFieldValue('estimate_number', estimateNumber);
+      changePageSubtitle(`No. ${estimateNumber}`);
+      setEstimateNumberChanged(false);
+    }
+  }, [
+    estimateNumber,
+    estimateNumberChanged,
+    setEstimateNumberChanged,
+    formik.setFieldValue,
+    changePageSubtitle,
+  ]);
 
   const handleSubmitClick = useCallback(
     (payload) => {
@@ -336,10 +354,20 @@ const EstimateForm = ({
     );
   };
 
+  const handleEstimateNumberChange = useCallback(
+    (estimateNumber) => {
+      changePageSubtitle(`No. ${estimateNumber}`);
+    },
+    [changePageSubtitle],
+  );
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_ESTIMATE)}>
       <form onSubmit={formik.handleSubmit}>
-        <EstimateFormHeader formik={formik} />
+        <EstimateFormHeader
+          onEstimateNumberChanged={handleEstimateNumberChange}
+          formik={formik}
+        />
         <EntriesItemsTable
           entries={formik.values.entries}
           onClickAddNewRow={handleClickAddNewRow}
@@ -401,4 +429,7 @@ export default compose(
     estimateNextNumber: estimatesSettings?.nextNumber,
     estimateNumberPrefix: estimatesSettings?.numberPrefix,
   })),
+  withEstimates(({ estimateNumberChanged }) => ({
+    estimateNumberChanged,
+  })),
 )(EstimateForm);

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

@@ -10,7 +10,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 {
@@ -33,6 +33,8 @@ function EstimateFormHeader({
   customers,
   // #withDialogActions
   openDialog,
+  // #ownProps
+  onEstimateNumberChanged,
 }) {
   const handleDateChange = useCallback(
     (date_filed) => (date) => {
@@ -67,9 +69,14 @@ function EstimateFormHeader({
     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 ----------- */}
         <FormGroup
           label={<T id={'customer_name'} />}
           inline={true}
@@ -94,6 +101,7 @@ function EstimateFormHeader({
 
         <Row>
           <Col md={8} className={'col--estimate-date'}>
+            {/* ----------- Estimate date ----------- */}
             <FormGroup
               label={<T id={'estimate_date'} />}
               inline={true}
@@ -119,6 +127,7 @@ function EstimateFormHeader({
             </FormGroup>
           </Col>
           <Col md={4} className={'col--expiration-date'}>
+            {/* ----------- Expiration date ----------- */}
             <FormGroup
               label={<T id={'expiration_date'} />}
               inline={true}
@@ -146,7 +155,7 @@ function EstimateFormHeader({
           </Col>
         </Row>
 
-        {/*- Estimate -*/}
+        {/* ----------- Estimate number ----------- */}
         <FormGroup
           label={<T id={'estimate'} />}
           inline={true}
@@ -178,9 +187,11 @@ function EstimateFormHeader({
               />
             }
             {...getFieldProps('estimate_number')}
+            onBlur={handleEstimateNumberChanged}
           />
         </FormGroup>
 
+        {/* ----------- Reference ----------- */}
         <FormGroup
           label={<T id={'reference'} />}
           inline={true}

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

@@ -27,6 +27,11 @@ const mapDipatchToProps = (dispatch) => ({
       type: t.ESTIMATES_TABLE_QUERIES_ADD,
       queries,
     }),
+  setEstimateNumberChanged: (isChanged) =>
+    dispatch({
+      type: t.ESTIMATE_NUMBER_CHANGED,
+      payload: { isChanged },
+    }),
 });
 
 export default connect(null, mapDipatchToProps);

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

@@ -13,14 +13,17 @@ export default (mapState) => {
 
   const mapStateToProps = (state, props) => {
     const query = getEstimatesTableQuery(state, props);
-  
+
     const mapped = {
       estimatesCurrentPage: getEstimatesItems(state, props, query),
       estimateViews: getResourceViews(state, props, 'sales_estimates'),
       estimateItems: state.salesEstimates.items,
       estimateTableQuery: query,
+
       estimatesPageination: getEstimatesPaginationMeta(state, props, query),
       estimatesLoading: state.salesEstimates.loading,
+
+      estimateNumberChanged: state.salesEstimates.estimateNumberChanged,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/store/Estimate/estimates.reducer.js

@@ -1,5 +1,6 @@
 import { createReducer } from '@reduxjs/toolkit';
 import { createTableQueryReducers } from 'store/queryReducers';
+import { journalNumberChangedReducer } from 'store/journalNumber.reducer';
 
 import t from 'store/types';
 
@@ -12,6 +13,8 @@ const initialState = {
     page: 1,
   },
   currentViewId: -1,
+
+  estimateNumberChanged: false,
 };
 
 const defaultEstimate = {
@@ -98,6 +101,8 @@ const reducer = createReducer(initialState, {
       },
     };
   },
+
+  ...journalNumberChangedReducer(t.ESTIMATE_NUMBER_CHANGED),
 });
 
 export default createTableQueryReducers('sales_estimates', reducer);

client/src/store/Estimate/estimates.types.js

@@ -8,6 +8,6 @@ export default {
   ESTIMATES_TABLE_LOADING: 'ESTIMATES_TABLE_LOADING',
   ESTIMATES_PAGINATION_SET: 'ESTIMATES_PAGINATION_SET',
   ESTIMATES_PAGE_SET: 'ESTIMATES_PAGE_SET',
-  ESTIMATES_ITEMS_SET:'ESTIMATES_ITEMS_SET',
-
+  ESTIMATES_ITEMS_SET: 'ESTIMATES_ITEMS_SET',
+  ESTIMATE_NUMBER_CHANGED: 'ESTIMATE_NUMBER_CHANGED',
 };