# Conflicts:
#	client/src/style/App.scss
This commit is contained in:
a.bouhuolia
2021-01-17 12:20:30 +02:00
41 changed files with 908 additions and 397 deletions

View File

@@ -39,7 +39,7 @@ export default function AccountsTypesSelect({
items={items}
selectedItemProp={'id'}
selectedItem={selectedTypeId}
labelProp={'label'}
textProp={'label'}
defaultText={defaultSelectText}
onItemSelect={handleItemSelected}
itemPredicate={filterAccountTypeItems}

View File

@@ -44,7 +44,7 @@ export default function CategoriesSelectList({
items={categoriesList}
selectedItemProp={'id'}
selectedItem={selecetedCategoryId}
labelProp={'name'}
textProp={'name'}
defaultText={defaultSelectText}
onItemSelect={handleItemCategorySelected}
itemPredicate={filterItemCategory}

View File

@@ -34,7 +34,7 @@ export default function DisplayNameList({
<ListSelect
items={formatOptions}
selectedItemProp={'label'}
labelProp={'label'}
textProp={'label'}
defaultText={'Select display name as'}
filterable={false}
{ ...restProps }

View File

@@ -158,7 +158,7 @@ function DynamicFilterValueField({
selectedItem={value}
selectedItemProp={optionsKey}
defaultText={`Select an option`}
labelProp={optionsLabel}
textProp={optionsLabel}
buttonProps={{
onClick: handleBtnClick
}}

View File

@@ -75,7 +75,7 @@ function ItemsListField({
onItemSelect={onItemSelect}
selectedItem={`${selectedItemId}`}
selectedItemProp={'id'}
labelProp={'name'}
textProp={'name'}
defaultText={selectedItem ? selectedItem.name : defautlSelectText}
/>
);

View File

@@ -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}

View File

@@ -0,0 +1,169 @@
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>
);
}

View File

@@ -0,0 +1,15 @@
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(),
show_in_red: Yup.boolean(),
divide_on_1000: Yup.boolean(),
negative_format: Yup.string(),
precision: Yup.string(),
});
export const CreateNumberFormateSchema = Schema;

View File

@@ -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: '',
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;

View File

@@ -29,7 +29,7 @@ function PaymentReceiveListField({
onItemSelect={onInvoiceSelect}
selectedItem={`${selectedInvoiceId}`}
selectedItemProp={'id'}
labelProp={'name'}
textProp={'name'}
defaultText={defaultSelectText}
/>
);

View File

@@ -13,7 +13,7 @@ export default function SalutationList({
<ListSelect
items={items}
selectedItemProp={'key'}
labelProp={'label'}
textProp={'label'}
defaultText={'Salutation'}
filterable={false}
{...restProps}