feat: financial report numbers format dropdown.

client/src/components/FinancialSheet.js

@@ -1,9 +1,11 @@
 import React, { useMemo, useCallback } from 'react';
 import moment from 'moment';
 import classnames from 'classnames';
-import { LoadingIndicator, MODIFIER } from 'components';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-import { If } from 'components';
+
+import { If, LoadingIndicator, MODIFIER } from 'components';
+
+import 'style/pages/FinancialStatements/FinancialSheet.scss';
 
 export default function FinancialSheet({
   companyName,

client/src/components/NumberFormatDropdown/NumberFormatFields.js

@@ -0,0 +1,139 @@
+import React from 'react';
+import { FastField, ErrorMessage } from 'formik';
+import { FormGroup, Checkbox, Switch } from '@blueprintjs/core';
+import { CLASSES } from 'common/classes';
+import { ListSelect } from 'components';
+import { FormattedMessage as T } from 'react-intl';
+import { inputIntent } from 'utils';
+import {
+  moneyFormat,
+  negativeFormat,
+  decimalPlaces,
+} from 'common/numberFormatsOptions';
+import classNames from 'classnames';
+
+/**
+ *  Number Formats Fields.
+ */
+export default function NumberFormatFields({}) {
+  return (
+    <div className={'number-format-dropdown__content'}>
+      {/*------------ Negative formats -----------*/}
+      <FastField name={'negativeFormat'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'negative_format'} />}
+            helperText={<ErrorMessage name="negativeFormat" />}
+            intent={inputIntent({ error, touched })}
+            className={classNames(CLASSES.FILL)}
+          >
+            <ListSelect
+              items={negativeFormat}
+              onItemSelect={(format) => {
+                form.setFieldValue('negativeFormat', format.key);
+              }}
+              filterable={false}
+              selectedItem={value}
+              selectedItemProp={'key'}
+              textProp={'text'}
+              popoverProps={{ minimal: true, captureDismiss: true }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Decimal places -----------*/}
+      <FastField name={'precision'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'decimal_places'} />}
+            helperText={<ErrorMessage name="format_money" />}
+            intent={inputIntent({ error, touched })}
+            className={classNames(CLASSES.FILL)}
+          >
+            <ListSelect
+              items={decimalPlaces}
+              onItemSelect={(format) => {
+                form.setFieldValue('precision', format.key);
+              }}
+              filterable={false}
+              selectedItem={value}
+              selectedItemProp={'key'}
+              textProp={'text'}
+              popoverProps={{ minimal: true, captureDismiss: true }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Money formats -----------*/}
+      <FastField name={'formatMoney'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'money_format'} />}
+            helperText={<ErrorMessage name="formatMoney" />}
+            intent={inputIntent({ error, touched })}
+            className={classNames(CLASSES.FILL)}
+          >
+            <ListSelect
+              items={moneyFormat}
+              onItemSelect={(format) => {
+                form.setFieldValue('formatMoney', format.key);
+              }}
+              filterable={false}
+              selectedItem={value}
+              selectedItemProp={'key'}
+              textProp={'text'}
+              popoverProps={{ minimal: true, captureDismiss: true }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      <div className="toggles-fields">
+        {/*------------ show zero -----------*/}
+        <FastField name={'showZero'} type={'checkbox'}>
+          {({ field }) => (
+            <FormGroup inline={true}>
+              <Switch
+                inline={true}
+                small={true}
+                label={<T id={'show_zero'} />}
+                name={'showZero'}
+                {...field}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+
+        {/*------------ show negative in red-----------*/}
+        <FastField name={'showInRed'} type={'checkbox'}>
+          {({ field }) => (
+            <FormGroup inline={true}>
+              <Switch
+                inline={true}
+                label={<T id={'show_negative_in_red'} />}
+                name={'showInRed'}
+                {...field}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+
+        {/*------------ Divide on 1000 -----------*/}
+        <FastField name={'divideOn1000'} type={'checkbox'}>
+          {({ field }) => (
+            <FormGroup inline={true}>
+              <Switch
+                inline={true}
+                label={<T id={'divide_on_1000'} />}
+                name={'divideOn1000'}
+                {...field}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+      </div>
+    </div>
+  );
+}

client/src/components/NumberFormatDropdown/NumberFormatFooter.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { Button, Classes, Intent } from '@blueprintjs/core';
+import classNames from 'classnames';
+import { FormattedMessage as T } from 'react-intl';
+
+/**
+ * Number format footer.
+ */
+export default function NumberFormatFooter({
+  // #ownProps
+  onCancelClick,
+  submitDisabled
+}) {
+  return (
+    <div className={classNames('number-format-dropdown__footer')}>
+      <Button
+        className={classNames('mr1', Classes.POPOVER_DISMISS)}
+        onClick={onCancelClick}
+        small={true}
+      >
+        <T id={'cancel'} />
+      </Button>
+
+      <Button
+        intent={Intent.PRIMARY}
+        disabled={submitDisabled}
+        small={true}
+        type="submit"
+      >
+        <T id={'run'} />
+      </Button>
+    </div>
+  );
+}

client/src/components/NumberFormatDropdown/index.js

@@ -0,0 +1,45 @@
+import React, { useCallback } from 'react';
+import { Formik, Form } from 'formik';
+
+import 'style/pages/FinancialStatements/NumberFormatDropdown.scss';
+
+import NumberFormatFields from './NumberFormatFields';
+import NumberFormatFooter from './NumberFormatFooter';
+
+/**
+ * Number format form popover content.
+ */
+export default function NumberFormatDropdown({
+  numberFormat = {},
+  onSubmit,
+  submitDisabled = false,
+}) {
+  const initialValues = {
+    formatMoney: 'total',
+    showZero: false,
+    showInRed: false,
+    divideOn1000: false,
+    negativeFormat: 'mines',
+    precision: 2,
+    ...numberFormat
+  };
+  // Handle cancel button click.
+  const handleCancelClick = useCallback(() => {}, []);
+
+  // Handle form submit.
+  const handleFormSubmit = (values, { setSubmitting }) => {
+    setSubmitting(true);
+    onSubmit(values);
+  };
+
+  return (
+    <div className={'number-format-dropdown'}>
+      <Formik initialValues={initialValues} onSubmit={handleFormSubmit}>
+        <Form>
+          <NumberFormatFields onCancelClick={handleCancelClick} />
+          <NumberFormatFooter submitDisabled={submitDisabled} />
+        </Form>
+      </Formik>
+    </div>
+  );
+}

client/src/components/NumberFormats/NumberFormatFields.js

@@ -1,169 +0,0 @@
-import React from 'react';
-import { Form, FastField, ErrorMessage, useFormikContext } from 'formik';
-import {
-  Button,
-  Classes,
-  FormGroup,
-  InputGroup,
-  Intent,
-  Checkbox,
-} from '@blueprintjs/core';
-import { CLASSES } from 'common/classes';
-import { Row, Col, ListSelect } from 'components';
-import { FormattedMessage as T, useIntl } from 'react-intl';
-import { inputIntent } from 'utils';
-import {
-  moneyFormat,
-  negativeFormat,
-  decimalPlaces,
-} from 'common/numberFormatsOptions';
-import classNames from 'classnames';
-
-/**
- *  Number Formats Fields.
- */
-export default function NumberFormatFields({
-  // #ownProps
-  onCancelClick,
-}) {
-  const { isSubmitting } = useFormikContext();
-  return (
-    <Form>
-      <div className={'number-format__content'}>
-        {/*------------ Money formats -----------*/}
-        <FastField name={'format_money'}>
-          {({ form, field: { value }, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'money_format'} />}
-              helperText={<ErrorMessage name="format_money" />}
-              intent={inputIntent({ error, touched })}
-              className={classNames(CLASSES.FILL)}
-            >
-              <ListSelect
-                items={moneyFormat}
-                onItemSelect={(format) => {
-                  form.setFieldValue('format_money', format.name);
-                }}
-                filterable={false}
-                selectedItem={value}
-                selectedItemProp={'id'}
-                textProp={'text'}
-                popoverProps={{ minimal: true, captureDismiss: true }}
-              />
-            </FormGroup>
-          )}
-        </FastField>
-        {/*------------ Negative formats -----------*/}
-        <FastField name={'negative_format'}>
-          {({ form, field: { value }, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'negative_format'} />}
-              helperText={<ErrorMessage name="negative_format" />}
-              intent={inputIntent({ error, touched })}
-              className={classNames(CLASSES.FILL)}
-            >
-              <ListSelect
-                items={negativeFormat}
-                onItemSelect={(format) => {
-                  form.setFieldValue('negative_format', format.name);
-                }}
-                filterable={false}
-                selectedItem={value}
-                selectedItemProp={'id'}
-                textProp={'text'}
-                popoverProps={{ minimal: true, captureDismiss: true }}
-              />
-            </FormGroup>
-          )}
-        </FastField>
-
-        {/*------------ Decimal places -----------*/}
-        <FastField name={'precision'}>
-          {({ form, field: { value }, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'decimal_places'} />}
-              helperText={<ErrorMessage name="format_money" />}
-              intent={inputIntent({ error, touched })}
-              className={classNames(CLASSES.FILL)}
-            >
-              <ListSelect
-                items={decimalPlaces}
-                onItemSelect={(format) => {
-                  form.setFieldValue('precision', format.key);
-                }}
-                filterable={false}
-                selectedItem={value}
-                selectedItemProp={'id'}
-                labelProp={'label'}
-                textProp={'text'}
-                popoverProps={{ minimal: true, captureDismiss: true }}
-              />
-            </FormGroup>
-          )}
-        </FastField>
-
-        {/*------------ show zero -----------*/}
-        <FastField name={'show_zero'} type={'checkbox'}>
-          {({ field }) => (
-            <FormGroup inline={true}>
-              <Checkbox
-                inline={true}
-                label={<T id={'show_zero'} />}
-                name={'show_zero'}
-                {...field}
-              />
-            </FormGroup>
-          )}
-        </FastField>
-        {/*------------ show negative in red-----------*/}
-        <FastField name={'show_in_red'} type={'checkbox'}>
-          {({ field }) => (
-            <FormGroup inline={true}>
-              <Checkbox
-                inline={true}
-                label={<T id={'show_negative_in_red'} />}
-                name={'show_in_red'}
-                {...field}
-              />
-            </FormGroup>
-          )}
-        </FastField>
-        {/*------------ Divide on 1000 -----------*/}
-        <FastField name={'divide_on_1000'} type={'checkbox'}>
-          {({ field }) => (
-            <FormGroup inline={true}>
-              <Checkbox
-                inline={true}
-                label={<T id={'divide_on_1000'} />}
-                name={'divide_on_1000'}
-                {...field}
-              />
-            </FormGroup>
-          )}
-        </FastField>
-      </div>
-      <div
-        className={classNames('number-format__footer', Classes.POPOVER_DISMISS)}
-      >
-        <Button
-          className={'mr1'}
-          onClick={onCancelClick}
-          small={true}
-          style={{ minWidth: '75px' }}
-        >
-          <T id={'cancel'} />
-        </Button>
-
-        <Button
-          intent={Intent.PRIMARY}
-          disabled={isSubmitting}
-          small={true}
-          style={{ minWidth: '75px' }}
-          type="submit"
-        >
-          <T id={'run'} />
-        </Button>
-      </div>
-    </Form>
-  );
-}

client/src/components/NumberFormats/index.js

@@ -1,42 +0,0 @@
-import React, { useState, useCallback, useMemo } from 'react';
-import { Classes } from '@blueprintjs/core';
-import { Formik } from 'formik';
-import classNames from 'classnames';
-import NumberFormatFields from './NumberFormatFields';
-
-import { compose } from 'utils';
-
-/**
- * Number format form popover content.
- */
-function NumberFormats() {
-  const initialValues = useMemo(
-    () => ({
-      format_money: '',
-      show_zero: '',
-      show_in_red: '',
-      divide_on_1000: '',
-      negative_format: '',
-      precision: '',
-    }),
-    [],
-  );
-  // Handle cancel button click.
-  const handleCancelClick = useCallback(() => {}, []);
-
-  // Handle form submit.
-  const handleFormSubmit = (values, { setSubmitting }) => {
-    setSubmitting(true);
-    const form = { ...values };
-  };
-
-  return (
-    <div className={'number-format'}>
-      <Formik initialValues={initialValues} onSubmit={handleFormSubmit}>
-        <NumberFormatFields onCancelClick={handleCancelClick} />
-      </Formik>
-    </div>
-  );
-}
-
-export default NumberFormats;