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 = , isLoading = false, + textProp, labelProp, selectedItem, @@ -52,8 +53,9 @@ export default function ListSelect({ const itemRenderer = (item, { handleClick, modifiers, query }) => { return ( ); @@ -77,7 +79,7 @@ export default function ListSelect({ )} > + + {/*------------ Money formats -----------*/} + + {({ form, field: { value }, meta: { error, touched } }) => ( + } + helperText={} + intent={inputIntent({ error, touched })} + className={classNames(CLASSES.FILL)} + > + { + form.setFieldValue('format_money', format.name); + }} + filterable={false} + selectedItem={value} + selectedItemProp={'id'} + textProp={'text'} + popoverProps={{ minimal: true, captureDismiss: true }} + /> + + )} + + {/*------------ Negative formats -----------*/} + + {({ form, field: { value }, meta: { error, touched } }) => ( + } + helperText={} + intent={inputIntent({ error, touched })} + className={classNames(CLASSES.FILL)} + > + { + form.setFieldValue('negative_format', format.name); + }} + filterable={false} + selectedItem={value} + selectedItemProp={'id'} + textProp={'text'} + popoverProps={{ minimal: true, captureDismiss: true }} + /> + + )} + + + {/*------------ Decimal places -----------*/} + + {({ form, field: { value }, meta: { error, touched } }) => ( + } + helperText={} + intent={inputIntent({ error, touched })} + className={classNames(CLASSES.FILL)} + > + { + form.setFieldValue('precision', format.key); + }} + filterable={false} + selectedItem={value} + selectedItemProp={'id'} + labelProp={'label'} + textProp={'text'} + popoverProps={{ minimal: true, captureDismiss: true }} + /> + + )} + + + {/*------------ show zero -----------*/} + + {({ field }) => ( + + } + name={'show_zero'} + {...field} + /> + + )} + + {/*------------ Divide on 1000 -----------*/} + + {({ field }) => ( + + } + name={'divide_on_1000'} + {...field} + /> + + )} + + + + + + + + + + + + + ); +} 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 ( + + + + + + ); +} + +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({ } - text={!balanceSheetFilter ? : } + text={ + !balanceSheetFilter ? ( + + ) : ( + + ) + } onClick={handleFilterToggleClick} active={balanceSheetFilter} /> @@ -66,6 +73,18 @@ function BalanceSheetActionsBar({ icon={} /> + } + minimal={true} + interactionKind={PopoverInteractionKind.CLICK} + position={Position.BOTTOM_LEFT} + > + } + icon={} + /> + 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; + } +}