Merge remote-tracking branch 'origin/master'

This commit is contained in:
Ahmed Bouhuolia
2020-11-17 11:36:03 +02:00
11 changed files with 226 additions and 141 deletions

View File

@@ -26,7 +26,6 @@ import {
import withDialogActions from 'containers/Dialog/withDialogActions';
import withCurrencies from 'containers/Currencies/withCurrencies';
import withSettings from 'containers/Settings/withSettings';
import { compose } from 'utils';
@@ -41,9 +40,6 @@ function MakeJournalEntriesHeader({
manualJournal,
onJournalNumberChanged,
// #withSettings
baseCurrency,
// #withCurrencies
currenciesList,
@@ -225,7 +221,7 @@ function MakeJournalEntriesHeader({
currenciesList={currenciesList}
selectedCurrencyCode={values.currency_code}
onCurrencySelected={onItemsSelect('currency_code')}
defaultSelectText={baseCurrency}
defaultSelectText={values.currency_code}
/>
</FormGroup>
</Col>
@@ -236,9 +232,6 @@ function MakeJournalEntriesHeader({
export default compose(
withDialogActions,
withSettings(({ organizationSettings }) => ({
baseCurrency: organizationSettings?.baseCurrency,
})),
withCurrencies(({ currenciesList }) => ({
currenciesList,
})),

View File

@@ -0,0 +1,69 @@
import React from 'react';
import { Intent, Button } from '@blueprintjs/core';
import { useFormikContext } from 'formik';
import { FormattedMessage as T } from 'react-intl';
import { CLASSES } from 'common/classes';
import classNames from 'classnames';
import { saveInvoke } from 'utils';
/**
* Expense form floating actions.
*/
export default function ExpenseFloatingFooter({
isSubmitting,
onSubmitClick,
onCancelClick,
onDraftClick,
onSubmitAndNewClick,
expense,
}) {
const handleSubmitBtnClick = (event) => {
saveInvoke(onSubmitClick, event);
};
const handleCancelBtnClick = (event) => {
saveInvoke(onCancelClick, event);
};
const handleSubmitAndDraftBtnClick = (event) => {
saveInvoke(onDraftClick, event);
};
const handleSubmitAndNewBtnClick = (event) => {
saveInvoke(onSubmitAndNewClick, event);
};
return (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitBtnClick}
>
{expense && expense.id ? <T id={'edit'} /> : <T id={'save'} />}
</Button>
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={handleSubmitAndNewBtnClick}
type="submit"
>
<T id={'save_new'} />
</Button>
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={handleSubmitAndDraftBtnClick}
>
<T id={'save_as_draft'} />
</Button>
<Button className={'ml1'} onClick={handleCancelBtnClick}>
<T id={'close'} />
</Button>
</div>
);
}

View File

@@ -1,57 +0,0 @@
import React from 'react';
import { Intent, Button } from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
export default function ExpenseFloatingFooter({
formik: { isSubmitting },
onSubmitClick,
onCancelClick,
expense,
}) {
return (
<div className={'form__floating-footer'}>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={() => {
onSubmitClick({ publish: true, redirect: true });
}}
>
{expense && expense.id ? <T id={'edit'} /> : <T id={'save'} />}
</Button>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
className={'ml1'}
name={'save_and_new'}
onClick={() => {
onSubmitClick({ publish: true, redirect: false });
}}
>
<T id={'save_new'} />
</Button>
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={() => {
onSubmitClick({ publish: false, redirect: false });
}}
>
<T id={'save_as_draft'} />
</Button>
<Button
className={'ml1'}
onClick={() => {
onCancelClick && onCancelClick();
}}
>
<T id={'close'} />
</Button>
</div>
);
}

View File

@@ -11,28 +11,33 @@ import moment from 'moment';
import { Intent, FormGroup, TextArea } from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { pick } from 'lodash';
import { useHistory } from 'react-router-dom';
import ExpenseFormHeader from './ExpenseFormHeader';
import ExpenseTable from './ExpenseTable';
import ExpenseFloatingFooter from './ExpenseFooter';
import ExpenseFloatingFooter from './ExpenseFloatingActions';
import withExpensesActions from 'containers/Expenses/withExpensesActions';
import withExpenseDetail from 'containers/Expenses/withExpenseDetail';
import withAccountsActions from 'containers/Accounts/withAccountsActions';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withMediaActions from 'containers/Media/withMediaActions';
import withSettings from 'containers/Settings/withSettings';
import AppToaster from 'components/AppToaster';
import Dragzone from 'components/Dragzone';
import useMedia from 'hooks/useMedia';
import { compose, repeatValue } from 'utils';
import { compose, repeatValue, transformToForm } from 'utils';
const MIN_LINES_NUMBER = 4;
const ERROR = {
EXPENSE_ALREADY_PUBLISHED: 'EXPENSE.ALREADY.PUBLISHED',
};
/**
* Expense form.
*/
function ExpenseForm({
// #withMedia
requestSubmitMedia,
@@ -49,13 +54,20 @@ function ExpenseForm({
//#withExpenseDetail
expense,
// #withSettings
baseCurrency,
preferredPaymentAccount,
// #own Props
expenseId,
onFormSubmit,
onCancelForm,
}) {
const { formatMessage } = useIntl();
const [payload, setPayload] = useState({});
const history = useHistory();
const { formatMessage } = useIntl();
const {
setFiles,
saveMedia,
@@ -67,23 +79,6 @@ function ExpenseForm({
deleteCallback: requestDeleteMedia,
});
const handleDropFiles = useCallback((_files) => {
setFiles(_files.filter((file) => file.uploaded === false));
}, []);
const savedMediaIds = useRef([]);
const clearSavedMediaIds = () => {
savedMediaIds.current = [];
};
useEffect(() => {
if (expense && expense.id) {
changePageTitle(formatMessage({ id: 'edit_expense' }));
} else {
changePageTitle(formatMessage({ id: 'new_expense' }));
}
}, [changePageTitle, expense, formatMessage]);
const validationSchema = Yup.object().shape({
beneficiary: Yup.string().label(formatMessage({ id: 'beneficiary' })),
payment_account_id: Yup.number()
@@ -117,11 +112,27 @@ function ExpenseForm({
),
});
const handleDropFiles = useCallback((_files) => {
setFiles(_files.filter((file) => file.uploaded === false));
}, []);
const savedMediaIds = useRef([]);
const clearSavedMediaIds = () => {
savedMediaIds.current = [];
};
useEffect(() => {
if (expense && expense.id) {
changePageTitle(formatMessage({ id: 'edit_expense' }));
} else {
changePageTitle(formatMessage({ id: 'new_expense' }));
}
}, [changePageTitle, expense, formatMessage]);
const saveInvokeSubmit = useCallback(
(payload) => {
onFormSubmit && onFormSubmit(payload);
},
[onFormSubmit],
);
@@ -137,12 +148,12 @@ function ExpenseForm({
const defaultInitialValues = useMemo(
() => ({
payment_account_id: '',
payment_account_id: parseInt(preferredPaymentAccount),
beneficiary: '',
payment_date: moment(new Date()).format('YYYY-MM-DD'),
description: '',
reference_no: '',
currency_code: '',
currency_code: baseCurrency,
categories: [...repeatValue(defaultCategory, MIN_LINES_NUMBER)],
}),
[defaultCategory],
@@ -205,7 +216,15 @@ function ExpenseForm({
}
};
const formik = useFormik({
const {
values,
errors,
touched,
isSubmitting,
setFieldValue,
handleSubmit,
getFieldProps,
} = useFormik({
enableReinitialize: true,
validationSchema,
initialValues: {
@@ -294,20 +313,20 @@ function ExpenseForm({
},
});
const handleSubmitClick = useCallback(
(payload) => {
setPayload(payload);
formik.submitForm();
},
[setPayload, formik],
);
const handleSubmitClick = useCallback(() => {
setPayload({ publish: true, redirect: true });
}, [setPayload]);
const handleCancelClick = useCallback(
(payload) => {
onCancelForm && onCancelForm(payload);
},
[onCancelForm],
);
const handleCancelClick = useCallback(() => {
history.goBack();
}, []);
const handleSubmitAndNewClick = useCallback(() => {
setPayload({ publish: true, redirect: false });
});
const handleSubmitAndDraftClick = useCallback(() => {
setPayload({ publish: false, redirect: false });
});
const handleDeleteFile = useCallback(
(_deletedFiles) => {
@@ -322,14 +341,14 @@ function ExpenseForm({
// Handle click on add a new line/row.
const handleClickAddNewRow = () => {
formik.setFieldValue(
setFieldValue(
'categories',
orderingCategoriesIndex([...formik.values.categories, defaultCategory]),
orderingCategoriesIndex([...values.categories, defaultCategory]),
);
};
const handleClearAllLines = () => {
formik.setFieldValue(
setFieldValue(
'categories',
orderingCategoriesIndex([
...repeatValue(defaultCategory, MIN_LINES_NUMBER),
@@ -337,21 +356,23 @@ function ExpenseForm({
);
};
const categories = formik.values.categories.filter(
(category) =>
category.amount && category.index && category.expense_account_id,
);
return (
<div className={'expense-form'}>
<form onSubmit={formik.handleSubmit}>
<ExpenseFormHeader formik={formik} />
<form onSubmit={handleSubmit}>
<ExpenseFormHeader
errors={errors}
touched={touched}
values={values}
setFieldValue={setFieldValue}
getFieldProps={getFieldProps}
/>
<ExpenseTable
categories={formik.values.categories}
categories={values.categories}
onClickAddNewRow={handleClickAddNewRow}
onClickClearAllLines={handleClearAllLines}
formik={formik}
errors={errors}
setFieldValue={setFieldValue}
defaultRow={defaultCategory}
/>
<div class="expense-form-footer">
@@ -359,10 +380,7 @@ function ExpenseForm({
label={<T id={'description'} />}
className={'form-group--description'}
>
<TextArea
growVertically={true}
{...formik.getFieldProps('description')}
/>
<TextArea growVertically={true} {...getFieldProps('description')} />
</FormGroup>
<Dragzone
@@ -372,13 +390,16 @@ function ExpenseForm({
hint={'Attachments: Maxiumum size: 20MB'}
/>
</div>
<ExpenseFloatingFooter
isSubmitting={isSubmitting}
onSubmitClick={handleSubmitClick}
onCancelClick={handleCancelClick}
onDraftClick={handleSubmitAndDraftClick}
onSubmitAndNewClick={handleSubmitAndNewClick}
expense={expense}
/>
</form>
<ExpenseFloatingFooter
formik={formik}
onSubmitClick={handleSubmitClick}
expense={expense}
onCancelClick={handleCancelClick}
/>
</div>
);
}
@@ -389,4 +410,8 @@ export default compose(
withDashboardActions,
withMediaActions,
withExpenseDetail(),
withSettings(({ organizationSettings, expenseSettings }) => ({
baseCurrency: organizationSettings?.baseCurrency,
preferredPaymentAccount: expenseSettings?.preferredPaymentAccount,
})),
)(ExpenseForm);

View File

@@ -26,10 +26,21 @@ import withAccounts from 'containers/Accounts/withAccounts';
import withCustomers from 'containers/Customers/withCustomers';
function ExpenseFormHeader({
formik: { errors, touched, setFieldValue, getFieldProps, values },
// #ownProps
errors,
touched,
setFieldValue,
getFieldProps,
values,
//withCurrencies
currenciesList,
// #withAccounts
accountsList,
accountsTypes,
// #withCustomers
customers,
}) {
const [selectedItems, setSelectedItems] = useState({});
@@ -171,6 +182,7 @@ function ExpenseFormHeader({
currenciesList={currenciesList}
selectedCurrencyCode={values.currency_code}
onCurrencySelected={onItemsSelect('currency_code')}
defaultSelectText={values.currency_code}
/>
</FormGroup>
</Col>

View File

@@ -94,7 +94,8 @@ function ExpenseTable({
onClickClearAllLines,
defaultRow,
categories,
formik: { errors, setFieldValue, resetForm },
errors,
setFieldValue,
}) {
const [rows, setRows] = useState([]);
const { formatMessage } = useIntl();

View File

@@ -19,6 +19,7 @@ import withMediaActions from 'containers/Media/withMediaActions';
import useMedia from 'hooks/useMedia';
import withItemDetail from 'containers/Items/withItemDetail';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withSettings from 'containers/Settings/withSettings';
import { compose, transformToForm } from 'utils';
@@ -54,6 +55,11 @@ function ItemForm({
changePageTitle,
changePageSubtitle,
// #withSettings
preferredCostAccount,
preferredSellAccount,
preferredInventoryAccount,
// #withMediaActions
requestSubmitMedia,
requestDeleteMedia,
@@ -89,14 +95,16 @@ function ItemForm({
sku: Yup.string().trim(),
cost_price: Yup.number().when(['purchasable'], {
is: true,
then: Yup.number().required()
.label(formatMessage({ id: 'cost_price_' })),
then: Yup.number()
.required()
.label(formatMessage({ id: 'cost_price_' })),
otherwise: Yup.number().nullable(true),
}),
sell_price: Yup.number().when(['sellable'], {
is: true,
then: Yup.number().required()
.label(formatMessage({ id: 'sell_price_' })),
then: Yup.number()
.required()
.label(formatMessage({ id: 'sell_price_' })),
otherwise: Yup.number().nullable(true),
}),
cost_account_id: Yup.number()
@@ -132,7 +140,9 @@ function ItemForm({
const initialValues = useMemo(
() => ({
...defaultInitialValues,
cost_account_id: parseInt(preferredCostAccount),
sell_account_id: parseInt(preferredSellAccount),
inventory_account_id: parseInt(preferredInventoryAccount),
/**
* We only care about the fields in the form. Previously unfilled optional
* values such as `notes` come back from the API as null, so remove those
@@ -283,4 +293,9 @@ export default compose(
withItemDetail,
withDashboardActions,
withMediaActions,
withSettings(({ itemsSettings }) => ({
preferredCostAccount: itemsSettings.preferredCostAccount,
preferredSellAccount: itemsSettings.preferredSellAccount,
preferredInventoryAccount: itemsSettings.preferredInventoryAccount,
})),
)(ItemForm);

View File

@@ -79,6 +79,7 @@ function ReceiptForm({
// #withSettings
receiptNextNumber,
receiptNumberPrefix,
preferredDepositAccount,
//#own Props
receiptId,
@@ -88,7 +89,7 @@ function ReceiptForm({
const { formatMessage } = useIntl();
const history = useHistory();
const [submitPayload, setSubmitPayload ] = useState({});
const [submitPayload, setSubmitPayload] = useState({});
const isNewMode = !receiptId;
const receiptNumber = receiptNumberPrefix
@@ -130,6 +131,7 @@ function ReceiptForm({
: {
...defaultInitialValues,
receipt_number: receiptNumber,
deposit_account_id: parseInt(preferredDepositAccount),
entries: orderingLinesIndexes(defaultInitialValues.entries),
}),
}),
@@ -264,5 +266,6 @@ export default compose(
withSettings(({ receiptSettings }) => ({
receiptNextNumber: receiptSettings?.nextNumber,
receiptNumberPrefix: receiptSettings?.numberPrefix,
preferredDepositAccount: receiptSettings?.preferredDepositAccount,
})),
)(ReceiptForm);

View File

@@ -9,6 +9,7 @@ const Schema = Yup.object().shape({
.required()
.label(formatMessage({ id: 'receipt_date_' })),
receipt_number: Yup.string()
.nullable()
.label(formatMessage({ id: 'receipt_no_' })),
deposit_account_id: Yup.number()
.required()
@@ -48,7 +49,4 @@ const Schema = Yup.object().shape({
const CreateReceiptFormSchema = Schema;
const EditReceiptFormSchema = Schema;
export {
CreateReceiptFormSchema,
EditReceiptFormSchema
};
export { CreateReceiptFormSchema, EditReceiptFormSchema };

View File

@@ -10,6 +10,8 @@ export default (mapState) => {
estimatesSettings: state.settings.data.salesEstimates,
receiptSettings: state.settings.data.salesReceipts,
invoiceSettings: state.settings.data.salesInvoices,
itemsSettings: state.settings.data.items,
expenseSettings: state.settings.data.expenses,
};
return mapState ? mapState(mapped, state, props) : mapped;
};

View File

@@ -92,6 +92,10 @@ export default {
key: "number_prefix",
type: "string",
},
{
key: "preferred_deposit_account",
type: "number",
},
],
sales_invoices: [
{
@@ -105,12 +109,32 @@ export default {
],
payment_receives: [
{
key: 'next_number',
type: 'number',
key: "next_number",
type: "number",
},
{
key: 'number_prefix',
type: 'string',
key: "number_prefix",
type: "string",
},
]
],
items: [
{
key: "preferred_sell_account",
type: "number",
},
{
key: "preferred_cost_account",
type: "number",
},
{
key: "preferred_inventory_account",
type: "number",
},
],
expenses: [
{
key: "preferred_payment_account",
type: "number",
},
],
};