Merge branch 'feature/landed-cost' of https://github.com/abouolia/Ratteb into feature/landed-cost

This commit is contained in:
a.bouhuolia
2021-07-25 04:00:06 +02:00
20 changed files with 294 additions and 163 deletions

View File

@@ -0,0 +1,41 @@
import React from 'react';
import classNames from 'classnames';
import { Classes, Checkbox, FormGroup, Intent } from '@blueprintjs/core';
const CheckboxEditableCell = ({
row: { index },
column: { id },
cell: { value: initialValue },
payload,
}) => {
const [value, setValue] = React.useState(initialValue);
const onChange = (e) => {
setValue(e.target.value);
};
const onBlur = () => {
payload.updateData(index, id, value);
};
React.useEffect(() => {
setValue(initialValue);
}, [initialValue]);
const error = payload.errors?.[index]?.[id];
return (
<FormGroup
// intent={error ? Intent.DANGER : null}
className={classNames(Classes.FILL)}
>
<Checkbox
value={value}
onChange={onChange}
onBlur={onBlur}
minimal={true}
className="ml2"
/>
</FormGroup>
);
};
export default CheckboxEditableCell;

View File

@@ -6,6 +6,7 @@ import ItemsListCell from './ItemsListCell';
import PercentFieldCell from './PercentFieldCell';
import { DivFieldCell, EmptyDiv } from './DivFieldCell';
import NumericInputCell from './NumericInputCell';
import CheckBoxFieldCell from './CheckBoxFieldCell'
export {
AccountsListFieldCell,
@@ -16,5 +17,6 @@ export {
PercentFieldCell,
DivFieldCell,
EmptyDiv,
NumericInputCell
NumericInputCell,
CheckBoxFieldCell
};

View File

@@ -21,11 +21,7 @@ function ExpenseDeleteAlert({
isOpen,
payload: { expenseId },
}) {
const {
mutateAsync: deleteExpenseMutate,
isLoading,
} = useDeleteExpense();
const { mutateAsync: deleteExpenseMutate, isLoading } = useDeleteExpense();
// Handle cancel expense journal.
const handleCancelExpenseDelete = () => {
@@ -34,17 +30,34 @@ function ExpenseDeleteAlert({
// Handle confirm delete expense.
const handleConfirmExpenseDelete = () => {
deleteExpenseMutate(expenseId).then(() => {
AppToaster.show({
message: intl.get(
'the_expense_has_been_deleted_successfully',
{ number: expenseId },
),
intent: Intent.SUCCESS,
});
}).finally(() => {
closeAlert('expense-delete');
});
deleteExpenseMutate(expenseId)
.then(() => {
AppToaster.show({
message: intl.get('the_expense_has_been_deleted_successfully', {
number: expenseId,
}),
intent: Intent.SUCCESS,
});
closeAlert('expense-delete');
})
.catch(
({
response: {
data: { errors },
},
}) => {
if (
errors.find((e) => e.type === 'EXPENSE_HAS_ASSOCIATED_LANDED_COST')
) {
AppToaster.show({
intent: Intent.DANGER,
message: intl.get(
'couldn_t_delete_expense_transaction_has_associated_located_landed_cost_transaction',
),
});
}
},
);
};
return (
@@ -68,4 +81,4 @@ function ExpenseDeleteAlert({
export default compose(
withAlertStoreConnect(),
withAlertActions,
)(ExpenseDeleteAlert);
)(ExpenseDeleteAlert);

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

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

View File

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

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

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>

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.
*/

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

View File

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

View File

@@ -0,0 +1,13 @@
import React from 'react';
import BillTransactionDeleteAlert from 'containers/Alerts/Bills/BillTransactionDeleteAlert';
/**
* Bill drawer alert.
*/
export default function BillDrawerAlerts() {
return (
<div class="bills-alerts">
<BillTransactionDeleteAlert name="transaction-delete" />
</div>
);
}

View File

@@ -1,16 +1,19 @@
import React from 'react';
import { BillDrawerProvider } from './BillDrawerProvider';
import BillDrawerDetails from './BillDrawerDetails';
import BillDrawerAlerts from './BillDrawerAlerts';
/**
* Bill drawer content.
*/
export default function BillDrawerContent({
// #ownProp
billId,
bill,
}) {
return (
<BillDrawerProvider billId={billId}>
<BillDrawerProvider billId={bill}>
<BillDrawerDetails />
<BillDrawerAlerts />
</BillDrawerProvider>
);
}

View File

@@ -1,6 +1,7 @@
import React from 'react';
import intl from 'react-intl-universal';
import { DrawerHeaderContent, DashboardInsider } from 'components';
import { useBillLocatedLandedCost } from 'hooks/query';
const BillDrawerContext = React.createContext();
@@ -8,10 +9,18 @@ const BillDrawerContext = React.createContext();
* Bill drawer provider.
*/
function BillDrawerProvider({ billId, ...props }) {
// Handle fetch bill located landed cost transaction.
const { isLoading: isLandedCostLoading, data: transactions } =
useBillLocatedLandedCost(billId, {
enabled: !!billId,
});
//provider.
const provider = {};
const provider = {
transactions,
};
return (
<DashboardInsider>
<DashboardInsider loading={isLandedCostLoading}>
<DrawerHeaderContent
name="bill-drawer"
title={intl.get('bill_details')}

View File

@@ -79,7 +79,10 @@ function ExpenseForm({
}
const categories = values.categories.filter(
(category) =>
category.amount && category.index && category.expense_account_id,
category.amount &&
category.index &&
category.expense_account_id &&
category.landed_cost,
);
const form = {

View File

@@ -7,6 +7,7 @@ import {
InputGroupCell,
MoneyFieldCell,
AccountsListFieldCell,
CheckBoxFieldCell,
} from 'components/DataTableCells';
import { formattedAmount, safeSumBy } from 'utils';
@@ -49,19 +50,6 @@ const ActionsCellRenderer = ({
);
};
/**
* Landed cost cell.
*/
const LandedCostCell = ({
row: { index },
column: { id },
cell: { value: initialValue },
data,
payload,
}) => {
return <Checkbox minimal={true} className="ml2" />;
};
/**
* Landed cost header cell.
*/
@@ -142,7 +130,7 @@ export function useExpenseFormTableColumns() {
{
Header: LandedCostHeaderCell,
accessor: 'landed_cost',
Cell: LandedCostCell,
Cell: CheckBoxFieldCell,
disableSortBy: true,
disableResizing: true,
width: 70,

View File

@@ -27,7 +27,7 @@ export const defaultExpenseEntry = {
amount: '',
expense_account_id: '',
description: '',
landed_cost: false,
landed_cost: 0,
};
export const defaultExpense = {

View File

@@ -51,4 +51,14 @@ export const handleDeleteErrors = (errors) => {
intent: Intent.DANGER,
});
}
if (
errors.find((error) => error.type === 'BILL_HAS_ASSOCIATED_LANDED_COSTS')
) {
AppToaster.show({
message: intl.get(
'cannot_delete_bill_that_has_associated_landed_cost_transactions',
),
intent: Intent.DANGER,
});
}
};

View File

@@ -63,8 +63,11 @@ export function useLandedCostTransaction(query, props) {
params: { transaction_type: query },
},
{
select: (res) => res.data.transactions,
defaultData: [],
select: (res) => res.data,
defaultData: {
transactions: [],
},
...props,
},
);

View File

@@ -1126,22 +1126,25 @@
"manual_journal_number": "Manual journal {number}",
"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",
"details":"Details",
"located_landed_cost":"Located Landed Cost",
"delete_transaction":"Delete transaction",
"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",
"details": "Details",
"located_landed_cost": "Located Landed Cost",
"delete_transaction": "Delete transaction",
"all_items": "All items",
"Specific items": "Specific items",
"Selected contacts": "Selected contacts",
"All contacts": "All contacts",
"Selected items ({count})": "Selected items ({count})",
"All items": "All items",
"No items": "No items"
"No items": "No items",
"cannot_delete_bill_that_has_associated_landed_cost_transactions": "Cannot delete bill that has associated landed cost transactions.",
"couldn_t_delete_expense_transaction_has_associated_located_landed_cost_transaction": "Couldn't delete expense transaction has associated located landed cost transaction",
"the_landed_cost_has_been_created_successfully": "The landed cost has been created successfully"
}