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

refactoring: account form.

Browse Source 
refactoring: expense form.
refactoring: manual journal form.
refactoring: invoice form.
This commit is contained in:
a.bouhuolia
2021-02-15 12:03:47 +02:00
parent 692f3b333a
commit 760c38b54b
124 changed files with 2694 additions and 2967 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
client/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.js
View File

@@ -13,70 +13,55 @@ import { FormattedMessage as T } from 'react-intl';
import { CLASSES } from 'common/classes';
import classNames from 'classnames';
import { useFormikContext } from 'formik';
import { saveInvoke } from 'utils';
import { If, Icon } from 'components';
import { useEstimateFormContext } from './EstimateFormProvider';
/**
* Estimate floating actions bar.
*/
export default function EstimateFloatingActions({
isSubmitting,
onSubmitClick,
onCancelClick,
estimate,
}) {
const { resetForm, submitForm } = useFormikContext();
export default function EstimateFloatingActions() {
const { resetForm, submitForm, isSubmitting } = useFormikContext();
// Estimate form context.
const { estimate, setSubmitPayload } = useEstimateFormContext();
// Handle submit & deliver button click.
const handleSubmitDeliverBtnClick = (event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
deliver: true,
});
setSubmitPayload({ redirect: true, deliver: true, });
};
// Handle submit, deliver & new button click.
const handleSubmitDeliverAndNewBtnClick = (event) => {
setSubmitPayload({ redirect: false, deliver: true, resetForm: true });
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
deliver: true,
resetForm: true,
});
};
// Handle submit, deliver & continue editing button click.
const handleSubmitDeliverContinueEditingBtnClick = (event) => {
setSubmitPayload({ redirect: false, deliver: true });
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
deliver: true,
});
};
// Handle submit as draft button click.
const handleSubmitDraftBtnClick = (event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
deliver: false,
});
setSubmitPayload({ redirect: true, deliver: false });
submitForm();
};
// Handle submit as draft & new button click.
const handleSubmitDraftAndNewBtnClick = (event) => {
setSubmitPayload({ redirect: false, deliver: false, resetForm: true });
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
deliver: false,
resetForm: true,
});
};
// Handle submit as draft & continue editing button click.
const handleSubmitDraftContinueEditingBtnClick = (event) => {
setSubmitPayload({ redirect: false, deliver: false });
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
deliver: false,
});
};
const handleCancelBtnClick = (event) => {
saveInvoke(onCancelClick, event);
};
const handleClearBtnClick = (event) => {
@@ -90,6 +75,7 @@ export default function EstimateFloatingActions({
<ButtonGroup>
<Button
disabled={isSubmitting}
loading={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitDeliverBtnClick}

114
client/src/containers/Sales/Estimates/EstimateForm/EstimateForm.js
View File

@@ -1,4 +1,4 @@
import React, { useMemo, useCallback, useEffect, useState } from 'react';
import React, { useMemo } from 'react';
import { Formik, Form } from 'formik';
import moment from 'moment';
import { Intent } from '@blueprintjs/core';
@@ -17,10 +17,6 @@ import EstimateFormHeader from './EstimateFormHeader';
import EstimateFormBody from './EstimateFormBody';
import EstimateFloatingActions from './EstimateFloatingActions';
import EstimateFormFooter from './EstimateFormFooter';
import EstimateNumberWatcher from './EstimateNumberWatcher';
import withEstimateActions from './withEstimateActions';
import withEstimateDetail from './withEstimateDetail';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withMediaActions from 'containers/Media/withMediaActions';
@@ -28,13 +24,12 @@ import withSettings from 'containers/Settings/withSettings';
import { AppToaster } from 'components';
import { ERROR } from 'common/errors';
import {
compose,
repeatValue,
defaultToTransform,
orderingLinesIndexes,
} from 'utils';
import { useEstimateFormContext } from './EstimateFormProvider';
const MIN_LINES_NUMBER = 4;
@@ -63,64 +58,25 @@ const defaultInitialValues = {
* Estimate form.
*/
const EstimateForm = ({
// #WithMedia
requestSubmitMedia,
requestDeleteMedia,
// #WithEstimateActions
requestSubmitEstimate,
requestEditEstimate,
setEstimateNumberChanged,
//#withDashboard
changePageTitle,
changePageSubtitle,
// #withSettings
estimateNextNumber,
estimateNumberPrefix,
//#withEstimateDetail
estimate,
// #withEstimates
estimateNumberChanged,
//#own Props
estimateId,
onFormSubmit,
onCancelForm,
}) => {
const { formatMessage } = useIntl();
const history = useHistory();
const [submitPayload, setSubmitPayload] = useState({});
const isNewMode = !estimateId;
const {
estimate,
isNewMode,
submitPayload,
createEstimateMutate,
editEstimateMutate,
} = useEstimateFormContext();
const estimateNumber = estimateNumberPrefix
? `${estimateNumberPrefix}-${estimateNextNumber}`
: estimateNextNumber;
useEffect(() => {
const transNumber = !isNewMode ? estimate.estimate_number : estimateNumber;
if (!isNewMode) {
changePageTitle(formatMessage({ id: 'edit_estimate' }));
} else {
changePageTitle(formatMessage({ id: 'new_estimate' }));
}
changePageSubtitle(
defaultToTransform(estimateNumber, `No. ${transNumber}`, ''),
);
}, [
estimate,
estimateNumber,
isNewMode,
formatMessage,
changePageTitle,
changePageSubtitle,
]);
// Initial values in create and edit mode.
const initialValues = useMemo(
() => ({
@@ -167,7 +123,6 @@ const EstimateForm = ({
const entries = values.entries.filter(
(item) => item.item_id && item.quantity,
);
const totalQuantity = sumBy(entries, (entry) => parseInt(entry.quantity));
if (totalQuantity === 0) {
@@ -218,35 +173,12 @@ const EstimateForm = ({
};
if (estimate && estimate.id) {
requestEditEstimate(estimate.id, form).then(onSuccess).catch(onError);
editEstimateMutate([estimate.id, form]).then(onSuccess).catch(onError);
} else {
requestSubmitEstimate(form).then(onSuccess).catch(onError);
createEstimateMutate(form).then(onSuccess).catch(onError);
}
};
const handleEstimateNumberChange = useCallback(
(estimateNumber) => {
changePageSubtitle(
defaultToTransform(estimateNumber, `No. ${estimateNumber}`, ''),
);
},
[changePageSubtitle],
);
const handleSubmitClick = useCallback(
(event, payload) => {
setSubmitPayload({ ...payload });
},
[setSubmitPayload],
);
const handleCancelClick = useCallback(
(event) => {
history.goBack();
},
[history],
);
return (
<div
className={classNames(
@@ -262,30 +194,18 @@ const EstimateForm = ({
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
{({ isSubmitting}) => (
<Form>
<EstimateFormHeader
onEstimateNumberChanged={handleEstimateNumberChange}
/>
<EstimateNumberWatcher estimateNumber={estimateNumber} />
<EstimateFormBody defaultEstimate={defaultEstimate} />
<EstimateFormFooter />
<EstimateFloatingActions
isSubmitting={isSubmitting}
estimate={estimate}
onSubmitClick={handleSubmitClick}
onCancelClick={handleCancelClick}
/>
</Form>
)}
<Form>
<EstimateFormHeader />
<EstimateFormBody defaultEstimate={defaultEstimate} />
<EstimateFormFooter />
<EstimateFloatingActions />
</Form>
</Formik>
</div>
);
};
export default compose(
withEstimateActions,
withEstimateDetail(),
withDashboardActions,
withMediaActions,
withSettings(({ estimatesSettings }) => ({

6
client/src/containers/Sales/Estimates/EstimateForm/EstimateFormBody.js
View File

@@ -1,15 +1,15 @@
import React from 'react';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import EditableItemsEntriesTable from 'containers/Entries/EditableItemsEntriesTable';
// import EditableItemsEntriesTable from 'containers/Entries/EditableItemsEntriesTable';
export default function EstimateFormBody({ defaultEstimate }) {
return (
<div className={classNames(CLASSES.PAGE_FORM_BODY)}>
<EditableItemsEntriesTable
{/* <EditableItemsEntriesTable
defaultEntry={defaultEstimate}
filterSellableItems={true}
/>
/> */}
</div>
);
}

7
client/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.js
View File

@@ -12,9 +12,6 @@ import { compose } from 'utils';
// Estimate form top header.
function EstimateFormHeader({
// #ownProps
onEstimateNumberChanged,
// #withSettings
baseCurrency,
}) {
@@ -27,9 +24,7 @@ function EstimateFormHeader({
return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
<EstimateFormHeaderFields
onEstimateNumberChanged={onEstimateNumberChanged}
/>
<EstimateFormHeaderFields />
<PageFormBigNumber
label={'Amount'}
amount={totalDueAmount}

24
client/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js
View File

@@ -1,4 +1,4 @@
import React, { useCallback } from 'react';
import React from 'react';
import {
FormGroup,
InputGroup,
@@ -8,7 +8,7 @@ import {
import { DateInput } from '@blueprintjs/datetime';
import { FormattedMessage as T } from 'react-intl';
import { FastField, ErrorMessage } from 'formik';
import { momentFormatter, compose, tansformDateValue, saveInvoke } from 'utils';
import { momentFormatter, compose, tansformDateValue } from 'utils';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import {
@@ -16,30 +16,25 @@ import {
FieldRequiredHint,
Icon,
InputPrependButton,
Row,
Col,
} from 'components';
import withCustomers from 'containers/Customers/withCustomers';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { inputIntent, handleDateChange } from 'utils';
import { formatMessage } from 'services/intl';
import { useEstimateFormContext } from './EstimateFormProvider';
/**
* Estimate form header.
*/
function EstimateFormHeader({
//#withCustomers
customers,
// #withDialogActions
openDialog,
// #ownProps
onEstimateNumberChanged,
}) {
const handleEstimateNumberChange = useCallback(() => {
openDialog('estimate-number-form', {});
}, [openDialog]);
const { customers } = useEstimateFormContext();
const handleEstimateNumberChanged = (event) => {
saveInvoke(onEstimateNumberChanged, event.currentTarget.value);
const handleEstimateNumberChange = () => {
openDialog('estimate-number-form', {});
};
return (
@@ -138,7 +133,6 @@ function EstimateFormHeader({
<InputGroup
minimal={true}
{...field}
onBlur={handleEstimateNumberChanged}
/>
<InputPrependButton
buttonProps={{

89
client/src/containers/Sales/Estimates/EstimateForm/EstimateFormPage.js
View File

@@ -1,39 +1,24 @@
import React, { useCallback, useEffect } from 'react';
import React, { useEffect } from 'react';
import { useParams, useHistory } from 'react-router-dom';
import { useQuery } from 'react-query';
import EstimateForm from './EstimateForm';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import withCustomersActions from 'containers/Customers/withCustomersActions';
import withItemsActions from 'containers/Items/withItemsActions';
import withEstimateActions from './withEstimateActions';
import withSettingsActions from 'containers/Settings/withSettingsActions';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import { compose } from 'utils';
import 'style/pages/SaleEstimate/PageForm.scss';
import EstimateForm from './EstimateForm';
import { EstimateFormProvider } from './EstimateFormProvider';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import { compose } from 'utils';
/**
* Estimate form page.
*/
function EstimateFormPage({
// #withCustomersActions
requestFetchCustomers,
// #withItemsActions
requestFetchItems,
// #withEstimateActions
requestFetchEstimate,
// #withSettingsActions
requestFetchOptions,
// #withDashboardActions
setSidebarShrink,
resetSidebarPreviousExpand,
setDashboardBackLink,
}) {
const history = useHistory();
const { id } = useParams();
useEffect(() => {
@@ -50,55 +35,15 @@ function EstimateFormPage({
};
}, [resetSidebarPreviousExpand, setSidebarShrink, setDashboardBackLink]);
const fetchEstimate = useQuery(
['estimate', id],
(key, _id) => requestFetchEstimate(_id),
{ enabled: !!id },
);
// Handle fetch Items data table or list
const fetchItems = useQuery('items-list', () => requestFetchItems({}));
// Handle fetch customers data table or list
const fetchCustomers = useQuery('customers-table', () =>
requestFetchCustomers({}),
);
//
const handleFormSubmit = useCallback(
(payload) => {
payload.redirect && history.push('/estimates');
},
[history],
);
const handleCancel = useCallback(() => {
history.goBack();
}, [history]);
const fetchSettings = useQuery(['settings'], () => requestFetchOptions({}));
return (
<DashboardInsider
loading={
fetchCustomers.isFetching ||
fetchItems.isFetching ||
fetchEstimate.isFetching
}
name={'estimate-form'}
>
<EstimateForm
estimateId={id}
onFormSubmit={handleFormSubmit}
onCancelForm={handleCancel}
/>
</DashboardInsider>
<EstimateFormProvider estimateId={id}>
<EstimateForm />
</EstimateFormProvider>
);
}
export default compose(
withEstimateActions,
withCustomersActions,
withItemsActions,
withSettingsActions,
withDashboardActions,
)(EstimateFormPage);

76
client/src/containers/Sales/Estimates/EstimateForm/EstimateFormProvider.js Normal file
View File

@@ -0,0 +1,76 @@
import React, { createContext, useContext } from 'react';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import {
useEstimate,
useCustomers,
useItems,
useSettings,
useCreateEstimate,
useEditEstimate
} from 'query/hooks';
const EstimateFormContext = createContext();
/**
* Estimate form provider.
*/
function EstimateFormProvider({ estimateId, ...props }) {
const { data: estimate, isFetching: isEstimateFetching } = useEstimate(
estimateId,
);
// Handle fetch Items data table or list
const {
data: { items },
isFetching: isItemsFetching,
} = useItems();
// Handle fetch customers data table or list
const {
data: { customers },
isFetch: isCustomersFetching,
} = useCustomers();
// Handle fetch settings.
const {
data: { settings },
} = useSettings();
const [submitPayload, setSubmitPayload] = React.useState({});
const isNewMode = !estimateId;
const { mutateAsync: createEstimateMutate } = useCreateEstimate();
const { mutateAsync: editEstimateMutate } = useEditEstimate();
// Provider payload.
const provider = {
estimateId,
estimate,
items,
customers,
isNewMode,
isItemsFetching,
isEstimateFetching,
submitPayload,
setSubmitPayload,
createEstimateMutate,
editEstimateMutate
};
return (
<DashboardInsider
loading={isCustomersFetching || isItemsFetching || isEstimateFetching}
name={'estimate-form'}
>
<EstimateFormContext.Provider value={provider} {...props} />
</DashboardInsider>
);
}
const useEstimateFormContext = () => useContext(EstimateFormContext);
export { EstimateFormProvider, useEstimateFormContext };

59
client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js
View File

@@ -17,7 +17,6 @@ import withAlertsActions from 'containers/Alert/withAlertActions';
import { useEstimatesListContext } from './EstimatesListProvider';
import { ActionsMenu, useEstiamtesTableColumns } from './components';
/**
* Estimates datatable.
*/
@@ -78,43 +77,37 @@ function EstimatesDataTable({
[setEstimatesTableState],
);
// Display empty status instead of the table.
if (isEmptyStatus) {
return <EstimatesEmptyStatus />;
}
return (
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
<DataTable
columns={columns}
data={estimates}
loading={isEstimatesLoading}
headerLoading={isEstimatesLoading}
progressBarLoading={isEstimatesFetching}
onFetchData={handleFetchData}
noInitialFetch={true}
manualSortBy={true}
selectionColumn={true}
sticky={true}
pagination={true}
manualPagination={true}
pagesCount={pagination.pagesCount}
TableLoadingRenderer={TableSkeletonRows}
TableHeaderSkeletonRenderer={TableSkeletonHeader}
ContextMenu={ActionsMenu}
payload={{
onApprove: handleApproveEstimate,
onEdit: handleEditEstimate,
onReject: handleRejectEstimate,
onDeliver: handleDeliverEstimate,
onDelete: handleDeleteEstimate,
}}
/>
</div>
<DataTable
columns={columns}
data={estimates}
loading={isEstimatesLoading}
headerLoading={isEstimatesLoading}
progressBarLoading={isEstimatesFetching}
onFetchData={handleFetchData}
noInitialFetch={true}
manualSortBy={true}
selectionColumn={true}
sticky={true}
pagination={true}
manualPagination={true}
pagesCount={pagination.pagesCount}
TableLoadingRenderer={TableSkeletonRows}
TableHeaderSkeletonRenderer={TableSkeletonHeader}
ContextMenu={ActionsMenu}
payload={{
onApprove: handleApproveEstimate,
onEdit: handleEditEstimate,
onReject: handleRejectEstimate,
onDeliver: handleDeliverEstimate,
onDelete: handleDeleteEstimate,
}}
/>
);
}

21
client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesList.js
View File

@@ -1,13 +1,11 @@
import React, { useEffect } from 'react';
import { FormattedMessage as T, useIntl } from 'react-intl';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import React from 'react';
import { DashboardContentTable, DashboardPageContent } from 'components';
import EstimatesActionsBar from './EstimatesActionsBar';
import EstimatesAlerts from '../EstimatesAlerts';
import EstimatesViewTabs from './EstimatesViewTabs';
import EstimatesDataTable from './EstimatesDataTable';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withEstimates from './withEstimates';
import { EstimatesListProvider } from './EstimatesListProvider';
@@ -17,18 +15,9 @@ import { compose, transformTableStateToQuery } from 'utils';
* Sale estimates list page.
*/
function EstimatesList({
// #withDashboardActions
changePageTitle,
// #withEstimate
estimatesTableState,
}) {
const { formatMessage } = useIntl();
useEffect(() => {
changePageTitle(formatMessage({ id: 'estimates_list' }));
}, [changePageTitle, formatMessage]);
return (
<EstimatesListProvider
query={transformTableStateToQuery(estimatesTableState)}
@@ -37,7 +26,10 @@ function EstimatesList({
<DashboardPageContent>
<EstimatesViewTabs />
<EstimatesDataTable />
<DashboardContentTable>
<EstimatesDataTable />
</DashboardContentTable>
</DashboardPageContent>
<EstimatesAlerts />
@@ -46,6 +38,5 @@ function EstimatesList({
}
export default compose(
withDashboardActions,
withEstimates(({ estimatesTableState }) => ({ estimatesTableState })),
)(EstimatesList);

1
client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.js
View File

@@ -151,6 +151,7 @@ export default function InvoiceFloatingActions() {
<ButtonGroup>
<Button
disabled={isSubmitting}
loading={isSubmitting}
intent={Intent.PRIMARY}
onClick={handleSubmitDeliverBtnClick}
text={<T id={'save'} />}

109
client/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.js
View File

@@ -1,10 +1,10 @@
import React, { useMemo, useCallback, useEffect } from 'react';
import React, { useMemo } from 'react';
import { Formik, Form } from 'formik';
import moment from 'moment';
import { Intent } from '@blueprintjs/core';
import { useIntl } from 'react-intl';
import { pick, sumBy, omit, isEmpty } from 'lodash';
import { sumBy, omit, isEmpty } from 'lodash';
import classNames from 'classnames';
import { useHistory } from 'react-router-dom';
import { CLASSES } from 'common/classes';
import {
CreateInvoiceFormSchema,
@@ -12,12 +12,10 @@ import {
} from './InvoiceForm.schema';
import InvoiceFormHeader from './InvoiceFormHeader';
import EditableItemsEntriesTable from 'containers/Entries/EditableItemsEntriesTable';
import InvoiceItemsEntriesEditorField from './InvoiceItemsEntriesEditorField';
import InvoiceFloatingActions from './InvoiceFloatingActions';
import InvoiceFormFooter from './InvoiceFormFooter';
import InvoiceNumberChangeWatcher from './InvoiceNumberChangeWatcher';
import withInvoiceActions from './withInvoiceActions';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withMediaActions from 'containers/Media/withMediaActions';
import withSettings from 'containers/Settings/withSettings';
@@ -26,101 +24,47 @@ import { AppToaster } from 'components';
import { ERROR } from 'common/errors';
import {
compose,
repeatValue,
defaultToTransform,
orderingLinesIndexes,
transactionNumber,
} from 'utils';
import { useHistory } from 'react-router-dom';
import { useInvoiceFormContext } from './InvoiceFormProvider';
const MIN_LINES_NUMBER = 4;
const defaultInvoice = {
index: 0,
item_id: '',
rate: '',
discount: 0,
quantity: 1,
description: '',
};
const defaultInitialValues = {
customer_id: '',
invoice_date: moment(new Date()).format('YYYY-MM-DD'),
due_date: moment(new Date()).format('YYYY-MM-DD'),
delivered: '',
invoice_no: '',
reference_no: '',
invoice_message: '',
terms_conditions: '',
entries: [...repeatValue(defaultInvoice, MIN_LINES_NUMBER)],
};
import { transformToEditForm } from './utils';
import {
MIN_LINES_NUMBER,
defaultInitialValues
} from './constants';
/**
* Invoice form.
*/
function InvoiceForm({
// #withDashboard
changePageTitle,
changePageSubtitle,
// #withSettings
invoiceNextNumber,
invoiceNumberPrefix,
}) {
const { formatMessage } = useIntl();
const history = useHistory();
// Invoice form context.
const {
items,
invoiceId,
isNewMode,
invoice,
createInvoiceMutate,
editInvoiceMutate,
submitPayload,
} = useInvoiceFormContext();
const isNewMode = !invoiceId;
// Invoice number.
const invoiceNumber = transactionNumber(
invoiceNumberPrefix,
invoiceNextNumber,
);
useEffect(() => {
const transactionNumber = invoice ? invoice.invoice_no : invoiceNumber;
if (invoice && invoice.id) {
changePageTitle(formatMessage({ id: 'edit_invoice' }));
} else {
changePageTitle(formatMessage({ id: 'new_invoice' }));
}
changePageSubtitle(
defaultToTransform(transactionNumber, `No. ${transactionNumber}`, ''),
);
}, [
changePageTitle,
changePageSubtitle,
invoice,
invoiceNumber,
formatMessage,
]);
// Form initial values.
const initialValues = useMemo(
() => ({
...(!isEmpty(invoice)
? {
...pick(invoice, Object.keys(defaultInitialValues)),
entries: [
...invoice.entries.map((invoice) => ({
...pick(invoice, Object.keys(defaultInvoice)),
})),
...repeatValue(
defaultInvoice,
Math.max(MIN_LINES_NUMBER - invoice.entries.length, 0),
),
],
}
? transformToEditForm(invoice, defaultInitialValues, MIN_LINES_NUMBER)
: {
...defaultInitialValues,
invoice_no: invoiceNumber,
@@ -193,22 +137,13 @@ function InvoiceForm({
setSubmitting(false);
};
if (invoice && invoice.id) {
editInvoiceMutate(invoice.id, form).then(onSuccess).catch(onError);
if (!isEmpty(invoice)) {
editInvoiceMutate([invoice.id, form]).then(onSuccess).catch(onError);
} else {
createInvoiceMutate(form).then(onSuccess).catch(onError);
}
};
const handleInvoiceNumberChanged = useCallback(
(invoiceNumber) => {
changePageSubtitle(
defaultToTransform(invoiceNumber, `No. ${invoiceNumber}`, ''),
);
},
[changePageSubtitle],
);
return (
<div
className={classNames(
@@ -225,17 +160,10 @@ function InvoiceForm({
onSubmit={handleSubmit}
>
<Form>
<InvoiceFormHeader
onInvoiceNumberChanged={handleInvoiceNumberChanged}
/>
<InvoiceNumberChangeWatcher invoiceNumber={invoiceNumber} />
<InvoiceFormHeader />
<div className={classNames(CLASSES.PAGE_FORM_BODY)}>
<EditableItemsEntriesTable
items={items}
defaultEntry={defaultInvoice}
filterSellableItems={true}
/>
<InvoiceItemsEntriesEditorField />
</div>
<InvoiceFormFooter />
<InvoiceFloatingActions />
@@ -246,7 +174,6 @@ function InvoiceForm({
}
export default compose(
withInvoiceActions,
withDashboardActions,
withMediaActions,
withSettings(({ invoiceSettings }) => ({

6
client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.js
View File

@@ -15,8 +15,6 @@ import { compose } from 'redux';
* Invoice form header section.
*/
function InvoiceFormHeader({
// #ownProps
onInvoiceNumberChanged,
// #withSettings
baseCurrency,
}) {
@@ -29,9 +27,7 @@ function InvoiceFormHeader({
return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
<InvoiceFormHeaderFields
onInvoiceNumberChanged={onInvoiceNumberChanged}
/>
<InvoiceFormHeaderFields />
<PageFormBigNumber
label={'Due Amount'}
amount={totalDueAmount}

17
client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.js
View File

@@ -1,4 +1,4 @@
import React, { useCallback } from 'react';
import React from 'react';
import {
FormGroup,
InputGroup,
@@ -8,7 +8,7 @@ import {
import { DateInput } from '@blueprintjs/datetime';
import { FastField, ErrorMessage } from 'formik';
import { FormattedMessage as T } from 'react-intl';
import { momentFormatter, compose, tansformDateValue, saveInvoke } from 'utils';
import { momentFormatter, compose, tansformDateValue } from 'utils';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import {
@@ -19,9 +19,7 @@ import {
} from 'components';
import { useInvoiceFormContext } from './InvoiceFormProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { inputIntent, handleDateChange } from 'utils';
/**
@@ -30,19 +28,13 @@ import { inputIntent, handleDateChange } from 'utils';
function InvoiceFormHeaderFields({
// #withDialogActions
openDialog,
// #ownProps
onInvoiceNumberChanged,
}) {
// Invoice form context.
const { customers } = useInvoiceFormContext();
const handleInvoiceNumberChange = useCallback(() => {
// Handle invoice number changing.
const handleInvoiceNumberChange = () => {
openDialog('invoice-number-form', {});
}, [openDialog]);
const handleInvoiceNumberChanged = (event) => {
saveInvoke(onInvoiceNumberChanged, event.currentTarget.value);
};
return (
@@ -136,7 +128,6 @@ function InvoiceFormHeaderFields({
<InputGroup
minimal={true}
{...field}
onBlur={handleInvoiceNumberChanged}
/>
<InputPrependButton
buttonProps={{

50
client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormPage.js
View File

@@ -1,62 +1,20 @@
import React, { useCallback, useEffect } from 'react';
import { useParams, useHistory } from 'react-router-dom';
import React from 'react';
import { useParams } from 'react-router-dom';
import InvoiceForm from './InvoiceForm';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import { compose } from 'utils';
import 'style/pages/SaleInvoice/PageForm.scss';
import { InvoiceFormProvider } from './InvoiceFormProvider';
/**
* Invoice form page.
*/
function InvoiceFormPage({
// #withDashboardActions
setSidebarShrink,
resetSidebarPreviousExpand,
setDashboardBackLink,
}) {
const history = useHistory();
export default function InvoiceFormPage() {
const { id } = useParams();
useEffect(() => {
// Shrink the sidebar by foce.
setSidebarShrink();
// Show the back link on dashboard topbar.
setDashboardBackLink(true);
return () => {
// Reset the sidebar to the previous status.
resetSidebarPreviousExpand();
// Hide the back link on dashboard topbar.
setDashboardBackLink(false);
};
}, [resetSidebarPreviousExpand, setSidebarShrink, setDashboardBackLink]);
const handleFormSubmit = useCallback(
(payload) => {
payload.redirect && history.push('/invoices');
},
[history],
);
const handleCancel = useCallback(() => {
history.goBack();
}, [history]);
return (
<InvoiceFormProvider invoiceId={id}>
<InvoiceForm
onFormSubmit={handleFormSubmit}
onCancelForm={handleCancel}
/>
<InvoiceForm />
</InvoiceFormProvider>
);
}
export default compose(
withDashboardActions,
)(InvoiceFormPage);

4
client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormProvider.js
View File

@@ -40,6 +40,9 @@ function InvoiceFormProvider({ invoiceId, ...props }) {
// Form submit payload.
const [submitPayload, setSubmitPayload] = useState({});
// Detarmines whether the form in new mode.
const isNewMode = !invoiceId;
// Provider payload.
const provider = {
invoice,
@@ -54,6 +57,7 @@ function InvoiceFormProvider({ invoiceId, ...props }) {
createInvoiceMutate,
editInvoiceMutate,
setSubmitPayload,
isNewMode
};
return (

27
client/src/containers/Sales/Invoices/InvoiceForm/InvoiceItemsEntriesEditorField.js Normal file
View File

@@ -0,0 +1,27 @@
import React from 'react';
import { FastField } from 'formik';
import ItemsEntriesTable from 'containers/Entries/ItemsEntriesTable';
import { useInvoiceFormContext } from './InvoiceFormProvider';
/**
* Invoice items entries editor field.
*/
export default function InvoiceItemsEntriesEditorField() {
const { items } = useInvoiceFormContext();
return (
<FastField name={'entries'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<ItemsEntriesTable
entries={value}
onUpdateData={(entries) => {
form.setFieldValue('entries', entries);
}}
items={items}
errors={error}
linesNumber={4}
/>
)}
</FastField>
);
}

44
client/src/containers/Sales/Invoices/InvoiceForm/InvoiceNumberChangeWatcher.js
View File

@@ -1,44 +0,0 @@
import { useEffect } from 'react';
import { useFormikContext } from 'formik';
import withInvoices from './withInvoices';
import withInvoiceActions from './withInvoiceActions';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import { compose } from 'utils';
function InvoiceNumberChangeWatcher({
invoiceNumber,
// #WithInvoiceActions
setInvoiceNumberChanged,
// #withInvoices
invoiceNumberChanged,
// #withDashboardActions
changePageSubtitle,
}) {
const { setFieldValue } = useFormikContext();
useEffect(() => {
if (invoiceNumberChanged) {
setFieldValue('invoice_no', invoiceNumber);
changePageSubtitle(`No. ${invoiceNumber}`);
setInvoiceNumberChanged(false);
}
}, [
invoiceNumber,
invoiceNumberChanged,
setFieldValue,
changePageSubtitle,
setInvoiceNumberChanged,
]);
return null;
}
export default compose(
withInvoices(({ invoiceNumberChanged }) => ({ invoiceNumberChanged })),
withInvoiceActions,
withDashboardActions,
)(InvoiceNumberChangeWatcher);

26
client/src/containers/Sales/Invoices/InvoiceForm/constants.js Normal file
View File

@@ -0,0 +1,26 @@
import { moment } from 'moment';
import { repeatValue } from 'utils';
export const MIN_LINES_NUMBER = 4;
export const defaultInvoice = {
index: 0,
item_id: '',
rate: '',
discount: 0,
quantity: 1,
description: '',
total: 0,
};
export const defaultInitialValues = {
customer_id: '',
invoice_date: moment(new Date()).format('YYYY-MM-DD'),
due_date: moment(new Date()).format('YYYY-MM-DD'),
delivered: '',
invoice_no: '',
reference_no: '',
invoice_message: '',
terms_conditions: '',
entries: [...repeatValue(defaultInvoice, MIN_LINES_NUMBER)],
};

17
client/src/containers/Sales/Invoices/InvoiceForm/utils.js Normal file
View File

@@ -0,0 +1,17 @@
import { transformToForm, repeatValue } from 'utils';
export function transformToEditForm(invoice, defaultInvoice, linesNumber) {
return {
...transformToForm(invoice, defaultInvoice),
entries: [
...invoice.entries.map((invoice) => ({
...transformToForm(invoice, defaultInvoice.entries[0]),
})),
...repeatValue(
defaultInvoice,
Math.max(linesNumber - invoice.entries.length, 0),
),
],
};
}

56
client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js
View File

@@ -72,40 +72,38 @@ function InvoicesDataTable({
[setInvoicesTableState],
);
// Display invoice empty status.
// Display invoice empty status instead of the table.
if (isEmptyStatus) {
return <InvoicesEmptyStatus />;
}
return (
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
<DataTable
columns={columns}
data={invoices}
loading={isInvoicesLoading}
headerLoading={isInvoicesLoading}
progressBarLoading={isInvoicesFetching}
onFetchData={handleDataTableFetchData}
manualSortBy={true}
selectionColumn={true}
noInitialFetch={true}
sticky={true}
pagination={true}
manualPagination={true}
pagesCount={pagination.pagesCount}
autoResetSortBy={false}
autoResetPage={false}
TableLoadingRenderer={TableSkeletonRows}
TableHeaderSkeletonRenderer={TableSkeletonHeader}
ContextMenu={ActionsMenu}
payload={{
onDelete: handleDeleteInvoice,
onDeliver: handleDeliverInvoice,
onEdit: handleEditInvoice,
baseCurrency
}}
/>
</div>
<DataTable
columns={columns}
data={invoices}
loading={isInvoicesLoading}
headerLoading={isInvoicesLoading}
progressBarLoading={isInvoicesFetching}
onFetchData={handleDataTableFetchData}
manualSortBy={true}
selectionColumn={true}
noInitialFetch={true}
sticky={true}
pagination={true}
manualPagination={true}
pagesCount={pagination.pagesCount}
autoResetSortBy={false}
autoResetPage={false}
TableLoadingRenderer={TableSkeletonRows}
TableHeaderSkeletonRenderer={TableSkeletonHeader}
ContextMenu={ActionsMenu}
payload={{
onDelete: handleDeleteInvoice,
onDeliver: handleDeliverInvoice,
onEdit: handleEditInvoice,
baseCurrency,
}}
/>
);
}

21
client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesList.js
View File

@@ -1,9 +1,8 @@
import React, { useEffect } from 'react';
import { useIntl } from 'react-intl';
import React from 'react';
import 'style/pages/SaleInvoice/List.scss';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import { DashboardContentTable, DashboardPageContent } from 'components';
import InvoiceActionsBar from './InvoiceActionsBar';
import { InvoicesListProvider } from './InvoicesListProvider';
@@ -11,7 +10,6 @@ import InvoiceViewTabs from './InvoiceViewTabs';
import InvoicesDataTable from './InvoicesDataTable';
import InvoicesAlerts from '../InvoicesAlerts';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withInvoices from './withInvoices';
import withAlertsActions from 'containers/Alert/withAlertActions';
@@ -21,18 +19,9 @@ import { transformTableStateToQuery, compose } from 'utils';
* Sale invoices list.
*/
function InvoicesList({
// #withDashboardActions
changePageTitle,
// #withInvoice
invoicesTableState,
}) {
const { formatMessage } = useIntl();
useEffect(() => {
changePageTitle(formatMessage({ id: 'invoices_list' }));
}, [changePageTitle, formatMessage]);
return (
<InvoicesListProvider
query={transformTableStateToQuery(invoicesTableState)}
@@ -41,7 +30,10 @@ function InvoicesList({
<DashboardPageContent>
<InvoiceViewTabs />
<InvoicesDataTable />
<DashboardContentTable>
<InvoicesDataTable />
</DashboardContentTable>
</DashboardPageContent>
<InvoicesAlerts />
@@ -50,7 +42,6 @@ function InvoicesList({
}
export default compose(
withDashboardActions,
withInvoices(({ invoicesTableState }) => ({ invoicesTableState })),
withAlertsActions,
)(InvoicesList);

7
client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceivesList.js
View File

@@ -1,7 +1,7 @@
import React, { useEffect } from 'react';
import { useIntl } from 'react-intl';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import { DashboardContentTable, DashboardPageContent } from 'components';
import PaymentReceiveActionsBar from './PaymentReceiveActionsBar';
import PaymentReceiveAlerts from '../PaymentReceiveAlerts';
import { PaymentReceivesListProvider } from './PaymentReceiptsListProvider';
@@ -38,7 +38,10 @@ function PaymentReceiveList({
<DashboardPageContent>
<PaymentReceiveViewTabs />
<PaymentReceivesTable />
<DashboardContentTable>
<PaymentReceivesTable />
</DashboardContentTable>
</DashboardPageContent>
<PaymentReceiveAlerts />

49
client/src/containers/Sales/PaymentReceive/PaymentsLanding/PaymentReceivesTable.js
View File

@@ -63,36 +63,35 @@ function PaymentReceivesDataTable({
[setPaymentReceivesTableState],
);
// Display empty status instead of the table.
if (isEmptyStatus) {
return <PaymentReceivesEmptyStatus />;
}
return (
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
<DataTable
columns={columns}
data={paymentReceives}
loading={isPaymentReceivesLoading}
headerLoading={isPaymentReceivesLoading}
progressBarLoading={isPaymentReceivesFetching}
onFetchData={handleDataTableFetchData}
manualSortBy={true}
selectionColumn={true}
noInitialFetch={true}
sticky={true}
autoResetSortBy={false}
autoResetPage={false}
pagination={true}
pagesCount={pagination.pagesCount}
TableLoadingRenderer={TableSkeletonRows}
TableHeaderSkeletonRenderer={TableSkeletonHeader}
ContextMenu={ActionsMenu}
payload={{
onDelete: handleDeletePaymentReceive,
onEdit: handleEditPaymentReceive,
}}
/>
</div>
<DataTable
columns={columns}
data={paymentReceives}
loading={isPaymentReceivesLoading}
headerLoading={isPaymentReceivesLoading}
progressBarLoading={isPaymentReceivesFetching}
onFetchData={handleDataTableFetchData}
manualSortBy={true}
selectionColumn={true}
noInitialFetch={true}
sticky={true}
autoResetSortBy={false}
autoResetPage={false}
pagination={true}
pagesCount={pagination.pagesCount}
TableLoadingRenderer={TableSkeletonRows}
TableHeaderSkeletonRenderer={TableSkeletonHeader}
ContextMenu={ActionsMenu}
payload={{
onDelete: handleDeletePaymentReceive,
onEdit: handleEditPaymentReceive,
}}
/>
);
}

44
client/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.js
View File

@@ -1,4 +1,4 @@
import React, { useMemo, useCallback, useEffect } from 'react';
import React, { useMemo } from 'react';
import { Formik, Form } from 'formik';
import moment from 'moment';
import { Intent } from '@blueprintjs/core';
@@ -22,7 +22,6 @@ import ReceiptFromHeader from './ReceiptFormHeader';
import ReceiptFormBody from './ReceiptFormBody';
import ReceiptFormFloatingActions from './ReceiptFormFloatingActions';
import ReceiptFormFooter from './ReceiptFormFooter';
import ReceiptNumberWatcher from './ReceiptNumberWatcher';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withSettings from 'containers/Settings/withSettings';
@@ -32,7 +31,6 @@ import {
compose,
repeatValue,
orderingLinesIndexes,
defaultToTransform,
transactionNumber,
} from 'utils';
@@ -63,10 +61,6 @@ const defaultInitialValues = {
* Receipt form.
*/
function ReceiptForm({
// #withDashboard
changePageTitle,
changePageSubtitle,
// #withSettings
receiptNextNumber,
receiptNumberPrefix,
@@ -91,28 +85,6 @@ function ReceiptForm({
receiptNumberPrefix,
receiptNextNumber,
);
useEffect(() => {
const transactionNumber = !isNewMode
? receipt.receipt_number
: receiptNumber;
if (receipt && receipt.id) {
changePageTitle(formatMessage({ id: 'edit_receipt' }));
} else {
changePageTitle(formatMessage({ id: 'new_receipt' }));
}
changePageSubtitle(
defaultToTransform(transactionNumber, `No. ${transactionNumber}`, ''),
);
}, [
isNewMode,
changePageTitle,
changePageSubtitle,
receipt,
receiptNumber,
formatMessage,
]);
// Initial values in create and edit mode.
const initialValues = useMemo(
() => ({
@@ -214,15 +186,6 @@ function ReceiptForm({
}
};
const handleReceiptNumberChanged = useCallback(
(receiptNumber) => {
changePageSubtitle(
defaultToTransform(receiptNumber, `No. ${receiptNumber}`, ''),
);
},
[changePageSubtitle],
);
return (
<div
className={classNames(
@@ -239,10 +202,7 @@ function ReceiptForm({
onSubmit={handleFormSubmit}
>
<Form>
<ReceiptFromHeader
onReceiptNumberChanged={handleReceiptNumberChanged}
/>
<ReceiptNumberWatcher receiptNumber={receiptNumber} />
<ReceiptFromHeader />
<ReceiptFormBody defaultReceipt={defaultReceipt} />
<ReceiptFormFooter />
<ReceiptFormFloatingActions />

6
client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormBody.js
View File

@@ -2,7 +2,7 @@ import React from 'react';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import EditableItemsEntriesTable from 'containers/Entries/EditableItemsEntriesTable';
// import EditableItemsEntriesTable from 'containers/Entries/EditableItemsEntriesTable';
import { useReceiptFormContext } from './ReceiptFormProvider';
export default function ExpenseFormBody({ defaultReceipt }) {
@@ -10,11 +10,11 @@ export default function ExpenseFormBody({ defaultReceipt }) {
return (
<div className={classNames(CLASSES.PAGE_FORM_BODY)}>
<EditableItemsEntriesTable
{/* <EditableItemsEntriesTable
items={items}
defaultEntry={defaultReceipt}
filterSellableItems={true}
/>
/> */}
</div>
);
}

45
client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormPage.js
View File

@@ -1,57 +1,18 @@
import React, { useEffect } from 'react';
import { useParams, useHistory } from 'react-router-dom';
import React from 'react';
import { useParams } from 'react-router-dom';
import ReceiptFrom from './ReceiptForm';
import { ReceiptFormProvider } from './ReceiptFormProvider';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import { compose } from 'utils';
/**
* Receipt form page.
*/
function ReceiptFormPage({
// #withDashboardActions
setSidebarShrink,
resetSidebarPreviousExpand,
setDashboardBackLink,
}) {
export default function ReceiptFormPage() {
const { id } = useParams();
useEffect(() => {
// Shrink the sidebar by foce.
setSidebarShrink();
// Show the back link on dashboard topbar.
setDashboardBackLink(true);
return () => {
// Reset the sidebar to the previous status.
resetSidebarPreviousExpand();
// Hide the back link on dashboard topbar.
setDashboardBackLink(false);
};
}, [resetSidebarPreviousExpand, setSidebarShrink, setDashboardBackLink]);
// const handleFormSubmit = useCallback(
// (payload) => {
// payload.redirect && history.push('/receipts');
// },
// [history],
// );
// const handleCancel = useCallback(() => {
// history.goBack();
// }, [history]);
return (
<ReceiptFormProvider receiptId={id}>
<ReceiptFrom />
</ReceiptFormProvider>
);
}
export default compose(
withDashboardActions,
)(ReceiptFormPage);

24
client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsList.js
View File

@@ -1,37 +1,23 @@
import React, { useEffect } from 'react';
import { useIntl } from 'react-intl';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import React from 'react';
import { DashboardContentTable, DashboardPageContent } from 'components';
import ReceiptActionsBar from './ReceiptActionsBar';
import ReceiptViewTabs from './ReceiptViewTabs';
import ReceiptsAlerts from '../ReceiptsAlerts';
import ReceiptsTable from './ReceiptsTable';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withReceipts from './withReceipts';
import { ReceiptsListProvider } from './ReceiptsListProvider';
import { transformTableStateToQuery, compose } from 'utils';
/**
* Receipts list page.
*/
function ReceiptsList({
// #withDashboardActions
changePageTitle,
// #withReceipts
receiptTableState,
}) {
const { formatMessage } = useIntl();
// Changes the dashboard page title once the page mount.
useEffect(() => {
changePageTitle(formatMessage({ id: 'receipts_list' }));
}, [changePageTitle, formatMessage]);
return (
<ReceiptsListProvider query={transformTableStateToQuery(receiptTableState)}>
<DashboardPageContent>
@@ -39,7 +25,10 @@ function ReceiptsList({
<DashboardPageContent>
<ReceiptViewTabs />
<ReceiptsTable />
<DashboardContentTable>
<ReceiptsTable />
</DashboardContentTable>
</DashboardPageContent>
<ReceiptsAlerts />
@@ -49,7 +38,6 @@ function ReceiptsList({
}
export default compose(
withDashboardActions,
withReceipts(({ receiptTableState }) => ({
receiptTableState,
})),

70
client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js
View File

@@ -1,9 +1,7 @@
import React, { useCallback } from 'react';
import classNames from 'classnames';
import { useHistory } from 'react-router-dom';
import { compose } from 'utils';
import { CLASSES } from 'common/classes';
import { DataTable } from 'components';
import ReceiptsEmptyStatus from './ReceiptsEmptyStatus';
@@ -29,7 +27,7 @@ function ReceiptsDataTable({
baseCurrency,
// #withAlertsActions
openAlert
openAlert,
}) {
const history = useHistory();
@@ -39,7 +37,7 @@ function ReceiptsDataTable({
pagination,
isReceiptsFetching,
isReceiptsLoading,
isEmptyStatus
isEmptyStatus,
} = useReceiptsListContext();
// Receipts table columns.
@@ -58,7 +56,7 @@ function ReceiptsDataTable({
// Handles receipt close action.
const handleCloseReceipt = (receipt) => {
openAlert('receipt-close', { receiptId: receipt.id });
}
};
// Handles the datable fetch data once the state changing.
const handleDataTableFetchData = useCallback(
@@ -73,44 +71,36 @@ function ReceiptsDataTable({
);
if (isEmptyStatus) {
return <ReceiptsEmptyStatus />
return <ReceiptsEmptyStatus />;
}
return (
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
<DataTable
columns={columns}
data={receipts}
loading={isReceiptsLoading}
headerLoading={isReceiptsLoading}
progressBarLoading={isReceiptsFetching}
onFetchData={handleDataTableFetchData}
manualSortBy={true}
selectionColumn={true}
noInitialFetch={true}
sticky={true}
pagination={true}
pagesCount={pagination.pagesCount}
manualPagination={true}
autoResetSortBy={false}
autoResetPage={false}
TableLoadingRenderer={TableSkeletonRows}
TableHeaderSkeletonRenderer={TableSkeletonHeader}
ContextMenu={ActionsMenu}
payload={{
onEdit: handleEditReceipt,
onDelete: handleDeleteReceipt,
onClose: handleCloseReceipt,
baseCurrency
}}
/>
</div>
<DataTable
columns={columns}
data={receipts}
loading={isReceiptsLoading}
headerLoading={isReceiptsLoading}
progressBarLoading={isReceiptsFetching}
onFetchData={handleDataTableFetchData}
manualSortBy={true}
selectionColumn={true}
noInitialFetch={true}
sticky={true}
pagination={true}
pagesCount={pagination.pagesCount}
manualPagination={true}
autoResetSortBy={false}
autoResetPage={false}
TableLoadingRenderer={TableSkeletonRows}
TableHeaderSkeletonRenderer={TableSkeletonHeader}
ContextMenu={ActionsMenu}
payload={{
onEdit: handleEditReceipt,
onDelete: handleDeleteReceipt,
onClose: handleCloseReceipt,
baseCurrency,
}}
/>
);
}