mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-19 06:10:31 +00:00
feat: Merge sales branch
This commit is contained in:
Ahmed Bouhuolia
151
client/src/containers/Sales/Invoice/InvoiceActionsBar.js
Normal file
151
client/src/containers/Sales/Invoice/InvoiceActionsBar.js
Normal file
@@ -0,0 +1,151 @@
|
||||
import React, { useCallback, useState, useMemo } from 'react';
|
||||
import Icon from 'components/Icon';
|
||||
import {
|
||||
Button,
|
||||
Classes,
|
||||
Menu,
|
||||
MenuItem,
|
||||
Popover,
|
||||
NavbarDivider,
|
||||
NavbarGroup,
|
||||
PopoverInteractionKind,
|
||||
Position,
|
||||
Intent,
|
||||
} from '@blueprintjs/core';
|
||||
|
||||
import classNames from 'classnames';
|
||||
import { useRouteMatch, useHistory } from 'react-router-dom';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
|
||||
import { connect } from 'react-redux';
|
||||
import FilterDropdown from 'components/FilterDropdown';
|
||||
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
|
||||
|
||||
import { If, DashboardActionViewsList } from 'components';
|
||||
|
||||
import withResourceDetail from 'containers/Resources/withResourceDetails';
|
||||
import withDialogActions from 'containers/Dialog/withDialogActions';
|
||||
|
||||
import withInvoiceActions from './withInvoiceActions';
|
||||
import withInvoices from './withInvoices';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
function InvoiceActionsBar({
|
||||
// #withResourceDetail
|
||||
resourceFields,
|
||||
|
||||
//#withInvoice
|
||||
invoicesViews,
|
||||
|
||||
// #withInvoiceActions
|
||||
addInvoiceTableQueries,
|
||||
|
||||
// #own Porps
|
||||
onFilterChanged,
|
||||
selectedRows = [],
|
||||
}) {
|
||||
const history = useHistory();
|
||||
const { path } = useRouteMatch();
|
||||
const [filterCount, setFilterCount] = useState(0);
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
const handleClickNewInvoice = useCallback(() => {
|
||||
history.push('/invoices/new');
|
||||
}, [history]);
|
||||
|
||||
// const filterDropdown = FilterDropdown({
|
||||
// initialCondition: {
|
||||
// fieldKey: 'reference_no',
|
||||
// compatator: 'contains',
|
||||
// value: '',
|
||||
// },
|
||||
// fields: resourceFields,
|
||||
// onFilterChange: (filterConditions) => {
|
||||
// addInvoiceTableQueries({
|
||||
// filter_roles: filterConditions || '',
|
||||
// });
|
||||
// onFilterChanged && onFilterChanged(filterConditions);
|
||||
// },
|
||||
// });
|
||||
|
||||
const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
|
||||
selectedRows,
|
||||
]);
|
||||
|
||||
return (
|
||||
<DashboardActionsBar>
|
||||
<NavbarGroup>
|
||||
<DashboardActionViewsList
|
||||
resourceName={'sales_invoices'}
|
||||
views={invoicesViews}
|
||||
/>
|
||||
<NavbarDivider />
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon={'plus'} />}
|
||||
text={<T id={'new_invoice'} />}
|
||||
onClick={handleClickNewInvoice}
|
||||
/>
|
||||
<Popover
|
||||
minimal={true}
|
||||
// content={filterDropdown}
|
||||
interactionKind={PopoverInteractionKind.CLICK}
|
||||
position={Position.BOTTOM_LEFT}
|
||||
>
|
||||
<Button
|
||||
className={classNames(Classes.MINIMAL)}
|
||||
text={
|
||||
filterCount <= 0 ? (
|
||||
<T id={'filter'} />
|
||||
) : (
|
||||
`${filterCount} ${formatMessage({ id: 'filters_applied' })}`
|
||||
)
|
||||
}
|
||||
icon={<Icon icon={'filter-16'} iconSize={16} />}
|
||||
/>
|
||||
</Popover>
|
||||
<If condition={hasSelectedRows}>
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon={'trash-16'} iconSize={16} />}
|
||||
text={<T id={'delete'} />}
|
||||
intent={Intent.DANGER}
|
||||
// onClick={handleBulkDelete}
|
||||
/>
|
||||
</If>
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon={'print-16'} iconSize={'16'} />}
|
||||
text={<T id={'print'} />}
|
||||
/>
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon={'file-import-16'} />}
|
||||
text={<T id={'import'} />}
|
||||
/>
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
|
||||
text={<T id={'export'} />}
|
||||
/>
|
||||
</NavbarGroup>
|
||||
</DashboardActionsBar>
|
||||
);
|
||||
}
|
||||
|
||||
const mapStateToProps = (state, props) => ({
|
||||
resourceName: 'sales_invoices',
|
||||
});
|
||||
const withInvoiceActionsBar = connect(mapStateToProps);
|
||||
|
||||
export default compose(
|
||||
withInvoiceActionsBar,
|
||||
withResourceDetail(({ resourceFields }) => ({
|
||||
resourceFields,
|
||||
})),
|
||||
withInvoices(({ invoicesViews }) => ({
|
||||
invoicesViews,
|
||||
})),
|
||||
withInvoiceActions,
|
||||
)(InvoiceActionsBar);
|
||||
351
client/src/containers/Sales/Invoice/InvoiceForm.js
Normal file
351
client/src/containers/Sales/Invoice/InvoiceForm.js
Normal file
@@ -0,0 +1,351 @@
|
||||
import React, {
|
||||
useMemo,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import * as Yup from 'yup';
|
||||
import { useFormik } from 'formik';
|
||||
import moment from 'moment';
|
||||
import { Intent, FormGroup, TextArea, Button } from '@blueprintjs/core';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import { pick } from 'lodash';
|
||||
|
||||
import InvoiceFormHeader from './InvoiceFormHeader';
|
||||
import EstimatesItemsTable from 'containers/Sales/Estimate/EntriesItemsTable';
|
||||
import InvoiceFormFooter from './InvoiceFormFooter';
|
||||
|
||||
import withInvoiceActions from './withInvoiceActions';
|
||||
import withInvoiceDetail from './withInvoiceDetail';
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
import withMediaActions from 'containers/Media/withMediaActions';
|
||||
|
||||
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 InvoiceForm({
|
||||
//#WithMedia
|
||||
requestSubmitMedia,
|
||||
requestDeleteMedia,
|
||||
|
||||
//#WithInvoiceActions
|
||||
requestSubmitInvoice,
|
||||
requestEditInvoice,
|
||||
|
||||
//#withDashboard
|
||||
changePageTitle,
|
||||
changePageSubtitle,
|
||||
|
||||
//#withInvoiceDetail
|
||||
invoice,
|
||||
|
||||
//#own Props
|
||||
invoiceId,
|
||||
onFormSubmit,
|
||||
onCancelForm,
|
||||
}) {
|
||||
const { formatMessage } = useIntl();
|
||||
const [payload, setPayload] = useState({});
|
||||
|
||||
const {
|
||||
setFiles,
|
||||
saveMedia,
|
||||
deletedFiles,
|
||||
setDeletedFiles,
|
||||
deleteMedia,
|
||||
} = useMedia({
|
||||
saveCallback: requestSubmitMedia,
|
||||
deleteCallback: requestDeleteMedia,
|
||||
});
|
||||
|
||||
const handleDropFiles = useCallback((_files) => {
|
||||
setFiles(_files.filter((file) => file.uploaded === false));
|
||||
}, []);
|
||||
|
||||
const savedMediaIds = useRef([]);
|
||||
const clearSavedMediaIds = () => {
|
||||
savedMediaIds.current = [];
|
||||
};
|
||||
useEffect(() => {
|
||||
if (invoice && invoice.id) {
|
||||
changePageTitle(formatMessage({ id: 'edit_invoice' }));
|
||||
} else {
|
||||
changePageTitle(formatMessage({ id: 'new_invoice' }));
|
||||
}
|
||||
}, [changePageTitle, invoice, formatMessage]);
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
customer_id: Yup.string()
|
||||
.label(formatMessage({ id: 'customer_name_' }))
|
||||
.required(),
|
||||
invoice_date: Yup.date()
|
||||
.required()
|
||||
.label(formatMessage({ id: 'invoice_date_' })),
|
||||
due_date: Yup.date()
|
||||
.required()
|
||||
.label(formatMessage({ id: 'due_date_' })),
|
||||
invoice_no: Yup.number()
|
||||
.required()
|
||||
.label(formatMessage({ id: 'invoice_no_' })),
|
||||
reference_no: Yup.string().min(1).max(255),
|
||||
status: Yup.string().required(),
|
||||
invoice_message: Yup.string()
|
||||
.trim()
|
||||
.min(1)
|
||||
.max(1024)
|
||||
.label(formatMessage({ id: 'note' })),
|
||||
terms_conditions: Yup.string()
|
||||
.trim()
|
||||
.min(1)
|
||||
.max(1024)
|
||||
.label(formatMessage({ id: 'note' })),
|
||||
|
||||
entries: Yup.array().of(
|
||||
Yup.object().shape({
|
||||
quantity: Yup.number().nullable(),
|
||||
rate: Yup.number().nullable(),
|
||||
item_id: Yup.number()
|
||||
.nullable()
|
||||
.when(['quantity', 'rate'], {
|
||||
is: (quantity, rate) => quantity || rate,
|
||||
then: Yup.number().required(),
|
||||
}),
|
||||
discount: Yup.number().nullable(),
|
||||
description: Yup.string().nullable(),
|
||||
}),
|
||||
),
|
||||
});
|
||||
|
||||
const saveInvokeSubmit = useCallback(
|
||||
(payload) => {
|
||||
onFormSubmit && onFormSubmit(payload);
|
||||
},
|
||||
[onFormSubmit],
|
||||
);
|
||||
|
||||
const defaultInvoice = useMemo(
|
||||
() => ({
|
||||
index: 0,
|
||||
item_id: null,
|
||||
rate: null,
|
||||
discount: 0,
|
||||
quantity: null,
|
||||
description: '',
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
const defaultInitialValues = useMemo(
|
||||
() => ({
|
||||
customer_id: '',
|
||||
invoice_date: moment(new Date()).format('YYYY-MM-DD'),
|
||||
due_date: moment(new Date()).format('YYYY-MM-DD'),
|
||||
status: 'SEND',
|
||||
invoice_no: '',
|
||||
reference_no: '',
|
||||
invoice_message: '',
|
||||
terms_conditions: '',
|
||||
entries: [...repeatValue(defaultInvoice, MIN_LINES_NUMBER)],
|
||||
}),
|
||||
[defaultInvoice],
|
||||
);
|
||||
|
||||
const orderingIndex = (_invoice) => {
|
||||
return _invoice.map((item, index) => ({
|
||||
...item,
|
||||
index: index + 1,
|
||||
}));
|
||||
};
|
||||
// debugger;
|
||||
const initialValues = useMemo(
|
||||
() => ({
|
||||
...(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),
|
||||
),
|
||||
],
|
||||
}
|
||||
: {
|
||||
...defaultInitialValues,
|
||||
entries: orderingIndex(defaultInitialValues.entries),
|
||||
}),
|
||||
}),
|
||||
[invoice, defaultInitialValues, defaultInvoice],
|
||||
);
|
||||
|
||||
// const initialValues = useMemo(
|
||||
// () => ({
|
||||
// ...defaultInitialValues,
|
||||
// entries: orderingIndex(defaultInitialValues.entries),
|
||||
// }),
|
||||
// [defaultInvoice, defaultInitialValues, invoice],
|
||||
// );
|
||||
|
||||
const initialAttachmentFiles = useMemo(() => {
|
||||
return invoice && invoice.media
|
||||
? invoice.media.map((attach) => ({
|
||||
preview: attach.attachment_file,
|
||||
uploaded: true,
|
||||
metadata: { ...attach },
|
||||
}))
|
||||
: [];
|
||||
}, [invoice]);
|
||||
|
||||
const formik = useFormik({
|
||||
enableReinitialize: true,
|
||||
validationSchema,
|
||||
initialValues: {
|
||||
...initialValues,
|
||||
},
|
||||
onSubmit: async (values, { setSubmitting, setErrors, resetForm }) => {
|
||||
setSubmitting(true);
|
||||
|
||||
const entries = values.entries.filter(
|
||||
(item) => item.item_id && item.quantity,
|
||||
);
|
||||
const form = {
|
||||
...values,
|
||||
entries,
|
||||
};
|
||||
|
||||
const requestForm = { ...form };
|
||||
if (invoice && invoice.id) {
|
||||
requestEditInvoice(invoice.id, requestForm)
|
||||
.then((response) => {
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: 'the_invoice_has_been_successfully_edited',
|
||||
}),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
setSubmitting(false);
|
||||
saveInvokeSubmit({ action: 'update', ...payload });
|
||||
resetForm();
|
||||
})
|
||||
.catch((error) => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
} else {
|
||||
requestSubmitInvoice(requestForm)
|
||||
.then((response) => {
|
||||
AppToaster.show({
|
||||
message: formatMessage(
|
||||
{ id: 'the_invocie_has_been_successfully_created' },
|
||||
{ number: values.invoice_no },
|
||||
),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
setSubmitting(false);
|
||||
saveInvokeSubmit({ action: 'new', ...payload });
|
||||
resetForm();
|
||||
})
|
||||
.catch((errors) => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
const handleSubmitClick = useCallback(
|
||||
(payload) => {
|
||||
setPayload(payload);
|
||||
formik.submitForm();
|
||||
},
|
||||
[setPayload, formik],
|
||||
);
|
||||
|
||||
const handleCancelClick = useCallback(
|
||||
(payload) => {
|
||||
onCancelForm && onCancelForm(payload);
|
||||
},
|
||||
[onCancelForm],
|
||||
);
|
||||
|
||||
const handleDeleteFile = useCallback(
|
||||
(_deletedFiles) => {
|
||||
_deletedFiles.forEach((deletedFile) => {
|
||||
if (deletedFile.uploaded && deletedFile.metadata.id) {
|
||||
setDeletedFiles([...deletedFiles, deletedFile.metadata.id]);
|
||||
}
|
||||
});
|
||||
},
|
||||
[setDeletedFiles, deletedFiles],
|
||||
);
|
||||
|
||||
const handleClickAddNewRow = () => {
|
||||
formik.setFieldValue(
|
||||
'entries',
|
||||
orderingIndex([...formik.values.entries, defaultInvoice]),
|
||||
);
|
||||
};
|
||||
|
||||
const handleClearAllLines = () => {
|
||||
formik.setFieldValue(
|
||||
'entries',
|
||||
orderingIndex([...repeatValue(defaultInvoice, MIN_LINES_NUMBER)]),
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={'invoice-form'}>
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<InvoiceFormHeader formik={formik} />
|
||||
<EstimatesItemsTable
|
||||
entries={formik.values.entries}
|
||||
onClickAddNewRow={handleClickAddNewRow}
|
||||
onClickClearAllLines={handleClearAllLines}
|
||||
formik={formik}
|
||||
/>
|
||||
<FormGroup
|
||||
label={<T id={'invoice_message'} />}
|
||||
className={'form-group--customer_note'}
|
||||
>
|
||||
<TextArea
|
||||
growVertically={true}
|
||||
{...formik.getFieldProps('invoice_message')}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={<T id={'terms_conditions'} />}
|
||||
className={'form-group--terms_conditions'}
|
||||
>
|
||||
<TextArea
|
||||
growVertically={true}
|
||||
{...formik.getFieldProps('terms_conditions')}
|
||||
/>
|
||||
</FormGroup>
|
||||
<Dragzone
|
||||
initialFiles={initialAttachmentFiles}
|
||||
onDrop={handleDropFiles}
|
||||
onDeleteFile={handleDeleteFile}
|
||||
hint={'Attachments: Maxiumum size: 20MB'}
|
||||
/>
|
||||
</form>
|
||||
<InvoiceFormFooter
|
||||
formik={formik}
|
||||
onSubmitClick={handleSubmitClick}
|
||||
invoice={invoice}
|
||||
onCancelClick={handleCancelClick}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withInvoiceActions,
|
||||
withDashboardActions,
|
||||
withMediaActions,
|
||||
withInvoiceDetail(),
|
||||
)(InvoiceForm);
|
||||
52
client/src/containers/Sales/Invoice/InvoiceFormFooter.js
Normal file
52
client/src/containers/Sales/Invoice/InvoiceFormFooter.js
Normal file
@@ -0,0 +1,52 @@
|
||||
import React from 'react';
|
||||
import { Intent, Button } from '@blueprintjs/core';
|
||||
import { FormattedMessage as T } from 'react-intl';
|
||||
|
||||
export default function EstimateFormFooter({
|
||||
formik: { isSubmitting },
|
||||
onSubmitClick,
|
||||
onCancelClick,
|
||||
invoice,
|
||||
}) {
|
||||
return (
|
||||
<div className={'estimate-form__floating-footer'}>
|
||||
<Button
|
||||
disabled={isSubmitting}
|
||||
intent={Intent.PRIMARY}
|
||||
type="submit"
|
||||
onClick={() => {
|
||||
onSubmitClick({ redirect: true });
|
||||
}}
|
||||
>
|
||||
{invoice && invoice.id ? <T id={'edit'} /> : <T id={'save_send'} />}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
disabled={isSubmitting}
|
||||
intent={Intent.PRIMARY}
|
||||
className={'ml1'}
|
||||
name={'save'}
|
||||
type="submit"
|
||||
onClick={() => {
|
||||
onSubmitClick({ redirect: false });
|
||||
}}
|
||||
>
|
||||
<T id={'save'} />
|
||||
</Button>
|
||||
|
||||
<Button className={'ml1'} disabled={isSubmitting}>
|
||||
<T id={'clear'} />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
className={'ml1'}
|
||||
type="submit"
|
||||
onClick={() => {
|
||||
onCancelClick && onCancelClick();
|
||||
}}
|
||||
>
|
||||
<T id={'close'} />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
177
client/src/containers/Sales/Invoice/InvoiceFormHeader.js
Normal file
177
client/src/containers/Sales/Invoice/InvoiceFormHeader.js
Normal file
@@ -0,0 +1,177 @@
|
||||
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 { Row, Col } from 'react-grid-system';
|
||||
import moment from 'moment';
|
||||
import { momentFormatter, compose, tansformDateValue } from 'utils';
|
||||
import classNames from 'classnames';
|
||||
import { ListSelect, ErrorMessage, FieldRequiredHint, Hint } from 'components';
|
||||
|
||||
import withCustomers from 'containers/Customers/withCustomers';
|
||||
|
||||
function InvoiceFormHeader({
|
||||
formik: { errors, touched, setFieldValue, getFieldProps, values },
|
||||
|
||||
//#withCustomers
|
||||
customers,
|
||||
}) {
|
||||
const handleDateChange = useCallback(
|
||||
(date_filed) => (date) => {
|
||||
const formatted = moment(date).format('YYYY-MM-DD');
|
||||
setFieldValue(date_filed, formatted);
|
||||
},
|
||||
[setFieldValue],
|
||||
);
|
||||
|
||||
const CustomerRenderer = useCallback(
|
||||
(cutomer, { handleClick }) => (
|
||||
<MenuItem
|
||||
key={cutomer.id}
|
||||
text={cutomer.display_name}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
),
|
||||
[],
|
||||
);
|
||||
|
||||
// Filter Customer
|
||||
const filterCustomer = (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
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// handle change customer
|
||||
const onChangeCustomer = useCallback(
|
||||
(filedName) => {
|
||||
return (customer) => {
|
||||
setFieldValue(filedName, customer.id);
|
||||
};
|
||||
},
|
||||
[setFieldValue],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={'invoice-form'}>
|
||||
<div className={'invoice__primary-section'}>
|
||||
{/* 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={CustomerRenderer}
|
||||
itemPredicate={filterCustomer}
|
||||
popoverProps={{ minimal: true }}
|
||||
onItemSelect={onChangeCustomer('customer_id')}
|
||||
selectedItem={values.customer_id}
|
||||
selectedItemProp={'id'}
|
||||
defaultText={<T id={'select_customer_account'} />}
|
||||
labelProp={'display_name'}
|
||||
/>
|
||||
</FormGroup>
|
||||
<Row>
|
||||
<Col>
|
||||
<FormGroup
|
||||
label={<T id={'invoice_date'} />}
|
||||
inline={true}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
className={classNames('form-group--select-list', Classes.FILL)}
|
||||
intent={
|
||||
errors.invoice_date && touched.invoice_date && Intent.DANGER
|
||||
}
|
||||
helperText={
|
||||
<ErrorMessage name="invoice_date" {...{ errors, touched }} />
|
||||
}
|
||||
>
|
||||
<DateInput
|
||||
{...momentFormatter('YYYY/MM/DD')}
|
||||
value={tansformDateValue(values.invoice_date)}
|
||||
onChange={handleDateChange('invoice_date')}
|
||||
popoverProps={{ position: Position.BOTTOM, minimal: true }}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col>
|
||||
<FormGroup
|
||||
label={<T id={'due_date'} />}
|
||||
inline={true}
|
||||
className={classNames('form-group--select-list', Classes.FILL)}
|
||||
intent={errors.due_date && touched.due_date && Intent.DANGER}
|
||||
helperText={
|
||||
<ErrorMessage name="due_date" {...{ errors, touched }} />
|
||||
}
|
||||
>
|
||||
<DateInput
|
||||
{...momentFormatter('YYYY/MM/DD')}
|
||||
value={tansformDateValue(values.due_date)}
|
||||
onChange={handleDateChange('due_date')}
|
||||
popoverProps={{ position: Position.BOTTOM, minimal: true }}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
{/* invoice */}
|
||||
<FormGroup
|
||||
label={<T id={'invoice_no'} />}
|
||||
inline={true}
|
||||
className={('form-group--estimate', Classes.FILL)}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
intent={errors.invoice_no && touched.invoice_no && Intent.DANGER}
|
||||
helperText={
|
||||
<ErrorMessage name="invoice_no" {...{ errors, touched }} />
|
||||
}
|
||||
>
|
||||
<InputGroup
|
||||
intent={errors.invoice_no && touched.invoice_no && Intent.DANGER}
|
||||
minimal={true}
|
||||
{...getFieldProps('invoice_no')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<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,
|
||||
})),
|
||||
)(InvoiceFormHeader);
|
||||
177
client/src/containers/Sales/Invoice/InvoiceList.js
Normal file
177
client/src/containers/Sales/Invoice/InvoiceList.js
Normal file
@@ -0,0 +1,177 @@
|
||||
import React, { useEffect, useCallback, useMemo, useState } from 'react';
|
||||
import { Route, Switch, useHistory } from 'react-router-dom';
|
||||
import { useQuery, queryCache } from 'react-query';
|
||||
import { Alert, Intent } from '@blueprintjs/core';
|
||||
|
||||
import AppToaster from 'components/AppToaster';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
|
||||
import InvoicesDataTable from './InvoicesDataTable';
|
||||
import InvoiceActionsBar from './InvoiceActionsBar';
|
||||
import InvoiceViewTabs from './InvoiceViewTabs';
|
||||
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
import withResourceActions from 'containers/Resources/withResourcesActions';
|
||||
import withInvoices from './withInvoices';
|
||||
import withInvoiceActions from './withInvoiceActions';
|
||||
import withViewsActions from 'containers/Views/withViewsActions';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
function InvoiceList({
|
||||
// #withDashboardActions
|
||||
changePageTitle,
|
||||
|
||||
// #withViewsActions
|
||||
requestFetchResourceViews,
|
||||
requestFetchResourceFields,
|
||||
|
||||
//#withInvoice
|
||||
invoicesTableQuery,
|
||||
invoicesViews,
|
||||
|
||||
//#withInvoiceActions
|
||||
requestFetchInvoiceTable,
|
||||
requestDeleteInvoice,
|
||||
addInvoiceTableQueries,
|
||||
}) {
|
||||
const history = useHistory();
|
||||
const { formatMessage } = useIntl();
|
||||
const [deleteInvoice, setDeleteInvoice] = useState(false);
|
||||
const [selectedRows, setSelectedRows] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
changePageTitle(formatMessage({ id: 'invoice_list' }));
|
||||
}, [changePageTitle, formatMessage]);
|
||||
|
||||
const fetchResourceViews = useQuery(
|
||||
['resource-views', 'sales_invoices'],
|
||||
(key, resourceName) => requestFetchResourceViews(resourceName),
|
||||
);
|
||||
|
||||
const fetchResourceFields = useQuery(
|
||||
['resource-fields', 'sales_invoices'],
|
||||
(key, resourceName) => requestFetchResourceFields(resourceName),
|
||||
);
|
||||
|
||||
const fetchInvoices = useQuery(['invoices-table', invoicesTableQuery], () =>
|
||||
requestFetchInvoiceTable(),
|
||||
);
|
||||
//handle dalete Invoice
|
||||
const handleDeleteInvoice = useCallback(
|
||||
(invoice) => {
|
||||
setDeleteInvoice(invoice);
|
||||
},
|
||||
[setDeleteInvoice],
|
||||
);
|
||||
|
||||
// handle cancel Invoice
|
||||
const handleCancelInvoiceDelete = useCallback(() => {
|
||||
setDeleteInvoice(false);
|
||||
}, [setDeleteInvoice]);
|
||||
|
||||
// handleConfirm delete invoice
|
||||
const handleConfirmInvoiceDelete = useCallback(() => {
|
||||
requestDeleteInvoice(deleteInvoice.id).then(() => {
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: 'the_invocie_has_been_successfully_deleted',
|
||||
}),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
setDeleteInvoice(false);
|
||||
});
|
||||
}, [deleteInvoice, requestDeleteInvoice, formatMessage]);
|
||||
|
||||
const handleEditInvoice = useCallback((invoice) => {
|
||||
history.push(`/invoices/${invoice.id}/edit`);
|
||||
});
|
||||
|
||||
// Calculates the selected rows count.
|
||||
const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
|
||||
selectedRows,
|
||||
]);
|
||||
|
||||
const handleFetchData = useCallback(
|
||||
({ pageIndex, pageSize, sortBy }) => {
|
||||
const page = pageIndex + 1;
|
||||
|
||||
addInvoiceTableQueries({
|
||||
...(sortBy.length > 0
|
||||
? {
|
||||
column_sort_by: sortBy[0].id,
|
||||
sort_order: sortBy[0].desc ? 'desc' : 'asc',
|
||||
}
|
||||
: {}),
|
||||
page_size: pageSize,
|
||||
page,
|
||||
});
|
||||
},
|
||||
[addInvoiceTableQueries],
|
||||
);
|
||||
|
||||
// Handle filter change to re-fetch data-table.
|
||||
const handleFilterChanged = useCallback(() => {}, [fetchInvoices]);
|
||||
|
||||
// Handle selected rows change.
|
||||
const handleSelectedRowsChange = useCallback(
|
||||
(_invoices) => {
|
||||
setSelectedRows(_invoices);
|
||||
},
|
||||
[setSelectedRows],
|
||||
);
|
||||
return (
|
||||
<DashboardInsider
|
||||
loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
|
||||
name={'sales_invoices'}
|
||||
>
|
||||
<InvoiceActionsBar
|
||||
// onBulkDelete={}
|
||||
selectedRows={selectedRows}
|
||||
onFilterChanged={handleFilterChanged}
|
||||
/>
|
||||
<DashboardPageContent>
|
||||
<Switch>
|
||||
<Route
|
||||
exact={true}
|
||||
path={['/invoices/:custom_view_id/custom_view', '/invoices']}
|
||||
>
|
||||
<InvoiceViewTabs />
|
||||
<InvoicesDataTable
|
||||
loading={fetchInvoices.isFetching}
|
||||
onDeleteInvoice={handleDeleteInvoice}
|
||||
onFetchData={handleFetchData}
|
||||
onEditInvoice={handleEditInvoice}
|
||||
onSelectedRowsChange={handleSelectedRowsChange}
|
||||
/>
|
||||
</Route>
|
||||
</Switch>
|
||||
<Alert
|
||||
cancelButtonText={<T id={'cancel'} />}
|
||||
confirmButtonText={<T id={'delete'} />}
|
||||
icon={'trash'}
|
||||
intent={Intent.DANGER}
|
||||
isOpen={deleteInvoice}
|
||||
onCancel={handleCancelInvoiceDelete}
|
||||
onConfirm={handleConfirmInvoiceDelete}
|
||||
>
|
||||
<p>
|
||||
<T id={'once_delete_this_invoice_you_will_able_to_restore_it'} />
|
||||
</p>
|
||||
</Alert>
|
||||
</DashboardPageContent>
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withResourceActions,
|
||||
withInvoiceActions,
|
||||
withDashboardActions,
|
||||
withViewsActions,
|
||||
withInvoices(({ invoicesTableQuery }) => ({
|
||||
invoicesTableQuery,
|
||||
})),
|
||||
)(InvoiceList);
|
||||
113
client/src/containers/Sales/Invoice/InvoiceViewTabs.js
Normal file
113
client/src/containers/Sales/Invoice/InvoiceViewTabs.js
Normal file
@@ -0,0 +1,113 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { useHistory } from 'react-router';
|
||||
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
|
||||
import { useParams, withRouter } from 'react-router-dom';
|
||||
import { connect } from 'react-redux';
|
||||
import { pick, debounce } from 'lodash';
|
||||
|
||||
import { DashboardViewsTabs } from 'components';
|
||||
import { useUpdateEffect } from 'hooks';
|
||||
|
||||
import withInvoices from './withInvoices';
|
||||
import withInvoiceActions from './withInvoiceActions';
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
import withViewDetails from 'containers/Views/withViewDetails';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
function InvoiceViewTabs({
|
||||
//#withInvoices
|
||||
invoicesViews,
|
||||
|
||||
// #withViewDetails
|
||||
viewItem,
|
||||
|
||||
//#withInvoiceActions
|
||||
changeInvoiceView,
|
||||
addInvoiceTableQueries,
|
||||
|
||||
// #withDashboardActions
|
||||
setTopbarEditView,
|
||||
changePageSubtitle,
|
||||
|
||||
// #ownProps
|
||||
customViewChanged,
|
||||
onViewChanged,
|
||||
}) {
|
||||
const history = useHistory();
|
||||
const { custom_view_id: customViewId = null } = useParams();
|
||||
|
||||
useEffect(() => {
|
||||
changeInvoiceView(customViewId || -1);
|
||||
setTopbarEditView(customViewId);
|
||||
changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
|
||||
|
||||
addInvoiceTableQueries({
|
||||
custom_view_id: customViewId,
|
||||
});
|
||||
return () => {
|
||||
setTopbarEditView(null);
|
||||
changePageSubtitle('');
|
||||
changeInvoiceView(null);
|
||||
};
|
||||
}, [customViewId, addInvoiceTableQueries, changeInvoiceView]);
|
||||
|
||||
useUpdateEffect(() => {
|
||||
onViewChanged && onViewChanged(customViewId);
|
||||
}, [customViewId]);
|
||||
|
||||
|
||||
|
||||
const debounceChangeHistory = useRef(
|
||||
debounce((toUrl) => {
|
||||
history.push(toUrl);
|
||||
}, 250),
|
||||
);
|
||||
|
||||
const handleTabsChange = (viewId) => {
|
||||
const toPath = viewId ? `${viewId}/custom_view` : '';
|
||||
debounceChangeHistory.current(`/invoices/${toPath}`);
|
||||
setTopbarEditView(viewId);
|
||||
};
|
||||
const tabs = invoicesViews.map((view) => ({
|
||||
...pick(view, ['name', 'id']),
|
||||
}));
|
||||
|
||||
// Handle click a new view tab.
|
||||
const handleClickNewView = () => {
|
||||
setTopbarEditView(null);
|
||||
history.push('/custom_views/invoices/new');
|
||||
};
|
||||
console.log(invoicesViews, 'invoicesViews');
|
||||
|
||||
return (
|
||||
<Navbar className={'navbar--dashboard-views'}>
|
||||
<NavbarGroup align={Alignment.LEFT}>
|
||||
<DashboardViewsTabs
|
||||
initialViewId={customViewId}
|
||||
baseUrl={'/invoices'}
|
||||
tabs={tabs}
|
||||
onNewViewTabClick={handleClickNewView}
|
||||
onChange={handleTabsChange}
|
||||
/>
|
||||
</NavbarGroup>
|
||||
</Navbar>
|
||||
);
|
||||
}
|
||||
|
||||
const mapStateToProps = (state, ownProps) => ({
|
||||
viewId: ownProps.match.params.custom_view_id,
|
||||
});
|
||||
|
||||
const withInvoicesViewTabs = connect(mapStateToProps);
|
||||
|
||||
export default compose(
|
||||
withRouter,
|
||||
withInvoicesViewTabs,
|
||||
withInvoiceActions,
|
||||
withDashboardActions,
|
||||
withViewDetails(),
|
||||
withInvoices(({ invoicesViews }) => ({
|
||||
invoicesViews,
|
||||
})),
|
||||
)(InvoiceViewTabs);
|
||||
68
client/src/containers/Sales/Invoice/Invoices.js
Normal file
68
client/src/containers/Sales/Invoice/Invoices.js
Normal file
@@ -0,0 +1,68 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import { useParams, useHistory } from 'react-router-dom';
|
||||
import { useQuery } from 'react-query';
|
||||
|
||||
import InvoiceForm from './InvoiceForm';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
|
||||
import withCustomersActions from 'containers/Customers/withCustomersActions';
|
||||
import withItemsActions from 'containers/Items/withItemsActions';
|
||||
import withInvoiceActions from './withInvoiceActions';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
function Invoices({
|
||||
requestFetchCustomers,
|
||||
requestFetchItems,
|
||||
requsetFetchInvoice,
|
||||
}) {
|
||||
const history = useHistory();
|
||||
const { id } = useParams();
|
||||
|
||||
// Handle fetch Items data table or list
|
||||
const fetchItems = useQuery('items-table', () => requestFetchItems({}));
|
||||
|
||||
const handleFormSubmit = useCallback(
|
||||
(payload) => {
|
||||
payload.redirect && history.push('/invoices');
|
||||
},
|
||||
[history],
|
||||
);
|
||||
// Handle fetch customers data table or list
|
||||
const fetchCustomers = useQuery('customers-table', () =>
|
||||
requestFetchCustomers({}),
|
||||
);
|
||||
|
||||
const fetchInvoice = useQuery(
|
||||
['invoice', id],
|
||||
(key, _id) => requsetFetchInvoice(_id),
|
||||
{ enabled: !!id },
|
||||
);
|
||||
|
||||
const handleCancel = useCallback(() => {
|
||||
history.goBack();
|
||||
}, [history]);
|
||||
|
||||
return (
|
||||
<DashboardInsider
|
||||
loading={
|
||||
fetchCustomers.isFetching ||
|
||||
fetchItems.isFetching ||
|
||||
fetchInvoice.isFetching
|
||||
}
|
||||
name={'invoice-form'}
|
||||
>
|
||||
<InvoiceForm
|
||||
onFormSubmit={handleFormSubmit}
|
||||
invoiceId={id}
|
||||
onCancelForm={handleCancel}
|
||||
/>
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withInvoiceActions,
|
||||
withCustomersActions,
|
||||
withItemsActions,
|
||||
)(Invoices);
|
||||
254
client/src/containers/Sales/Invoice/InvoicesDataTable.js
Normal file
254
client/src/containers/Sales/Invoice/InvoicesDataTable.js
Normal file
@@ -0,0 +1,254 @@
|
||||
import React, { useEffect, useCallback, useState, useMemo } from 'react';
|
||||
import {
|
||||
Intent,
|
||||
Button,
|
||||
Classes,
|
||||
Popover,
|
||||
Menu,
|
||||
MenuItem,
|
||||
MenuDivider,
|
||||
Position,
|
||||
} from '@blueprintjs/core';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { withRouter } from 'react-router';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import moment from 'moment';
|
||||
|
||||
import { compose } from 'utils';
|
||||
import { useUpdateEffect } from 'hooks';
|
||||
|
||||
import LoadingIndicator from 'components/LoadingIndicator';
|
||||
import { DataTable, Money, Icon } from 'components';
|
||||
|
||||
import withDialogActions from 'containers/Dialog/withDialogActions';
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
import withViewDetails from 'containers/Views/withViewDetails';
|
||||
|
||||
import withInvoices from './withInvoices';
|
||||
import withInvoiceActions from './withInvoiceActions';
|
||||
import withCurrentView from 'containers/Views/withCurrentView';
|
||||
|
||||
function InvoicesDataTable({
|
||||
//#withInvoices
|
||||
invoicesCurrentPage,
|
||||
invoicesLoading,
|
||||
invoicesPageination,
|
||||
invoicesItems,
|
||||
|
||||
// #withDashboardActions
|
||||
changeCurrentView,
|
||||
changePageSubtitle,
|
||||
setTopbarEditView,
|
||||
|
||||
// #withView
|
||||
viewMeta,
|
||||
|
||||
//#OwnProps
|
||||
loading,
|
||||
onFetchData,
|
||||
onEditInvoice,
|
||||
onDeleteInvoice,
|
||||
onSelectedRowsChange,
|
||||
}) {
|
||||
const [initialMount, setInitialMount] = useState(false);
|
||||
const { custom_view_id: customViewId } = useParams();
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
useEffect(() => {
|
||||
setInitialMount(false);
|
||||
}, [customViewId]);
|
||||
|
||||
useUpdateEffect(() => {
|
||||
if (!invoicesLoading) {
|
||||
setInitialMount(true);
|
||||
}
|
||||
}, [invoicesLoading, setInitialMount]);
|
||||
|
||||
// useEffect(() => {
|
||||
// if (customViewId) {
|
||||
// changeCurrentView(customViewId);
|
||||
// setTopbarEditView(customViewId);
|
||||
// }
|
||||
// changePageSubtitle(customViewId && viewMeta ? viewMeta.name : '');
|
||||
// }, [
|
||||
// customViewId,
|
||||
// changeCurrentView,
|
||||
// changePageSubtitle,
|
||||
// setTopbarEditView,
|
||||
// viewMeta,
|
||||
// ]);
|
||||
|
||||
const handleEditInvoice = useCallback(
|
||||
(_invoice) => () => {
|
||||
onEditInvoice && onEditInvoice(_invoice);
|
||||
},
|
||||
[onEditInvoice],
|
||||
);
|
||||
|
||||
const handleDeleteInvoice = useCallback(
|
||||
(_invoice) => () => {
|
||||
onDeleteInvoice && onDeleteInvoice(_invoice);
|
||||
},
|
||||
[onDeleteInvoice],
|
||||
);
|
||||
|
||||
const actionMenuList = useCallback(
|
||||
(invoice) => (
|
||||
<Menu>
|
||||
<MenuItem text={formatMessage({ id: 'view_details' })} />
|
||||
<MenuDivider />
|
||||
<MenuItem
|
||||
text={formatMessage({ id: 'edit_invoice' })}
|
||||
onClick={handleEditInvoice(invoice)}
|
||||
/>
|
||||
<MenuItem
|
||||
text={formatMessage({ id: 'delete_invoice' })}
|
||||
intent={Intent.DANGER}
|
||||
onClick={handleDeleteInvoice(invoice)}
|
||||
icon={<Icon icon="trash-16" iconSize={16} />}
|
||||
/>
|
||||
</Menu>
|
||||
),
|
||||
[handleDeleteInvoice, handleEditInvoice, formatMessage],
|
||||
);
|
||||
|
||||
const onRowContextMenu = useCallback(
|
||||
(cell) => {
|
||||
return actionMenuList(cell.row.original);
|
||||
},
|
||||
[actionMenuList],
|
||||
);
|
||||
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
id: 'invoice_date',
|
||||
Header: formatMessage({ id: 'invoice_date' }),
|
||||
accessor: (r) => moment(r.invoice_date).format('YYYY MMM DD'),
|
||||
width: 140,
|
||||
className: 'invoice_date',
|
||||
},
|
||||
{
|
||||
id: 'customer_id',
|
||||
Header: formatMessage({ id: 'customer_name' }),
|
||||
accessor: 'customer.display_name',
|
||||
width: 140,
|
||||
className: 'customer_id',
|
||||
},
|
||||
{
|
||||
id: 'invoice_no',
|
||||
Header: formatMessage({ id: 'invoice_no__' }),
|
||||
accessor: (row) => `#${row.invoice_no}`,
|
||||
width: 140,
|
||||
className: 'invoice_no',
|
||||
},
|
||||
|
||||
{
|
||||
id: 'due_date',
|
||||
Header: formatMessage({ id: 'due_date' }),
|
||||
accessor: (r) => moment(r.due_date).format('YYYY MMM DD'),
|
||||
width: 140,
|
||||
className: 'due_date',
|
||||
},
|
||||
{
|
||||
id: 'balance',
|
||||
Header: formatMessage({ id: 'balance' }),
|
||||
accessor: (r) => <Money amount={r.balance} currency={'USD'} />,
|
||||
width: 140,
|
||||
className: 'balance',
|
||||
},
|
||||
{
|
||||
id: 'reference_no',
|
||||
Header: formatMessage({ id: 'reference_no' }),
|
||||
accessor: 'reference_no',
|
||||
width: 140,
|
||||
className: 'reference_no',
|
||||
},
|
||||
{
|
||||
id: 'status',
|
||||
Header: formatMessage({ id: 'status' }),
|
||||
accessor: 'status',
|
||||
width: 140,
|
||||
className: 'status',
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
Header: '',
|
||||
Cell: ({ cell }) => (
|
||||
<Popover
|
||||
content={actionMenuList(cell.row.original)}
|
||||
position={Position.RIGHT_BOTTOM}
|
||||
>
|
||||
<Button icon={<Icon icon="more-h-16" iconSize={16} />} />
|
||||
</Popover>
|
||||
),
|
||||
className: 'actions',
|
||||
width: 50,
|
||||
disableResizing: true,
|
||||
},
|
||||
],
|
||||
[actionMenuList, formatMessage],
|
||||
);
|
||||
|
||||
const handleDataTableFetchData = useCallback(
|
||||
(...args) => {
|
||||
onFetchData && onFetchData(...args);
|
||||
},
|
||||
[onFetchData],
|
||||
);
|
||||
const handleSelectedRowsChange = useCallback(
|
||||
(selectedRows) => {
|
||||
onSelectedRowsChange &&
|
||||
onSelectedRowsChange(selectedRows.map((s) => s.original));
|
||||
},
|
||||
[onSelectedRowsChange],
|
||||
);
|
||||
|
||||
const selectionColumn = useMemo(
|
||||
() => ({
|
||||
minWidth: 40,
|
||||
width: 40,
|
||||
maxWidth: 40,
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<LoadingIndicator loading={loading} mount={false}>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={invoicesCurrentPage}
|
||||
onFetchData={handleDataTableFetchData}
|
||||
manualSortBy={true}
|
||||
selectionColumn={true}
|
||||
noInitialFetch={true}
|
||||
sticky={true}
|
||||
loading={invoicesLoading && !initialMount}
|
||||
onSelectedRowsChange={handleSelectedRowsChange}
|
||||
rowContextMenu={onRowContextMenu}
|
||||
pagination={true}
|
||||
pagesCount={invoicesPageination.pagesCount}
|
||||
initialPageSize={invoicesPageination.pageSize}
|
||||
initialPageIndex={invoicesPageination.page - 1}
|
||||
/>
|
||||
</LoadingIndicator>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withRouter,
|
||||
withCurrentView,
|
||||
withDialogActions,
|
||||
withDashboardActions,
|
||||
withInvoiceActions,
|
||||
withInvoices(
|
||||
({ invoicesCurrentPage, invoicesLoading, invoicesPageination }) => ({
|
||||
invoicesCurrentPage,
|
||||
invoicesLoading,
|
||||
invoicesPageination,
|
||||
}),
|
||||
),
|
||||
withViewDetails(),
|
||||
)(InvoicesDataTable);
|
||||
31
client/src/containers/Sales/Invoice/withInvoiceActions.js
Normal file
31
client/src/containers/Sales/Invoice/withInvoiceActions.js
Normal file
@@ -0,0 +1,31 @@
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
submitInvoice,
|
||||
editInvoice,
|
||||
deleteInvoice,
|
||||
fetchInvoice,
|
||||
fetchInvoicesTable,
|
||||
} from 'store/Invoice/invoices.actions';
|
||||
import t from 'store/types';
|
||||
|
||||
const mapDipatchToProps = (dispatch) => ({
|
||||
requestSubmitInvoice: (form) => dispatch(submitInvoice({ form })),
|
||||
requsetFetchInvoice: (id) => dispatch(fetchInvoice({ id })),
|
||||
requestEditInvoice: (id, form) => dispatch(editInvoice( id, form )),
|
||||
requestFetchInvoiceTable: (query = {}) =>
|
||||
dispatch(fetchInvoicesTable({ query: { ...query } })),
|
||||
requestDeleteInvoice: (id) => dispatch(deleteInvoice({ id })),
|
||||
|
||||
changeInvoiceView: (id) =>
|
||||
dispatch({
|
||||
type: t.INVOICES_SET_CURRENT_VIEW,
|
||||
currentViewId: parseInt(id, 10),
|
||||
}),
|
||||
addInvoiceTableQueries: (_queries) =>
|
||||
dispatch({
|
||||
type: t.INVOICES_TABLE_QUERIES_ADD,
|
||||
_queries,
|
||||
}),
|
||||
});
|
||||
|
||||
export default connect(null, mapDipatchToProps);
|
||||
11
client/src/containers/Sales/Invoice/withInvoiceDetail.js
Normal file
11
client/src/containers/Sales/Invoice/withInvoiceDetail.js
Normal file
@@ -0,0 +1,11 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { getInvoiecsByIdFactory } from 'store/Invoice/invoices.selector';
|
||||
|
||||
export default () => {
|
||||
const getInvoiceById = getInvoiecsByIdFactory();
|
||||
|
||||
const mapStateToProps = (state, props) => ({
|
||||
invoice: getInvoiceById(state, props),
|
||||
});
|
||||
return connect(mapStateToProps);
|
||||
};
|
||||
28
client/src/containers/Sales/Invoice/withInvoices.js
Normal file
28
client/src/containers/Sales/Invoice/withInvoices.js
Normal file
@@ -0,0 +1,28 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { getResourceViews } from 'store/customViews/customViews.selectors';
|
||||
import {
|
||||
getInvoiceCurrentPageFactory,
|
||||
getInvoicePaginationMetaFactory,
|
||||
getInvoiceTableQueryFactory,
|
||||
} from 'store/Invoice/invoices.selector';
|
||||
|
||||
export default (mapState) => {
|
||||
const getInvoicesItems = getInvoiceCurrentPageFactory();
|
||||
const getInvoicesPaginationMeta = getInvoicePaginationMetaFactory();
|
||||
const getInvoiceTableQuery = getInvoiceTableQueryFactory();
|
||||
|
||||
const mapStateToProps = (state, props) => {
|
||||
const query = getInvoiceTableQuery(state, props);
|
||||
|
||||
const mapped = {
|
||||
invoicesCurrentPage: getInvoicesItems(state, props, query),
|
||||
invoicesViews: getResourceViews(state, props, 'sales_invoices'),
|
||||
invoicesItems: state.sales_invoices.items,
|
||||
invoicesTableQuery: query,
|
||||
invoicesPageination: getInvoicesPaginationMeta(state, props, query),
|
||||
invoicesLoading: state.sales_invoices.loading,
|
||||
};
|
||||
return mapState ? mapState(mapped, state, props) : mapped;
|
||||
};
|
||||
return connect(mapStateToProps);
|
||||
};
|
||||
Reference in New Issue
Block a user