QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-19 22:30:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactoring: WIP payment receive and made form.

Browse Source
This commit is contained in:
a.bouhuolia
2021-02-16 17:31:18 +02:00
parent a75177b9d1
commit d60429f5e0
17 changed files with 441 additions and 657 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveItemsTable.js
View File

@@ -1,137 +1,76 @@
import React, { useState, useMemo, useEffect, useCallback } from 'react';
import React, { useMemo, useCallback } from 'react';
import { Button } from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
import { CloudLoadingIndicator } from 'components';
import { useQuery } from 'react-query';
import { omit } from 'lodash';
import classNames from 'classnames';
import { compose } from 'utils';
import { CLASSES } from 'common/classes';
import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
import { DataTableEditable } from 'components';
import { usePaymentReceiveEntriesColumns } from './components';
import withInvoices from '../Invoice/withInvoices';
import PaymentReceiveItemsTableEditor from './PaymentReceiveItemsTableEditor';
import withInvoiceActions from 'containers/Sales/Invoice/withInvoiceActions';
/**
* Payment receive items table.
*/
export default function PaymentReceiveItemsTable() {
// Payment receive form context.
const {
isNewMode,
isDueInvoicesFetching,
paymentCustomerId,
dueInvoices,
} = usePaymentReceiveFormContext();
function PaymentReceiveItemsTable({
// #ownProps
paymentReceiveId,
customerId,
fullAmount,
onUpdateData,
paymentReceiveEntries = [],
errors,
onClickClearAllLines,
onFetchEntriesSuccess,
// #withInvoices
customerInvoiceEntries,
// #withPaymentReceiveActions
requestFetchDueInvoices
}) {
const isNewMode = !paymentReceiveId;
// Payment receive entries form context.
const columns = usePaymentReceiveEntriesColumns();
// Detarmines takes payment receive invoices entries from customer receivable
// invoices or associated payment receive invoices.
const computedTableData = useMemo(() => [
...(!isNewMode ? (paymentReceiveEntries || []) : []),
...(isNewMode ? (customerInvoiceEntries || []) : []),
], [
isNewMode,
paymentReceiveEntries,
customerInvoiceEntries,
]);
const [tableData, setTableData] = useState(computedTableData);
const [localEntries, setLocalEntries] = useState(computedTableData);
const [localAmount, setLocalAmount] = useState(fullAmount);
useEffect(() => {
if (computedTableData !== localEntries) {
setTableData(computedTableData);
setLocalEntries(computedTableData);
}
}, [computedTableData, localEntries]);
// Triggers `onUpdateData` prop event.
const triggerUpdateData = useCallback((entries) => {
onUpdateData && onUpdateData(entries);
}, [onUpdateData]);
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);
return {
...data,
payment_amount: amount,
};
});
setTableData(newTableData);
setLocalAmount(fullAmount);
triggerUpdateData(newTableData);
}
}, [
fullAmount,
localAmount,
tableData,
triggerUpdateData,
]);
// Fetches customer receivable invoices.
const fetchCustomerDueInvoices = useQuery(
['customer-due-invoices', customerId],
(key, _customerId) => requestFetchDueInvoices(_customerId),
{ enabled: isNewMode && customerId },
const computedTableData = useMemo(
() => [
...(!isNewMode ? [] || [] : []),
...(isNewMode ? dueInvoices || [] : []),
],
[isNewMode, dueInvoices],
);
// No results message.
const noResultsMessage = (customerId) ?
'There is no receivable invoices for this customer that can be applied for this payment' :
'Please select a customer to display all open invoices for it.';
const triggerOnFetchInvoicesSuccess = useCallback((bills) => {
onFetchEntriesSuccess && onFetchEntriesSuccess(bills);
}, [onFetchEntriesSuccess])
// No results message.
const noResultsMessage = paymentCustomerId
? 'There is no receivable invoices for this customer that can be applied for this payment'
: 'Please select a customer to display all open invoices for it.';
// Handle update data.
const handleUpdateData = useCallback((rows) => {
triggerUpdateData(rows);
setTableData(rows);
}, [triggerUpdateData]);
const handleUpdateData = useCallback((rows) => {}, []);
useEffect(() => {
const enabled = isNewMode && customerId;
if (!fetchCustomerDueInvoices.isFetching && enabled) {
triggerOnFetchInvoicesSuccess(computedTableData);
}
}, [
isNewMode,
customerId,
fetchCustomerDueInvoices.isFetching,
computedTableData,
triggerOnFetchInvoicesSuccess,
]);
// Handle click clear all lines button.
const handleClickClearAllLines = () => {
};
return (
<CloudLoadingIndicator isLoading={fetchCustomerDueInvoices.isFetching}>
<PaymentReceiveItemsTableEditor
noResultsMessage={noResultsMessage}
data={tableData}
errors={errors}
onUpdateData={handleUpdateData}
onClickClearAllLines={onClickClearAllLines}
<CloudLoadingIndicator isLoading={isDueInvoicesFetching}>
<DataTableEditable
progressBarLoading={isDueInvoicesFetching}
className={classNames(CLASSES.DATATABLE_EDITOR_ITEMS_ENTRIES)}
columns={columns}
data={[]}
spinnerProps={false}
payload={{
errors: [],
updateData: handleUpdateData,
}}
noResults={noResultsMessage}
actions={
<Button
small={true}
className={'button--secondary button--clear-lines'}
onClick={handleClickClearAllLines}
>
<T id={'clear_all_lines'} />
</Button>
}
totalRow={true}
/>
</CloudLoadingIndicator>
);
}
export default compose(
withInvoices(({ customerInvoiceEntries }) => ({
customerInvoiceEntries,
})),
withInvoiceActions,
)(PaymentReceiveItemsTable);