mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-17 21:30:31 +00:00
WIP / Feature Fix _bills
This commit is contained in:
elforjani3
260
client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js
Normal file
260
client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js
Normal file
@@ -0,0 +1,260 @@
|
||||
import React, { useMemo, useCallback, useEffect, useState,useRef } from 'react';
|
||||
|
||||
import * as Yup from 'yup';
|
||||
import { useFormik } from 'formik';
|
||||
import moment from 'moment';
|
||||
import { Intent, FormGroup, TextArea } from '@blueprintjs/core';
|
||||
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
|
||||
import PaymentReceiveHeader from './PaymentReceiveFormHeader';
|
||||
// PaymentReceiptItemsTable
|
||||
import PaymentReceiveFooter from './PaymentReceiveFormFooter';
|
||||
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
import withMediaActions from 'containers/Media/withMediaActions';
|
||||
import withPaymentReceivesActions from './withPaymentReceivesActions'
|
||||
|
||||
import { AppToaster } from 'components';
|
||||
import Dragzone from 'components/Dragzone';
|
||||
import useMedia from 'hooks/useMedia';
|
||||
|
||||
import { compose, repeatValue } from 'utils';
|
||||
|
||||
const MIN_LINES_NUMBER = 4;
|
||||
|
||||
function PaymentReceiveForm({
|
||||
//#withMedia
|
||||
requestSubmitMedia,
|
||||
requestDeleteMedia,
|
||||
|
||||
//#WithPaymentReceiveActions
|
||||
requestSubmitPaymentReceive,
|
||||
|
||||
|
||||
//#withDashboard
|
||||
changePageTitle,
|
||||
changePageSubtitle,
|
||||
|
||||
//#withPaymentReceiveDetail
|
||||
|
||||
//#OWn Props
|
||||
payment_receive,
|
||||
onFormSubmit,
|
||||
onCancelForm,
|
||||
}) {
|
||||
const { formatMessage } = useIntl();
|
||||
const [payload, setPayload] = useState({});
|
||||
|
||||
const {
|
||||
setFiles,
|
||||
saveMedia,
|
||||
deletedFiles,
|
||||
setDeletedFiles,
|
||||
deleteMedia,
|
||||
} = useMedia({
|
||||
saveCallback: requestSubmitMedia,
|
||||
deleteCallback: requestDeleteMedia,
|
||||
});
|
||||
|
||||
const savedMediaIds = useRef([]);
|
||||
const clearSavedMediaIds = () => {
|
||||
savedMediaIds.current = [];
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (payment_receive && payment_receive.id) {
|
||||
changePageTitle(formatMessage({ id: 'edit_payment_receive' }));
|
||||
} else {
|
||||
changePageTitle(formatMessage({ id: 'new_payment_receive' }));
|
||||
}
|
||||
}, [changePageTitle, payment_receive, formatMessage]);
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
customer_id: Yup.string()
|
||||
.label(formatMessage({ id: 'customer_name_' }))
|
||||
.required(),
|
||||
deposit_account_id: Yup.number()
|
||||
.required()
|
||||
.label(formatMessage({ id: 'deposit_account_' })),
|
||||
payment_date: Yup.date()
|
||||
.required()
|
||||
.label(formatMessage({ id: 'payment_date_' })),
|
||||
payment_receive_no: Yup.number()
|
||||
.required()
|
||||
.label(formatMessage({ id: 'payment_receive_no_' })),
|
||||
reference_no: Yup.string().min(1).max(255),
|
||||
statement: Yup.string()
|
||||
.trim()
|
||||
.min(1)
|
||||
.max(1024)
|
||||
.label(formatMessage({ id: 'statement' })),
|
||||
|
||||
entries: Yup.array().of(
|
||||
Yup.object().shape({
|
||||
payment_amount: Yup.number().nullable(),
|
||||
item_id: Yup.number()
|
||||
.nullable()
|
||||
.when(['payment_amount'], {
|
||||
is: (payment_amount) => payment_amount,
|
||||
then: Yup.number().required(),
|
||||
}),
|
||||
description: Yup.string().nullable(),
|
||||
}),
|
||||
),
|
||||
});
|
||||
|
||||
const handleDropFiles = useCallback((_files) => {
|
||||
setFiles(_files.filter((file) => file.uploaded === false));
|
||||
}, []);
|
||||
|
||||
const savePaymentReceiveSubmit = useCallback((payload) => {
|
||||
onFormSubmit && onFormSubmit(payload);
|
||||
});
|
||||
|
||||
const defaultPaymentReceive = useMemo(
|
||||
() => ({
|
||||
item_id: null,
|
||||
payment_amount: null,
|
||||
description: null,
|
||||
}),
|
||||
[],
|
||||
);
|
||||
const defaultInitialValues = useMemo(
|
||||
() => ({
|
||||
customer_id: '',
|
||||
deposit_account_id: '',
|
||||
payment_date: moment(new Date()).format('YYYY-MM-DD'),
|
||||
reference_no: '',
|
||||
statement: '',
|
||||
entries: [...repeatValue(defaultPaymentReceive, MIN_LINES_NUMBER)],
|
||||
}),
|
||||
[defaultPaymentReceive],
|
||||
);
|
||||
|
||||
const initialValues = useMemo(
|
||||
() => ({
|
||||
...defaultInitialValues,
|
||||
entries: defaultInitialValues.entries,
|
||||
}),
|
||||
[defaultPaymentReceive, defaultInitialValues, payment_receive],
|
||||
);
|
||||
|
||||
const initialAttachmentFiles = useMemo(() => {
|
||||
return payment_receive && payment_receive.media
|
||||
? payment_receive.media.map((attach) => ({
|
||||
preview: attach.attachment_file,
|
||||
uploaded: true,
|
||||
metadata: { ...attach },
|
||||
}))
|
||||
: [];
|
||||
}, [payment_receive]);
|
||||
|
||||
const formik = useFormik({
|
||||
enableReinitialize: true,
|
||||
validationSchema,
|
||||
initialValues: {
|
||||
...initialValues,
|
||||
},
|
||||
onSubmit: async (values, { setSubmitting, setErrors, resetForm }) => {
|
||||
const form = {
|
||||
...values,
|
||||
};
|
||||
const savePaymentReceive = (mediaIds) =>
|
||||
new Promise((resolve, reject) => {
|
||||
const requestForm = { ...form, media_ids: mediaIds };
|
||||
|
||||
requestSubmitPaymentReceive(requestForm)
|
||||
.the((response) => {
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: 'the_payment_receive_has_been_successfully_created',
|
||||
}),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
setSubmitting(false);
|
||||
clearSavedMediaIds();
|
||||
savePaymentReceiveSubmit({ action: 'new', ...payload });
|
||||
})
|
||||
.catch((errors) => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
});
|
||||
Promise.all([saveMedia(), deleteMedia()])
|
||||
.then(([savedMediaResponses]) => {
|
||||
const mediaIds = savedMediaResponses.map((res) => res.data.media.id);
|
||||
savedMediaIds.current = mediaIds;
|
||||
return savedMediaResponses;
|
||||
})
|
||||
.then(() => {
|
||||
return savePaymentReceive(savedMediaIds.current);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDeleteFile = useCallback(
|
||||
(_deletedFiles) => {
|
||||
_deletedFiles.forEach((deletedFile) => {
|
||||
if (deletedFile.upload && deletedFile.metadata.id) {
|
||||
setDeletedFiles([...deletedFiles, deletedFile.metadata.id]);
|
||||
}
|
||||
});
|
||||
},
|
||||
[setDeletedFiles, deletedFiles],
|
||||
);
|
||||
|
||||
const handleSubmitClick = useCallback(
|
||||
(payload) => {
|
||||
setPayload(payload);
|
||||
formik.submitForm();
|
||||
},
|
||||
[setPayload, formik],
|
||||
);
|
||||
|
||||
const handleCancelClick = useCallback(
|
||||
(payload) => {
|
||||
onCancelForm && onCancelForm(payload);
|
||||
},
|
||||
[onCancelForm],
|
||||
);
|
||||
|
||||
const handleClearClick = () => {
|
||||
formik.resetForm();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={'payment_receive_form'}>
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<PaymentReceiveHeader formik={formik} />
|
||||
<FormGroup
|
||||
label={<T id={'statement'} />}
|
||||
className={'form-group--statement'}
|
||||
>
|
||||
<TextArea
|
||||
growVertically={true}
|
||||
{...formik.getFieldProps('statement')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<Dragzone
|
||||
initialFiles={initialAttachmentFiles}
|
||||
onDrop={handleDropFiles}
|
||||
onDeleteFile={handleDeleteFile}
|
||||
hint={'Attachments: Maxiumum size: 20MB'}
|
||||
/>
|
||||
<PaymentReceiveFooter
|
||||
formik={formik}
|
||||
onSubmit={handleSubmitClick}
|
||||
onCancel={handleCancelClick}
|
||||
onClearClick={handleClearClick}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withPaymentReceivesActions,
|
||||
withDashboardActions,
|
||||
withMediaActions,
|
||||
)(PaymentReceiveForm);
|
||||
@@ -0,0 +1,46 @@
|
||||
import React from 'react';
|
||||
import { Intent, Button } from '@blueprintjs/core';
|
||||
import { FormattedMessage as T } from 'react-intl';
|
||||
|
||||
export default function PaymentReceiveFormFooter({
|
||||
formik: { isSubmitting, resetForm },
|
||||
onSubmitClick,
|
||||
onCancelClick,
|
||||
onClearClick,
|
||||
}) {
|
||||
return (
|
||||
<div className={'estimate-form__floating-footer'}>
|
||||
<Button disabled={isSubmitting} intent={Intent.PRIMARY} type="submit">
|
||||
<T id={'save_send'} />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
disabled={isSubmitting}
|
||||
intent={Intent.PRIMARY}
|
||||
className={'ml1'}
|
||||
name={'save'}
|
||||
type="submit"
|
||||
>
|
||||
<T id={'save'} />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
className={'ml1'}
|
||||
disabled={isSubmitting}
|
||||
onClick={() => onClearClick && onClearClick()}
|
||||
>
|
||||
<T id={'clear'} />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
className={'ml1'}
|
||||
type="submit"
|
||||
onClick={() => {
|
||||
onCancelClick && onCancelClick();
|
||||
}}
|
||||
>
|
||||
<T id={'close'} />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,204 @@
|
||||
import React, { useMemo, useCallback, useState } from 'react';
|
||||
import {
|
||||
FormGroup,
|
||||
InputGroup,
|
||||
Intent,
|
||||
Position,
|
||||
MenuItem,
|
||||
Classes,
|
||||
} from '@blueprintjs/core';
|
||||
|
||||
import { DateInput } from '@blueprintjs/datetime';
|
||||
import { FormattedMessage as T } from 'react-intl';
|
||||
import moment from 'moment';
|
||||
import { momentFormatter, compose, tansformDateValue } from 'utils';
|
||||
import classNames from 'classnames';
|
||||
import {
|
||||
AccountsSelectList,
|
||||
ListSelect,
|
||||
ErrorMessage,
|
||||
FieldRequiredHint,
|
||||
} from 'components';
|
||||
|
||||
import withCustomers from 'containers/Customers/withCustomers';
|
||||
import withAccounts from 'containers/Accounts/withAccounts';
|
||||
|
||||
function PaymentReceiveFormHeader({
|
||||
formik: { errors, touched, setFieldValue, getFieldProps, values },
|
||||
|
||||
//#withCustomers
|
||||
customers,
|
||||
//#withAccouts
|
||||
accountsList,
|
||||
}) {
|
||||
const handleDateChange = useCallback(
|
||||
(date_filed) => (date) => {
|
||||
const formatted = moment(date).format('YYYY-MM-DD');
|
||||
setFieldValue(date_filed, formatted);
|
||||
},
|
||||
[setFieldValue],
|
||||
);
|
||||
|
||||
const handleCusomterRenderer = useCallback(
|
||||
(custom, { handleClick }) => (
|
||||
<MenuItem
|
||||
key={custom.id}
|
||||
text={custom.display_name}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
),
|
||||
[],
|
||||
);
|
||||
|
||||
const handleFilterCustomer = (query, customer, index, exactMatch) => {
|
||||
const normalizedTitle = customer.display_name.toLowerCase();
|
||||
const normalizedQuery = query.toLowerCase();
|
||||
if (exactMatch) {
|
||||
return normalizedTitle === normalizedQuery;
|
||||
} else {
|
||||
return (
|
||||
`${customer.display_name} ${normalizedTitle}`.indexOf(
|
||||
normalizedQuery,
|
||||
) >= 0
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const onChangeSelect = useCallback(
|
||||
(filedName) => {
|
||||
return (item) => {
|
||||
setFieldValue(filedName, item.id);
|
||||
};
|
||||
},
|
||||
[setFieldValue],
|
||||
);
|
||||
|
||||
// Filter deposit accounts.
|
||||
const depositAccounts = useMemo(
|
||||
() => accountsList.filter((a) => a?.type?.key === 'current_asset'),
|
||||
[accountsList],
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
{/* Customer name */}
|
||||
<FormGroup
|
||||
label={<T id={'customer_name'} />}
|
||||
inline={true}
|
||||
className={classNames('form-group--select-list', Classes.FILL)}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
intent={errors.customer_id && touched.customer_id && Intent.DANGER}
|
||||
helperText={
|
||||
<ErrorMessage name={'customer_id'} {...{ errors, touched }} />
|
||||
}
|
||||
>
|
||||
<ListSelect
|
||||
items={customers}
|
||||
noResults={<MenuItem disabled={true} text="No results." />}
|
||||
itemRenderer={handleCusomterRenderer}
|
||||
itemPredicate={handleFilterCustomer}
|
||||
popoverProps={{ minimal: true }}
|
||||
onItemSelect={onChangeSelect('customer_id')}
|
||||
selectedItem={values.customer_id}
|
||||
selectedItemProp={'id'}
|
||||
defaultText={<T id={'select_customer_account'} />}
|
||||
labelProp={'display_name'}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={<T id={'deposit_account'} />}
|
||||
className={classNames(
|
||||
'form-group--deposit_account_id',
|
||||
'form-group--select-list',
|
||||
Classes.FILL,
|
||||
)}
|
||||
inline={true}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
intent={
|
||||
errors.deposit_account_id &&
|
||||
touched.deposit_account_id &&
|
||||
Intent.DANGER
|
||||
}
|
||||
helperText={
|
||||
<ErrorMessage
|
||||
name={'deposit_account_id'}
|
||||
{...{ errors, touched }}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<AccountsSelectList
|
||||
accounts={depositAccounts}
|
||||
onAccountSelected={onChangeSelect('deposit_account_id')}
|
||||
defaultSelectText={<T id={'select_deposit_account'} />}
|
||||
selectedAccountId={values.deposit_account_id}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={<T id={'payment_date'} />}
|
||||
inline={true}
|
||||
className={classNames('form-group--select-list', Classes.FILL)}
|
||||
intent={errors.payment_date && touched.payment_date && Intent.DANGER}
|
||||
helperText={
|
||||
<ErrorMessage name="payment_date" {...{ errors, touched }} />
|
||||
}
|
||||
>
|
||||
<DateInput
|
||||
{...momentFormatter('YYYY/MM/DD')}
|
||||
value={tansformDateValue(values.payment_date)}
|
||||
onChange={handleDateChange}
|
||||
popoverProps={{ position: Position.BOTTOM, minimal: true }}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
{/* payment receive no */}
|
||||
<FormGroup
|
||||
label={<T id={'payment_receive_no'} />}
|
||||
inline={true}
|
||||
className={('form-group--payment_receive_no', Classes.FILL)}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
intent={
|
||||
errors.payment_receive_no &&
|
||||
touched.payment_receive_no &&
|
||||
Intent.DANGER
|
||||
}
|
||||
helperText={
|
||||
<ErrorMessage name="payment_receive_no" {...{ errors, touched }} />
|
||||
}
|
||||
>
|
||||
<InputGroup
|
||||
intent={
|
||||
errors.payment_receive_no &&
|
||||
touched.payment_receive_no &&
|
||||
Intent.DANGER
|
||||
}
|
||||
minimal={true}
|
||||
{...getFieldProps('payment_receive_no')}
|
||||
/>
|
||||
</FormGroup>
|
||||
{/* reference_no */}
|
||||
<FormGroup
|
||||
label={<T id={'reference'} />}
|
||||
inline={true}
|
||||
className={classNames('form-group--reference', Classes.FILL)}
|
||||
intent={errors.reference_no && touched.reference_no && Intent.DANGER}
|
||||
helperText={<ErrorMessage name="reference" {...{ errors, touched }} />}
|
||||
>
|
||||
<InputGroup
|
||||
intent={errors.reference_no && touched.reference_no && Intent.DANGER}
|
||||
minimal={true}
|
||||
{...getFieldProps('reference_no')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withCustomers(({ customers }) => ({
|
||||
customers,
|
||||
})),
|
||||
withAccounts(({ accountsList }) => ({
|
||||
accountsList,
|
||||
})),
|
||||
)(PaymentReceiveFormHeader);
|
||||
@@ -0,0 +1,13 @@
|
||||
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 DataTable from 'components/DataTable';
|
||||
import Icon from 'components/Icon';
|
||||
|
||||
import { compose, formattedAmount, transformUpdatedRows } from 'utils';
|
||||
import {
|
||||
InputGroupCell,
|
||||
MoneyFieldCell,
|
||||
EstimatesListFieldCell,
|
||||
DivFieldCell,
|
||||
} from 'components/DataTableCells';
|
||||
@@ -0,0 +1,69 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import { useParams, useHistory } from 'react-router-dom';
|
||||
import { useQuery } from 'react-query';
|
||||
|
||||
import PaymentReceiveForm from './PaymentReceiveForm';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
|
||||
import withCustomersActions from 'containers/Customers/withCustomersActions';
|
||||
import withAccountsActions from 'containers/Accounts/withAccountsActions';
|
||||
import withItemsActions from 'containers/Items/withItemsActions';
|
||||
//#withInvoiceActions
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
function PaymentReceives({
|
||||
//#withwithAccountsActions
|
||||
requestFetchAccounts,
|
||||
|
||||
//#withCustomersActions
|
||||
requestFetchCustomers,
|
||||
|
||||
//#withItemsActions
|
||||
requestFetchItems,
|
||||
|
||||
//#withInvoiceActions
|
||||
}) {
|
||||
const history = useHistory();
|
||||
|
||||
// Handle fetch accounts data
|
||||
const fetchAccounts = useQuery('accounts-list', (key) =>
|
||||
requestFetchAccounts(),
|
||||
);
|
||||
|
||||
// Handle fetch Items data table or list
|
||||
const fetchItems = useQuery('items-table', () => requestFetchItems({}));
|
||||
|
||||
// Handle fetch customers data table or list
|
||||
const fetchCustomers = useQuery('customers-table', () =>
|
||||
requestFetchCustomers({}),
|
||||
);
|
||||
|
||||
const handleFormSubmit = useCallback((payload) => {}, [history]);
|
||||
|
||||
const handleCancel = useCallback(() => {
|
||||
history.goBack();
|
||||
}, [history]);
|
||||
|
||||
return (
|
||||
<DashboardInsider
|
||||
loading={
|
||||
fetchCustomers.isFetching ||
|
||||
fetchItems.isFetching ||
|
||||
fetchAccounts.isFetching
|
||||
}
|
||||
>
|
||||
<PaymentReceiveForm
|
||||
onFormSubmit={handleFormSubmit}
|
||||
onCancelForm={handleCancel}
|
||||
/>
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withCustomersActions,
|
||||
withItemsActions,
|
||||
withAccountsActions,
|
||||
// withInvoiceActions
|
||||
)(PaymentReceives);
|
||||
@@ -0,0 +1,34 @@
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
submitPaymentReceive,
|
||||
editPaymentReceive,
|
||||
deletePaymentReceive,
|
||||
fetchPaymentReceive,
|
||||
fetchPaymentReceivesTable,
|
||||
} from 'store/PaymentReceive/paymentReceive.actions';
|
||||
import t from 'store/types';
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
requestSubmitPaymentReceive: (form) =>
|
||||
dispatch(submitPaymentReceive({ form })),
|
||||
requestFetchPaymentReceive: (id) => dispatch(fetchPaymentReceive({ id })),
|
||||
requestEditPaymentReceive: (id, form) =>
|
||||
dispatch(editPaymentReceive({ id, form })),
|
||||
requestDeletePaymentReceive: (id) => dispatch(deletePaymentReceive({ id })),
|
||||
requestFetchPaymentReceiveTable: (query = {}) =>
|
||||
dispatch(fetchPaymentReceivesTable({ query: { ...query } })),
|
||||
|
||||
changePaymentReceiveView: (id) =>
|
||||
dispatch({
|
||||
type: t.PAYMENT_RECEIVE_SET_CURRENT_VIEW,
|
||||
currentViewId: parseInt(id, 10),
|
||||
}),
|
||||
|
||||
addPaymentReceivesTableQueries: (queries) =>
|
||||
dispatch({
|
||||
type: t.PAYMENT_RECEIVE_TABLE_QUERIES_ADD,
|
||||
queries,
|
||||
}),
|
||||
});
|
||||
|
||||
export default connect(null, mapDispatchToProps);
|
||||
Reference in New Issue
Block a user