refactoring: expenses landing list.

refactoring: customers landing list.
refactoring: vendors landing list.
refactoring: manual journals landing list.

client/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.js

@@ -0,0 +1,186 @@
+import React from 'react';
+import {
+  InputGroup,
+  FormGroup,
+  Position,
+  ControlGroup,
+} from '@blueprintjs/core';
+import { FastField, ErrorMessage } from 'formik';
+import { DateInput } from '@blueprintjs/datetime';
+import { FormattedMessage as T } from 'react-intl';
+import classNames from 'classnames';
+
+import { CLASSES } from 'common/classes';
+import { momentFormatter, tansformDateValue, saveInvoke } from 'utils';
+import {
+  Hint,
+  FieldHint,
+  FieldRequiredHint,
+  Icon,
+  InputPrependButton,
+  CurrencySelectList,
+} from 'components';
+
+import { useMakeJournalFormContext } from './MakeJournalProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { compose, inputIntent, handleDateChange } from 'utils';
+
+/**
+ * Make journal entries header.
+ */
+function MakeJournalEntriesHeader({
+  // #ownProps
+  onJournalNumberChanged,
+
+  // #withDialog
+  openDialog,
+}) {
+  const { currencies } = useMakeJournalFormContext();
+
+  // Handle journal number change.
+  const handleJournalNumberChange = () => {
+    openDialog('journal-number-form', {});
+  };
+
+  // Handle journal number field blur event.
+  const handleJournalNumberChanged = (event) => {
+    saveInvoke(onJournalNumberChanged, event.currentTarget.value);
+  };
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+      {/*------------ 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>
+
+      {/*------------ Journal number -----------*/}
+      <FastField name={'journal_number'}>
+        {({ form, field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'journal_no'} />}
+            labelInfo={
+              <>
+                <FieldRequiredHint />
+                <FieldHint />
+              </>
+            }
+            className={'form-group--journal-number'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="journal_number" />}
+            fill={true}
+            inline={true}
+          >
+            <ControlGroup fill={true}>
+              <InputGroup
+                fill={true}
+                {...field}
+                onBlur={handleJournalNumberChanged}
+              />
+              <InputPrependButton
+                buttonProps={{
+                  onClick: handleJournalNumberChange,
+                  icon: <Icon icon={'settings-18'} />,
+                }}
+                tooltip={true}
+                tooltipProps={{
+                  content: 'Setting your auto-generated journal number',
+                  position: Position.BOTTOM_LEFT,
+                }}
+              />
+            </ControlGroup>
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ 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>
+
+      {/*------------ 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>
+
+      {/*------------ Currency  -----------*/}
+      <FastField name={'currency_code'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'currency'} />}
+            className={classNames('form-group--currency', CLASSES.FILL)}
+            inline={true}
+          >
+            <CurrencySelectList
+              currenciesList={currencies}
+              selectedCurrencyCode={value}
+              onCurrencySelected={(currencyItem) => {
+                form.setFieldValue('currency_code', currencyItem.currency_code);
+              }}
+              defaultSelectText={value}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
+
+export default compose(
+  withDialogActions,
+)(MakeJournalEntriesHeader);