wip

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.tsx

@@ -6,6 +6,7 @@ import intl from 'react-intl-universal';
 import * as R from 'ramda';
 import { sumBy, round, isEmpty, omit } from 'lodash';
 import classNames from 'classnames';
+import { css } from '@emotion/css';
 import { useHistory } from 'react-router-dom';
 
 import { CLASSES } from '@/constants/classes';
@@ -25,6 +26,7 @@ import withSettings from '@/containers/Settings/withSettings';
 import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
 
 import { AppToaster } from '@/components';
+import { PageForm } from '@/components/PageForm';
 import { compose, orderingLinesIndexes, transactionNumber } from '@/utils';
 import {
   transformErrors,
@@ -175,18 +177,32 @@ function MakeJournalEntriesForm({
         validationSchema={isNewMode ? CreateJournalSchema : EditJournalSchema}
         onSubmit={handleSubmit}
       >
-        <Form>
-          <MakeJournalFormTopBar />
-          <MakeJournalEntriesHeader />
-          <MakeJournalEntriesField />
-          <MakeJournalFormFooter />
-          <MakeJournalFormFloatingActions />
+        <Form
+          className={css({
+            overflow: 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
+            flex: 1,
+          })}
+        >
+          <PageForm flex={1}>
+            <PageForm.Body>
+              <MakeJournalFormTopBar />
+              <MakeJournalEntriesHeader />
+              <MakeJournalEntriesField />
+              <MakeJournalFormFooter />
+            </PageForm.Body>
 
-          {/* --------- Dialogs --------- */}
-          <MakeJournalFormDialogs />
+            <PageForm.Footer>
+              <MakeJournalFormFloatingActions />
+            </PageForm.Footer>
 
-          {/* --------- Effects --------- */}
-          <JournalSyncIncrementSettingsToForm />
+            {/* --------- Dialogs --------- */}
+            <MakeJournalFormDialogs />
+
+            {/* --------- Effects --------- */}
+            <JournalSyncIncrementSettingsToForm />
+          </PageForm>
         </Form>
       </Formik>
     </div>

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.tsx

@@ -1,17 +1,20 @@
 // @ts-nocheck
 import React from 'react';
-import classNames from 'classnames';
-import { CLASSES } from '@/constants/classes';
-import { PageFormBigNumber, FormattedMessage as T } from '@/components';
+import {
+  Group,
+  PageForm,
+  PageFormBigNumber,
+  FormattedMessage as T,
+} from '@/components';
 import MakeJournalEntriesHeaderFields from './MakeJournalEntriesHeaderFields';
 import { useManualJournalTotalFormatted } from './utils';
 
 export default function MakeJournalEntriesHeader() {
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
+    <PageForm.Header>
       <MakeJournalEntriesHeaderFields />
       <MakeJournalHeaderBigNumber />
-    </div>
+    </PageForm.Header>
   );
 }
 

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx

@@ -1,17 +1,13 @@
 // @ts-nocheck
 import React from 'react';
-import { InputGroup, FormGroup, Position } from '@blueprintjs/core';
-import { FastField, ErrorMessage, useFormikContext } from 'formik';
-import { DateInput } from '@blueprintjs/datetime';
+import { Position } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
 import classNames from 'classnames';
+import { useTheme } from '@emotion/react';
+import { css } from '@emotion/css';
 
 import { CLASSES } from '@/constants/classes';
-import {
-  momentFormatter,
-  inputIntent,
-  handleDateChange,
-  tansformDateValue,
-} from '@/utils';
+import {} from '@/utils';
 import {
   Hint,
   FieldRequiredHint,
@@ -19,91 +15,95 @@ import {
   FSelect,
   FormattedMessage as T,
   FFormGroup,
+  FInputGroup,
+  FDateInput,
+  Stack,
 } from '@/components';
 import { useMakeJournalFormContext } from './MakeJournalProvider';
 import { JournalExchangeRateInputField } from './components';
 import { MakeJournalTransactionNoField } from './MakeJournalTransactionNoField';
 
+const getFieldsStyle = (theme: Theme) => css`
+  .${theme.bpPrefix}-form-group {
+    margin-bottom: 0;
+
+    &.${theme.bpPrefix}-inline {
+      max-width: 450px;
+    }
+    .${theme.bpPrefix}-label {
+      min-width: 150px;
+      font-weight: 500;
+    }
+    .${theme.bpPrefix}-form-content {
+      width: 100%;
+    }
+  }
+`;
+
 /**
  * Make journal entries header.
  */
 export default function MakeJournalEntriesHeader({}) {
   const { currencies } = useMakeJournalFormContext();
   const form = useFormikContext();
+  const theme = useTheme();
+  const fieldsClassName = getFieldsStyle(theme);
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+    <Stack spacing={18} flex={1} className={fieldsClassName}>
       {/*------------ Posting date -----------*/}
-      <FastField name={'date'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'posting_date'} />}
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="date" />}
-            minimal={true}
-            inline={true}
-            className={classNames(CLASSES.FILL)}
-          >
-            <DateInput
-              {...momentFormatter('YYYY/MM/DD')}
-              onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('date', formattedDate);
-              })}
-              value={tansformDateValue(value)}
-              popoverProps={{
-                position: Position.BOTTOM,
-                minimal: true,
-              }}
-              inputProps={{
-                leftIcon: <Icon icon={'date-range'} />,
-              }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'date'}
+        label={<T id={'posting_date'} />}
+        labelInfo={<FieldRequiredHint />}
+        inline
+        fastField
+      >
+        <FDateInput
+          name={'date'}
+          formatDate={(date) => date.toLocaleDateString()}
+          parseDate={(str) => new Date(str)}
+          popoverProps={{
+            position: Position.BOTTOM_LEFT,
+            minimal: true,
+            fill: true,
+          }}
+          inputProps={{
+            leftIcon: <Icon icon={'date-range'} />,
+          }}
+          fill
+          fastField
+        />
+      </FFormGroup>
 
       {/*------------ Journal number -----------*/}
       <MakeJournalTransactionNoField />
 
       {/*------------ Reference -----------*/}
-      <FastField name={'reference'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'reference'} />}
-            labelInfo={
-              <Hint
-                content={<T id={'journal_reference_hint'} />}
-                position={Position.RIGHT}
-              />
-            }
-            className={'form-group--reference'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="reference" />}
-            fill={true}
-            inline={true}
-          >
-            <InputGroup fill={true} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'reference'}
+        label={<T id={'reference'} />}
+        labelInfo={
+          <Hint
+            content={<T id={'journal_reference_hint'} />}
+            position={Position.RIGHT}
+          />
+        }
+        inline
+        fastField
+      >
+        <FInputGroup name={'reference'} minimal fill />
+      </FFormGroup>
 
       {/*------------ Journal type  -----------*/}
-      <FastField name={'journal_type'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'journal_type'} />}
-            className={classNames('form-group--account-type', CLASSES.FILL)}
-            inline={true}
-          >
-            <InputGroup
-              intent={inputIntent({ error, touched })}
-              fill={true}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'journal_type'}
+        label={<T id={'journal_type'} />}
+        inline
+        fastField
+      >
+        <FInputGroup name={'journal_type'} minimal fill />
+      </FFormGroup>
 
       {/*------------ Currency  -----------*/}
       <FFormGroup
@@ -136,6 +136,6 @@ export default function MakeJournalEntriesHeader({}) {
         name={'exchange_rate'}
         formGroupProps={{ label: ' ', inline: true }}
       />
-    </div>
+    </Stack>
   );
 }

packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.tsx

@@ -14,6 +14,7 @@ import { useHistory } from 'react-router-dom';
 import { useFormikContext } from 'formik';
 import classNames from 'classnames';
 import { Group, Icon, If, FormattedMessage as T } from '@/components';
+import { PageForm } from '@/components/PageForm';
 import { CLASSES } from '@/constants/classes';
 import { useMakeJournalFormContext } from './MakeJournalProvider';
 
@@ -76,7 +77,7 @@ export default function MakeJournalFloatingAction() {
   };
 
   return (
-    <Group
+    <PageForm.FooterActions
       spacing={10}
       className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
     >
@@ -191,6 +192,6 @@ export default function MakeJournalFloatingAction() {
         onClick={handleCancelBtnClick}
         text={<T id={'cancel'} />}
       />
-    </Group>
+    </PageForm.FooterActions>
   );
 }