WIP: customer form styling.

fix: journal increment number settings.

client/src/containers/Accounting/MakeJournalEntriesForm.js

@@ -21,14 +21,13 @@ import withManualJournalDetail from 'containers/Accounting/withManualJournalDeta
 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';
 import withMediaActions from 'containers/Media/withMediaActions';
 
 import useMedia from 'hooks/useMedia';
-import { compose, repeatValue } from 'utils';
+import { compose, repeatValue, orderingLinesIndexes } from 'utils';
 import withManualJournalsActions from './withManualJournalsActions';
 
 const ERROR = {
@@ -52,7 +51,6 @@ function MakeJournalEntriesForm({
   // #withJournalsActions
   requestMakeJournalEntries,
   requestEditManualJournal,
-  setJournalNumberChanged,
 
   // #withDashboard
   changePageTitle,
@@ -62,9 +60,6 @@ function MakeJournalEntriesForm({
   journalNextNumber,
   journalNumberPrefix,
 
-  // #withManualJournals
-  journalNumberChanged,
-
   // #ownProps
   manualJournalId,
   manualJournal,
@@ -143,12 +138,6 @@ function MakeJournalEntriesForm({
 
   const [payload, setPayload] = useState({});
 
-  const reorderingEntriesIndex = (entries) =>
-    entries.map((entry, index) => ({
-      ...entry,
-      index: index + 1,
-    }));
-
   const defaultEntry = useMemo(
     () => ({
       index: 0,
@@ -188,7 +177,7 @@ function MakeJournalEntriesForm({
           }
         : {
             ...defaultInitialValues,
-            entries: reorderingEntriesIndex(defaultInitialValues.entries),
+            entries: orderingLinesIndexes(defaultInitialValues.entries),
           }),
     }),
     [manualJournal, defaultInitialValues, defaultEntry],
@@ -377,12 +366,9 @@ function MakeJournalEntriesForm({
     },
   });
 
-  useEffect(() => {
-    if (journalNumberChanged) {
-      setFieldValue('journal_number', journalNumber);
-      setJournalNumberChanged(false);
-    }
-  }, [journalNumberChanged, setJournalNumberChanged, journalNumber, setFieldValue]);
+  useEffect(() => {    
+    setFieldValue('journal_number', journalNumber);
+  }, [journalNumber, setFieldValue]);
 
   // Change page subtitle.
   useEffect(() => {
@@ -420,7 +406,7 @@ function MakeJournalEntriesForm({
   const handleClickAddNewRow = useCallback(() => {
     setFieldValue(
       'entries',
-      reorderingEntriesIndex([...values.entries, defaultEntry]),
+      orderingLinesIndexes([...values.entries, defaultEntry]),
     );
   }, [values.entries, defaultEntry, setFieldValue]);
 
@@ -428,7 +414,7 @@ function MakeJournalEntriesForm({
   const handleClickClearLines = useCallback(() => {
     setFieldValue(
       'entries',
-      reorderingEntriesIndex([...repeatValue(defaultEntry, 4)]),
+      orderingLinesIndexes([...repeatValue(defaultEntry, 4)]),
     );
   }, [defaultEntry, setFieldValue]);
 
@@ -480,9 +466,6 @@ function MakeJournalEntriesForm({
 export default compose(
   withJournalsActions,
   withManualJournalDetail,
-  withManualJournals(({ journalNumberChanged }) => ({
-    journalNumberChanged,
-  })),
   withAccountsActions,
   withDashboardActions,
   withMediaActions,

client/src/containers/Accounting/MakeJournalEntriesHeader.js

@@ -4,13 +4,14 @@ import {
   FormGroup,
   Intent,
   Position,
-  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 classNames from 'classnames';
+
+import { CLASSES } from 'common/classes';
 import { momentFormatter, tansformDateValue, saveInvoke } from 'utils';
 import {
   CurrenciesSelectList,
@@ -19,7 +20,7 @@ import {
   FieldHint,
   FieldRequiredHint,
   Icon,
-  InputPrependButton
+  InputPrependButton,
 } from 'components';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -75,24 +76,25 @@ 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,
-                }}
-              />}
+              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')}
               onBlur={handleJournalNumberChanged}
             />
@@ -106,6 +108,7 @@ function MakeJournalEntriesHeader({
             intent={errors.date && touched.date && Intent.DANGER}
             helperText={<ErrorMessage name="date" {...{ errors, touched }} />}
             minimal={true}
+            className={classNames(CLASSES.FILL)}
           >
             <DateInput
               {...momentFormatter('YYYY/MM/DD')}
@@ -169,7 +172,7 @@ function MakeJournalEntriesHeader({
             className={classNames(
               'form-group--account-type',
               'form-group--select-list',
-              Classes.FILL,
+              CLASSES.FILL,
             )}
           >
             <InputGroup
@@ -183,13 +186,20 @@ function MakeJournalEntriesHeader({
         </Col>
 
         <Col width={230}>
-          <CurrenciesSelectList className={Classes.FILL} />
+          <FormGroup
+            label={<T id={'currency'} />}
+            className={classNames(
+              'form-group--select-list',
+              'form-group--currency',
+              CLASSES.FILL
+            )}
+          >
+            <CurrenciesSelectList />
+          </FormGroup>
         </Col>
       </Row>
     </div>
   );
 }
 
-export default compose(
-  withDialogActions,
-)(MakeJournalEntriesHeader);
+export default compose(withDialogActions)(MakeJournalEntriesHeader);

client/src/containers/Accounting/withManualJournalsActions.js

@@ -24,10 +24,6 @@ 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);