From 14f2fdf4fcb645ecc6463dd7895f636b214a3314 Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Thu, 14 Jan 2021 13:36:27 +0200
Subject: [PATCH] feat: number formats.

---
 client/src/common/numberFormatsOptions.js     |  18 ++
 client/src/components/ListSelect.js           |   6 +-
 .../NumberFormats/NumberFormatFields.js       | 156 ++++++++++++++++++
 .../NumberFormats/NumberFormats.schema.js     |  14 ++
 client/src/components/NumberFormats/index.js  |  42 +++++
 .../BalanceSheet/BalanceSheetActionsBar.js    |  23 ++-
 client/src/containers/Items/ItemsList.js      |  40 +++--
 client/src/lang/en/index.js                   |   9 +
 client/src/style/App.scss                     |   1 +
 client/src/style/pages/number-format.scss     |  24 +++
 10 files changed, 317 insertions(+), 16 deletions(-)
 create mode 100644 client/src/common/numberFormatsOptions.js
 create mode 100644 client/src/components/NumberFormats/NumberFormatFields.js
 create mode 100644 client/src/components/NumberFormats/NumberFormats.schema.js
 create mode 100644 client/src/components/NumberFormats/index.js
 create mode 100644 client/src/style/pages/number-format.scss

diff --git a/client/src/common/numberFormatsOptions.js b/client/src/common/numberFormatsOptions.js
new file mode 100644
index 000000000..d39845288
--- /dev/null
+++ b/client/src/common/numberFormatsOptions.js
@@ -0,0 +1,18 @@
+export const moneyFormat = [
+  { id: 'total', text: 'Total rows' },
+  { id: 'always', text: 'Always' },
+  { id: 'none', text: 'None' },
+];
+
+export const negativeFormat = [
+  { id: 'parentheses', text: 'Parentheses ($1000)' },
+  { id: 'mines', text: 'Minus -$1000' },
+];
+
+export const decimalPlaces = [
+  { text: '1 Decimals', label: '$0.1', id: 1 },
+  { text: '2 Decimals', label: '$0.01', id: 2 },
+  { text: '3 Decimals', label: '$0.001', id: 3 },
+  { text: '4 Decimals', label: '$0.0001', id: 4 },
+  { text: '5 Decimals', label: '$0.00001', id: 5 },
+];
diff --git a/client/src/components/ListSelect.js b/client/src/components/ListSelect.js
index c0aedf686..ebbfb5479 100644
--- a/client/src/components/ListSelect.js
+++ b/client/src/components/ListSelect.js
@@ -10,6 +10,7 @@ export default function ListSelect({
   defaultText,
   noResultsText = <T id="no_results" />,
   isLoading = false,
+  textProp,
   labelProp,
 
   selectedItem,
@@ -52,8 +53,9 @@ export default function ListSelect({
   const itemRenderer = (item, { handleClick, modifiers, query }) => {
     return (
       <MenuItem
-        text={item[labelProp]}
+        text={item[textProp]}
         key={item[selectedItemProp]}
+        label={item[labelProp]}
         onClick={handleClick}
       />
     );
@@ -77,7 +79,7 @@ export default function ListSelect({
       )}
     >
       <Button
-        text={currentItem ? currentItem[labelProp] : defaultText}
+        text={currentItem ? currentItem[textProp] : defaultText}
         loading={isLoading}
         disabled={disabled}
         {...buttonProps}
diff --git a/client/src/components/NumberFormats/NumberFormatFields.js b/client/src/components/NumberFormats/NumberFormatFields.js
new file mode 100644
index 000000000..e6d380d76
--- /dev/null
+++ b/client/src/components/NumberFormats/NumberFormatFields.js
@@ -0,0 +1,156 @@
+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>
+        {/*------------ 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>
+  );
+}
diff --git a/client/src/components/NumberFormats/NumberFormats.schema.js b/client/src/components/NumberFormats/NumberFormats.schema.js
new file mode 100644
index 000000000..bd5412c58
--- /dev/null
+++ b/client/src/components/NumberFormats/NumberFormats.schema.js
@@ -0,0 +1,14 @@
+import * as Yup from 'yup';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+import { defaultTo } from 'lodash';
+
+
+const Schema = Yup.object().shape({
+  format_money: Yup.string(),
+  show_zero: Yup.boolean(),
+  divide_on_1000: Yup.boolean(),
+  negative_format: Yup.string(),
+  precision: Yup.string(),
+});
+
+export const CreateNumberFormateSchema = Schema;
diff --git a/client/src/components/NumberFormats/index.js b/client/src/components/NumberFormats/index.js
new file mode 100644
index 000000000..7357cc3d8
--- /dev/null
+++ b/client/src/components/NumberFormats/index.js
@@ -0,0 +1,42 @@
+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: '',
+      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;
diff --git a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js
index ad79d6d36..ea21c3849 100644
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   NavbarGroup,
   Button,
@@ -13,6 +13,7 @@ import classNames from 'classnames';
 
 import Icon from 'components/Icon';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import NumberFormats from 'components/NumberFormats';
 
 import { compose } from 'utils';
 import withBalanceSheetDetail from './withBalanceSheetDetail';
@@ -49,7 +50,13 @@ function BalanceSheetActionsBar({
         <Button
           className={classNames(Classes.MINIMAL, 'button--table-views')}
           icon={<Icon icon="cog-16" iconSize={16} />}
-          text={!balanceSheetFilter ? <T id={'customize_report'} /> : <T id={'hide_customizer'} />}
+          text={
+            !balanceSheetFilter ? (
+              <T id={'customize_report'} />
+            ) : (
+              <T id={'hide_customizer'} />
+            )
+          }
           onClick={handleFilterToggleClick}
           active={balanceSheetFilter}
         />
@@ -66,6 +73,18 @@ function BalanceSheetActionsBar({
             icon={<Icon icon="filter-16" iconSize={16} />}
           />
         </Popover>
+        <Popover
+          content={<NumberFormats />}
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            className={classNames(Classes.MINIMAL, 'button--filter')}
+            text={<T id={'format'} />}
+            icon={<Icon icon="filter-16" iconSize={16} />}
+          />
+        </Popover>
 
         <NavbarDivider />
 
diff --git a/client/src/containers/Items/ItemsList.js b/client/src/containers/Items/ItemsList.js
index 76f8678c9..442f91a91 100644
--- a/client/src/containers/Items/ItemsList.js
+++ b/client/src/containers/Items/ItemsList.js
@@ -93,6 +93,33 @@ function ItemsList({
     setDeleteItem(false);
   }, [setDeleteItem]);
 
+  const handleDeleteErrors = (errors) => {
+    if (
+      errors.find((error) => error.type === 'ITEM_HAS_ASSOCIATED_TRANSACTINS')
+    ) {
+      AppToaster.show({
+        message: formatMessage({
+          id: 'the_item_has_associated_transactions',
+        }),
+        intent: Intent.DANGER,
+      });
+    }
+
+    if (
+      errors.find(
+        (error) => error.type === 'ITEM_HAS_ASSOCIATED_INVENTORY_ADJUSTMENT',
+      )
+    ) {
+      AppToaster.show({
+        message: formatMessage({
+          id:
+            'you_could_not_delete_item_that_has_associated_inventory_adjustments_transacions',
+        }),
+        intent: Intent.DANGER,
+      });
+    }
+  };
+
   // handle confirm delete item.
   const handleConfirmDeleteItem = useCallback(() => {
     requestDeleteItem(deleteItem.id)
@@ -107,19 +134,8 @@ function ItemsList({
         setDeleteItem(false);
       })
       .catch(({ errors }) => {
-        if (
-          errors.find(
-            (error) => error.type === 'ITEM_HAS_ASSOCIATED_TRANSACTINS',
-          )
-        ) {
-          AppToaster.show({
-            message: formatMessage({
-              id: 'the_item_has_associated_transactions',
-            }),
-            intent: Intent.DANGER,
-          });
-        }
         setDeleteItem(false);
+        handleDeleteErrors(errors);
       });
   }, [requestDeleteItem, deleteItem, formatMessage]);
 
diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js
index b5eed474e..93aefba99 100644
--- a/client/src/lang/en/index.js
+++ b/client/src/lang/en/index.js
@@ -959,4 +959,13 @@ export default {
   once_delete_this_inventory_a_adjustment_you_will_able_to_restore_it: `Once you delete this inventory a adjustment, you won\'t be able to restore it later. Are you sure you want to delete this invoice?`,
   select_adjustment_account: 'Select Adjustment account',
   qty: 'Quantity on hand',
+  money_format: 'Money format',
+  show_zero: 'Show zero',
+  divide_on_1000: 'Divide on 1000',
+  negative_format: 'Negative format',
+  decimal_places: 'Decimal places',
+  run: 'Run',
+  you_could_not_delete_item_that_has_associated_inventory_adjustments_transacions:
+    'You could not delete item that has associated inventory adjustments transactions',
+  format: 'Format',
 };
diff --git a/client/src/style/App.scss b/client/src/style/App.scss
index 5de0242af..1c9ebd54e 100644
--- a/client/src/style/App.scss
+++ b/client/src/style/App.scss
@@ -80,6 +80,7 @@ $button-background-color-hover: #CFDCEE !default;
 @import 'pages/receipt-form';
 @import 'pages/payment-made';
 @import 'pages/payment-receive';
+@import 'pages/number-format.scss';
 
 // Views
 @import 'views/filter-dropdown';
diff --git a/client/src/style/pages/number-format.scss b/client/src/style/pages/number-format.scss
new file mode 100644
index 000000000..dce18cf3f
--- /dev/null
+++ b/client/src/style/pages/number-format.scss
@@ -0,0 +1,24 @@
+.number-format {
+  width: 400px;
+  padding: 12px;
+  //    width: 300px;
+  //    padding: 10px;
+  &__content {
+    .bp3-form-group {
+      margin-bottom: 5px;
+      // margin-bottom: 0px;
+      .bp3-form-content {
+        .bp3-label {
+          margin-bottom: 3px;
+        }
+        .bp3-control {
+          margin: 5px 0px 0px;
+        }
+      }
+    }
+  }
+  &__footer {
+    display: flex;
+    justify-content: flex-end;
+  }
+}