QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-19 14:20: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

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);