feat: journal number setting dialog.

client/src/containers/Accounting/MakeJournalEntriesForm.js

@@ -20,6 +20,8 @@ import withJournalsActions from 'containers/Accounting/withJournalsActions';
 import withManualJournalDetail from 'containers/Accounting/withManualJournalDetail';
 import withAccountsActions from 'containers/Accounts/withAccountsActions';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withSettings from 'containers/Settings/withSettings';
+import withManualJournals from './withManualJournals';
 
 import AppToaster from 'components/AppToaster';
 import Dragzone from 'components/Dragzone';
@@ -27,6 +29,7 @@ import withMediaActions from 'containers/Media/withMediaActions';
 
 import useMedia from 'hooks/useMedia';
 import { compose, repeatValue } from 'utils';
+import withManualJournalsActions from './withManualJournalsActions';
 
 const ERROR = {
   JOURNAL_NUMBER_ALREADY_EXISTS: 'JOURNAL.NUMBER.ALREADY.EXISTS',
@@ -54,6 +57,15 @@ function MakeJournalEntriesForm({
   changePageTitle,
   changePageSubtitle,
 
+  // #withSettings
+  journalNextNumber,
+  journalNumberPrefix,
+  
+  // #withManualJournals
+  nextJournalNumberChanged,
+
+  setJournalNumberChanged,
+
   manualJournalId,
   manualJournal,
   onFormSubmit,
@@ -149,16 +161,19 @@ function MakeJournalEntriesForm({
     [],
   );
 
+  const journalNumber = (journalNumberPrefix) ?
+    `${journalNumberPrefix}-${journalNextNumber}` : journalNextNumber;
+
   const defaultInitialValues = useMemo(
     () => ({
-      journal_number: '',
+      journal_number: journalNumber,
       journal_type: 'Journal',
       date: moment(new Date()).format('YYYY-MM-DD'),
       description: '',
       reference: '',
       entries: [...repeatValue(defaultEntry, 4)],
     }),
-    [defaultEntry],
+    [defaultEntry, journalNumber],
   );
 
   const initialValues = useMemo(
@@ -255,7 +270,6 @@ function MakeJournalEntriesForm({
   };
 
   const formik = useFormik({
-    enableReinitialize: true,
     validationSchema,
     initialValues: {
       ...initialValues,
@@ -354,6 +368,11 @@ function MakeJournalEntriesForm({
     },
   });
 
+  useEffect(() => {
+    formik.setFieldValue('journal_number', journalNumber);
+    setJournalNumberChanged(false);
+  }, [nextJournalNumberChanged, journalNumber]);
+
   const handleSubmitClick = useCallback(
     (payload) => {
       setPayload(payload);
@@ -430,7 +449,15 @@ function MakeJournalEntriesForm({
 export default compose(
   withJournalsActions,
   withManualJournalDetail,
+  withManualJournals(({ nextJournalNumberChanged }) => ({
+    nextJournalNumberChanged,
+  })),
   withAccountsActions,
   withDashboardActions,
   withMediaActions,
+  withSettings(({ manualJournalsSettings }) => ({
+    journalNextNumber: manualJournalsSettings.next_number,
+    journalNumberPrefix: manualJournalsSettings.number_prefix
+  })),
+  withManualJournalsActions,
 )(MakeJournalEntriesForm);

client/src/containers/Accounting/MakeJournalEntriesHeader.js

@@ -5,7 +5,6 @@ import {
   Intent,
   Position,
   Classes,
-  Button,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FormattedMessage as T } from 'react-intl';
@@ -20,6 +19,7 @@ import {
   FieldHint,
   FieldRequiredHint,
   Icon,
+  InputPrependButton
 } from 'components';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -40,7 +40,7 @@ function MakeJournalEntriesHeader({
     [setFieldValue],
   );
   const handleJournalNumberChange = useCallback(() => {
-    openDialog('journalNumber-form', {});
+    openDialog('journal-number-form', {});
   }, [openDialog]);
 
   return (
@@ -63,25 +63,29 @@ function MakeJournalEntriesHeader({
               <ErrorMessage name="journal_number" {...{ errors, touched }} />
             }
             fill={true}
+            
           >
             <InputGroup
               intent={
                 errors.journal_number && touched.journal_number && Intent.DANGER
               }
               fill={true}
+              rightElement={<InputPrependButton
+                buttonProps={{
+                  onClick: handleJournalNumberChange,
+                  icon: (<Icon icon={'settings-18'} />)
+                }}
+                tooltip={true}
+                tooltipProps={{
+                  content: 'Setting your auto-generated journal number',
+                  position: Position.BOTTOM_LEFT,
+                }}
+              />}
               {...getFieldProps('journal_number')}
             />
           </FormGroup>
         </Col>
-        <Col width={50}>
-          {/* <FormGroup> */}
-          <Button
-            className={classNames('btn', Classes.SMALL)}
-            icon={<Icon icon="setting" />}
-            onClick={handleJournalNumberChange}
-          />
-          {/* </FormGroup> */}
-        </Col>
+
         <Col width={220}>
           <FormGroup
             label={<T id={'date'} />}
@@ -173,4 +177,6 @@ function MakeJournalEntriesHeader({
   );
 }
 
-export default compose(withDialogActions)(MakeJournalEntriesHeader);
+export default compose(
+  withDialogActions,
+)(MakeJournalEntriesHeader);

client/src/containers/Accounting/MakeJournalEntriesPage.js

@@ -8,6 +8,7 @@ import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import withCustomersActions from 'containers/Customers/withCustomersActions';
 import withAccountsActions from 'containers/Accounts/withAccountsActions';
 import withManualJournalsActions from 'containers/Accounting/withManualJournalsActions';
+import withSettingsActions from 'containers/Settings/withSettingsActions';
 
 import { compose } from 'utils';
 
@@ -20,6 +21,9 @@ function MakeJournalEntriesPage({
 
   // #withManualJournalActions
   requestFetchManualJournal,
+
+  // #withSettingsActions
+  requestFetchOptions,
 }) {
   const history = useHistory();
   const { id } = useParams();
@@ -32,6 +36,8 @@ function MakeJournalEntriesPage({
     requestFetchCustomers(),
   );
 
+  const fetchSettings = useQuery(['settings'], () => requestFetchOptions({}));
+
   const fetchJournal = useQuery(
     ['manual-journal', id],
     (key, journalId) => requestFetchManualJournal(journalId),
@@ -71,4 +77,5 @@ export default compose(
   withAccountsActions,
   withCustomersActions,
   withManualJournalsActions,
+  withSettingsActions
 )(MakeJournalEntriesPage);

client/src/containers/Accounting/withManualJournals.js

@@ -19,6 +19,8 @@ export default (mapState) => {
 
       manualJournalsPagination: getManualJournalsPagination(state, props, query),
       manualJournalsLoading: state.manualJournals.loading,
+
+      nextJournalNumberChanged: state.manualJournals.nextJournalNumberChanged,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/Accounting/withManualJournalsActions.js

@@ -24,6 +24,10 @@ const mapActionsToProps = (dispatch) => ({
     type: t.MANUAL_JOURNALS_TABLE_QUERIES_ADD,
     queries,
   }),
+  setJournalNumberChanged: (isChanged) => dispatch({
+    type: t.MANUAL_JOURNAL_NUMBER_CHANGED,
+    payload: { isChanged },
+  }),
 });
 
 export default connect(null, mapActionsToProps);