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

refactoring: invoice, receipt, payment receive, estimate and journal number dialogs.

Browse Source
This commit is contained in:
a.bouhuolia
2021-02-23 10:52:25 +02:00
parent 6e00c2ef7d
commit 236bb896db
37 changed files with 467 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,6 +16,7 @@ import EstimateFormHeader from './EstimateFormHeader';
import EstimateItemsEntriesField from './EstimateItemsEntriesField';
import EstimateFloatingActions from './EstimateFloatingActions';
import EstimateFormFooter from './EstimateFormFooter';
import EstimateFormDialogs from './EstimateFormDialogs';
import withSettings from 'containers/Settings/withSettings';
@@ -158,12 +159,11 @@ function EstimateForm({
>
<Form>
<EstimateFormHeader />
<div className={classNames(CLASSES.PAGE_FORM_BODY)}>
<EstimateItemsEntriesField />
</div>
<EstimateItemsEntriesField />
<EstimateFormFooter />
<EstimateFloatingActions />
<EstimateFormDialogs />
</Form>
</Formik>
</div>

28
client/src/containers/Sales/Estimates/EstimateForm/EstimateFormDialogs.js Normal file
View File

@@ -0,0 +1,28 @@
import React from 'react';
import { useFormikContext } from 'formik';
import EstimateNumberDialog from 'containers/Dialogs/EstimateNumberDialog';
import { transactionNumber } from 'utils';
/**
* Estimate form dialogs.
*/
export default function EstimateFormDialogs() {
const { setFieldValue } = useFormikContext();
// Update the form once the invoice number form submit confirm.
const handleEstimateNumberFormConfirm = (values) => {
setFieldValue(
'estimate_number',
transactionNumber(values.number_prefix, values.next_number),
);
};
return (
<>
<EstimateNumberDialog
dialogName={'estimate-number-form'}
onConfirm={handleEstimateNumberFormConfirm}
/>
</>
);
}

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

@@ -32,7 +32,7 @@ function EstimateFormHeader({
}) {
const { customers } = useEstimateFormContext();
const handleEstimateNumberChange = () => {
const handleEstimateNumberBtnClick = () => {
openDialog('estimate-number-form', {});
};
@@ -135,7 +135,7 @@ function EstimateFormHeader({
/>
<InputPrependButton
buttonProps={{
onClick: handleEstimateNumberChange,
onClick: handleEstimateNumberBtnClick,
icon: <Icon icon={'settings-18'} />,
}}
tooltip={true}

30
client/src/containers/Sales/Estimates/EstimateForm/EstimateItemsEntriesField.js
View File

@@ -1,5 +1,7 @@
import React from 'react';
import { FastField } from 'formik';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import ItemsEntriesTable from 'containers/Entries/ItemsEntriesTable';
import { useEstimateFormContext } from './EstimateFormProvider';
@@ -10,18 +12,20 @@ export default function EstimateFormItemsEntriesField() {
const { items } = useEstimateFormContext();
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>
<div className={classNames(CLASSES.PAGE_FORM_BODY)}>
<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>
</div>
);
}

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

@@ -15,6 +15,7 @@ import InvoiceFormHeader from './InvoiceFormHeader';
import InvoiceItemsEntriesEditorField from './InvoiceItemsEntriesEditorField';
import InvoiceFloatingActions from './InvoiceFloatingActions';
import InvoiceFormFooter from './InvoiceFormFooter';
import InvoiceFormDialogs from './InvoiceFormDialogs';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withMediaActions from 'containers/Media/withMediaActions';
@@ -159,6 +160,7 @@ function InvoiceForm({
</div>
<InvoiceFormFooter />
<InvoiceFloatingActions />
<InvoiceFormDialogs />
</Form>
</Formik>
</div>

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

@@ -0,0 +1,27 @@
import React from 'react';
import InvoiceNumberDialog from 'containers/Dialogs/InvoiceNumberDialog';
import { useFormikContext } from 'formik';
import { transactionNumber } from 'utils';
/**
* Invoice form dialogs.
*/
export default function InvoiceFormDialogs() {
const { setFieldValue } = useFormikContext();
// Update the form once the invoice number form submit confirm.
const handleInvoiceNumberFormConfirm = (values) => {
setFieldValue(
'invoice_no',
transactionNumber(values.number_prefix, values.next_number),
);
};
return (
<>
<InvoiceNumberDialog
dialogName={'invoice-number-form'}
onConfirm={handleInvoiceNumberFormConfirm}
/>
</>
);
}

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

@@ -6,6 +6,7 @@ import {
useCustomers,
useCreateInvoice,
useEditInvoice,
useSettingsInvoices,
} from 'hooks/query';
const InvoiceFormContext = createContext();
@@ -14,7 +15,7 @@ const InvoiceFormContext = createContext();
* Accounts chart data provider.
*/
function InvoiceFormProvider({ invoiceId, ...props }) {
const { data: invoice, isFetching: isInvoiceLoading } = useInvoice(
const { data: invoice, isLoading: isInvoiceLoading } = useInvoice(
invoiceId,
{
enabled: !!invoiceId,
@@ -24,21 +25,24 @@ function InvoiceFormProvider({ invoiceId, ...props }) {
// Handle fetching the items table based on the given query.
const {
data: { items },
isFetching: isItemsLoading,
isLoading: isItemsLoading,
} = useItems();
// Handle fetch customers data table or list
const {
data: { customers },
isFetching: isCustomersLoading,
isLoading: isCustomersLoading,
} = useCustomers();
// Handle fetching settings.
const { isLoading: isSettingsLoading } = useSettingsInvoices();
// Create and edit invoice mutations.
const { mutateAsync: createInvoiceMutate } = useCreateInvoice();
const { mutateAsync: editInvoiceMutate } = useEditInvoice();
// Form submit payload.
const [submitPayload, setSubmitPayload] = useState({});
const [submitPayload, setSubmitPayload] = useState();
// Detarmines whether the form in new mode.
const isNewMode = !invoiceId;
@@ -53,16 +57,22 @@ function InvoiceFormProvider({ invoiceId, ...props }) {
isInvoiceLoading,
isItemsLoading,
isCustomersLoading,
isSettingsLoading,
createInvoiceMutate,
editInvoiceMutate,
setSubmitPayload,
isNewMode
isNewMode,
};
return (
<DashboardInsider
loading={isInvoiceLoading || isItemsLoading || isCustomersLoading}
loading={
isInvoiceLoading ||
isItemsLoading ||
isCustomersLoading ||
isSettingsLoading
}
name={'invoice-form'}
>
<InvoiceFormContext.Provider value={provider} {...props} />

3
client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js
View File

@@ -12,6 +12,7 @@ import PaymentReceiveFormBody from './PaymentReceiveFormBody';
import PaymentReceiveFloatingActions from './PaymentReceiveFloatingActions';
import PaymentReceiveFormFooter from './PaymentReceiveFormFooter';
import PaymentReceiveFormAlerts from './PaymentReceiveFormAlerts';
import PaymentReceiveFormDialogs from './PaymentReceiveFormDialogs';
import { PaymentReceiveInnerProvider } from './PaymentReceiveInnerProvider';
import withSettings from 'containers/Settings/withSettings';
@@ -164,7 +165,9 @@ function PaymentReceiveForm({
<PaymentReceiveFormFooter />
<PaymentReceiveFloatingActions />
{/* Alerts & Dialogs */}
<PaymentReceiveFormAlerts />
<PaymentReceiveFormDialogs />
</PaymentReceiveInnerProvider>
</Form>
</Formik>

27
client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormDialogs.js Normal file
View File

@@ -0,0 +1,27 @@
import React from 'react';
import { useFormikContext } from 'formik';
import PaymentReceiveNumberDialog from 'containers/Dialogs/PaymentReceiveNumberDialog';
import { transactionNumber } from 'utils';
/**
* Payment receive form dialogs.
*/
export default function PaymentReceiveFormDialogs() {
const { setFieldValue } = useFormikContext();
const handleUpdatePaymentNumber = (values) => {
setFieldValue(
'payment_receive_no',
transactionNumber(values.number_prefix, values.next_number),
);
};
return (
<>
<PaymentReceiveNumberDialog
dialogName={'payment-receive-number-form'}
onConfirm={handleUpdatePaymentNumber}
/>
</>
);
}

18
client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js
View File

@@ -32,7 +32,7 @@ import {
Money,
} from 'components';
import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withSettings from 'containers/Settings/withSettings';
import { amountPaymentEntries, fullAmountPaymentEntries } from './utils';
@@ -41,7 +41,12 @@ import { toSafeInteger } from 'lodash';
/**
* Payment receive header fields.
*/
function PaymentReceiveHeaderFields({ baseCurrency }) {
function PaymentReceiveHeaderFields({
baseCurrency,
// #withDialogActions
openDialog,
}) {
// Payment receive form context.
const { customers, accounts, isNewMode } = usePaymentReceiveFormContext();
@@ -73,6 +78,12 @@ function PaymentReceiveHeaderFields({ baseCurrency }) {
setFieldValue('entries', newEntries);
};
// Handle click open payment receive number dialog.
const handleClickOpenDialog = () => {
openDialog('payment-receive-number-form')
};
return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
{/* ------------- Customer name ------------- */}
@@ -185,7 +196,7 @@ function PaymentReceiveHeaderFields({ baseCurrency }) {
/>
<InputPrependButton
buttonProps={{
// onClick: handlePaymentReceiveNumberChange,
onClick: handleClickOpenDialog,
icon: <Icon icon={'settings-18'} />,
}}
tooltip={true}
@@ -253,4 +264,5 @@ export default compose(
withSettings(({ organizationSettings }) => ({
baseCurrency: organizationSettings?.baseCurrency,
})),
withDialogActions
)(PaymentReceiveHeaderFields);

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

@@ -21,6 +21,7 @@ import ReceiptFromHeader from './ReceiptFormHeader';
import ReceiptItemsEntriesEditor from './ReceiptItemsEntriesEditor';
import ReceiptFormFloatingActions from './ReceiptFormFloatingActions';
import ReceiptFormFooter from './ReceiptFormFooter';
import ReceiptFormDialogs from './ReceiptFormDialogs';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withSettings from 'containers/Settings/withSettings';
@@ -170,6 +171,8 @@ function ReceiptForm({
<ReceiptItemsEntriesEditor />
<ReceiptFormFooter />
<ReceiptFormFloatingActions />
<ReceiptFormDialogs />
</Form>
</Formik>
</div>

28
client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormDialogs.js Normal file
View File

@@ -0,0 +1,28 @@
import React from 'react';
import { useFormikContext } from 'formik';
import ReceiptNumberDialog from 'containers/Dialogs/ReceiptNumberDialog';
import { transactionNumber } from 'utils';
/**
* Receipt form dialogs.
*/
export default function ReceiptFormDialogs() {
const { setFieldValue } = useFormikContext();
// Update the form once the receipt number form submit confirm.
const handleReceiptNumberFormConfirm = (values) => {
setFieldValue(
'receipt_number',
transactionNumber(values.number_prefix, values.next_number),
);
};
return (
<>
<ReceiptNumberDialog
dialogName={'receipt-number-form'}
onConfirm={handleReceiptNumberFormConfirm}
/>
</>
);
}

2
client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormProvider.js
View File

@@ -39,7 +39,7 @@ function ReceiptFormProvider({ receiptId, ...props }) {
} = useItems();
// Fetch receipt settings.
const { isFetching: isSettingLoading } = useSettings();
const { isLoading: isSettingLoading } = useSettings();
const { mutateAsync: createReceiptMutate } = useCreateReceipt();
const { mutateAsync: editReceiptMutate } = useEditReceipt();