wip

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>
   );
 }