mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 21:00:31 +00:00
feature/ allocate landed cost.
This commit is contained in:
elforjani3
@@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
import { AllocateLandedCostDialogProvider } from './AllocateLandedCostDialogProvider';
|
||||
import AllocateLandedCostForm from './AllocateLandedCostForm';
|
||||
|
||||
/**
|
||||
* Allocate landed cost dialog content.
|
||||
*/
|
||||
export default function AllocateLandedCostDialogContent({
|
||||
// #ownProps
|
||||
dialogName,
|
||||
bill,
|
||||
}) {
|
||||
return (
|
||||
<AllocateLandedCostDialogProvider billId={bill} dialogName={dialogName}>
|
||||
<AllocateLandedCostForm />
|
||||
</AllocateLandedCostDialogProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import React from 'react';
|
||||
import { DialogContent } from 'components';
|
||||
import { useBill } from 'hooks/query';
|
||||
|
||||
import { pick } from 'lodash';
|
||||
|
||||
const AllocateLandedCostDialogContext = React.createContext();
|
||||
|
||||
/**
|
||||
* Allocate landed cost provider.
|
||||
*/
|
||||
function AllocateLandedCostDialogProvider({ billId, dialogName, ...props }) {
|
||||
// Handle fetch bill details.
|
||||
const { isLoading: isBillLoading, data: bill } = useBill(billId, {
|
||||
enabled: !!billId,
|
||||
});
|
||||
|
||||
// provider payload.
|
||||
const provider = {
|
||||
bill: {
|
||||
...pick(bill, ['entries']),
|
||||
},
|
||||
dialogName,
|
||||
};
|
||||
return (
|
||||
<DialogContent isLoading={isBillLoading} name={'allocate-landed-cost'}>
|
||||
<AllocateLandedCostDialogContext.Provider value={provider} {...props} />
|
||||
</DialogContent>
|
||||
);
|
||||
}
|
||||
|
||||
const useAllocateLandedConstDialogContext = () =>
|
||||
React.useContext(AllocateLandedCostDialogContext);
|
||||
|
||||
export {
|
||||
AllocateLandedCostDialogProvider,
|
||||
useAllocateLandedConstDialogContext,
|
||||
};
|
||||
@@ -0,0 +1,72 @@
|
||||
import React from 'react';
|
||||
import intl from 'react-intl-universal';
|
||||
import { DataTable, MoneyFieldCell, DataTableEditable } from 'components';
|
||||
import { compose, updateTableRow } from 'utils';
|
||||
|
||||
/**
|
||||
* Allocate landed cost entries table.
|
||||
*/
|
||||
export default function AllocateLandedCostEntriesTable({
|
||||
onUpdateData,
|
||||
entries,
|
||||
}) {
|
||||
// allocate landed cost entries table columns.
|
||||
const columns = React.useMemo(
|
||||
() => [
|
||||
{
|
||||
Header: intl.get('item'),
|
||||
accessor: 'item_id',
|
||||
disableSortBy: true,
|
||||
width: '150',
|
||||
},
|
||||
{
|
||||
Header: intl.get('quantity'),
|
||||
accessor: 'quantity',
|
||||
disableSortBy: true,
|
||||
width: '100',
|
||||
},
|
||||
{
|
||||
Header: intl.get('rate'),
|
||||
accessor: 'rate',
|
||||
disableSortBy: true,
|
||||
width: '100',
|
||||
},
|
||||
{
|
||||
Header: intl.get('amount'),
|
||||
accessor: 'amount',
|
||||
disableSortBy: true,
|
||||
width: '100',
|
||||
},
|
||||
{
|
||||
Header: intl.get('cost'),
|
||||
accessor: 'cost',
|
||||
width: '150',
|
||||
Cell: MoneyFieldCell,
|
||||
disableSortBy: true,
|
||||
},
|
||||
],
|
||||
[],
|
||||
);
|
||||
|
||||
// Handle update data.
|
||||
const handleUpdateData = React.useCallback(
|
||||
(rowIndex, columnId, value) => {
|
||||
const newRows = compose(updateTableRow(rowIndex, columnId, value))(
|
||||
entries,
|
||||
);
|
||||
onUpdateData(newRows);
|
||||
},
|
||||
[onUpdateData, entries],
|
||||
);
|
||||
|
||||
const LL = [
|
||||
{
|
||||
item_id: 'ITEM',
|
||||
quantity: '30000',
|
||||
rate: '100000',
|
||||
amount: '400',
|
||||
},
|
||||
];
|
||||
|
||||
return <DataTableEditable columns={columns} data={LL} />;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import React from 'react';
|
||||
import { Intent, Button, Classes } from '@blueprintjs/core';
|
||||
import { FormattedMessage as T } from 'components';
|
||||
|
||||
import { useFormikContext } from 'formik';
|
||||
import { useAllocateLandedConstDialogContext } from './AllocateLandedCostDialogProvider';
|
||||
import withDialogActions from 'containers/Dialog/withDialogActions';
|
||||
import { compose } from 'utils';
|
||||
|
||||
function AllocateLandedCostFloatingActions({
|
||||
// #withDialogActions
|
||||
closeDialog,
|
||||
}) {
|
||||
// Formik context.
|
||||
const { isSubmitting } = useFormikContext();
|
||||
|
||||
const { dialogName } = useAllocateLandedConstDialogContext();
|
||||
|
||||
// Handle cancel button click.
|
||||
const handleCancelBtnClick = (event) => {
|
||||
closeDialog(dialogName);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={Classes.DIALOG_FOOTER}>
|
||||
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
|
||||
<Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
|
||||
<T id={'cancel'} />
|
||||
</Button>
|
||||
<Button
|
||||
intent={Intent.PRIMARY}
|
||||
disabled={isSubmitting}
|
||||
style={{ minWidth: '75px' }}
|
||||
type="submit"
|
||||
>
|
||||
{<T id={'save'} />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withDialogActions)(AllocateLandedCostFloatingActions);
|
||||
@@ -0,0 +1,57 @@
|
||||
import React from 'react';
|
||||
import { Formik } from 'formik';
|
||||
import moment from 'moment';
|
||||
|
||||
import 'style/pages/AllocateLandedCost/AllocateLandedCostForm.scss';
|
||||
|
||||
import { AllocateLandedCostFormSchema } from './AllocateLandedCostForm.schema';
|
||||
import { useAllocateLandedConstDialogContext } from './AllocateLandedCostDialogProvider';
|
||||
import AllocateLandedCostFormContent from './AllocateLandedCostFormContent';
|
||||
import withDialogActions from 'containers/Dialog/withDialogActions';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
const defaultInitialValues = {
|
||||
transaction_type: 'bills',
|
||||
transaction_date: moment(new Date()).format('YYYY-MM-DD'),
|
||||
transaction_id: '',
|
||||
transaction_entry_id: '',
|
||||
amount: '',
|
||||
allocation_method: 'quantity',
|
||||
entries: {
|
||||
entry_id: '',
|
||||
cost: '',
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Allocate landed cost form.
|
||||
*/
|
||||
function AllocateLandedCostForm({
|
||||
// #withDialogActions
|
||||
closeDialog,
|
||||
}) {
|
||||
const { bill, dialogName } = useAllocateLandedConstDialogContext();
|
||||
|
||||
// Initial form values.
|
||||
const initialValues = {
|
||||
...defaultInitialValues,
|
||||
...bill,
|
||||
};
|
||||
|
||||
|
||||
// Handle form submit.
|
||||
const handleFormSubmit = (values, { setSubmitting }) => {};
|
||||
|
||||
return (
|
||||
<Formik
|
||||
validationSchema={AllocateLandedCostFormSchema}
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleFormSubmit}
|
||||
>
|
||||
<AllocateLandedCostFormContent />
|
||||
</Formik>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withDialogActions)(AllocateLandedCostForm);
|
||||
@@ -0,0 +1,19 @@
|
||||
import * as Yup from 'yup';
|
||||
import intl from 'react-intl-universal';
|
||||
|
||||
const Schema = Yup.object().shape({
|
||||
transaction_type: Yup.string().label(intl.get('transaction_type')),
|
||||
transaction_date: Yup.date().label(intl.get('transaction_date')),
|
||||
transaction_id: Yup.string().label(intl.get('transaction_number')),
|
||||
transaction_entry_id: Yup.string().label(intl.get('transaction_line')),
|
||||
amount: Yup.number().label(intl.get('amount')),
|
||||
allocation_method: Yup.string().trim(),
|
||||
entries: Yup.array().of(
|
||||
Yup.object().shape({
|
||||
entry_id: Yup.number().nullable(),
|
||||
cost: Yup.number().nullable(),
|
||||
}),
|
||||
),
|
||||
});
|
||||
|
||||
export const AllocateLandedCostFormSchema = Schema;
|
||||
@@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
import { FastField } from 'formik';
|
||||
import classNames from 'classnames';
|
||||
import { CLASSES } from 'common/classes';
|
||||
import AllocateLandedCostEntriesTable from './AllocateLandedCostEntriesTable';
|
||||
|
||||
export default function AllocateLandedCostFormBody() {
|
||||
return (
|
||||
<div className={classNames(CLASSES.PAGE_FORM_BODY)}>
|
||||
<FastField name={'entries'}>
|
||||
{({
|
||||
form: { setFieldValue, values },
|
||||
field: { value },
|
||||
meta: { error, touched },
|
||||
}) => (
|
||||
<AllocateLandedCostEntriesTable
|
||||
entries={value}
|
||||
onUpdateData={(newEntries) => {
|
||||
setFieldValue('entries', newEntries);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</FastField>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
import { Form } from 'formik';
|
||||
import AllocateLandedCostFormFields from './AllocateLandedCostFormFields';
|
||||
import AllocateLandedCostFloatingActions from './AllocateLandedCostFloatingActions';
|
||||
/**
|
||||
* Allocate landed cost form content.
|
||||
*/
|
||||
export default function AllocateLandedCostFormContent() {
|
||||
return (
|
||||
<Form>
|
||||
<AllocateLandedCostFormFields />
|
||||
<AllocateLandedCostFloatingActions />
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
import React from 'react';
|
||||
import { FastField, ErrorMessage } from 'formik';
|
||||
import {
|
||||
Classes,
|
||||
FormGroup,
|
||||
RadioGroup,
|
||||
Radio,
|
||||
InputGroup,
|
||||
Position,
|
||||
} from '@blueprintjs/core';
|
||||
import { DateInput } from '@blueprintjs/datetime';
|
||||
import classNames from 'classnames';
|
||||
import { FormattedMessage as T } from 'components';
|
||||
import intl from 'react-intl-universal';
|
||||
import {
|
||||
inputIntent,
|
||||
momentFormatter,
|
||||
tansformDateValue,
|
||||
handleDateChange,
|
||||
handleStringChange,
|
||||
} from 'utils';
|
||||
import { FieldRequiredHint, ListSelect } from 'components';
|
||||
import { CLASSES } from 'common/classes';
|
||||
import allocateLandedCostType from 'common/allocateLandedCostType';
|
||||
import AccountsSuggestField from 'components/AccountsSuggestField';
|
||||
import AllocateLandedCostFormBody from './AllocateLandedCostFormBody';
|
||||
|
||||
/**
|
||||
* Allocate landed cost form fields.
|
||||
*/
|
||||
export default function AllocateLandedCostFormFields() {
|
||||
return (
|
||||
<div className={Classes.DIALOG_BODY}>
|
||||
{/*------------Transaction type -----------*/}
|
||||
<FastField name={'transaction_type'}>
|
||||
{({
|
||||
form: { values, setFieldValue },
|
||||
field: { value },
|
||||
meta: { error, touched },
|
||||
}) => (
|
||||
<FormGroup
|
||||
label={<T id={'transaction_type'} />}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
helperText={<ErrorMessage name="transaction_type" />}
|
||||
intent={inputIntent({ error, touched })}
|
||||
inline={true}
|
||||
className={classNames(CLASSES.FILL, 'form-group--transaction_type')}
|
||||
>
|
||||
<ListSelect
|
||||
items={allocateLandedCostType}
|
||||
onItemSelect={(type) => {
|
||||
setFieldValue('transaction_type', type.value);
|
||||
}}
|
||||
filterable={false}
|
||||
selectedItem={value}
|
||||
selectedItemProp={'value'}
|
||||
textProp={'name'}
|
||||
popoverProps={{ minimal: true }}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
{/*------------Transaction date -----------*/}
|
||||
<FastField name={'transaction_date'}>
|
||||
{({ form, field: { value }, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'transaction_date'} />}
|
||||
// labelInfo={<FieldRequiredHint />}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="transaction_date" />}
|
||||
minimal={true}
|
||||
className={classNames(CLASSES.FILL, 'form-group--transaction_date')}
|
||||
inline={true}
|
||||
>
|
||||
<DateInput
|
||||
{...momentFormatter('YYYY/MM/DD')}
|
||||
onChange={handleDateChange((formattedDate) => {
|
||||
form.setFieldValue('transaction_date', formattedDate);
|
||||
})}
|
||||
value={tansformDateValue(value)}
|
||||
popoverProps={{
|
||||
position: Position.BOTTOM,
|
||||
minimal: true,
|
||||
}}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
{/*------------ Transaction -----------*/}
|
||||
<FastField name={'transaction_id'}>
|
||||
{({ form, field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'transaction_id'} />}
|
||||
// labelInfo={<FieldRequiredHint />}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="transaction_id" />}
|
||||
className={'form-group--transaction_id'}
|
||||
inline={true}
|
||||
>
|
||||
<AccountsSuggestField
|
||||
accounts={[]}
|
||||
onAccountSelected={({ id }) =>
|
||||
form.setFieldValue('transaction_id', id)
|
||||
}
|
||||
inputProps={{
|
||||
placeholder: intl.get('select_transaction'),
|
||||
}}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
{/*------------ Transaction line -----------*/}
|
||||
<FastField name={'transaction_entry_id'}>
|
||||
{({ form, field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'transaction_line'} />}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="transaction_entry_id" />}
|
||||
className={'form-group--transaction_entry_id'}
|
||||
inline={true}
|
||||
>
|
||||
<InputGroup {...field} />
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
{/*------------ Amount -----------*/}
|
||||
<FastField name={'amount'}>
|
||||
{({ form, field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'amount'} />}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="amount" />}
|
||||
className={'form-group--amount'}
|
||||
inline={true}
|
||||
>
|
||||
<InputGroup {...field} />
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
{/*------------ Allocation method -----------*/}
|
||||
<FastField name={'allocation_method'}>
|
||||
{({ form, field: { value }, meta: { touched, error } }) => (
|
||||
<FormGroup
|
||||
medium={true}
|
||||
label={<T id={'allocation_method'} />}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
className={'form-group--allocation_method'}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="allocation_method" />}
|
||||
inline={true}
|
||||
>
|
||||
<RadioGroup
|
||||
onChange={handleStringChange((_value) => {
|
||||
form.setFieldValue('allocation_method', _value);
|
||||
})}
|
||||
selectedValue={value}
|
||||
inline={true}
|
||||
>
|
||||
<Radio label={<T id={'quantity'} />} value="quantity" />
|
||||
<Radio label={<T id={'valuation'} />} value="valuation" />
|
||||
</RadioGroup>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
{/*------------ Allocate Landed cost Table -----------*/}
|
||||
<AllocateLandedCostFormBody />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import React, { lazy } from 'react';
|
||||
import { FormattedMessage as T, Dialog, DialogSuspense } from 'components';
|
||||
import withDialogRedux from 'components/DialogReduxConnect';
|
||||
import { compose } from 'utils';
|
||||
|
||||
const AllocateLandedCostDialogContent = lazy(() =>
|
||||
import('./AllocateLandedCostDialogContent'),
|
||||
);
|
||||
|
||||
/**
|
||||
* Allocate landed cost dialog.
|
||||
*/
|
||||
function AllocateLandedCostDialog({
|
||||
dialogName,
|
||||
payload = { billId: null },
|
||||
isOpen,
|
||||
}) {
|
||||
return (
|
||||
<Dialog
|
||||
name={dialogName}
|
||||
title={<T id={'allocate_landed_coast'} />}
|
||||
canEscapeKeyClose={true}
|
||||
isOpen={isOpen}
|
||||
className="dialog--allocate-landed-cost-form"
|
||||
>
|
||||
<DialogSuspense>
|
||||
<AllocateLandedCostDialogContent
|
||||
bill={payload.billId}
|
||||
dialogName={dialogName}
|
||||
/>
|
||||
</DialogSuspense>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withDialogRedux())(AllocateLandedCostDialog);
|
||||
@@ -34,13 +34,8 @@ function BillsDataTable({
|
||||
openDialog,
|
||||
}) {
|
||||
// Bills list context.
|
||||
const {
|
||||
bills,
|
||||
pagination,
|
||||
isBillsLoading,
|
||||
isBillsFetching,
|
||||
isEmptyStatus,
|
||||
} = useBillsListContext();
|
||||
const { bills, pagination, isBillsLoading, isBillsFetching, isEmptyStatus } =
|
||||
useBillsListContext();
|
||||
|
||||
const history = useHistory();
|
||||
|
||||
@@ -78,6 +73,11 @@ function BillsDataTable({
|
||||
openDialog('quick-payment-made', { billId: id });
|
||||
};
|
||||
|
||||
// handle allocate landed cost.
|
||||
const handleAllocateLandedCost = ({ id }) => {
|
||||
openDialog('allocate-landed-cost', { billId: id });
|
||||
};
|
||||
|
||||
if (isEmptyStatus) {
|
||||
return <BillsEmptyStatus />;
|
||||
}
|
||||
@@ -105,6 +105,7 @@ function BillsDataTable({
|
||||
onEdit: handleEditBill,
|
||||
onOpen: handleOpenBill,
|
||||
onQuick: handleQuickPaymentMade,
|
||||
onAllocateLandedCost: handleAllocateLandedCost,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -20,7 +20,7 @@ import moment from 'moment';
|
||||
* Actions menu.
|
||||
*/
|
||||
export function ActionsMenu({
|
||||
payload: { onEdit, onOpen, onDelete, onQuick },
|
||||
payload: { onEdit, onOpen, onDelete, onQuick, onAllocateLandedCost },
|
||||
row: { original },
|
||||
}) {
|
||||
return (
|
||||
@@ -50,7 +50,11 @@ export function ActionsMenu({
|
||||
onClick={safeCallback(onQuick, original)}
|
||||
/>
|
||||
</If>
|
||||
|
||||
<MenuItem
|
||||
// icon={<Icon icon="quick-payment-16" iconSize={16} />}
|
||||
text={intl.get('allocate_landed_coast')}
|
||||
onClick={safeCallback(onAllocateLandedCost, original)}
|
||||
/>
|
||||
<MenuItem
|
||||
text={intl.get('delete_bill')}
|
||||
intent={Intent.DANGER}
|
||||
|
||||
Reference in New Issue
Block a user