feature/ allocate landed cost.

This commit is contained in:
elforjani3
2021-07-21 23:47:40 +02:00
parent 0937f11326
commit 2b5d00ed60
17 changed files with 572 additions and 11 deletions

View File

@@ -0,0 +1,6 @@
import intl from 'react-intl-universal';
export default [
{ name: intl.get('bills'), value: 'bills' },
{ name: intl.get('expenses'), value: 'expenses' },
]

View File

@@ -13,6 +13,7 @@ import KeyboardShortcutsDialog from 'containers/Dialogs/keyboardShortcutsDialog'
import ContactDuplicateDialog from 'containers/Dialogs/ContactDuplicateDialog';
import QuickPaymentReceiveFormDialog from 'containers/Dialogs/QuickPaymentReceiveFormDialog';
import QuickPaymentMadeFormDialog from 'containers/Dialogs/QuickPaymentMadeFormDialog';
import AllocateLandedCostDialog from 'containers/Dialogs/AllocateLandedCostDialog';
/**
* Dialogs container.
@@ -32,6 +33,7 @@ export default function DialogsContainer() {
<ContactDuplicateDialog dialogName={'contact-duplicate'} />
<QuickPaymentReceiveFormDialog dialogName={'quick-payment-receive'} />
<QuickPaymentMadeFormDialog dialogName={'quick-payment-made'} />
<AllocateLandedCostDialog dialogName={'allocate-landed-cost'} />
</div>
);
}

View File

@@ -56,6 +56,7 @@ import DrawerHeaderContent from './Drawer/DrawerHeaderContent';
import Postbox from './Postbox';
import AccountsSuggestField from './AccountsSuggestField';
import MaterialProgressBar from './MaterialProgressBar';
import { MoneyFieldCell } from './DataTableCells';
const Hint = FieldHint;
@@ -123,4 +124,5 @@ export {
Postbox,
AccountsSuggestField,
MaterialProgressBar,
MoneyFieldCell,
};

View File

@@ -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>
);
}

View File

@@ -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,
};

View File

@@ -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} />;
}

View File

@@ -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);

View File

@@ -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);

View File

@@ -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;

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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);

View File

@@ -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,
}}
/>
);

View File

@@ -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}

View File

@@ -1124,5 +1124,14 @@
"refresh_the_page_if_redirect_not_worked": "Refresh the page if redirect not worked.",
"payment_has_been_done_successfully": "Payment has been done successfully.",
"manual_journal_number": "Manual journal {number}",
"conditions_and_terms":"Conditions and terms"
}
"conditions_and_terms": "Conditions and terms",
"allocate_landed_coast": "Allocate landed cost",
"transaction_date":"Transaction date",
"transaction_type":"Transaction type",
"transaction_id":"Transaction #",
"transaction_number":"Transaction number",
"transaction_line":"Transaction line",
"allocation_method":"Allocation method",
"valuation":"Valuation",
"select_transaction":"Select transaction account"
}

View File

@@ -0,0 +1,42 @@
// Allocate Landed Cost Form.
.dialog--allocate-landed-cost-form {
width: 700px;
.bp3-dialog-body {
.bp3-form-group.bp3-inline {
.bp3-label {
min-width: 140px;
}
.bp3-form-content {
width: 300px;
}
&:not(.dialog--loading) .bp3-dialog-body {
margin-bottom: 30px;
}
}
}
.bigcapital-datatable {
.table {
max-height: 300px;
border: 1px solid #d1dee2;
min-width: auto;
.tbody,
.tbody-inner {
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.tbody {
.tr .td {
padding: 0.4rem;
margin-left: -1px;
border-left: 1px solid #ececec;
}
}
}
}
}