mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-17 21:30:31 +00:00
WIP/ Feature : Estimate & Receipt & Bill & Invoice
This commit is contained in:
elforjani3
@@ -4,7 +4,7 @@ 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 { compose, formattedAmount } from 'utils';
|
||||
import {
|
||||
InputGroupCell,
|
||||
MoneyFieldCell,
|
||||
@@ -176,7 +176,7 @@ function EstimateTable({
|
||||
setFieldValue(
|
||||
'entries',
|
||||
newRow.map((row) => ({
|
||||
...omit(row),
|
||||
...omit(row, ['total']),
|
||||
})),
|
||||
);
|
||||
},
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useMemo, useCallback } from 'react';
|
||||
import React, { useMemo, useCallback, useState } from 'react';
|
||||
import Icon from 'components/Icon';
|
||||
import {
|
||||
Button,
|
||||
@@ -14,9 +14,9 @@ import {
|
||||
} from '@blueprintjs/core';
|
||||
import classNames from 'classnames';
|
||||
import { useRouteMatch, useHistory } from 'react-router-dom';
|
||||
import { FormattedMessage as T } from 'react-intl';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
|
||||
import { If } from 'components';
|
||||
import { If, DashboardActionViewsList } from 'components';
|
||||
import FilterDropdown from 'components/FilterDropdown';
|
||||
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
|
||||
|
||||
@@ -41,37 +41,60 @@ function EstimateActionsBar({
|
||||
|
||||
// #own Porps
|
||||
onFilterChanged,
|
||||
selectedRows,
|
||||
selectedRows = [],
|
||||
}) {
|
||||
const { path } = useRouteMatch();
|
||||
const history = useHistory();
|
||||
const [filterCount, setFilterCount] = useState(0);
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
const onClickNewEstimate = useCallback(() => {
|
||||
// history.push('/estimates/new');
|
||||
history.push('/estimates/new');
|
||||
}, [history]);
|
||||
|
||||
const filterDropdown = FilterDropdown({
|
||||
initialCondition: {
|
||||
fieldKey: '',
|
||||
compatator: '',
|
||||
value: '',
|
||||
},
|
||||
fields: resourceFields,
|
||||
onFilterChange: (filterConditions) => {
|
||||
addEstimatesTableQueries({
|
||||
filter_roles: filterConditions || '',
|
||||
});
|
||||
onFilterChanged && onFilterChange(filterConditions);
|
||||
},
|
||||
});
|
||||
// const filterDropdown = FilterDropdown({
|
||||
// fields: resourceFields,
|
||||
// initialCondition: {
|
||||
// fieldKey: 'estimate_number',
|
||||
// compatator: 'contains',
|
||||
// value: '',
|
||||
// },
|
||||
// onFilterChange: (filterConditions) => {
|
||||
// setFilterCount(filterConditions.length || 0);
|
||||
// addEstimatesTableQueries({
|
||||
// filter_roles: filterConditions || '',
|
||||
// });
|
||||
// onFilterChanged && onFilterChanged(filterConditions);
|
||||
// },
|
||||
// });
|
||||
|
||||
const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
|
||||
selectedRows,
|
||||
]);
|
||||
|
||||
const viewsMenuItems = estimateViews.map((view) => {
|
||||
return (
|
||||
<MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<DashboardActionsBar>
|
||||
<NavbarGroup>
|
||||
<Popover
|
||||
content={<Menu>{viewsMenuItems}</Menu>}
|
||||
minimal={true}
|
||||
interactionKind={PopoverInteractionKind.HOVER}
|
||||
position={Position.BOTTOM_LEFT}
|
||||
>
|
||||
<Button
|
||||
className={classNames(Classes.MINIMAL, 'button--table-views')}
|
||||
icon={<Icon icon="table-16" iconSize={16} />}
|
||||
text={<T id={'table_views'} />}
|
||||
rightIcon={'caret-down'}
|
||||
/>
|
||||
</Popover>
|
||||
|
||||
<NavbarDivider />
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
@@ -81,13 +104,19 @@ function EstimateActionsBar({
|
||||
/>
|
||||
<Popover
|
||||
minimal={true}
|
||||
content={filterDropdown}
|
||||
// content={filterDropdown}
|
||||
interactionKind={PopoverInteractionKind.CLICK}
|
||||
position={Position.BOTTOM_LEFT}
|
||||
>
|
||||
<Button
|
||||
className={classNames(Classes.MINIMAL, 'button--filter')}
|
||||
text={'Filter'}
|
||||
text={
|
||||
filterCount <= 0 ? (
|
||||
<T id={'filter'} />
|
||||
) : (
|
||||
`${filterCount} ${formatMessage({ id: 'filters_applied' })}`
|
||||
)
|
||||
}
|
||||
icon={<Icon icon={'filter-16'} iconSize={16} />}
|
||||
/>
|
||||
</Popover>
|
||||
@@ -122,7 +151,7 @@ function EstimateActionsBar({
|
||||
}
|
||||
|
||||
const mapStateToProps = (state, props) => ({
|
||||
resourceName: 'estimates',
|
||||
resourceName: 'sales_estimates',
|
||||
});
|
||||
|
||||
const withEstimateActionsBar = connect(mapStateToProps);
|
||||
@@ -130,11 +159,11 @@ const withEstimateActionsBar = connect(mapStateToProps);
|
||||
export default compose(
|
||||
withEstimateActionsBar,
|
||||
withDialogActions,
|
||||
withEstimates(({ estimateViews }) => ({
|
||||
estimateViews,
|
||||
})),
|
||||
withResourceDetail(({ resourceFields }) => ({
|
||||
resourceFields,
|
||||
})),
|
||||
// withEstimate(({ estimateViews }) => ({
|
||||
// estimateViews,
|
||||
// })),
|
||||
withEstimateActions,
|
||||
)(EstimateActionsBar);
|
||||
|
||||
@@ -11,20 +11,22 @@ 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, omitBy, omit } from 'lodash';
|
||||
import { pick, omit } from 'lodash';
|
||||
import { queryCache } from 'react-query';
|
||||
|
||||
import EstimateFormHeader from './EstimateFormHeader';
|
||||
import EstimatesItemsTable from './EntriesItemsTable';
|
||||
import EstimateFormFooter from './EstimateFormFooter';
|
||||
|
||||
import withEstimateActions from './withEstimateActions';
|
||||
import withEstimateDetail from './withEstimateDetail';
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
import withMediaActions from 'containers/Media/withMediaActions';
|
||||
|
||||
import AppToaster from 'components/AppToaster';
|
||||
import Dragzone from 'components/Dragzone';
|
||||
|
||||
import useMedia from 'hooks/useMedia';
|
||||
|
||||
import { compose, repeatValue } from 'utils';
|
||||
|
||||
const MIN_LINES_NUMBER = 4;
|
||||
@@ -51,7 +53,7 @@ const EstimateForm = ({
|
||||
onCancelForm,
|
||||
}) => {
|
||||
const { formatMessage } = useIntl();
|
||||
const [payload, setPaload] = useState({});
|
||||
const [payload, setPayload] = useState({});
|
||||
|
||||
const {
|
||||
setFiles,
|
||||
@@ -93,6 +95,7 @@ const EstimateForm = ({
|
||||
.label(formatMessage({ id: 'expiration_date_' })),
|
||||
estimate_number: Yup.number()
|
||||
.required()
|
||||
.nullable()
|
||||
.label(formatMessage({ id: 'estimate_number_' })),
|
||||
reference: Yup.string().min(1).max(255),
|
||||
note: Yup.string()
|
||||
@@ -134,7 +137,7 @@ const EstimateForm = ({
|
||||
),
|
||||
});
|
||||
|
||||
const saveInvokeSubmit = useCallback(
|
||||
const saveEstimateSubmit = useCallback(
|
||||
(payload) => {
|
||||
onFormSubmit && onFormSubmit(payload);
|
||||
},
|
||||
@@ -146,7 +149,7 @@ const EstimateForm = ({
|
||||
index: 0,
|
||||
item_id: null,
|
||||
rate: null,
|
||||
discount: null,
|
||||
discount: 0,
|
||||
quantity: null,
|
||||
description: '',
|
||||
}),
|
||||
@@ -155,10 +158,10 @@ const EstimateForm = ({
|
||||
|
||||
const defaultInitialValues = useMemo(
|
||||
() => ({
|
||||
customer_id: null,
|
||||
customer_id: '',
|
||||
estimate_date: moment(new Date()).format('YYYY-MM-DD'),
|
||||
expiration_date: moment(new Date()).format('YYYY-MM-DD'),
|
||||
estimate_number: null,
|
||||
estimate_number: '',
|
||||
reference: '',
|
||||
note: '',
|
||||
terms_conditions: '',
|
||||
@@ -173,15 +176,38 @@ const EstimateForm = ({
|
||||
index: index + 1,
|
||||
}));
|
||||
};
|
||||
|
||||
// debugger;
|
||||
const initialValues = useMemo(
|
||||
() => ({
|
||||
...defaultInitialValues,
|
||||
entries: orderingProductsIndex(defaultInitialValues.entries),
|
||||
...(estimate
|
||||
? {
|
||||
...pick(estimate, Object.keys(defaultInitialValues)),
|
||||
entries: [
|
||||
...estimate.entries.map((estimate) => ({
|
||||
...pick(estimate, Object.keys(defaultEstimate)),
|
||||
})),
|
||||
...repeatValue(
|
||||
defaultEstimate,
|
||||
Math.max(MIN_LINES_NUMBER - estimate.entries.length, 0),
|
||||
),
|
||||
],
|
||||
}
|
||||
: {
|
||||
...defaultInitialValues,
|
||||
entries: orderingProductsIndex(defaultInitialValues.entries),
|
||||
}),
|
||||
}),
|
||||
[defaultEstimate, defaultInitialValues, estimate],
|
||||
[estimate, defaultInitialValues, defaultEstimate],
|
||||
);
|
||||
|
||||
// const initialValues = useMemo(
|
||||
// () => ({
|
||||
// ...defaultInitialValues,
|
||||
// entries: orderingProductsIndex(defaultInitialValues.entries),
|
||||
// }),
|
||||
// [defaultEstimate, defaultInitialValues, estimate],
|
||||
// );
|
||||
|
||||
const initialAttachmentFiles = useMemo(() => {
|
||||
return estimate && estimate.media
|
||||
? estimate.media.map((attach) => ({
|
||||
@@ -199,56 +225,58 @@ const EstimateForm = ({
|
||||
...initialValues,
|
||||
},
|
||||
onSubmit: async (values, { setSubmitting, setErrors, resetForm }) => {
|
||||
const entries = values.entries.map((item) => omit(item, ['total']));
|
||||
|
||||
const entries = values.entries.filter(
|
||||
(item) => item.item_id && item.quantity,
|
||||
);
|
||||
const form = {
|
||||
...values,
|
||||
entries,
|
||||
};
|
||||
const saveEstimate = (mediaIds) =>
|
||||
new Promise((resolve, reject) => {
|
||||
const requestForm = { ...form, media_ids: mediaIds };
|
||||
const requestForm = { ...form };
|
||||
|
||||
requestSubmitEstimate(requestForm)
|
||||
.then((response) => {
|
||||
AppToaster.show({
|
||||
message: formatMessage(
|
||||
{
|
||||
id: 'the_estimate_has_been_successfully_created',
|
||||
},
|
||||
{
|
||||
number: values.estimate_number,
|
||||
},
|
||||
),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
setSubmitting(false);
|
||||
resetForm();
|
||||
saveInvokeSubmit({ action: 'new', ...payload });
|
||||
clearSavedMediaIds();
|
||||
})
|
||||
.catch((errors) => {
|
||||
setSubmitting(false);
|
||||
if (estimate && estimate.id) {
|
||||
requestEditEstimate(estimate.id, requestForm).then((response) => {
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: 'the_estimate_has_been_successfully_edited',
|
||||
}),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
setSubmitting(false);
|
||||
saveEstimateSubmit({ action: 'update', ...payload });
|
||||
resetForm();
|
||||
});
|
||||
} else {
|
||||
requestSubmitEstimate(requestForm)
|
||||
.then((response) => {
|
||||
AppToaster.show({
|
||||
message: formatMessage(
|
||||
{
|
||||
id: 'the_estimate_has_been_successfully_created',
|
||||
},
|
||||
{
|
||||
number: values.estimate_number,
|
||||
},
|
||||
),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
});
|
||||
Promise.all([saveMedia(), deleteMedia()])
|
||||
.then(([savedMediaResponses]) => {
|
||||
const mediaIds = savedMediaResponses.map((res) => res.data.media.id);
|
||||
savedMediaIds.current = mediaIds;
|
||||
return savedMediaResponses;
|
||||
})
|
||||
.then(() => {
|
||||
return saveEstimate(saveEstimate.current);
|
||||
});
|
||||
setSubmitting(false);
|
||||
resetForm();
|
||||
saveEstimateSubmit({ action: 'new', ...payload });
|
||||
})
|
||||
.catch((errors) => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const handleSubmitClick = useCallback(
|
||||
(payload) => {
|
||||
setPaload(payload);
|
||||
setPayload(payload);
|
||||
formik.submitForm();
|
||||
},
|
||||
[setPaload, formik],
|
||||
[setPayload, formik],
|
||||
);
|
||||
|
||||
const handleCancelClick = useCallback(
|
||||
@@ -285,6 +313,9 @@ const EstimateForm = ({
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
@@ -294,6 +325,7 @@ const EstimateForm = ({
|
||||
onClickAddNewRow={handleClickAddNewRow}
|
||||
onClickClearAllLines={handleClearAllLines}
|
||||
formik={formik}
|
||||
// defaultRow={defaultEstimate}
|
||||
/>
|
||||
<FormGroup
|
||||
label={<T id={'customer_note'} />}
|
||||
@@ -316,13 +348,14 @@ const EstimateForm = ({
|
||||
onDeleteFile={handleDeleteFile}
|
||||
hint={'Attachments: Maxiumum size: 20MB'}
|
||||
/>
|
||||
|
||||
<EstimateFormFooter
|
||||
formik={formik}
|
||||
onSubmitClick={handleSubmitClick}
|
||||
onCancelClick={handleCancelClick}
|
||||
/>
|
||||
</form>
|
||||
<EstimateFormFooter
|
||||
formik={formik}
|
||||
onSubmitClick={handleSubmitClick}
|
||||
estimate={estimate}
|
||||
onCancelClick={handleCancelClick}
|
||||
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -331,4 +364,5 @@ export default compose(
|
||||
withEstimateActions,
|
||||
withDashboardActions,
|
||||
withMediaActions,
|
||||
withEstimateDetail(),
|
||||
)(EstimateForm);
|
||||
|
||||
@@ -1,16 +1,26 @@
|
||||
import React from 'react';
|
||||
import { Intent, Button } from '@blueprintjs/core';
|
||||
import { FormattedMessage as T } from 'react-intl';
|
||||
import { queryCache } from 'react-query';
|
||||
|
||||
export default function EstimateFormFooter({
|
||||
formik: { isSubmitting },
|
||||
formik: { isSubmitting, resetForm },
|
||||
onSubmitClick,
|
||||
onCancelClick,
|
||||
onClearClick,
|
||||
estimate,
|
||||
}) {
|
||||
return (
|
||||
<div className={'estimate-form__floating-footer'}>
|
||||
<Button disabled={isSubmitting} intent={Intent.PRIMARY} type="submit">
|
||||
<T id={'save_send'} />
|
||||
<Button
|
||||
disabled={isSubmitting}
|
||||
intent={Intent.PRIMARY}
|
||||
type="submit"
|
||||
onClick={() => {
|
||||
onSubmitClick({ redirect: true });
|
||||
}}
|
||||
>
|
||||
{estimate && estimate.id ? <T id={'edit'} /> : <T id={'save_send'} />}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
@@ -19,11 +29,20 @@ export default function EstimateFormFooter({
|
||||
className={'ml1'}
|
||||
name={'save'}
|
||||
type="submit"
|
||||
onClick={() => {
|
||||
onSubmitClick({ redirect: false });
|
||||
}}
|
||||
>
|
||||
<T id={'save'} />
|
||||
</Button>
|
||||
|
||||
<Button className={'ml1'} disabled={isSubmitting}>
|
||||
<Button
|
||||
className={'ml1'}
|
||||
disabled={isSubmitting}
|
||||
// onClick={() => {
|
||||
// onClearClick && onClearClick();
|
||||
// }}
|
||||
>
|
||||
<T id={'clear'} />
|
||||
</Button>
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useEffect, useCallback, useMemo } from 'react';
|
||||
import React, { useEffect, useCallback, useMemo, useState } from 'react';
|
||||
import { Route, Switch, useHistory } from 'react-router-dom';
|
||||
import { useQuery, queryCache } from 'react-query';
|
||||
import { useQuery } from 'react-query';
|
||||
import { Alert, Intent } from '@blueprintjs/core';
|
||||
|
||||
import AppToaster from 'components/AppToaster';
|
||||
@@ -8,10 +8,15 @@ import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
import withEstimateActions from './withEstimateActions';
|
||||
|
||||
import EstimatesDataTable from './EstimatesDataTable';
|
||||
import EstimateActionsBar from './EstimateActionsBar';
|
||||
import EstimateViewTabs from './EstimateViewTabs';
|
||||
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
import withResourceActions from 'containers/Resources/withResourcesActions';
|
||||
import withEstimates from './withEstimates';
|
||||
import withEstimateActions from './withEstimateActions';
|
||||
import withViewsActions from 'containers/Views/withViewsActions';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
@@ -20,8 +25,12 @@ function EstimateList({
|
||||
changePageTitle,
|
||||
|
||||
// #withViewsActions
|
||||
requestFetchResourceViews,
|
||||
requestFetchResourceFields,
|
||||
|
||||
// #withEstimate
|
||||
estimateTableQuery,
|
||||
estimateViews,
|
||||
|
||||
//#withEistimateActions
|
||||
requestFetchEstimatesTable,
|
||||
@@ -33,7 +42,17 @@ function EstimateList({
|
||||
const [deleteEstimate, setDeleteEstimate] = useState(false);
|
||||
const [selectedRows, setSelectedRows] = useState([]);
|
||||
|
||||
const fetchEstimate = useQuery(['estimate-table'], () =>
|
||||
const fetchResourceViews = useQuery(
|
||||
['resource-views', 'sales_estimates'],
|
||||
(key, resourceName) => requestFetchResourceViews(resourceName),
|
||||
);
|
||||
|
||||
const fetchResourceFields = useQuery(
|
||||
['resource-fields', 'sales_estimates'],
|
||||
(key, resourceName) => requestFetchResourceFields(resourceName),
|
||||
);
|
||||
|
||||
const fetchEstimate = useQuery(['estimates-table', estimateTableQuery], () =>
|
||||
requestFetchEstimatesTable(),
|
||||
);
|
||||
|
||||
@@ -42,7 +61,6 @@ function EstimateList({
|
||||
}, [changePageTitle, formatMessage]);
|
||||
|
||||
// handle delete estimate click
|
||||
|
||||
const handleDeleteEstimate = useCallback(
|
||||
(estimate) => {
|
||||
setDeleteEstimate(estimate);
|
||||
@@ -57,7 +75,7 @@ function EstimateList({
|
||||
|
||||
// handle confirm delete estimate
|
||||
const handleConfirmEstimateDelete = useCallback(() => {
|
||||
requestDeleteEstimate(deleteEstimate.id).then((response) => {
|
||||
requestDeleteEstimate(deleteEstimate.id).then(() => {
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: 'the_estimate_has_been_successfully_deleted',
|
||||
@@ -68,12 +86,25 @@ function EstimateList({
|
||||
});
|
||||
}, [deleteEstimate, requestDeleteEstimate, formatMessage]);
|
||||
|
||||
// // Handle filter change to re-fetch data-table.
|
||||
// const handleFilterChanged = useCallback(
|
||||
// (filterConditions) => {
|
||||
// addEstimatesTableQueries({
|
||||
// filter_roles: filterConditions || '',
|
||||
// });
|
||||
// },
|
||||
// [fetchEstimate],
|
||||
// );
|
||||
|
||||
// Handle filter change to re-fetch data-table.
|
||||
const handleFilterChanged = useCallback(() => {}, [fetchEstimate]);
|
||||
|
||||
// Calculates the selected rows
|
||||
const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
|
||||
selectedRows,
|
||||
]);
|
||||
|
||||
const handleEidtEstimate = useCallback(
|
||||
const handleEditEstimate = useCallback(
|
||||
(estimate) => {
|
||||
history.push(`/estimates/${estimate.id}/edit`);
|
||||
},
|
||||
@@ -97,24 +128,63 @@ function EstimateList({
|
||||
[addEstimatesTableQueries],
|
||||
);
|
||||
|
||||
const handleSelectedRowsChange = useCallback((estimate) => {
|
||||
selectedRows(estimate);
|
||||
});
|
||||
|
||||
const handleSelectedRowsChange = useCallback(
|
||||
(estimate) => {
|
||||
setSelectedRows(estimate);
|
||||
},
|
||||
[setSelectedRows],
|
||||
);
|
||||
return (
|
||||
<DashboardInsider name={'estimates'}>
|
||||
<DashboardInsider
|
||||
loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
|
||||
name={'sales_estimates'}
|
||||
>
|
||||
<EstimateActionsBar
|
||||
// onBulkDelete={}
|
||||
selectedRows={selectedRows}
|
||||
// onFilterChanged={}
|
||||
onFilterChanged={handleFilterChanged}
|
||||
/>
|
||||
<DashboardPageContent>
|
||||
<Switch>
|
||||
<Route></Route>
|
||||
<Route
|
||||
exact={true}
|
||||
path={['/estimates/:custom_view_id/custom_view', '/estimates']}
|
||||
>
|
||||
<EstimateViewTabs />
|
||||
<EstimatesDataTable
|
||||
loading={fetchEstimate.isFetching}
|
||||
onDeleteEstimate={handleDeleteEstimate}
|
||||
onFetchData={handleFetchData}
|
||||
onEditEstimate={handleEditEstimate}
|
||||
onSelectedRowsChange={handleSelectedRowsChange}
|
||||
/>
|
||||
</Route>
|
||||
</Switch>
|
||||
<Alert
|
||||
cancelButtonText={<T id={'cancel'} />}
|
||||
confirmButtonText={<T id={'delete'} />}
|
||||
icon={'trash'}
|
||||
intent={Intent.DANGER}
|
||||
isOpen={deleteEstimate}
|
||||
onCancel={handleCancelEstimateDelete}
|
||||
onConfirm={handleConfirmEstimateDelete}
|
||||
>
|
||||
<p>
|
||||
<T id={'once_delete_this_estimate_you_will_able_to_restore_it'} />
|
||||
</p>
|
||||
</Alert>
|
||||
</DashboardPageContent>
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
export default EstimateList;
|
||||
export default compose(
|
||||
withResourceActions,
|
||||
withEstimateActions,
|
||||
withDashboardActions,
|
||||
withViewsActions,
|
||||
withEstimates(({ estimateTableQuery, estimateViews }) => ({
|
||||
estimateTableQuery,
|
||||
estimateViews,
|
||||
})),
|
||||
)(EstimateList);
|
||||
|
||||
110
client/src/containers/Sales/Estimate/EstimateViewTabs.js
Normal file
110
client/src/containers/Sales/Estimate/EstimateViewTabs.js
Normal file
@@ -0,0 +1,110 @@
|
||||
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 withEstimates from './withEstimates';
|
||||
import withEstimateActions from './withEstimateActions';
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
import withViewDetails from 'containers/Views/withViewDetails';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
function EstimateViewTabs({
|
||||
// #withExpenses
|
||||
estimateViews,
|
||||
|
||||
// #withViewDetails
|
||||
viewItem,
|
||||
|
||||
//#withEstimatesActions
|
||||
addEstimatesTableQueries,
|
||||
changeEstimateView,
|
||||
|
||||
// #withDashboardActions
|
||||
setTopbarEditView,
|
||||
changePageSubtitle,
|
||||
// props
|
||||
customViewChanged,
|
||||
onViewChanged,
|
||||
}) {
|
||||
const history = useHistory();
|
||||
const { custom_view_id: customViewId = null } = useParams();
|
||||
|
||||
useEffect(() => {
|
||||
changeEstimateView(customViewId || -1);
|
||||
setTopbarEditView(customViewId);
|
||||
changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
|
||||
|
||||
addEstimatesTableQueries({
|
||||
custom_view_id: customViewId,
|
||||
});
|
||||
return () => {
|
||||
setTopbarEditView(null);
|
||||
changePageSubtitle('');
|
||||
changeEstimateView(null);
|
||||
};
|
||||
}, [customViewId, addEstimatesTableQueries, changeEstimateView]);
|
||||
|
||||
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(`/estimates/${toPath}`);
|
||||
setTopbarEditView(viewId);
|
||||
};
|
||||
const tabs = estimateViews.map((view) => ({
|
||||
...pick(view, ['name', 'id']),
|
||||
}));
|
||||
|
||||
// Handle click a new view tab.
|
||||
const handleClickNewView = () => {
|
||||
setTopbarEditView(null);
|
||||
history.push('/custom_views/estimates/new');
|
||||
};
|
||||
|
||||
console.log(estimateViews, 'estimateViews');
|
||||
return (
|
||||
<Navbar className={'navbar--dashboard-views'}>
|
||||
<NavbarGroup align={Alignment.LEFT}>
|
||||
<DashboardViewsTabs
|
||||
initialViewId={customViewId}
|
||||
baseUrl={'/estimates'}
|
||||
tabs={tabs}
|
||||
onNewViewTabClick={handleClickNewView}
|
||||
onChange={handleTabsChange}
|
||||
/>
|
||||
</NavbarGroup>
|
||||
</Navbar>
|
||||
);
|
||||
}
|
||||
|
||||
const mapStateToProps = (state, ownProps) => ({
|
||||
viewId: ownProps.match.params.custom_view_id,
|
||||
});
|
||||
|
||||
const withEstimatesViewTabs = connect(mapStateToProps);
|
||||
|
||||
export default compose(
|
||||
withRouter,
|
||||
withEstimatesViewTabs,
|
||||
withEstimateActions,
|
||||
withDashboardActions,
|
||||
withViewDetails(),
|
||||
withEstimates(({ estimateViews }) => ({
|
||||
estimateViews,
|
||||
})),
|
||||
)(EstimateViewTabs);
|
||||
@@ -11,31 +11,50 @@ import withEstimateActions from './withEstimateActions';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
function Estimates({ requestFetchCustomers, requestFetchItems }) {
|
||||
function Estimates({
|
||||
requestFetchCustomers,
|
||||
requestFetchItems,
|
||||
requsetFetchEstimate,
|
||||
}) {
|
||||
const history = useHistory();
|
||||
const { id } = useParams();
|
||||
|
||||
const fetchEstimate = useQuery(
|
||||
['estimate', id],
|
||||
(key, _id) => requsetFetchEstimate(_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({}),
|
||||
);
|
||||
|
||||
// Handle fetch Items data table or list
|
||||
const fetchItems = useQuery('items-table', () => requestFetchItems({}));
|
||||
|
||||
const handleFormSubmit = useCallback((payload) => {}, [history]);
|
||||
|
||||
const handleFormSubmit = useCallback(
|
||||
(payload) => {
|
||||
payload.redirect && history.push('/estimates');
|
||||
},
|
||||
[history],
|
||||
);
|
||||
const handleCancel = useCallback(() => {
|
||||
history.goBack();
|
||||
}, [history]);
|
||||
|
||||
return (
|
||||
<DashboardInsider
|
||||
loading={fetchCustomers.isFetching || fetchItems.isFetching}
|
||||
loading={
|
||||
fetchCustomers.isFetching ||
|
||||
fetchItems.isFetching ||
|
||||
fetchEstimate.isFetching
|
||||
}
|
||||
name={'estimate-form'}
|
||||
>
|
||||
<EstimateForm
|
||||
onFormSubmit={handleFormSubmit}
|
||||
// estimateId={id}
|
||||
estimateId={id}
|
||||
onCancelForm={handleCancel}
|
||||
/>
|
||||
</DashboardInsider>
|
||||
|
||||
@@ -2,36 +2,37 @@ import React, { useEffect, useCallback, useState, useMemo } from 'react';
|
||||
import {
|
||||
Intent,
|
||||
Button,
|
||||
Classes,
|
||||
Popover,
|
||||
Tooltip,
|
||||
Menu,
|
||||
MenuItem,
|
||||
MenuDivider,
|
||||
Position,
|
||||
Tag,
|
||||
} 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 Icon from 'components/Icon';
|
||||
import { compose } from 'utils';
|
||||
import { useUpdateEffect } from 'hooks';
|
||||
|
||||
import LoadingIndicator from 'components/LoadingIndicator';
|
||||
import { If } from 'components';
|
||||
import DataTable from 'components/DataTable';
|
||||
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 withEstimates from './withEstimates';
|
||||
import withEstimateActions from './withEstimateActions';
|
||||
import withCurrentView from 'containers/Views/withCurrentView';
|
||||
|
||||
function EstimatesDataTable({
|
||||
//#withEitimates
|
||||
estimatesCurrentPage,
|
||||
estimatesLoading,
|
||||
estimatesPageination,
|
||||
estimateItems,
|
||||
|
||||
// #withDashboardActions
|
||||
changeCurrentView,
|
||||
@@ -56,11 +57,11 @@ function EstimatesDataTable({
|
||||
setInitialMount(false);
|
||||
}, []);
|
||||
|
||||
// useUpdateEffect(() => {
|
||||
// if (!estimateLoading) {
|
||||
// setInitialMount(true);
|
||||
// }
|
||||
// }, []);
|
||||
useUpdateEffect(() => {
|
||||
if (!estimatesLoading) {
|
||||
setInitialMount(true);
|
||||
}
|
||||
}, [estimatesLoading, setInitialMount]);
|
||||
|
||||
useEffect(() => {
|
||||
if (customViewId) {
|
||||
@@ -77,66 +78,90 @@ function EstimatesDataTable({
|
||||
]);
|
||||
|
||||
const handleEditEstimate = useCallback(
|
||||
(estimate) => {
|
||||
(estimate) => () => {
|
||||
onEditEstimate && onEditEstimate(estimate);
|
||||
},
|
||||
[onEditEstimate],
|
||||
);
|
||||
|
||||
const handleDeleteEstimate = useCallback(() => {
|
||||
onDeleteEstimate && onDeleteEstimate();
|
||||
}, [onDeleteEstimate]);
|
||||
const handleDeleteEstimate = useCallback(
|
||||
(estimate) => () => {
|
||||
onDeleteEstimate && onDeleteEstimate(estimate);
|
||||
},
|
||||
[onDeleteEstimate],
|
||||
);
|
||||
|
||||
const actionMenuList = useCallback(
|
||||
() => (
|
||||
(estimate) => (
|
||||
<Menu>
|
||||
<MenuItem text={formatMessage({ id: 'view_details' })} />
|
||||
<MenuDivider />
|
||||
<MenuItem
|
||||
text={formatMessage({ id: 'edit_estimate' })}
|
||||
// onClick={handleEditEstimate(estimate)}
|
||||
onClick={handleEditEstimate(estimate)}
|
||||
/>
|
||||
<MenuItem
|
||||
text={formatMessage({ id: 'delete_estimate' })}
|
||||
intent={Intent.DANGER}
|
||||
// onClick={handleDeleteEstimate(estimate)}
|
||||
onClick={handleDeleteEstimate(estimate)}
|
||||
icon={<Icon icon="trash-16" iconSize={16} />}
|
||||
/>
|
||||
</Menu>
|
||||
),
|
||||
[handleDeleteEstimate, handleEditEstimate, formatMessage],
|
||||
);
|
||||
|
||||
const onRowContextMenu = useCallback(
|
||||
(cell) => {
|
||||
return actionMenuList(cell.row.original);
|
||||
},
|
||||
[actionMenuList],
|
||||
);
|
||||
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
id: '',
|
||||
Header: formatMessage({ id: '' }),
|
||||
accessor: '',
|
||||
className: '',
|
||||
id: 'estimate_date',
|
||||
Header: formatMessage({ id: 'estimate_date' }),
|
||||
accessor: (r) => moment(r.estimate_date).format('YYYY MMM DD'),
|
||||
width: 140,
|
||||
className: 'estimate_date',
|
||||
},
|
||||
{
|
||||
id: '',
|
||||
Header: formatMessage({ id: '' }),
|
||||
accessor: '',
|
||||
className: '',
|
||||
id: 'customer_id',
|
||||
Header: formatMessage({ id: 'customer_name' }),
|
||||
accessor: (row) => row.customer_id,
|
||||
width: 140,
|
||||
className: 'customer_id',
|
||||
},
|
||||
{
|
||||
id: '',
|
||||
Header: formatMessage({ id: '' }),
|
||||
accessor: '',
|
||||
className: '',
|
||||
id: 'expiration_date',
|
||||
Header: formatMessage({ id: 'expiration_date' }),
|
||||
accessor: (r) => moment(r.expiration_date).format('YYYY MMM DD'),
|
||||
width: 140,
|
||||
className: 'expiration_date',
|
||||
},
|
||||
{
|
||||
id: '',
|
||||
Header: formatMessage({ id: '' }),
|
||||
accessor: '',
|
||||
className: '',
|
||||
id: 'estimate_number',
|
||||
Header: formatMessage({ id: 'estimate_number' }),
|
||||
accessor: (row) => `#${row.estimate_number}`,
|
||||
width: 140,
|
||||
className: 'estimate_number',
|
||||
},
|
||||
{
|
||||
id: '',
|
||||
Header: formatMessage({ id: '' }),
|
||||
accessor: '',
|
||||
className: '',
|
||||
id: 'amount',
|
||||
Header: formatMessage({ id: 'amount' }),
|
||||
accessor: (r) => <Money amount={r.amount} currency={'USD'} />,
|
||||
|
||||
width: 140,
|
||||
className: 'amount',
|
||||
},
|
||||
{
|
||||
id: 'reference',
|
||||
Header: formatMessage({ id: 'reference_no' }),
|
||||
accessor: 'reference',
|
||||
width: 140,
|
||||
className: 'reference',
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
@@ -156,10 +181,18 @@ function EstimatesDataTable({
|
||||
],
|
||||
[actionMenuList, formatMessage],
|
||||
);
|
||||
const selectionColumn = useMemo(
|
||||
() => ({
|
||||
minWidth: 40,
|
||||
width: 40,
|
||||
maxWidth: 40,
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
const handleDataTableFetchData = useCallback(
|
||||
(...arguments) => {
|
||||
onFetchData && onFetchData(...arguments);
|
||||
(...args) => {
|
||||
onFetchData && onFetchData(...args);
|
||||
},
|
||||
[onFetchData],
|
||||
);
|
||||
@@ -171,15 +204,27 @@ function EstimatesDataTable({
|
||||
},
|
||||
[onSelectedRowsChange],
|
||||
);
|
||||
console.log(estimatesCurrentPage, 'estimatesCurrentPage');
|
||||
console.log(estimateItems, 'estimateItems');
|
||||
|
||||
return (
|
||||
<div>
|
||||
<LoadingIndicator loading={loading} mount={false}>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={[]}
|
||||
data={estimatesCurrentPage}
|
||||
onFetchData={handleDataTableFetchData}
|
||||
manualSortBy={true}
|
||||
selectionColumn={true}
|
||||
noInitialFetch={true}
|
||||
sticky={true}
|
||||
loading={estimatesLoading && !initialMount}
|
||||
onSelectedRowsChange={handleSelectedRowsChange}
|
||||
rowContextMenu={onRowContextMenu}
|
||||
pagination={true}
|
||||
pagesCount={estimatesPageination.pagesCount}
|
||||
initialPageSize={estimatesPageination.pageSize}
|
||||
initialPageIndex={estimatesPageination.page - 1}
|
||||
/>
|
||||
</LoadingIndicator>
|
||||
</div>
|
||||
@@ -188,9 +233,22 @@ function EstimatesDataTable({
|
||||
|
||||
export default compose(
|
||||
withRouter,
|
||||
withCurrentView,
|
||||
withDialogActions,
|
||||
withDashboardActions,
|
||||
withEstimateActions,
|
||||
// withEstimates(({}) => ({})),
|
||||
withEstimates(
|
||||
({
|
||||
estimatesCurrentPage,
|
||||
estimatesLoading,
|
||||
estimatesPageination,
|
||||
estimateItems,
|
||||
}) => ({
|
||||
estimatesCurrentPage,
|
||||
estimatesLoading,
|
||||
estimatesPageination,
|
||||
estimateItems,
|
||||
}),
|
||||
),
|
||||
withViewDetails(),
|
||||
)(EstimatesDataTable);
|
||||
|
||||
@@ -11,7 +11,7 @@ import t from 'store/types';
|
||||
const mapDipatchToProps = (dispatch) => ({
|
||||
requestSubmitEstimate: (form) => dispatch(submitEstimate({ form })),
|
||||
requsetFetchEstimate: (id) => dispatch(fetchEstimate({ id })),
|
||||
requestEditEstimate: (id, form) => dispatch(editEstimate({ id, form })),
|
||||
requestEditEstimate: (id, form) => dispatch(editEstimate(id, form)),
|
||||
requestFetchEstimatesTable: (query = {}) =>
|
||||
dispatch(fetchEstimatesTable({ query: { ...query } })),
|
||||
requestDeleteEstimate: (id) => dispatch(deleteEstimate({ id })),
|
||||
|
||||
@@ -1,24 +1,25 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { getResourceViews } from 'store/customViews/customViews.selectors';
|
||||
import {
|
||||
getEstimateCurrentPage,
|
||||
getEstimateCurrentPageFactory,
|
||||
getEstimatesTableQuery,
|
||||
getEstimatesPaginationMetaFactory,
|
||||
} from 'store/Estimate/estimates.selectors';
|
||||
|
||||
function withEstimates(mapSate) {
|
||||
export default (mapState) => {
|
||||
const getEstimatesItems = getEstimateCurrentPageFactory();
|
||||
const getEstimatesPaginationMeta = getEstimatesPaginationMetaFactory();
|
||||
const mapStateToProps = (state, props) => {
|
||||
const query = getEstimatesTableQuery(state, props);
|
||||
const mapped = {
|
||||
estimateViews: getResourceViews(state, props, 'estimates'),
|
||||
estimateItems: state.estiamte.items,
|
||||
estimatesCurrentPage: getEstimatesItems(state, props, query),
|
||||
estimateViews: getResourceViews(state, props, 'sales_estimates'),
|
||||
estimateItems: state.sales_estimates.items,
|
||||
estimateTableQuery: query,
|
||||
estimatesLoading: state.estiamte.loading,
|
||||
estimatesPageination: getEstimatesPaginationMeta(state, props, query),
|
||||
estimatesLoading: state.sales_estimates.loading,
|
||||
};
|
||||
return mapSate ? mapSate(mapped, state, props) : mapped;
|
||||
return mapState ? mapState(mapped, state, props) : mapped;
|
||||
};
|
||||
|
||||
return connect(mapStateToProps);
|
||||
}
|
||||
|
||||
export default withEstimates;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user