QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 21:30:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat : allocate landed cost.

Browse Source
This commit is contained in:
elforjani3
2021-07-25 01:16:24 +02:00
parent c72918fb1f
commit cd27864f6d
10 changed files with 161 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostDialogProvider.js
View File

@@ -1,27 +1,50 @@
import React from 'react';
import { DialogContent } from 'components';
import { useBill } from 'hooks/query';
import { useBill, useCreateLandedCost } from 'hooks/query';
import { pick } from 'lodash';
import { map, omit, pick } from 'lodash';
import * as R from 'ramda';
const AllocateLandedCostDialogContext = React.createContext();
/**
* Allocate landed cost provider.
*/
function AllocateLandedCostDialogProvider({ billId, dialogName, ...props }) {
function AllocateLandedCostDialogProvider({
billId,
query,
dialogName,
...props
}) {
// Handle fetch bill details.
const { isLoading: isBillLoading, data: bill } = useBill(billId, {
enabled: !!billId,
});
// Create landed cost mutations.
const { mutateAsync: createLandedCostMutate } = useCreateLandedCost();
// const L = [bill].map(({ entries: items }) => ({
// items,
// }));
// let obj = { oldKey: 1, b: 2, c: 3 };
// const { oldKey: newKey, ...rest } = obj;
// obj = { newKey, ...rest };
// const obj = { ...pick(bill, ['entries']).map((index) => index) };
// provider payload.
const provider = {
bill: {
items: {
...pick(bill, ['entries']),
},
dialogName,
query,
createLandedCostMutate,
billId,
};
return (
<DialogContent isLoading={isBillLoading} name={'allocate-landed-cost'}>
<AllocateLandedCostDialogContext.Provider value={provider} {...props} />

49
client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostEntriesTable.js
View File

@@ -1,6 +1,6 @@
import React from 'react';
import intl from 'react-intl-universal';
import { DataTable, MoneyFieldCell, DataTableEditable } from 'components';
import { MoneyFieldCell, DataTableEditable } from 'components';
import { compose, updateTableRow } from 'utils';
/**
@@ -10,12 +10,13 @@ export default function AllocateLandedCostEntriesTable({
onUpdateData,
entries,
}) {
// allocate landed cost entries table columns.
const columns = React.useMemo(
() => [
{
Header: intl.get('item'),
accessor: 'item_id',
accessor: 'item.name',
disableSortBy: true,
width: '150',
},
@@ -59,38 +60,14 @@ export default function AllocateLandedCostEntriesTable({
[onUpdateData, entries],
);
const LL = [
{
item_id: 'ITEM',
quantity: '30000',
rate: '100000',
amount: '400',
},
{
item_id: 'ITEM',
quantity: '30000',
rate: '100000',
amount: '400',
},
{
item_id: 'ITEM',
quantity: '30000',
rate: '100000',
amount: '400',
},
{
item_id: 'ITEM',
quantity: '30000',
rate: '100000',
amount: '400',
},
{
item_id: 'ITEM',
quantity: '30000',
rate: '100000',
amount: '400',
},
];
return <DataTableEditable columns={columns} data={LL} />;
return (
<DataTableEditable
columns={columns}
data={entries}
payload={{
errors: [],
updateData: handleUpdateData,
}}
/>
);
}

1
client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFloatingActions.js
View File

@@ -13,7 +13,6 @@ function AllocateLandedCostFloatingActions({
}) {
// Formik context.
const { isSubmitting } = useFormikContext();
const { dialogName } = useAllocateLandedConstDialogContext();
// Handle cancel button click.

56
client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostForm.js
View File

@@ -1,24 +1,27 @@
import React from 'react';
import { Formik } from 'formik';
import { Intent } from '@blueprintjs/core';
import intl from 'react-intl-universal';
import moment from 'moment';
import { pick, omit } from 'lodash';
import 'style/pages/AllocateLandedCost/AllocateLandedCostForm.scss';
import { AppToaster } from 'components';
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_type: 'Bill',
transaction_date: moment(new Date()).format('YYYY-MM-DD'),
transaction_id: '',
transaction_entry_id: '',
amount: '',
allocation_method: 'quantity',
entries: {
items: {
entry_id: '',
cost: '',
},
@@ -31,26 +34,59 @@ function AllocateLandedCostForm({
// #withDialogActions
closeDialog,
}) {
const { bill, dialogName } = useAllocateLandedConstDialogContext();
const { items, dialogName, createLandedCostMutate } =
useAllocateLandedConstDialogContext();
// Initial form values.
const initialValues = {
...defaultInitialValues,
...bill,
...items,
};
// Handle form submit.
const handleFormSubmit = (values, { setSubmitting }) => {};
const handleFormSubmit = (values, { setSubmitting }) => {
setSubmitting(false);
closeDialog(dialogName);
const entries = [values]
.filter((entry) => entry.id && entry.cost)
.map((entry) => ({
entry_id: entry.id,
...pick(entry, ['cost']),
}));
const form = {
...values,
// items:{entries},
};
// Handle the request success.
const onSuccess = (response) => {
AppToaster.show({
message: intl.get('the_landed_cost_has_been_created_successfully'),
intent: Intent.SUCCESS,
});
setSubmitting(false);
};
// Handle the request error.
const onError = ({
response: {
data: { errors },
},
}) => {
setSubmitting(false);
};
createLandedCostMutate(form).then(onSuccess).catch(onError);
};
return (
<Formik
validationSchema={AllocateLandedCostFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
<AllocateLandedCostFormContent />
</Formik>
component={AllocateLandedCostFormContent}
/>
);
}

14
client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormBody.js
View File

@@ -13,12 +13,14 @@ export default function AllocateLandedCostFormBody() {
field: { value },
meta: { error, touched },
}) => (
<AllocateLandedCostEntriesTable
entries={value}
onUpdateData={(newEntries) => {
setFieldValue('entries', newEntries);
}}
/>
<>
<AllocateLandedCostEntriesTable
entries={value}
onUpdateData={(newEntries) => {
setFieldValue('entries', newEntries);
}}
/>
</>
)}
</FastField>
</div>

1
client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormContent.js
View File

@@ -2,6 +2,7 @@ import React from 'react';
import { Form } from 'formik';
import AllocateLandedCostFormFields from './AllocateLandedCostFormFields';
import AllocateLandedCostFloatingActions from './AllocateLandedCostFloatingActions';
/**
* Allocate landed cost form content.
*/

109
client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormFields.js
View File

@@ -1,34 +1,39 @@
import React from 'react';
import { FastField, ErrorMessage } from 'formik';
import { FastField, Field, ErrorMessage, useFormikContext } 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 { inputIntent, handleStringChange } from 'utils';
import { FieldRequiredHint, ListSelect } from 'components';
import { CLASSES } from 'common/classes';
import allocateLandedCostType from 'common/allocateLandedCostType';
import AccountsSuggestField from 'components/AccountsSuggestField';
import { useLandedCostTransaction } from 'hooks/query';
import AllocateLandedCostFormBody from './AllocateLandedCostFormBody';
import { getEntriesByTransactionId } from './utils';
/**
* Allocate landed cost form fields.
*/
export default function AllocateLandedCostFormFields() {
const { values } = useFormikContext();
const {
data: { transactions },
} = useLandedCostTransaction(values.transaction_type);
const transactionEntry = getEntriesByTransactionId(
transactions,
values.transaction_id,
);
return (
<div className={Classes.DIALOG_BODY}>
{/*------------Transaction type -----------*/}
@@ -61,69 +66,64 @@ export default function AllocateLandedCostFormFields() {
)}
</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 } }) => (
<Field name={'transaction_id'}>
{({ form, field: { value }, 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'}
className={classNames(CLASSES.FILL, 'form-group--transaction_id')}
inline={true}
>
<AccountsSuggestField
accounts={[]}
onAccountSelected={({ id }) =>
form.setFieldValue('transaction_id', id)
}
inputProps={{
placeholder: intl.get('select_transaction'),
<ListSelect
items={transactions}
onItemSelect={({ id }) => {
form.setFieldValue('transaction_id', id);
}}
filterable={false}
selectedItem={value}
selectedItemProp={'id'}
textProp={'name'}
labelProp={'id'}
defaultText={intl.get('select_transaction')}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</FastField>
</Field>
{/*------------ Transaction line -----------*/}
<FastField name={'transaction_entry_id'}>
{({ form, field, meta: { error, touched } }) => (
<Field name={'transaction_entry_id'}>
{({ form, field: { value }, 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'}
className={classNames(
CLASSES.FILL,
'form-group--transaction_entry_id',
)}
inline={true}
>
<InputGroup {...field} />
<ListSelect
items={transactionEntry}
onItemSelect={({ id }) => {
form.setFieldValue('transaction_entry_id', id);
}}
filterable={false}
selectedItem={value}
selectedItemProp={'id'}
textProp={'name'}
labelProp={'id'}
defaultText={intl.get('select_transaction')}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</FastField>
</Field>
{/*------------ Amount -----------*/}
<FastField name={'amount'}>
{({ form, field, meta: { error, touched } }) => (
@@ -138,6 +138,7 @@ export default function AllocateLandedCostFormFields() {
</FormGroup>
)}
</FastField>
{/*------------ Allocation method -----------*/}
<FastField name={'allocation_method'}>
{({ form, field: { value }, meta: { touched, error } }) => (
@@ -158,7 +159,7 @@ export default function AllocateLandedCostFormFields() {
inline={true}
>
<Radio label={<T id={'quantity'} />} value="quantity" />
<Radio label={<T id={'valuation'} />} value="valuation" />
<Radio label={<T id={'valuation'} />} value="value" />
</RadioGroup>
</FormGroup>
)}

4
client/src/containers/Dialogs/AllocateLandedCostDialog/utils.js Normal file
View File

@@ -0,0 +1,4 @@
export function getEntriesByTransactionId(transactions, id) {
const transaction = transactions.find((trans) => trans.id === id);
return transaction ? transaction.entries : [];
}