mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-17 13:20:31 +00:00
Merge branch 'master' of https://github.com/abouolia/Bigcapital
This commit is contained in:
elforjani3
@@ -5,6 +5,7 @@ import {
|
||||
editBill,
|
||||
fetchBillsTable,
|
||||
fetchBill,
|
||||
fetchDueBills,
|
||||
} from 'store/Bills/bills.actions';
|
||||
import t from 'store/types';
|
||||
|
||||
@@ -15,6 +16,7 @@ const mapDispatchToProps = (dispatch) => ({
|
||||
requestDeleteBill: (id) => dispatch(deleteBill({ id })),
|
||||
requestFetchBillsTable: (query = {}) =>
|
||||
dispatch(fetchBillsTable({ query: { ...query } })),
|
||||
requestFetchDueBills: (vendorId) => dispatch(fetchDueBills({ vendorId })),
|
||||
|
||||
changeBillView: (id) =>
|
||||
dispatch({
|
||||
|
||||
@@ -4,14 +4,16 @@ import {
|
||||
getBillCurrentPageFactory,
|
||||
getBillPaginationMetaFactory,
|
||||
getBillTableQueryFactory,
|
||||
getVendorDueBillsFactory
|
||||
getVendorPayableBillsFactory,
|
||||
getPayableBillsByPaymentMadeFactory
|
||||
} from 'store/Bills/bills.selectors';
|
||||
|
||||
export default (mapState) => {
|
||||
const getBillsItems = getBillCurrentPageFactory();
|
||||
const getBillsPaginationMeta = getBillPaginationMetaFactory();
|
||||
const getBillTableQuery = getBillTableQueryFactory();
|
||||
const getVendorDueBills = getVendorDueBillsFactory();
|
||||
const getVendorPayableBills = getVendorPayableBillsFactory();
|
||||
const getPayableBillsByPaymentMade = getPayableBillsByPaymentMadeFactory();
|
||||
|
||||
const mapStateToProps = (state, props) => {
|
||||
const tableQuery = getBillTableQuery(state, props);
|
||||
@@ -26,7 +28,8 @@ export default (mapState) => {
|
||||
billsLoading: state.bills.loading,
|
||||
nextBillNumberChanged: state.bills.nextBillNumberChanged,
|
||||
|
||||
vendorDueBills: getVendorDueBills(state, props),
|
||||
vendorPayableBills: getVendorPayableBills(state, props),
|
||||
paymentMadePayableBills: getPayableBillsByPaymentMade(state, props),
|
||||
};
|
||||
return mapState ? mapState(mapped, state, props) : mapped;
|
||||
};
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
import React, { useCallback, useState, useEffect, useMemo } from 'react';
|
||||
import { useParams, useHistory } from 'react-router-dom';
|
||||
import React, { useEffect } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useQuery } from 'react-query';
|
||||
import { useIntl } from 'react-intl';
|
||||
|
||||
import PaymentMadeForm from './PaymentMadeForm';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
import withVenderActions from 'containers/Vendors/withVendorActions';
|
||||
import withAccountsActions from 'containers/Accounts/withAccountsActions';
|
||||
import withItemsActions from 'containers/Items/withItemsActions';
|
||||
@@ -15,7 +17,7 @@ import withSettingsActions from 'containers/Settings/withSettingsActions';
|
||||
import { compose } from 'utils';
|
||||
|
||||
function PaymentMade({
|
||||
//#withwithAccountsActions
|
||||
//#withAccountsActions
|
||||
requestFetchAccounts,
|
||||
|
||||
//#withVenderActions
|
||||
@@ -27,65 +29,61 @@ function PaymentMade({
|
||||
//#withPaymentMadesActions
|
||||
requestFetchPaymentMade,
|
||||
|
||||
//#withBillActions
|
||||
|
||||
// #withSettingsActions
|
||||
requestFetchOptions,
|
||||
}) {
|
||||
const history = useHistory();
|
||||
const { id } = useParams();
|
||||
const [venderId, setVenderId] = useState(null);
|
||||
|
||||
// Handle fetch accounts data
|
||||
// #withDashboardActions
|
||||
changePageTitle,
|
||||
}) {
|
||||
const { id: paymentMadeId } = useParams();
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
// Handle page title change in new and edit mode.
|
||||
useEffect(() => {
|
||||
if (paymentMadeId) {
|
||||
changePageTitle(formatMessage({ id: 'edit_payment_made' }));
|
||||
} else {
|
||||
changePageTitle(formatMessage({ id: 'payment_made' }));
|
||||
}
|
||||
}, [changePageTitle, paymentMadeId, formatMessage]);
|
||||
|
||||
// Handle fetch accounts data.
|
||||
const fetchAccounts = useQuery('accounts-list', (key) =>
|
||||
requestFetchAccounts(),
|
||||
);
|
||||
|
||||
// Handle fetch Items data table or list
|
||||
// Handle fetch Items data table or list.
|
||||
const fetchItems = useQuery('items-list', () => requestFetchItems({}));
|
||||
|
||||
// Handle fetch venders data table or list
|
||||
// Handle fetch venders data table or list.
|
||||
const fetchVenders = useQuery('venders-list', () =>
|
||||
requestFetchVendorsTable({}),
|
||||
);
|
||||
|
||||
// Handle fetch specific payment made details.
|
||||
const fetchPaymentMade = useQuery(
|
||||
['payment-made', id],
|
||||
['payment-made', paymentMadeId],
|
||||
(key, _id) => requestFetchPaymentMade(_id),
|
||||
{ enabled: !!id },
|
||||
{ enabled: !!paymentMadeId },
|
||||
);
|
||||
|
||||
// Fetch payment made settings.
|
||||
const fetchSettings = useQuery(['settings'], () => requestFetchOptions({}));
|
||||
|
||||
const handleFormSubmit = useCallback(
|
||||
(payload) => {
|
||||
payload.redirect && history.push('/payment-mades');
|
||||
},
|
||||
[history],
|
||||
);
|
||||
const handleCancel = useCallback(() => {
|
||||
history.goBack();
|
||||
}, [history]);
|
||||
|
||||
const handleVenderChange = (venderId) => {
|
||||
setVenderId(venderId);
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardInsider
|
||||
loading={
|
||||
fetchVenders.isFetching ||
|
||||
fetchItems.isFetching ||
|
||||
fetchAccounts.isFetching ||
|
||||
fetchPaymentMade.isFetching
|
||||
fetchPaymentMade.isFetching ||
|
||||
fetchSettings.isFetching
|
||||
}
|
||||
name={'payment-made'}
|
||||
>
|
||||
<PaymentMadeForm
|
||||
onFormSubmit={handleFormSubmit}
|
||||
paymentMadeId={id}
|
||||
onCancelForm={handleCancel}
|
||||
onVenderChange={handleVenderChange}
|
||||
/>
|
||||
paymentMadeId={paymentMadeId}
|
||||
/>
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
@@ -96,5 +94,7 @@ export default compose(
|
||||
withAccountsActions,
|
||||
withBillActions,
|
||||
withPaymentMadeActions,
|
||||
withSettingsActions
|
||||
withSettingsActions,
|
||||
withDashboardActions,
|
||||
)(PaymentMade);
|
||||
|
||||
|
||||
@@ -1,22 +1,38 @@
|
||||
import React from 'react';
|
||||
import { Intent, Button } from '@blueprintjs/core';
|
||||
import { FormattedMessage as T } from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export default function PaymentMadeFormFooter({
|
||||
formik: { isSubmitting, resetForm },
|
||||
import { CLASSES } from 'common/classes';
|
||||
|
||||
/**
|
||||
* Payment made floating actions bar.
|
||||
*/
|
||||
export default function PaymentMadeFloatingActions({
|
||||
isSubmitting,
|
||||
onSubmitClick,
|
||||
onCancelClick,
|
||||
paymentMade,
|
||||
onClearBtnClick,
|
||||
}) {
|
||||
const handleClearBtnClick = (event) => {
|
||||
onClearBtnClick && onClearBtnClick(event);
|
||||
};
|
||||
|
||||
const handleSubmitClick = (event) => {
|
||||
onSubmitClick && onSubmitClick(event, { redirect: true });
|
||||
};
|
||||
|
||||
const handleCancelClick = (event) => {
|
||||
onCancelClick && onCancelClick(event);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={'estimate-form__floating-footer'}>
|
||||
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
|
||||
<Button
|
||||
disabled={isSubmitting}
|
||||
intent={Intent.PRIMARY}
|
||||
type="submit"
|
||||
onClick={() => {
|
||||
onSubmitClick({ redirect: true });
|
||||
}}
|
||||
onClick={handleSubmitClick}
|
||||
>
|
||||
<T id={'save_send'} />
|
||||
</Button>
|
||||
@@ -27,23 +43,23 @@ export default function PaymentMadeFormFooter({
|
||||
className={'ml1'}
|
||||
name={'save'}
|
||||
type="submit"
|
||||
onClick={() => {
|
||||
onSubmitClick({ redirect: false });
|
||||
}}
|
||||
onClick={handleSubmitClick}
|
||||
>
|
||||
<T id={'save'} />
|
||||
</Button>
|
||||
|
||||
<Button className={'ml1'} disabled={isSubmitting} s>
|
||||
<Button
|
||||
className={'ml1'}
|
||||
disabled={isSubmitting}
|
||||
onClick={handleClearBtnClick}
|
||||
>
|
||||
<T id={'clear'} />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
className={'ml1'}
|
||||
type="submit"
|
||||
onClick={() => {
|
||||
onCancelClick && onCancelClick();
|
||||
}}
|
||||
onClick={handleCancelClick}
|
||||
>
|
||||
<T id={'close'} />
|
||||
</Button>
|
||||
|
||||
@@ -1,96 +1,56 @@
|
||||
import React, {
|
||||
useMemo,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useState,
|
||||
useRef,
|
||||
} from 'react';
|
||||
|
||||
import React, { useMemo, useState, useCallback } from 'react';
|
||||
import * as Yup from 'yup';
|
||||
import { useFormik } from 'formik';
|
||||
import moment from 'moment';
|
||||
import { Intent, FormGroup, TextArea } from '@blueprintjs/core';
|
||||
import { useParams, useHistory } from 'react-router-dom';
|
||||
import { Intent, Alert } from '@blueprintjs/core';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import { pick, values } from 'lodash';
|
||||
import { pick, sumBy } from 'lodash';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { CLASSES } from 'common/classes';
|
||||
import PaymentMadeHeader from './PaymentMadeFormHeader';
|
||||
import PaymentMadeItemsTable from './PaymentMadeItemsTable';
|
||||
import PaymentMadeFloatingActions from './PaymentMadeFloatingActions';
|
||||
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
import withMediaActions from 'containers/Media/withMediaActions';
|
||||
import withPaymentMadeActions from './withPaymentMadeActions';
|
||||
import withPaymentMadeDetail from './withPaymentMadeDetail';
|
||||
import withPaymentMade from './withPaymentMade';
|
||||
import { AppToaster } from 'components';
|
||||
import Dragzone from 'components/Dragzone';
|
||||
import useMedia from 'hooks/useMedia';
|
||||
|
||||
import { compose, repeatValue } from 'utils';
|
||||
import { compose, orderingLinesIndexes } from 'utils';
|
||||
import withSettings from 'containers/Settings/withSettings';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
const MIN_LINES_NUMBER = 5;
|
||||
|
||||
const ERRORS = {
|
||||
PAYMENT_NUMBER_NOT_UNIQUE: 'PAYMENT.NUMBER.NOT.UNIQUE',
|
||||
};
|
||||
/**
|
||||
* Payment made form component.
|
||||
*/
|
||||
function PaymentMadeForm({
|
||||
//#withMedia
|
||||
// #withMedia
|
||||
requestSubmitMedia,
|
||||
requestDeleteMedia,
|
||||
|
||||
//#withPaymentMadesActions
|
||||
// #withPaymentMadesActions
|
||||
requestSubmitPaymentMade,
|
||||
requestEditPaymentMade,
|
||||
setPaymentNumberChange,
|
||||
|
||||
// #withPaymentMade
|
||||
nextPaymentNumberChanged,
|
||||
|
||||
// #withSettings
|
||||
paymentNextNumber,
|
||||
paymentNumberPrefix,
|
||||
|
||||
//#withDashboard
|
||||
changePageTitle,
|
||||
changePageSubtitle,
|
||||
|
||||
//#withPaymentMadeDetail
|
||||
// #withPaymentMadeDetail
|
||||
paymentMade,
|
||||
|
||||
onFormSubmit,
|
||||
onCancelForm,
|
||||
onVenderChange,
|
||||
paymentMadeId,
|
||||
}) {
|
||||
const history = useHistory();
|
||||
const { formatMessage } = useIntl();
|
||||
const [payload, setPayload] = useState({});
|
||||
const { id } = useParams();
|
||||
const {
|
||||
setFiles,
|
||||
saveMedia,
|
||||
deletedFiles,
|
||||
setDeletedFiles,
|
||||
deleteMedia,
|
||||
} = useMedia({
|
||||
saveCallback: requestSubmitMedia,
|
||||
deleteCallback: requestDeleteMedia,
|
||||
});
|
||||
|
||||
const savedMediaIds = useRef([]);
|
||||
const clearSavedMediaIds = () => {
|
||||
savedMediaIds.current = [];
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
onVenderChange && onVenderChange(formik.values.vendor_id);
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (paymentMade && paymentMade.id) {
|
||||
changePageTitle(formatMessage({ id: 'edit_payment_made' }));
|
||||
} else {
|
||||
changePageTitle(formatMessage({ id: 'payment_made' }));
|
||||
}
|
||||
}, [changePageTitle, paymentMade, formatMessage]);
|
||||
const [amountChangeAlert, setAmountChangeAlert] = useState(false);
|
||||
const [clearLinesAlert, setClearLinesAlert] = useState(false);
|
||||
const [clearFormAlert, setClearFormAlert] = useState(false);
|
||||
const [fullAmount, setFullAmount] = useState(null);
|
||||
|
||||
// Yup validation schema.
|
||||
const validationSchema = Yup.object().shape({
|
||||
vendor_id: Yup.string()
|
||||
.label(formatMessage({ id: 'vendor_name_' }))
|
||||
@@ -108,11 +68,9 @@ function PaymentMadeForm({
|
||||
description: Yup.string(),
|
||||
entries: Yup.array().of(
|
||||
Yup.object().shape({
|
||||
payment_amount: Yup.number().nullable(),
|
||||
bill_number: Yup.number().nullable(),
|
||||
amount: Yup.number().nullable(),
|
||||
id: Yup.number().nullable(),
|
||||
due_amount: Yup.number().nullable(),
|
||||
bill_date: Yup.date(),
|
||||
payment_amount: Yup.number().nullable().max(Yup.ref('due_amount')),
|
||||
bill_id: Yup.number()
|
||||
.nullable()
|
||||
.when(['payment_amount'], {
|
||||
@@ -122,194 +80,260 @@ function PaymentMadeForm({
|
||||
}),
|
||||
),
|
||||
});
|
||||
const handleDropFiles = useCallback((_files) => {
|
||||
setFiles(_files.filter((file) => file.uploaded === false));
|
||||
}, []);
|
||||
|
||||
const savePaymentMadeSubmit = useCallback((payload) => {
|
||||
onFormSubmit && onFormSubmit(payload);
|
||||
});
|
||||
|
||||
const defaultPaymentMade = useMemo(
|
||||
() => ({
|
||||
bill_id: '',
|
||||
bill_date: moment(new Date()).format('YYYY-MM-DD'),
|
||||
bill_number: '',
|
||||
amount: '',
|
||||
due_amount: '',
|
||||
payment_amount: '',
|
||||
}),
|
||||
// Default payment made entry values.
|
||||
const defaultPaymentMadeEntry = useMemo(
|
||||
() => ({ bill_id: '', payment_amount: '', id: null }),
|
||||
[],
|
||||
);
|
||||
|
||||
const paymentNumber = paymentNumberPrefix
|
||||
? `${paymentNumberPrefix}-${paymentNextNumber}`
|
||||
: paymentNextNumber;
|
||||
|
||||
// Default initial values.
|
||||
const defaultInitialValues = useMemo(
|
||||
() => ({
|
||||
full_amount: '',
|
||||
vendor_id: '',
|
||||
payment_account_id: '',
|
||||
payment_date: moment(new Date()).format('YYYY-MM-DD'),
|
||||
reference: '',
|
||||
payment_number: paymentNumber,
|
||||
// receive_amount: '',
|
||||
payment_number: '',
|
||||
description: '',
|
||||
entries: [...repeatValue(defaultPaymentMade, MIN_LINES_NUMBER)],
|
||||
entries: [],
|
||||
}),
|
||||
[defaultPaymentMade],
|
||||
[],
|
||||
);
|
||||
|
||||
const orderingIndex = (_entries) => {
|
||||
return _entries.map((item, index) => ({
|
||||
...item,
|
||||
index: index + 1,
|
||||
}));
|
||||
};
|
||||
|
||||
// Form initial values.
|
||||
const initialValues = useMemo(
|
||||
() => ({
|
||||
...(paymentMade
|
||||
? {
|
||||
...pick(paymentMade, Object.keys(defaultInitialValues)),
|
||||
full_amount: sumBy(paymentMade.entries, 'payment_amount'),
|
||||
entries: [
|
||||
...paymentMade.entries.map((paymentMade) => ({
|
||||
...pick(paymentMade, Object.keys(defaultPaymentMade)),
|
||||
...paymentMade.entries.map((paymentMadeEntry) => ({
|
||||
...pick(paymentMadeEntry, Object.keys(defaultPaymentMadeEntry)),
|
||||
})),
|
||||
...repeatValue(
|
||||
defaultPaymentMade,
|
||||
Math.max(MIN_LINES_NUMBER - paymentMade.entries.length, 0),
|
||||
),
|
||||
],
|
||||
}
|
||||
: {
|
||||
...defaultInitialValues,
|
||||
entries: orderingIndex(defaultInitialValues.entries),
|
||||
entries: orderingLinesIndexes(defaultInitialValues.entries),
|
||||
}),
|
||||
}),
|
||||
[paymentMade, defaultInitialValues, defaultPaymentMade],
|
||||
[paymentMade, defaultInitialValues, defaultPaymentMadeEntry],
|
||||
);
|
||||
|
||||
const initialAttachmentFiles = useMemo(() => {
|
||||
return paymentMade && paymentMade.media
|
||||
? paymentMade.media.map((attach) => ({
|
||||
preview: attach.attachment_file,
|
||||
uploaded: true,
|
||||
metadata: { ...attach },
|
||||
}))
|
||||
: [];
|
||||
}, [paymentMade]);
|
||||
const handleSubmitForm = (
|
||||
values,
|
||||
{ setSubmitting, resetForm, setFieldError },
|
||||
) => {
|
||||
setSubmitting(true);
|
||||
|
||||
const formik = useFormik({
|
||||
validationSchema,
|
||||
initialValues: {
|
||||
...initialValues,
|
||||
},
|
||||
onSubmit: async (values, { setSubmitting, setErrors, resetForm }) => {
|
||||
setSubmitting(true);
|
||||
const entries = formik.values.entries.filter((item) => {
|
||||
if (item.bill_id !== undefined) {
|
||||
return { ...item };
|
||||
}
|
||||
// Filters entries that have no `bill_id` or `payment_amount`.
|
||||
const entries = values.entries.filter((item) => {
|
||||
return !item.bill_id || item.payment_amount;
|
||||
});
|
||||
// Total payment amount of entries.
|
||||
const totalPaymentAmount = sumBy(entries, 'payment_amount');
|
||||
|
||||
if (totalPaymentAmount <= 0) {
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: 'you_cannot_make_payment_with_zero_total_amount',
|
||||
intent: Intent.WARNING,
|
||||
}),
|
||||
});
|
||||
const form = {
|
||||
...values,
|
||||
entries,
|
||||
};
|
||||
return;
|
||||
}
|
||||
const form = { ...values, entries };
|
||||
|
||||
const requestForm = { ...form };
|
||||
// Triggers once the save request success.
|
||||
const onSaved = (response) => {
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: paymentMadeId
|
||||
? 'the_payment_made_has_been_successfully_edited'
|
||||
: 'the_payment_made_has_been_successfully_created',
|
||||
}),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
setSubmitting(false);
|
||||
resetForm();
|
||||
};
|
||||
|
||||
if (paymentMade && paymentMade.id) {
|
||||
requestEditPaymentMade(paymentMade.id, requestForm)
|
||||
.then((response) => {
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: 'the_payment_made_has_been_successfully_edited',
|
||||
}),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
setSubmitting(false);
|
||||
savePaymentMadeSubmit({ action: 'update', ...payload });
|
||||
resetForm();
|
||||
})
|
||||
.catch((error) => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
} else {
|
||||
requestSubmitPaymentMade(requestForm)
|
||||
.then((response) => {
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: 'the_payment_made_has_been_successfully_created',
|
||||
}),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
setSubmitting(false);
|
||||
resetForm();
|
||||
savePaymentMadeSubmit({ action: 'new', ...payload });
|
||||
})
|
||||
.catch((errors) => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
const onError = (errors) => {
|
||||
const getError = (errorType) => errors.find((e) => e.type === errorType);
|
||||
|
||||
if (getError(ERRORS.PAYMENT_NUMBER_NOT_UNIQUE)) {
|
||||
setFieldError(
|
||||
'payment_number',
|
||||
formatMessage({ id: 'payment_number_is_not_unique' }),
|
||||
);
|
||||
}
|
||||
},
|
||||
setSubmitting(false);
|
||||
};
|
||||
|
||||
if (paymentMade && paymentMade.id) {
|
||||
requestEditPaymentMade(paymentMade.id, form).then(onSaved).catch(onError);
|
||||
} else {
|
||||
requestSubmitPaymentMade(form).then(onSaved).catch(onError);
|
||||
}
|
||||
};
|
||||
|
||||
const {
|
||||
errors,
|
||||
touched,
|
||||
setFieldValue,
|
||||
getFieldProps,
|
||||
setValues,
|
||||
values,
|
||||
handleSubmit,
|
||||
isSubmitting,
|
||||
} = useFormik({
|
||||
validationSchema,
|
||||
initialValues,
|
||||
onSubmit: handleSubmitForm,
|
||||
});
|
||||
|
||||
const handleDeleteFile = useCallback(
|
||||
(_deletedFiles) => {
|
||||
_deletedFiles.forEach((deletedFile) => {
|
||||
if (deletedFile.upload && deletedFile.metadata.id) {
|
||||
setDeletedFiles([...deletedFiles, deletedFile.metadata.id]);
|
||||
}
|
||||
});
|
||||
const handleFullAmountChange = useCallback(
|
||||
(value) => {
|
||||
if (value !== fullAmount) {
|
||||
setAmountChangeAlert(value);
|
||||
}
|
||||
},
|
||||
[setDeletedFiles, deletedFiles],
|
||||
[fullAmount, setAmountChangeAlert],
|
||||
);
|
||||
|
||||
const handleSubmitClick = useCallback(
|
||||
(payload) => {
|
||||
setPayload(payload);
|
||||
formik.submitForm();
|
||||
},
|
||||
[setPayload, formik],
|
||||
);
|
||||
|
||||
const handleCancelClick = useCallback(
|
||||
(payload) => {
|
||||
onCancelForm && onCancelForm(payload);
|
||||
},
|
||||
[onCancelForm],
|
||||
);
|
||||
|
||||
const handleClickAddNewRow = () => {
|
||||
formik.setFieldValue(
|
||||
'entries',
|
||||
orderingIndex([...formik.values.entries, defaultPaymentMade]),
|
||||
);
|
||||
// Handle cancel button of amount change alert.
|
||||
const handleCancelAmountChangeAlert = () => {
|
||||
setAmountChangeAlert(false);
|
||||
};
|
||||
|
||||
// Handle confirm button of amount change alert.
|
||||
const handleConfirmAmountChangeAlert = () => {
|
||||
setFullAmount(amountChangeAlert);
|
||||
setAmountChangeAlert(false);
|
||||
};
|
||||
|
||||
// Handle update data.
|
||||
const handleUpdataData = useCallback(
|
||||
(entries) => {
|
||||
setFieldValue('entries', entries);
|
||||
},
|
||||
[setFieldValue],
|
||||
);
|
||||
|
||||
// Handle cancel button click.
|
||||
const handleCancelClick = useCallback(() => {
|
||||
history.push('/payment-mades');
|
||||
}, [history]);
|
||||
|
||||
// Handle clear all lines button click.
|
||||
const handleClearAllLines = () => {
|
||||
formik.setFieldValue(
|
||||
'entries',
|
||||
orderingIndex([...repeatValue(defaultPaymentMade, MIN_LINES_NUMBER)]),
|
||||
);
|
||||
setClearLinesAlert(true);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
formik.setFieldValue('payment_number', paymentNumber);
|
||||
setPaymentNumberChange(false);
|
||||
}, [nextPaymentNumberChanged, paymentNumber]);
|
||||
const handleCancelClearLines = useCallback(() => {
|
||||
setClearLinesAlert(false);
|
||||
}, [setClearLinesAlert]);
|
||||
|
||||
const handleConfirmClearLines = useCallback(() => {
|
||||
setFieldValue(
|
||||
'entries',
|
||||
values.entries.map((entry) => ({
|
||||
...entry,
|
||||
payment_amount: 0,
|
||||
})),
|
||||
);
|
||||
setClearLinesAlert(false);
|
||||
}, [setFieldValue, setClearLinesAlert, values.entries]);
|
||||
|
||||
// Handle clear button click.
|
||||
const handleClearBtnClick = useCallback(() => {
|
||||
setClearFormAlert(true);
|
||||
}, []);
|
||||
|
||||
//
|
||||
const handleCancelClearFormAlert = () => {
|
||||
setClearFormAlert(false);
|
||||
};
|
||||
|
||||
const handleConfirmCancelClearFormAlert = () => {
|
||||
setValues({
|
||||
...defaultInitialValues,
|
||||
...(paymentMadeId
|
||||
? {
|
||||
vendor_id: values.vendor_id,
|
||||
payment_number: values.payment_number,
|
||||
}
|
||||
: {}),
|
||||
});
|
||||
setClearFormAlert(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={'payment_made_form'}>
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<PaymentMadeHeader formik={formik} />
|
||||
<div
|
||||
className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_PAYMENT_MADE)}
|
||||
>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<PaymentMadeHeader
|
||||
paymentMadeId={paymentMadeId}
|
||||
vendorId={values.vendor_id}
|
||||
errors={errors}
|
||||
touched={touched}
|
||||
setFieldValue={setFieldValue}
|
||||
getFieldProps={getFieldProps}
|
||||
values={values}
|
||||
onFullAmountChanged={handleFullAmountChange}
|
||||
/>
|
||||
|
||||
<PaymentMadeItemsTable
|
||||
formik={formik}
|
||||
entries={formik.values.entries}
|
||||
vendor_id={formik.values.vendor_id}
|
||||
onClickAddNewRow={handleClickAddNewRow}
|
||||
fullAmount={fullAmount}
|
||||
paymentEntries={values.entries}
|
||||
vendorId={values.vendor_id}
|
||||
paymentMadeId={paymentMadeId}
|
||||
onUpdateData={handleUpdataData}
|
||||
onClickClearAllLines={handleClearAllLines}
|
||||
errors={errors?.entries}
|
||||
/>
|
||||
|
||||
<Alert
|
||||
cancelButtonText={<T id={'cancel'} />}
|
||||
confirmButtonText={<T id={'ok'} />}
|
||||
intent={Intent.WARNING}
|
||||
isOpen={amountChangeAlert}
|
||||
onCancel={handleCancelAmountChangeAlert}
|
||||
onConfirm={handleConfirmAmountChangeAlert}
|
||||
>
|
||||
<p>Are you sure to discard full amount?</p>
|
||||
</Alert>
|
||||
|
||||
<Alert
|
||||
cancelButtonText={<T id={'cancel'} />}
|
||||
confirmButtonText={<T id={'ok'} />}
|
||||
intent={Intent.WARNING}
|
||||
isOpen={clearLinesAlert}
|
||||
onCancel={handleCancelClearLines}
|
||||
onConfirm={handleConfirmClearLines}
|
||||
>
|
||||
<p>Are you sure to discard full amount?</p>
|
||||
</Alert>
|
||||
|
||||
<Alert
|
||||
cancelButtonText={<T id={'cancel'} />}
|
||||
confirmButtonText={<T id={'ok'} />}
|
||||
intent={Intent.WARNING}
|
||||
isOpen={clearFormAlert}
|
||||
onCancel={handleCancelClearFormAlert}
|
||||
onConfirm={handleConfirmCancelClearFormAlert}
|
||||
>
|
||||
<p>Are you sure to clear form data.</p>
|
||||
</Alert>
|
||||
|
||||
<PaymentMadeFloatingActions
|
||||
isSubmitting={isSubmitting}
|
||||
onCancelClick={handleCancelClick}
|
||||
onClearBtnClick={handleClearBtnClick}
|
||||
/>
|
||||
|
||||
{/* <Dragzone
|
||||
@@ -319,18 +343,12 @@ function PaymentMadeForm({
|
||||
hint={'Attachments: Maxiumum size: 20MB'}
|
||||
/> */}
|
||||
</form>
|
||||
<PaymentMadeFloatingActions
|
||||
formik={formik}
|
||||
onSubmitClick={handleSubmitClick}
|
||||
onCancel={handleCancelClick}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withPaymentMadeActions,
|
||||
withDashboardActions,
|
||||
withMediaActions,
|
||||
withPaymentMadeDetail(),
|
||||
withPaymentMade(({ nextPaymentNumberChanged }) => ({
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useMemo, useCallback, useState } from 'react';
|
||||
import React, { useMemo, useCallback } from 'react';
|
||||
import {
|
||||
FormGroup,
|
||||
InputGroup,
|
||||
@@ -7,38 +7,59 @@ import {
|
||||
MenuItem,
|
||||
Classes,
|
||||
} from '@blueprintjs/core';
|
||||
|
||||
import { sumBy } from 'lodash';
|
||||
import { DateInput } from '@blueprintjs/datetime';
|
||||
import { FormattedMessage as T } from 'react-intl';
|
||||
import { useParams, useHistory } from 'react-router-dom';
|
||||
|
||||
import moment from 'moment';
|
||||
import { momentFormatter, compose, tansformDateValue } from 'utils';
|
||||
import classNames from 'classnames';
|
||||
import { CLASSES } from 'common/classes';
|
||||
import { momentFormatter, compose, tansformDateValue } from 'utils';
|
||||
import {
|
||||
AccountsSelectList,
|
||||
ListSelect,
|
||||
ErrorMessage,
|
||||
FieldRequiredHint,
|
||||
Icon,
|
||||
InputPrependButton,
|
||||
Money,
|
||||
Hint,
|
||||
} from 'components';
|
||||
|
||||
import withBills from '../Bill/withBills';
|
||||
import withVender from 'containers/Vendors/withVendors';
|
||||
import withAccounts from 'containers/Accounts/withAccounts';
|
||||
import withDialogActions from 'containers/Dialog/withDialogActions';
|
||||
|
||||
/**
|
||||
* Payment made header form.
|
||||
*/
|
||||
function PaymentMadeFormHeader({
|
||||
formik: { errors, touched, setFieldValue, getFieldProps, values },
|
||||
paymentMadeId,
|
||||
vendorId,
|
||||
|
||||
// #useFormik
|
||||
errors,
|
||||
touched,
|
||||
setFieldValue,
|
||||
getFieldProps,
|
||||
values,
|
||||
|
||||
onFullAmountChanged,
|
||||
|
||||
//#withVender
|
||||
vendorsCurrentPage,
|
||||
vendorItems,
|
||||
|
||||
//#withAccouts
|
||||
accountsList,
|
||||
// #withDialogActions
|
||||
openDialog,
|
||||
|
||||
// #withBills
|
||||
vendorPayableBills,
|
||||
}) {
|
||||
const isNewMode = !paymentMadeId;
|
||||
|
||||
const payableFullAmount = useMemo(
|
||||
() => sumBy(vendorPayableBills, 'due_amount'),
|
||||
[vendorPayableBills],
|
||||
);
|
||||
|
||||
const handleDateChange = useCallback(
|
||||
(date_filed) => (date) => {
|
||||
const formatted = moment(date).format('YYYY-MM-DD');
|
||||
@@ -58,6 +79,14 @@ function PaymentMadeFormHeader({
|
||||
[],
|
||||
);
|
||||
|
||||
const triggerFullAmountChanged = (value) => {
|
||||
onFullAmountChanged && onFullAmountChanged(value);
|
||||
}
|
||||
|
||||
const handleFullAmountBlur = (event) => {
|
||||
triggerFullAmountChanged(event.currentTarget.value);
|
||||
};
|
||||
|
||||
const handleFilterVender = (query, vender, index, exactMatch) => {
|
||||
const normalizedTitle = vender.display_name.toLowerCase();
|
||||
const normalizedQuery = query.toLowerCase();
|
||||
@@ -85,14 +114,15 @@ function PaymentMadeFormHeader({
|
||||
[accountsList],
|
||||
);
|
||||
|
||||
const handlePaymentNumberChange = useCallback(() => {
|
||||
openDialog('payment-number-form', {});
|
||||
}, [openDialog]);
|
||||
const handleReceiveFullAmountClick = () => {
|
||||
setFieldValue('full_amount', payableFullAmount);
|
||||
triggerFullAmountChanged(payableFullAmount);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
{/* Vendor name */}
|
||||
<div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
|
||||
<div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
|
||||
{/* ------------ Vendor name ------------ */}
|
||||
<FormGroup
|
||||
label={<T id={'vendor_name'} />}
|
||||
inline={true}
|
||||
@@ -114,10 +144,12 @@ function PaymentMadeFormHeader({
|
||||
selectedItemProp={'id'}
|
||||
defaultText={<T id={'select_vender_account'} />}
|
||||
labelProp={'display_name'}
|
||||
buttonProps={{ disabled: !isNewMode }}
|
||||
disabled={!isNewMode}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
{/* Payment date */}
|
||||
{/* ------------ Payment date ------------ */}
|
||||
<FormGroup
|
||||
label={<T id={'payment_date'} />}
|
||||
inline={true}
|
||||
@@ -136,7 +168,35 @@ function PaymentMadeFormHeader({
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
{/* payment number */}
|
||||
{/* ------------ Full amount ------------ */}
|
||||
<FormGroup
|
||||
label={<T id={'full_amount'} />}
|
||||
inline={true}
|
||||
className={('form-group--full-amount', Classes.FILL)}
|
||||
intent={
|
||||
errors.full_amount && touched.full_amount && Intent.DANGER
|
||||
}
|
||||
labelInfo={<Hint />}
|
||||
helperText={
|
||||
<ErrorMessage name="full_amount" {...{ errors, touched }} />
|
||||
}
|
||||
>
|
||||
<InputGroup
|
||||
intent={
|
||||
errors.full_amount && touched.full_amount && Intent.DANGER
|
||||
}
|
||||
minimal={true}
|
||||
value={values.full_amount}
|
||||
{...getFieldProps('full_amount')}
|
||||
onBlur={handleFullAmountBlur}
|
||||
/>
|
||||
|
||||
<a onClick={handleReceiveFullAmountClick} href="#" className={'receive-full-amount'}>
|
||||
Receive full amount (<Money amount={payableFullAmount} currency={'USD'} />)
|
||||
</a>
|
||||
</FormGroup>
|
||||
|
||||
{/* ------------ Payment number ------------ */}
|
||||
<FormGroup
|
||||
label={<T id={'payment_no'} />}
|
||||
inline={true}
|
||||
@@ -154,25 +214,11 @@ function PaymentMadeFormHeader({
|
||||
errors.payment_number && touched.payment_number && Intent.DANGER
|
||||
}
|
||||
minimal={true}
|
||||
rightElement={
|
||||
<InputPrependButton
|
||||
buttonProps={{
|
||||
onClick: handlePaymentNumberChange,
|
||||
icon: <Icon icon={'settings-18'} />,
|
||||
}}
|
||||
tooltip={true}
|
||||
tooltipProps={{
|
||||
content: 'Setting your auto-generated payment number',
|
||||
position: Position.BOTTOM_LEFT,
|
||||
}}
|
||||
/>
|
||||
}
|
||||
minimal={true}
|
||||
{...getFieldProps('payment_number')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
{/* payment account */}
|
||||
{/* ------------ Payment account ------------ */}
|
||||
<FormGroup
|
||||
label={<T id={'payment_account'} />}
|
||||
className={classNames(
|
||||
@@ -192,7 +238,7 @@ function PaymentMadeFormHeader({
|
||||
name={'payment_account_id'}
|
||||
{...{ errors, touched }}
|
||||
/>
|
||||
}
|
||||
}
|
||||
>
|
||||
<AccountsSelectList
|
||||
accounts={paymentAccounts}
|
||||
@@ -202,22 +248,22 @@ function PaymentMadeFormHeader({
|
||||
selectedAccountId={values.payment_account_id}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
|
||||
{/* reference */}
|
||||
<FormGroup
|
||||
label={<T id={'reference'} />}
|
||||
inline={true}
|
||||
className={classNames('form-group--reference', Classes.FILL)}
|
||||
intent={errors.reference && touched.reference && Intent.DANGER}
|
||||
helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
|
||||
>
|
||||
<InputGroup
|
||||
{/* ------------ Reference ------------ */}
|
||||
<FormGroup
|
||||
label={<T id={'reference'} />}
|
||||
inline={true}
|
||||
className={classNames('form-group--reference', Classes.FILL)}
|
||||
intent={errors.reference && touched.reference && Intent.DANGER}
|
||||
minimal={true}
|
||||
{...getFieldProps('reference')}
|
||||
/>
|
||||
</FormGroup>
|
||||
helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
|
||||
>
|
||||
<InputGroup
|
||||
intent={errors.reference && touched.reference && Intent.DANGER}
|
||||
minimal={true}
|
||||
{...getFieldProps('reference')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -230,5 +276,7 @@ export default compose(
|
||||
withAccounts(({ accountsList }) => ({
|
||||
accountsList,
|
||||
})),
|
||||
withDialogActions,
|
||||
withBills(({ vendorPayableBills }) => ({
|
||||
vendorPayableBills,
|
||||
})),
|
||||
)(PaymentMadeFormHeader);
|
||||
|
||||
@@ -1,234 +1,137 @@
|
||||
import React, { useState, useMemo, useEffect, useCallback } from 'react';
|
||||
import { Button, Intent, Position, Tooltip } from '@blueprintjs/core';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import { Icon, DataTable } from 'components';
|
||||
import moment from 'moment';
|
||||
|
||||
import { compose, formattedAmount, transformUpdatedRows } from 'utils';
|
||||
import {
|
||||
MoneyFieldCell,
|
||||
DivFieldCell,
|
||||
EmptyDiv,
|
||||
} from 'components/DataTableCells';
|
||||
import React, { useState, useEffect, useMemo, useCallback } from 'react';
|
||||
import { useQuery } from 'react-query';
|
||||
import { CloudLoadingIndicator } from 'components'
|
||||
import PaymentMadeItemsTableEditor from './PaymentMadeItemsTableEditor';
|
||||
|
||||
import withPaymentMadeActions from './withPaymentMadeActions';
|
||||
import withBillActions from '../Bill/withBillActions';
|
||||
import withBills from '../Bill/withBills';
|
||||
import { omit, pick } from 'lodash';
|
||||
|
||||
const ActionsCellRenderer = ({
|
||||
row: { index },
|
||||
column: { id },
|
||||
cell: { value },
|
||||
data,
|
||||
payload,
|
||||
}) => {
|
||||
if (data.length <= index + 1) {
|
||||
return '';
|
||||
}
|
||||
const onRemoveRole = () => {
|
||||
payload.removeRow(index);
|
||||
};
|
||||
return (
|
||||
<Tooltip content={<T id={'remove_the_line'} />} position={Position.LEFT}>
|
||||
<Button
|
||||
icon={<Icon icon={'times-circle'} iconSize={14} />}
|
||||
iconSize={14}
|
||||
className="m12"
|
||||
intent={Intent.DANGER}
|
||||
onClick={onRemoveRole}
|
||||
/>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
const CellRenderer = (content, type) => (props) => {
|
||||
if (props.data.length === props.row.index + 1) {
|
||||
return '';
|
||||
}
|
||||
return content(props);
|
||||
};
|
||||
|
||||
const TotalCellRederer = (content, type) => (props) => {
|
||||
if (props.data.length === props.row.index + 1) {
|
||||
const total = props.data.reduce((total, entry) => {
|
||||
const amount = parseInt(entry[type], 10);
|
||||
const computed = amount ? total + amount : total;
|
||||
|
||||
return computed;
|
||||
}, 0);
|
||||
return <span>{formattedAmount(total, 'USD')}</span>;
|
||||
}
|
||||
return content(props);
|
||||
};
|
||||
import { compose } from 'utils';
|
||||
|
||||
/**
|
||||
* Payment made items table.
|
||||
*/
|
||||
function PaymentMadeItemsTable({
|
||||
//#ownProps
|
||||
onClickRemoveRow,
|
||||
onClickAddNewRow,
|
||||
// #ownProps
|
||||
paymentMadeId,
|
||||
vendorId,
|
||||
fullAmount,
|
||||
onUpdateData,
|
||||
paymentEntries = [], // { bill_id: number, payment_amount: number, id?: number }
|
||||
onClickClearAllLines,
|
||||
entries,
|
||||
formik: { errors, setFieldValue, values },
|
||||
errors,
|
||||
|
||||
// #withBillActions
|
||||
requestFetchDueBills,
|
||||
|
||||
// #withBills
|
||||
vendorPayableBills,
|
||||
paymentMadePayableBills,
|
||||
|
||||
// #withPaymentMadeDetail
|
||||
paymentMade,
|
||||
}) {
|
||||
const [rows, setRows] = useState([]);
|
||||
const [entrie, setEntrie] = useState([]);
|
||||
const { formatMessage } = useIntl();
|
||||
const [tableData, setTableData] = useState([]);
|
||||
const [localAmount, setLocalAmount] = useState(fullAmount);
|
||||
|
||||
// Payable bills based on selected vendor or specific payment made.
|
||||
const payableBills = useMemo(
|
||||
() =>
|
||||
paymentMadeId
|
||||
? paymentMadePayableBills
|
||||
: vendorId
|
||||
? vendorPayableBills
|
||||
: [],
|
||||
[paymentMadeId, paymentMadePayableBills, vendorId, vendorPayableBills],
|
||||
);
|
||||
const isNewMode = !paymentMadeId;
|
||||
|
||||
const triggerUpdateData = useCallback((data) => {
|
||||
onUpdateData && onUpdateData(data);
|
||||
}, [onUpdateData]);
|
||||
|
||||
// Merges payment entries with payable bills.
|
||||
const computedTableData = useMemo(() => {
|
||||
const entriesTable = new Map(
|
||||
paymentEntries.map((e) => [e.bill_id, e]),
|
||||
);
|
||||
return payableBills.map((bill) => {
|
||||
const entry = entriesTable.get(bill.id);
|
||||
return {
|
||||
...bill,
|
||||
bill_id: bill.id,
|
||||
bill_payment_amount: bill.payment_amount,
|
||||
payment_amount: entry ? entry.payment_amount : 0,
|
||||
id: entry ? entry.id : null,
|
||||
}
|
||||
});
|
||||
}, [paymentEntries, payableBills]);
|
||||
|
||||
useEffect(() => {
|
||||
setRows([...entries.map((e) => ({ ...e }))]);
|
||||
}, [entries]);
|
||||
setTableData(computedTableData);
|
||||
}, [computedTableData]);
|
||||
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
Header: '#',
|
||||
accessor: 'index',
|
||||
Cell: ({ row: { index } }) => <span>{index + 1}</span>,
|
||||
width: 40,
|
||||
disableResizing: true,
|
||||
disableSortBy: true,
|
||||
},
|
||||
{
|
||||
Header: formatMessage({ id: 'Date' }),
|
||||
id: 'bill_date',
|
||||
accessor: (r) => moment(r.bill_date).format('YYYY MMM DD'),
|
||||
Cell: CellRenderer(EmptyDiv, 'bill_date'),
|
||||
disableSortBy: true,
|
||||
disableResizing: true,
|
||||
width: 250,
|
||||
},
|
||||
// Handle mapping `fullAmount` prop to `localAmount` state.
|
||||
useEffect(() => {
|
||||
if (localAmount !== fullAmount) {
|
||||
let _fullAmount = fullAmount;
|
||||
const newTableData = tableData.map((data) => {
|
||||
const amount = Math.min(data.due_amount, _fullAmount);
|
||||
_fullAmount -= Math.max(amount, 0);
|
||||
|
||||
{
|
||||
Header: formatMessage({ id: 'bill_number' }),
|
||||
accessor: (row) => `#${row.bill_number}`,
|
||||
Cell: CellRenderer(EmptyDiv, 'bill_number'),
|
||||
disableSortBy: true,
|
||||
className: 'bill_number',
|
||||
},
|
||||
{
|
||||
Header: formatMessage({ id: 'bill_amount' }),
|
||||
accessor: 'amount',
|
||||
Cell: CellRenderer(DivFieldCell, 'amount'),
|
||||
disableSortBy: true,
|
||||
width: 100,
|
||||
className: '',
|
||||
},
|
||||
{
|
||||
Header: formatMessage({ id: 'amount_due' }),
|
||||
accessor: 'due_amount',
|
||||
Cell: TotalCellRederer(DivFieldCell, 'due_amount'),
|
||||
disableSortBy: true,
|
||||
width: 150,
|
||||
className: '',
|
||||
},
|
||||
{
|
||||
Header: formatMessage({ id: 'payment_amount' }),
|
||||
accessor: 'payment_amount',
|
||||
Cell: TotalCellRederer(MoneyFieldCell, 'payment_amount'),
|
||||
|
||||
disableSortBy: true,
|
||||
width: 150,
|
||||
className: '',
|
||||
},
|
||||
{
|
||||
Header: '',
|
||||
accessor: 'action',
|
||||
Cell: ActionsCellRenderer,
|
||||
className: 'actions',
|
||||
disableSortBy: true,
|
||||
disableResizing: true,
|
||||
width: 45,
|
||||
},
|
||||
],
|
||||
[formatMessage],
|
||||
);
|
||||
|
||||
const handleRemoveRow = useCallback(
|
||||
(rowIndex) => {
|
||||
if (rows.length <= 1) {
|
||||
return;
|
||||
}
|
||||
const removeIndex = parseInt(rowIndex, 10);
|
||||
const newRows = rows.filter((row, index) => index !== removeIndex);
|
||||
|
||||
setFieldValue(
|
||||
'entries',
|
||||
newRows.map((row, index) => ({
|
||||
...omit(row),
|
||||
index: index - 1,
|
||||
})),
|
||||
);
|
||||
onClickRemoveRow && onClickRemoveRow(removeIndex);
|
||||
},
|
||||
[entrie, setFieldValue, onClickRemoveRow],
|
||||
);
|
||||
|
||||
const onClickNewRow = () => {
|
||||
onClickAddNewRow && onClickAddNewRow();
|
||||
};
|
||||
|
||||
const handleClickClearAllLines = () => {
|
||||
onClickClearAllLines && onClickClearAllLines();
|
||||
};
|
||||
|
||||
const rowClassNames = useCallback((row) => {
|
||||
return { 'row--total': rows.length === row.index + 1 };
|
||||
});
|
||||
|
||||
const handleUpdateData = useCallback(
|
||||
(rowIndex, columnId, value) => {
|
||||
const newRows = rows.map((row, index) => {
|
||||
if (index === rowIndex) {
|
||||
return {
|
||||
...rows[rowIndex],
|
||||
[columnId]: value,
|
||||
};
|
||||
}
|
||||
return row;
|
||||
return {
|
||||
...data,
|
||||
payment_amount: amount,
|
||||
};
|
||||
});
|
||||
// setRows(newRows);
|
||||
setFieldValue(
|
||||
'entries',
|
||||
newRows,
|
||||
// .map((row) => ({
|
||||
// ...pick(row, ['payment_amount']),
|
||||
// invoice_id: row.id,
|
||||
// })),
|
||||
);
|
||||
},
|
||||
[rows, setFieldValue, setRows],
|
||||
);
|
||||
return (
|
||||
<div className={'estimate-form__table'}>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={rows}
|
||||
rowClassNames={rowClassNames}
|
||||
spinnerProps={false}
|
||||
payload={{
|
||||
errors: errors.entries || [],
|
||||
updateData: handleUpdateData,
|
||||
removeRow: handleRemoveRow,
|
||||
}}
|
||||
/>
|
||||
<div className={'mt1'}>
|
||||
<Button
|
||||
small={true}
|
||||
className={'button--secondary button--new-line'}
|
||||
onClick={onClickNewRow}
|
||||
>
|
||||
<T id={'new_lines'} />
|
||||
</Button>
|
||||
setTableData(newTableData);
|
||||
setLocalAmount(fullAmount);
|
||||
triggerUpdateData(newTableData);
|
||||
}
|
||||
}, [
|
||||
tableData,
|
||||
setTableData,
|
||||
setLocalAmount,
|
||||
triggerUpdateData,
|
||||
localAmount,
|
||||
fullAmount,
|
||||
]);
|
||||
|
||||
<Button
|
||||
small={true}
|
||||
className={'button--secondary button--clear-lines ml1'}
|
||||
onClick={handleClickClearAllLines}
|
||||
>
|
||||
<T id={'clear_all_lines'} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
// Fetches vendor due bills.
|
||||
const fetchVendorDueBills = useQuery(
|
||||
['vendor-due-bills', vendorId],
|
||||
(key, _vendorId) => requestFetchDueBills(_vendorId),
|
||||
{ enabled: isNewMode && vendorId },
|
||||
);
|
||||
|
||||
// Handle update data.
|
||||
const handleUpdateData = (rows) => {
|
||||
triggerUpdateData(rows);
|
||||
};
|
||||
|
||||
const noResultsMessage = (vendorId) ?
|
||||
'There is no payable bills for this vendor that can be applied for this payment' :
|
||||
'Please select a vendor to display all open bills for it.';
|
||||
|
||||
return (
|
||||
<CloudLoadingIndicator isLoading={fetchVendorDueBills.isFetching}>
|
||||
<PaymentMadeItemsTableEditor
|
||||
noResultsMessage={noResultsMessage}
|
||||
data={tableData}
|
||||
errors={errors}
|
||||
onUpdateData={handleUpdateData}
|
||||
onClickClearAllLines={onClickClearAllLines}
|
||||
/>
|
||||
</CloudLoadingIndicator>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose()(PaymentMadeItemsTable);
|
||||
// withBills(({}) => ({}))
|
||||
export default compose(
|
||||
withPaymentMadeActions,
|
||||
withBillActions,
|
||||
withBills(({ vendorPayableBills, paymentMadePayableBills }) => ({
|
||||
vendorPayableBills,
|
||||
paymentMadePayableBills,
|
||||
})),
|
||||
)(PaymentMadeItemsTable);
|
||||
|
||||
@@ -0,0 +1,165 @@
|
||||
import React, { useState, useEffect, useMemo, useCallback } from 'react';
|
||||
import { Button } from '@blueprintjs/core';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import moment from 'moment';
|
||||
import { sumBy } from 'lodash';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { CLASSES } from 'common/classes';
|
||||
import { DataTable, Money } from 'components';
|
||||
import { transformUpdatedRows } from 'utils';
|
||||
import {
|
||||
MoneyFieldCell,
|
||||
DivFieldCell,
|
||||
EmptyDiv,
|
||||
} from 'components/DataTableCells';
|
||||
|
||||
/**
|
||||
* Cell renderer guard.
|
||||
*/
|
||||
const CellRenderer = (content, type) => (props) => {
|
||||
if (props.data.length === props.row.index + 1) {
|
||||
return '';
|
||||
}
|
||||
return content(props);
|
||||
};
|
||||
|
||||
const TotalCellRederer = (content, type) => (props) => {
|
||||
if (props.data.length === props.row.index + 1) {
|
||||
return <Money amount={props.cell.row.original[type]} currency={'USD'} />
|
||||
}
|
||||
return content(props);
|
||||
};
|
||||
|
||||
/**
|
||||
* Payment made items editor table.
|
||||
*/
|
||||
export default function PaymentMadeItemsTableEditor({
|
||||
//#ownProps
|
||||
onClickClearAllLines,
|
||||
onUpdateData,
|
||||
data,
|
||||
errors,
|
||||
noResultsMessage
|
||||
}) {
|
||||
const transformedData = useMemo(() => {
|
||||
const rows = data;
|
||||
const totalRow = {
|
||||
due_amount: sumBy(data, 'due_amount'),
|
||||
payment_amount: sumBy(data, 'payment_amount'),
|
||||
};
|
||||
if (rows.length > 0) { rows.push(totalRow) }
|
||||
return rows;
|
||||
}, [data]);
|
||||
|
||||
const [localData, setLocalData] = useState(transformedData);
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
useEffect(() => {
|
||||
if (localData !== transformedData) {
|
||||
setLocalData(transformedData);
|
||||
}
|
||||
}, [setLocalData, localData, transformedData]);
|
||||
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
Header: '#',
|
||||
accessor: 'index',
|
||||
Cell: ({ row: { index } }) => <span>{index + 1}</span>,
|
||||
width: 40,
|
||||
disableResizing: true,
|
||||
disableSortBy: true,
|
||||
},
|
||||
{
|
||||
Header: formatMessage({ id: 'Date' }),
|
||||
id: 'bill_date',
|
||||
accessor: (r) => moment(r.bill_date).format('YYYY MMM DD'),
|
||||
Cell: CellRenderer(EmptyDiv, 'bill_date'),
|
||||
disableSortBy: true,
|
||||
},
|
||||
{
|
||||
Header: formatMessage({ id: 'bill_number' }),
|
||||
accessor: (row) => `#${row.bill_number}`,
|
||||
Cell: CellRenderer(EmptyDiv, 'bill_number'),
|
||||
disableSortBy: true,
|
||||
className: 'bill_number',
|
||||
},
|
||||
{
|
||||
Header: formatMessage({ id: 'bill_amount' }),
|
||||
accessor: 'amount',
|
||||
Cell: CellRenderer(DivFieldCell, 'amount'),
|
||||
disableSortBy: true,
|
||||
className: '',
|
||||
},
|
||||
{
|
||||
Header: formatMessage({ id: 'amount_due' }),
|
||||
accessor: 'due_amount',
|
||||
Cell: TotalCellRederer(DivFieldCell, 'due_amount'),
|
||||
disableSortBy: true,
|
||||
className: '',
|
||||
},
|
||||
{
|
||||
Header: formatMessage({ id: 'payment_amount' }),
|
||||
accessor: 'payment_amount',
|
||||
Cell: TotalCellRederer(MoneyFieldCell, 'payment_amount'),
|
||||
disableSortBy: true,
|
||||
className: '',
|
||||
},
|
||||
],
|
||||
[formatMessage],
|
||||
);
|
||||
|
||||
// Handle click clear all lines button.
|
||||
const handleClickClearAllLines = () => {
|
||||
onClickClearAllLines && onClickClearAllLines();
|
||||
};
|
||||
|
||||
const rowClassNames = useCallback(
|
||||
(row) => ({ 'row--total': localData.length === row.index + 1 }),
|
||||
[localData],
|
||||
);
|
||||
|
||||
// Handle update data.
|
||||
const handleUpdateData = useCallback(
|
||||
(rowIndex, columnId, value) => {
|
||||
const newRows = transformUpdatedRows(
|
||||
localData,
|
||||
rowIndex,
|
||||
columnId,
|
||||
value,
|
||||
);
|
||||
setLocalData(newRows);
|
||||
onUpdateData && onUpdateData(newRows);
|
||||
},
|
||||
[localData, setLocalData, onUpdateData],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={classNames(
|
||||
CLASSES.DATATABLE_EDITOR,
|
||||
CLASSES.DATATABLE_EDITOR_ITEMS_ENTRIES,
|
||||
)}>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={localData}
|
||||
rowClassNames={rowClassNames}
|
||||
spinnerProps={false}
|
||||
payload={{
|
||||
errors,
|
||||
updateData: handleUpdateData,
|
||||
}}
|
||||
noResults={noResultsMessage}
|
||||
/>
|
||||
<div className={classNames(CLASSES.DATATABLE_EDITOR_ACTIONS, 'mt1')}>
|
||||
<Button
|
||||
small={true}
|
||||
className={'button--secondary button--clear-lines'}
|
||||
onClick={handleClickClearAllLines}
|
||||
>
|
||||
<T id={'clear_all_lines'} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -6,6 +6,7 @@ import {
|
||||
deletePaymentMade,
|
||||
fetchPaymentMadesTable,
|
||||
fetchPaymentMade,
|
||||
fetchPaymentMadeBills,
|
||||
} from 'store/PaymentMades/paymentMade.actions';
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
@@ -16,6 +17,8 @@ const mapDispatchToProps = (dispatch) => ({
|
||||
requestFetchPaymentMadesTable: (query = {}) =>
|
||||
dispatch(fetchPaymentMadesTable({ query: { ...query } })),
|
||||
|
||||
requestFetchPaymentMadeBills: (paymentMadeId) => dispatch(fetchPaymentMadeBills({ paymentMadeId })),
|
||||
|
||||
changePaymentMadeView: (id) =>
|
||||
dispatch({
|
||||
type: t.PAYMENT_MADE_SET_CURRENT_VIEW,
|
||||
|
||||
Reference in New Issue
Block a user