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

WIP / exchangeRate / localize

Browse Source
This commit is contained in:
elforjani3
2020-05-10 20:44:23 +02:00
parent e590a21740
commit cceb4786c2
55 changed files with 2339 additions and 971 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/components/AccountsMultiSelect.js
View File

@@ -6,6 +6,7 @@ import {
} from '@blueprintjs/core';
// import {Select} from '@blueprintjs/select';
import MultiSelect from 'components/MultiSelect';
import { FormattedMessage as T, useIntl } from 'react-intl';
export default function AccountsMultiSelect({
accounts,
@@ -58,7 +59,7 @@ export default function AccountsMultiSelect({
<Button
rightIcon='caret-down'
text={countSelectedAccounts === 0 ?
'All accounts' :
<T id={'all_accounts'}/>:
`(${countSelectedAccounts}) Selected accounts`
}
/>

33
client/src/components/Authentication.js
View File

@@ -1,26 +1,32 @@
import React from 'react';
import { Redirect, Route, Switch, Link } from 'react-router-dom';
import BodyClassName from 'react-body-classname';
import BodyClassName from 'react-body-classname';
import authenticationRoutes from 'routes/authentication';
import { FormattedMessage as T, useIntl } from 'react-intl';
export default function AuthenticationWrapper({ isAuthenticated =false, ...rest }) {
const to = {pathname: '/dashboard/homepage'};
export default function AuthenticationWrapper({
isAuthenticated = false,
...rest
}) {
const to = { pathname: '/dashboard/homepage' };
return (
<Route path="/auth">
{ (isAuthenticated) ?
(<Redirect to={to} />) : (
<Route path='/auth'>
{isAuthenticated ? (
<Redirect to={to} />
) : (
<BodyClassName className={'authentication'}>
<Switch>
<div class="authentication-page">
<div class='authentication-page'>
<Link
to={'bigcapital.io'}
className={'authentication-page__goto-bigcapital'}>
← Go to bigcapital.com
className={'authentication-page__goto-bigcapital'}
>
<T id={'go_to_bigcapital_com'} />
</Link>
<div class="authentication-page__form-wrapper">
{ authenticationRoutes.map((route, index) => (
<div class='authentication-page__form-wrapper'>
{authenticationRoutes.map((route, index) => (
<Route
key={index}
path={route.path}
@@ -32,8 +38,7 @@ export default function AuthenticationWrapper({ isAuthenticated =false, ...rest
</div>
</Switch>
</BodyClassName>
)
}
)}
</Route>
);
}
}

3
client/src/components/CurrenciesSelectList.js
View File

@@ -10,6 +10,7 @@ import {
Select
} from '@blueprintjs/select';
import { FormattedMessage as T, useIntl } from 'react-intl';
export default function CurrenciesSelectList(props) {
const {formGroupProps, selectProps, onItemSelect} = props;
@@ -39,7 +40,7 @@ export default function CurrenciesSelectList(props) {
return (
<FormGroup
label={'Currency'}
label={<T id={'currency'}/>}
className={'form-group--select-list form-group--currency'}
{...formGroupProps}
>

7
client/src/components/Dashboard/DashboardTopbar.js
View File

@@ -12,6 +12,7 @@ import DashboardTopbarUser from 'components/Dashboard/TopbarUser';
import Icon from 'components/Icon';
import SearchConnect from 'connectors/Search.connect';
import { compose } from 'utils';
import { FormattedMessage as T, useIntl } from 'react-intl';
function DashboardTopbar({
pageTitle,
@@ -77,18 +78,18 @@ function DashboardTopbar({
onClick={() => openGlobalSearch(true)}
className={Classes.MINIMAL}
icon='home'
text='Search'
text={<T id={'search'}/>}
/>
<Button
className={Classes.MINIMAL}
icon='document'
text='Filters'
text={<T id={'filters'}/>}
/>
<Button
className={Classes.MINIMAL}
icon='document'
text='Add order'
text={<T id={'add_order'}/>}
/>
<Button className={Classes.MINIMAL} icon='document' text='More' />
</NavbarGroup>

2
client/src/components/DialogsContainer.js
View File

@@ -4,10 +4,12 @@ import UserFormDialog from 'containers/Dialogs/UserFormDialog';
import ItemCategoryDialog from 'containers/Dialogs/ItemCategoryDialog';
import CurrencyDialog from 'containers/Dialogs/CurrencyDialog';
import InviteUserDialog from 'containers/Dialogs/InviteUserDialog';
import ExchangeRateDialog from 'containers/Dialogs/ExchangeRateDialog';
export default function DialogsContainer() {
return (
<React.Fragment>
<ExchangeRateDialog />
<InviteUserDialog />
<CurrencyDialog />
<ItemCategoryDialog />

23
client/src/components/Expenses/ExpenseForm.js
View File

@@ -13,7 +13,7 @@ import {
} from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import { Select } from '@blueprintjs/select';
import { useIntl } from 'react-intl';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { momentFormatter } from 'utils';
import moment from 'moment';
import AppToaster from 'components/AppToaster';
@@ -25,8 +25,7 @@ export default function ExpenseForm({
expenseDetails,
currencies
}) {
const intl = useIntl();
console.log({ accounts });
const {formatMessage} = useIntl();
const [state, setState] = useState({
selectedExpenseAccount: null,
@@ -121,7 +120,7 @@ export default function ExpenseForm({
<div class='expense-form'>
<form onSubmit={formik.handleSubmit}>
<FormGroup
label={'Date'}
label={<T id={'date'}/>}
inline={true}
intent={formik.errors.date && Intent.DANGER}
helperText={formik.errors.date && formik.errors.date}
@@ -135,7 +134,7 @@ export default function ExpenseForm({
</FormGroup>
<FormGroup
label={'Expense Account'}
label={<T id={'expense_account'}/>}
className={'form-group--expense-account'}
inline={true}
intent={formik.errors.expense_account_id && Intent.DANGER}
@@ -159,7 +158,7 @@ export default function ExpenseForm({
</FormGroup>
<FormGroup
label={'Amount'}
label={<T id={'amount'}/>}
className={'form-group--amount'}
intent={formik.errors.amount && Intent.DANGER}
helperText={formik.errors.amount && formik.errors.amount}
@@ -191,7 +190,7 @@ export default function ExpenseForm({
</FormGroup>
<FormGroup
label={'Exchange Rate'}
label={<T id={'exchange_rate'}/>}
className={'form-group--exchange-rate'}
inline={true}
>
@@ -199,7 +198,7 @@ export default function ExpenseForm({
</FormGroup>
<FormGroup
label={'Payment Account'}
label={<T id={'payment_account'}/>}
className={'form-group--payment-account'}
inline={true}
intent={formik.errors.payment_account_id && Intent.DANGER}
@@ -223,7 +222,7 @@ export default function ExpenseForm({
</FormGroup>
<FormGroup
label={'Description'}
label={<T id={'description'}/>}
className={'form-group--description'}
inline={true}
>
@@ -236,10 +235,10 @@ export default function ExpenseForm({
<div class='form__floating-footer'>
<Button intent={Intent.PRIMARY} type='submit'>
Save
<T id={'save'}/>
</Button>
<Button>Save as Draft</Button>
<Button onClick={handleClose}>Close</Button>
<Button><T id={'save_as_draft'}/></Button>
<Button onClick={handleClose}><T id={'close'}/></Button>
</div>
</form>
</div>

13
client/src/components/Expenses/ExpensesActionsBar.js
View File

@@ -16,6 +16,7 @@ import { useRouteMatch } from 'react-router-dom'
import classNames from 'classnames';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import Icon from 'components/Icon';
import { FormattedMessage as T, useIntl } from 'react-intl';
export default function ExpensesActionsBar({
@@ -39,7 +40,7 @@ export default function ExpensesActionsBar({
<Button
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon='table' />}
text='Table Views'
text={<T id={'table_views'}/>}
rightIcon={'caret-down'}
/>
</Popover>
@@ -50,31 +51,31 @@ export default function ExpensesActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon='plus' />}
href='/dashboard/expenses/new'
text='New Expense'
text={<T id={'new_expense'}/>}
onClick={onClickNewAccount}
/>
<Button
className={Classes.MINIMAL}
intent={Intent.DANGER}
icon={<Icon icon='plus' />}
text='Delete'
text={<T id={'delete'}/>}
onClick={onClickNewAccount}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='plus' />}
text='Bulk Update'
text={<T id={'bulk_update'}/>}
onClick={onClickNewAccount}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-import' />}
text='Import'
text={<T id={'import'}/>}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
text='Export'
text={<T id={'export'}/>}
/>
</NavbarGroup>
</DashboardActionsBar>

3
client/src/components/FilterDropdown.js
View File

@@ -13,6 +13,7 @@ import { usePrevious } from 'react-use';
import { debounce } from 'lodash';
import Icon from 'components/Icon';
import { checkRequiredProperties } from 'utils';
import { FormattedMessage as T, useIntl } from 'react-intl';
export default function FilterDropdown({
fields,
@@ -146,7 +147,7 @@ export default function FilterDropdown({
minimal={true}
intent={Intent.PRIMARY}
onClick={onClickNewFilter}>
+ New Conditional
<T id={'new_conditional'}/>
</Button>
</div>
</div>

68
client/src/config/sidebarMenu.js
View File

@@ -1,16 +1,16 @@
export default [
{
divider: true
divider: true,
},
{
icon: 'homepage',
iconSize: 20,
text: 'Homepage',
disabled: false,
href: '/dashboard/homepage'
href: '/dashboard/homepage',
},
{
divider: true
divider: true,
},
{
icon: 'homepage',
@@ -19,20 +19,20 @@ export default [
children: [
{
text: 'Items List',
href: '/dashboard/items'
href: '/dashboard/items',
},
{
text: 'New Item',
href: '/dashboard/items/new'
href: '/dashboard/items/new',
},
{
text: 'Category List',
href: '/dashboard/items/categories'
href: '/dashboard/items/categories',
},
]
],
},
{
divider: true
divider: true,
},
{
icon: 'balance-scale',
@@ -41,29 +41,33 @@ export default [
children: [
{
text: 'Accounts Chart',
href: '/dashboard/accounts'
href: '/dashboard/accounts',
},
{
text: 'Manual Journal',
href: '/dashboard/accounting/manual-journals'
href: '/dashboard/accounting/manual-journals',
},
{
text: 'Make Journal',
href: '/dashboard/accounting/make-journal-entry'
href: '/dashboard/accounting/make-journal-entry',
},
]
{
text: 'Exchange Rate',
href: '/dashboard/ExchangeRates',
},
],
},
{
icon: 'university',
iconSize: 20,
text: 'Banking',
children: []
children: [],
},
{
icon: 'shopping-cart',
iconSize: 20,
text: 'Sales',
children: []
children: [],
},
{
icon: 'balance-scale',
@@ -74,9 +78,9 @@ export default [
icon: 'cut',
text: 'cut',
label: '⌘C',
disabled: false
}
]
disabled: false,
},
],
},
{
icon: 'analytics',
@@ -85,25 +89,25 @@ export default [
children: [
{
text: 'Balance Sheet',
href: '/dashboard/accounting/balance-sheet'
href: '/dashboard/accounting/balance-sheet',
},
{
text: 'Trial Balance Sheet',
href: '/dashboard/accounting/trial-balance-sheet'
href: '/dashboard/accounting/trial-balance-sheet',
},
{
text: 'Journal',
href: '/dashboard/accounting/journal-sheet'
href: '/dashboard/accounting/journal-sheet',
},
{
text: 'General Ledger',
href: '/dashboard/accounting/general-ledger'
href: '/dashboard/accounting/general-ledger',
},
{
text: 'Profit Loss Sheet',
href: '/dashboard/accounting/profit-loss-sheet'
}
]
href: '/dashboard/accounting/profit-loss-sheet',
},
],
},
{
text: 'Expenses',
@@ -112,23 +116,23 @@ export default [
children: [
{
text: 'Expenses List',
href: '/dashboard/expenses'
href: '/dashboard/expenses',
},
{
text: 'New Expenses',
href: '/dashboard/expenses/new'
}
]
href: '/dashboard/expenses/new',
},
],
},
{
divider: true
divider: true,
},
{
text: 'Preferences',
href: '/dashboard/preferences'
href: '/dashboard/preferences',
},
{
text: 'Auditing System',
href: '/dashboard/auditing/list'
}
href: '/dashboard/auditing/list',
},
];

31
client/src/connectors/ExchangeRatesFromDialog.connect.js Normal file
View File

@@ -0,0 +1,31 @@
import { connect } from 'react-redux';
import { compose } from 'utils';
import DialogConnect from 'connectors/Dialog.connector';
import DialogReduxConnect from 'components/DialogReduxConnect';
import withExchangeRatesActions from 'containers/FinancialStatements/ExchangeRates/withExchangeRatesActions';
import withExchangeRates from 'containers/FinancialStatements/ExchangeRates/withExchangeRates';
import { getDialogPayload } from 'store/dashboard/dashboard.reducer';
import CurrencyFromDialogConnect from 'connectors/CurrencyFromDialog.connect';
export const mapStateToProps = (state, props) => {
const dialogPayload = getDialogPayload(state, 'exchangeRate-form');
return {
exchangeRatesList: Object.values(state.exchangeRates.exchangeRates),
name: 'exchangeRate-form',
payload: { action: 'new', id: null, ...dialogPayload },
editExchangeRate:
dialogPayload && dialogPayload.action === 'edit'
? state.exchangeRates.exchangeRates[dialogPayload.id]
: {},
};
};
const ExchangeRatesDialogConnect = connect(mapStateToProps);
export default compose(
CurrencyFromDialogConnect,
ExchangeRatesDialogConnect,
withExchangeRatesActions,
withExchangeRates,
DialogReduxConnect,
DialogConnect
);

37
client/src/containers/Accounting/MakeJournalEntriesFooter.js
View File

@@ -1,9 +1,6 @@
import React, {useMemo} from 'react';
import {
Intent,
Button,
} from '@blueprintjs/core';
import { FormattedList } from 'react-intl';
import React, { useMemo } from 'react';
import { Intent, Button } from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
export default function MakeJournalEntriesFooter({
formik: { isSubmitting },
@@ -12,15 +9,16 @@ export default function MakeJournalEntriesFooter({
}) {
return (
<div>
<div class="form__floating-footer">
<div class='form__floating-footer'>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
name={'save'}
onClick={() => {
onSubmitClick({ publish: true, redirect: true });
}}>
Save
}}
>
<T id={'save'} />
</Button>
<Button
@@ -29,28 +27,31 @@ export default function MakeJournalEntriesFooter({
className={'ml1'}
name={'save_and_new'}
onClick={() => {
onSubmitClick({ publish: true, redirect: false });
}}>
Save & New
onSubmitClick({ publish: true, redirect: false });
}}
>
<T id={'save_new'} />
</Button>
<Button
disabled={isSubmitting}
className={'button-secondary ml1'}
onClick={() => {
onSubmitClick({ publish: false, redirect: false });
}}>
Save as Draft
onSubmitClick({ publish: false, redirect: false });
}}
>
<T id={'save_as_draft'} />
</Button>
<Button
className={'button-secondary ml1'}
onClick={() => {
onCancelClick && onCancelClick();
}}>
Cancel
}}
>
<T id={'cancel'}/>
</Button>
</div>
</div>
);
}
}

12
client/src/containers/Accounting/MakeJournalEntriesHeader.js
View File

@@ -6,7 +6,7 @@ import {
Position,
} from '@blueprintjs/core';
import {DateInput} from '@blueprintjs/datetime';
import {useIntl} from 'react-intl';
import { FormattedMessage as T, useIntl } from 'react-intl';
import {Row, Col} from 'react-grid-system';
import moment from 'moment';
import {momentFormatter} from 'utils';
@@ -17,7 +17,7 @@ import ErrorMessage from 'components/ErrorMessage';
export default function MakeJournalEntriesHeader({
formik: { errors, touched, setFieldValue, getFieldProps }
}) {
const intl = useIntl();
const {formatMessage} = useIntl();
const handleDateChange = useCallback((date) => {
const formatted = moment(date).format('YYYY-MM-DD');
@@ -32,7 +32,7 @@ export default function MakeJournalEntriesHeader({
<Row>
<Col sm={3}>
<FormGroup
label={'Journal number'}
label={<T id={'journal_number'}/>}
labelInfo={infoIcon}
className={'form-group--journal-number'}
intent={(errors.journal_number && touched.journal_number) && Intent.DANGER}
@@ -48,7 +48,7 @@ export default function MakeJournalEntriesHeader({
<Col sm={2}>
<FormGroup
label={intl.formatMessage({'id': 'date'})}
label={<T id={'date'}/>}
intent={(errors.date && touched.date) && Intent.DANGER}
helperText={<ErrorMessage name="date" {...{errors, touched}} />}
minimal={true}>
@@ -63,7 +63,7 @@ export default function MakeJournalEntriesHeader({
<Col sm={4}>
<FormGroup
label={intl.formatMessage({'id': 'description'})}
label={<T id={'description'}/>}
className={'form-group--description'}
intent={(errors.name && touched.name) && Intent.DANGER}
helperText={<ErrorMessage name="description" {...{errors, touched}} />}
@@ -80,7 +80,7 @@ export default function MakeJournalEntriesHeader({
<Row>
<Col sm={3}>
<FormGroup
label={'Reference'}
label={<T id={'reference'}/>}
labelInfo={infoIcon}
className={'form-group--reference'}
intent={(errors.reference && touched.reference) && Intent.DANGER}

252
client/src/containers/Accounting/MakeJournalEntriesTable.js
View File

@@ -1,11 +1,8 @@
import React, {useState, useMemo, useEffect, useCallback} from 'react';
import {
Button,
Intent,
} from '@blueprintjs/core';
import React, { useState, useMemo, useEffect, useCallback } from 'react';
import { Button, Intent } from '@blueprintjs/core';
import DataTable from 'components/DataTable';
import Icon from 'components/Icon';
import { compose, formattedAmount} from 'utils';
import { compose, formattedAmount } from 'utils';
import {
AccountsListFieldCell,
MoneyFieldCell,
@@ -14,7 +11,7 @@ import {
import { omit } from 'lodash';
import withAccounts from 'containers/Accounts/withAccounts';
import { FormattedMessage as T, useIntl } from 'react-intl';
// Actions cell renderer.
const ActionsCellRenderer = ({
@@ -24,7 +21,7 @@ const ActionsCellRenderer = ({
data,
payload,
}) => {
if (data.length <= (index + 2)) {
if (data.length <= index + 2) {
return '';
}
const onClickRemoveRole = () => {
@@ -32,47 +29,47 @@ const ActionsCellRenderer = ({
};
return (
<Button
icon={<Icon icon="times-circle" iconSize={14} />}
<Button
icon={<Icon icon='times-circle' iconSize={14} />}
iconSize={14}
className="ml2"
className='ml2'
minimal={true}
intent={Intent.DANGER}
onClick={onClickRemoveRole} />
onClick={onClickRemoveRole}
/>
);
};
// Total text cell renderer.
const TotalAccountCellRenderer = (chainedComponent) => (props) => {
if (props.data.length === (props.row.index + 2)) {
return (<span>{ 'Total USD' }</span>);
if (props.data.length === props.row.index + 2) {
return <span>{'Total USD'}</span>;
}
return chainedComponent(props);
};
// Total credit/debit cell renderer.
const TotalCreditDebitCellRenderer = (chainedComponent, type) => (props) => {
if (props.data.length === (props.row.index + 2)) {
const total = props.data.reduce((total, entry) => {
if (props.data.length === props.row.index + 2) {
const total = props.data.reduce((total, entry) => {
const amount = parseInt(entry[type], 10);
const computed = amount ? total + amount : total;
return computed;
}, 0);
return (<span>{ formattedAmount(total, 'USD') }</span>);
return <span>{formattedAmount(total, 'USD')}</span>;
}
return chainedComponent(props);
};
const NoteCellRenderer = (chainedComponent) => (props) => {
if (props.data.length === (props.row.index + 2)) {
if (props.data.length === props.row.index + 2) {
return '';
}
return chainedComponent(props);
};
/**
* Make journal entries table component.
*/
@@ -85,116 +82,128 @@ function MakeJournalEntriesTable({
initialValues,
}) {
const [rows, setRow] = useState([]);
useEffect(() => {
const { formatMessage } = useIntl();
useEffect(() => {
setRow([
...initialValues.entries.map((e) => ({ ...e, rowType: 'editor'})),
...initialValues.entries.map((e) => ({ ...e, rowType: 'editor' })),
defaultRow,
defaultRow,
])
}, [initialValues, defaultRow])
]);
}, [initialValues, defaultRow]);
// Handles update datatable data.
const handleUpdateData = useCallback((rowIndex, columnId, value) => {
const newRows = rows.map((row, index) => {
if (index === rowIndex) {
return { ...rows[rowIndex], [columnId]: value };
}
return { ...row };
});
setRow(newRows);
setFieldValue('entries', newRows.map(row => ({
...omit(row, ['rowType']),
})));
}, [rows, setFieldValue]);
const handleUpdateData = useCallback(
(rowIndex, columnId, value) => {
const newRows = rows.map((row, index) => {
if (index === rowIndex) {
return { ...rows[rowIndex], [columnId]: value };
}
return { ...row };
});
setRow(newRows);
setFieldValue(
'entries',
newRows.map((row) => ({
...omit(row, ['rowType']),
}))
);
},
[rows, setFieldValue]
);
// Handles click remove datatable row.
const handleRemoveRow = useCallback((rowIndex) => {
const removeIndex = parseInt(rowIndex, 10);
const newRows = rows.filter((row, index) => index !== removeIndex);
setRow([ ...newRows ]);
setFieldValue('entries', newRows
.filter(row => row.rowType === 'editor')
.map(row => ({ ...omit(row, ['rowType']) })
));
onClickRemoveRow && onClickRemoveRow(removeIndex);
}, [rows, setFieldValue, onClickRemoveRow]);
const handleRemoveRow = useCallback(
(rowIndex) => {
const removeIndex = parseInt(rowIndex, 10);
const newRows = rows.filter((row, index) => index !== removeIndex);
setRow([...newRows]);
setFieldValue(
'entries',
newRows
.filter((row) => row.rowType === 'editor')
.map((row) => ({ ...omit(row, ['rowType']) }))
);
onClickRemoveRow && onClickRemoveRow(removeIndex);
},
[rows, setFieldValue, onClickRemoveRow]
);
// Memorized data table columns.
const columns = useMemo(() => [
{
Header: '#',
accessor: 'index',
Cell: ({ row: {index} }) => (
<span>{ index + 1 }</span>
),
className: "index",
width: 40,
disableResizing: true,
disableSortBy: true,
},
{
Header: 'Account',
id: 'account_id',
accessor: 'account_id',
Cell: TotalAccountCellRenderer(AccountsListFieldCell),
className: "account",
disableSortBy: true,
disableResizing: true,
width: 250,
},
{
Header: 'Credit (USD)',
accessor: 'credit',
Cell: TotalCreditDebitCellRenderer(MoneyFieldCell, 'credit'),
className: "credit",
disableSortBy: true,
disableResizing: true,
width: 150,
},
{
Header: 'Debit (USD)',
accessor: 'debit',
Cell: TotalCreditDebitCellRenderer(MoneyFieldCell, 'debit'),
className: "debit",
disableSortBy: true,
disableResizing: true,
width: 150,
},
{
Header: 'Note',
accessor: 'note',
Cell: NoteCellRenderer(InputGroupCell),
disableSortBy: true,
className: "note",
},
{
Header: '',
accessor: 'action',
Cell: ActionsCellRenderer,
className: "actions",
disableSortBy: true,
disableResizing: true,
width: 45,
}
], []);
const columns = useMemo(
() => [
{
Header: '#',
accessor: 'index',
Cell: ({ row: { index } }) => <span>{index + 1}</span>,
className: 'index',
width: 40,
disableResizing: true,
disableSortBy: true,
},
{
Header: formatMessage({ id: 'account' }),
id: 'account_id',
accessor: 'account_id',
Cell: TotalAccountCellRenderer(AccountsListFieldCell),
className: 'account',
disableSortBy: true,
disableResizing: true,
width: 250,
},
{
Header: formatMessage({ id: 'credit_usd' }),
accessor: 'credit',
Cell: TotalCreditDebitCellRenderer(MoneyFieldCell, 'credit'),
className: 'credit',
disableSortBy: true,
disableResizing: true,
width: 150,
},
{
Header: formatMessage({ id: 'debit_usd' }),
accessor: 'debit',
Cell: TotalCreditDebitCellRenderer(MoneyFieldCell, 'debit'),
className: 'debit',
disableSortBy: true,
disableResizing: true,
width: 150,
},
{
Header: formatMessage({ id: 'note' }),
accessor: 'note',
Cell: NoteCellRenderer(InputGroupCell),
disableSortBy: true,
className: 'note',
},
{
Header: '',
accessor: 'action',
Cell: ActionsCellRenderer,
className: 'actions',
disableSortBy: true,
disableResizing: true,
width: 45,
},
],
[]
);
// Handles click new line.
const onClickNewRow = useCallback(() => {
setRow([
...rows,
{ ...defaultRow, rowType: 'editor' },
]);
setRow([...rows, { ...defaultRow, rowType: 'editor' }]);
onClickAddNewRow && onClickAddNewRow();
}, [defaultRow, rows, onClickAddNewRow]);
const rowClassNames = useCallback((row) => ({
'row--total': rows.length === (row.index + 2),
}), [rows]);
const rowClassNames = useCallback(
(row) => ({
'row--total': rows.length === row.index + 2,
}),
[rows]
);
return (
<div class="make-journal-entries__table">
<div class='make-journal-entries__table'>
<DataTable
columns={columns}
data={rows}
@@ -204,27 +213,28 @@ function MakeJournalEntriesTable({
errors: errors.entries || [],
updateData: handleUpdateData,
removeRow: handleRemoveRow,
}}/>
}}
/>
<div class="mt1">
<div class='mt1'>
<Button
small={true}
className={'button--secondary button--new-line'}
onClick={onClickNewRow}>
New lines
onClick={onClickNewRow}
>
<T id={'new_lines'} />
</Button>
<Button
small={true}
className={'button--secondary button--clear-lines ml1'}
onClick={onClickNewRow}>
Clear all lines
onClick={onClickNewRow}
>
<T id={'clear_all_lines'} />
</Button>
</div>
</div>
);
}
export default compose(
withAccounts,
)(MakeJournalEntriesTable);
export default compose(withAccounts)(MakeJournalEntriesTable);

12
client/src/containers/Accounting/ManualJournalActionsBar.js
View File

@@ -23,6 +23,7 @@ import withResourceDetail from 'containers/Resources/withResourceDetails';
import withManualJournals from 'containers/Accounting/withManualJournals';
import withManualJournalsActions from 'containers/Accounting/withManualJournalsActions';
import { FormattedMessage as T, useIntl } from 'react-intl';
function ManualJournalActionsBar({
resourceName = 'manual_journal',
@@ -37,6 +38,7 @@ function ManualJournalActionsBar({
}) {
const { path } = useRouteMatch();
const history = useHistory();
const {formatMessage} = useIntl();
const viewsMenuItems = manualJournalsViews.map(view => {
return (
@@ -76,7 +78,7 @@ function ManualJournalActionsBar({
<Button
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon='table' />}
text='Table Views'
text={<T id={'table_views'}/>}
rightIcon={'caret-down'}
/>
</Popover>
@@ -84,7 +86,7 @@ function ManualJournalActionsBar({
<Button
className={Classes.MINIMAL}
icon={<Icon icon='plus' />}
text='New Journal'
text={<T id={'new_journal'}/>}
onClick={onClickNewManualJournal}
/>
<Popover
@@ -103,7 +105,7 @@ function ManualJournalActionsBar({
<Button
className={Classes.MINIMAL}
icon={<Icon icon='trash' iconSize={15} />}
text='Delete'
text={<T id={'delete'}/>}
intent={Intent.DANGER}
onClick={handleBulkDelete}
/>
@@ -111,12 +113,12 @@ function ManualJournalActionsBar({
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-import' />}
text='Import'
text={<T id={'import'}/>}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
text='Export'
text={<T id={'export'}/>}
/>
</NavbarGroup>
</DashboardActionsBar>

218
client/src/containers/Accounting/ManualJournalsDataTable.js
View File

@@ -24,7 +24,7 @@ import withDashboardActions from 'containers/Dashboard/withDashboard';
import withViewDetails from 'containers/Views/withViewDetails';
import withManualJournals from 'containers/Accounting/withManualJournals';
import withManualJournalsActions from 'containers/Accounting/withManualJournalsActions';
import { FormattedMessage as T, useIntl } from 'react-intl';
function ManualJournalsDataTable({
loading,
@@ -47,7 +47,7 @@ function ManualJournalsDataTable({
}) {
const { custom_view_id: customViewId } = useParams();
const [initialMount, setInitialMount] = useState(false);
const { formatMessage } = useIntl();
useUpdateEffect(() => {
if (!manualJournalsLoading) {
setInitialMount(true);
@@ -68,118 +68,140 @@ function ManualJournalsDataTable({
viewMeta,
]);
const handlePublishJournal = useCallback((journal) => () => {
onPublishJournal && onPublishJournal(journal);
}, [onPublishJournal]);
const handlePublishJournal = useCallback(
(journal) => () => {
onPublishJournal && onPublishJournal(journal);
},
[onPublishJournal]
);
const handleEditJournal = useCallback((journal) => () => {
onEditJournal && onEditJournal(journal);
}, [onEditJournal]);
const handleEditJournal = useCallback(
(journal) => () => {
onEditJournal && onEditJournal(journal);
},
[onEditJournal]
);
const handleDeleteJournal = useCallback((journal) => () => {
onDeleteJournal && onDeleteJournal(journal);
}, [onDeleteJournal]);
const handleDeleteJournal = useCallback(
(journal) => () => {
onDeleteJournal && onDeleteJournal(journal);
},
[onDeleteJournal]
);
const actionMenuList = (journal) => (
<Menu>
<MenuItem text='View Details' />
<MenuItem text={<T id={'view_details'} />} />
<MenuDivider />
{!journal.status && (
<MenuItem
text="Publish Journal"
onClick={handlePublishJournal(journal)} />
)}
text={<T id={'publish_journal'} />}
onClick={handlePublishJournal(journal)}
/>
)}
<MenuItem
text='Edit Journal'
onClick={handleEditJournal(journal)} />
text={<T id={'edit_journal'} />}
onClick={handleEditJournal(journal)}
/>
<MenuItem
text='Delete Journal'
text={<T id={'delete_journal'} />}
intent={Intent.DANGER}
onClick={handleDeleteJournal(journal)} />
onClick={handleDeleteJournal(journal)}
/>
</Menu>
);
const columns = useMemo(() => [
{
id: 'date',
Header: 'Date',
accessor: r => moment().format('YYYY-MM-DD'),
disableResizing: true,
width: 150,
className: 'date',
},
{
id: 'amount',
Header: 'Amount',
accessor: r => (<Money amount={r.amount} currency={'USD'} />),
disableResizing: true,
className: 'amount',
},
{
id: 'journal_number',
Header: 'Journal No.',
accessor: 'journal_number',
disableResizing: true,
className: 'journal_number',
},
{
id: 'status',
Header: 'Status',
accessor: (r) => {
return r.status ? 'Published' : 'Draft';
const columns = useMemo(
() => [
{
id: 'date',
Header: formatMessage({ id: 'date' }),
accessor: (r) => moment().format('YYYY-MM-DD'),
disableResizing: true,
width: 150,
className: 'date',
},
disableResizing: true,
width: 100,
className: 'status',
},
{
id: 'note',
Header: 'Note',
accessor: r => (<Icon icon={'file-alt'} iconSize={16} />),
disableResizing: true,
disableSorting: true,
width: 100,
className: 'note',
},
{
id: 'transaction_type',
Header: 'Transaction type ',
accessor: 'transaction_type',
width: 100,
className: 'transaction_type',
},
{
id: 'created_at',
Header: 'Created At',
accessor: r => moment().format('YYYY-MM-DD'),
disableResizing: true,
width: 150,
className: 'created_at',
},
{
id: 'actions',
Header: '',
Cell: ({ cell }) => (
<Popover
content={actionMenuList(cell.row.original)}
position={Position.RIGHT_BOTTOM}
>
<Button icon={<Icon icon='ellipsis-h' />} />
</Popover>
),
className: 'actions',
width: 50,
disableResizing: true,
},
], []);
{
id: 'amount',
Header: formatMessage({ id: 'amount' }),
accessor: (r) => <Money amount={r.amount} currency={'USD'} />,
disableResizing: true,
className: 'amount',
},
{
id: 'journal_number',
Header: formatMessage({id:'journal_no'}),
accessor: 'journal_number',
disableResizing: true,
className: 'journal_number',
},
{
id: 'status',
Header: formatMessage({id:'status'}),
accessor: (r) => {
return r.status ? 'Published' : 'Draft';
},
disableResizing: true,
width: 100,
className: 'status',
},
{
id: 'note',
Header: formatMessage({id:'note'}),
accessor: (r) => <Icon icon={'file-alt'} iconSize={16} />,
disableResizing: true,
disableSorting: true,
width: 100,
className: 'note',
},
{
id: 'transaction_type',
Header: formatMessage({id:'transaction_type'}),
accessor: 'transaction_type',
width: 100,
className: 'transaction_type',
},
{
id: 'created_at',
Header: formatMessage({id:'created_at'}),
accessor: (r) => moment().format('YYYY-MM-DD'),
disableResizing: true,
width: 150,
className: 'created_at',
},
{
id: 'actions',
Header: '',
Cell: ({ cell }) => (
<Popover
content={actionMenuList(cell.row.original)}
position={Position.RIGHT_BOTTOM}
>
<Button icon={<Icon icon='ellipsis-h' />} />
</Popover>
),
className: 'actions',
width: 50,
disableResizing: true,
},
],
[]
);
const handleDataTableFetchData = useCallback((...args) => {
onFetchData && onFetchData(...args);
}, [onFetchData]);
const handleDataTableFetchData = useCallback(
(...args) => {
onFetchData && onFetchData(...args);
},
[onFetchData]
);
const handleSelectedRowsChange = useCallback((selectedRows) => {
onSelectedRowsChange && onSelectedRowsChange(selectedRows.map(s => s.original));
}, [onSelectedRowsChange]);
const handleSelectedRowsChange = useCallback(
(selectedRows) => {
onSelectedRowsChange &&
onSelectedRowsChange(selectedRows.map((s) => s.original));
},
[onSelectedRowsChange]
);
return (
<LoadingIndicator loading={loading} mount={false}>
@@ -203,5 +225,5 @@ export default compose(
// withViewsActions,
withManualJournalsActions,
withManualJournals,
withViewDetails,
withViewDetails
)(ManualJournalsDataTable);

127
client/src/containers/Accounting/ManualJournalsList.js
View File

@@ -3,6 +3,7 @@ import { Route, Switch, useHistory } from 'react-router-dom';
import { useQuery } from 'react-query';
import { Alert, Intent } from '@blueprintjs/core';
import AppToaster from 'components/AppToaster';
import { FormattedMessage as T, useIntl } from 'react-intl';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
@@ -17,7 +18,6 @@ import withViewsActions from 'containers/Views/withViewsActions';
import { compose } from 'utils';
/**
* Manual journals table.
*/
@@ -42,17 +42,21 @@ function ManualJournalsTable({
return requestFetchResourceViews('manual_journals');
});
const fetchManualJournals = useQuery('manual-journals-table', () =>
requestFetchManualJournalsTable());
const fetchManualJournals = useQuery('manual-journals-table', () =>
requestFetchManualJournalsTable()
);
useEffect(() => {
changePageTitle('Manual Journals');
}, [changePageTitle]);
// Handle delete manual journal click.
const handleDeleteJournal = useCallback((journal) => {
setDeleteManualJournal(journal);
}, [setDeleteManualJournal]);
const handleDeleteJournal = useCallback(
(journal) => {
setDeleteManualJournal(journal);
},
[setDeleteManualJournal]
);
// Handle cancel delete manual journal.
const handleCancelManualJournalDelete = useCallback(() => {
@@ -67,30 +71,35 @@ function ManualJournalsTable({
});
}, [deleteManualJournal, requestDeleteManualJournal]);
const handleBulkDelete = useCallback((accountsIds) => {
setBulkDelete(accountsIds);
}, [setBulkDelete]);
const handleBulkDelete = useCallback(
(accountsIds) => {
setBulkDelete(accountsIds);
},
[setBulkDelete]
);
const handleConfirmBulkDelete = useCallback(() => {
requestDeleteBulkManualJournals(bulkDelete).then(() => {
setBulkDelete(false);
AppToaster.show({ message: 'the_accounts_have_been_deleted' });
}).catch((error) => {
setBulkDelete(false);
});
}, [
requestDeleteBulkManualJournals,
bulkDelete,
]);
requestDeleteBulkManualJournals(bulkDelete)
.then(() => {
setBulkDelete(false);
AppToaster.show({ message: 'the_accounts_have_been_deleted' });
})
.catch((error) => {
setBulkDelete(false);
});
}, [requestDeleteBulkManualJournals, bulkDelete]);
const handleCancelBulkDelete = useCallback(() => {
setBulkDelete(false);
}, []);
const handleEditJournal = useCallback((journal) => {
history.push(`/dashboard/accounting/manual-journals/${journal.id}/edit`);
}, [history]);
const handleEditJournal = useCallback(
(journal) => {
history.push(`/dashboard/accounting/manual-journals/${journal.id}/edit`);
},
[history]
);
// Handle filter change to re-fetch data-table.
const handleFilterChanged = useCallback(() => {
fetchManualJournals.refetch();
@@ -102,36 +111,49 @@ function ManualJournalsTable({
}, [fetchManualJournals]);
// Handle fetch data of manual jouranls datatable.
const handleFetchData = useCallback(({ pageIndex, pageSize, sortBy }) => {
addManualJournalsTableQueries({
...(sortBy.length > 0) ? {
column_sort_by: sortBy[0].id,
sort_order: sortBy[0].desc ? 'desc' : 'asc',
} : {},
});
}, [
addManualJournalsTableQueries,
]);
const handleFetchData = useCallback(
({ pageIndex, pageSize, sortBy }) => {
addManualJournalsTableQueries({
...(sortBy.length > 0
? {
column_sort_by: sortBy[0].id,
sort_order: sortBy[0].desc ? 'desc' : 'asc',
}
: {}),
});
},
[addManualJournalsTableQueries]
);
const handlePublishJournal = useCallback((journal) => {
requestPublishManualJournal(journal.id).then(() => {
AppToaster.show({ message: 'the_manual_journal_id_has_been_published' });
})
}, [requestPublishManualJournal]);
const handlePublishJournal = useCallback(
(journal) => {
requestPublishManualJournal(journal.id).then(() => {
AppToaster.show({
message: 'the_manual_journal_id_has_been_published',
});
});
},
[requestPublishManualJournal]
);
// Handle selected rows change.
const handleSelectedRowsChange = useCallback((accounts) => {
setSelectedRows(accounts);
}, [setSelectedRows]);
const handleSelectedRowsChange = useCallback(
(accounts) => {
setSelectedRows(accounts);
},
[setSelectedRows]
);
return (
<DashboardInsider
loading={fetchViews.isFetching || fetchManualJournals.isFetching}
name={'manual-journals'}>
name={'manual-journals'}
>
<ManualJournalsActionsBar
onBulkDelete={handleBulkDelete}
selectedRows={selectedRows}
onFilterChanged={handleFilterChanged} />
onFilterChanged={handleFilterChanged}
/>
<DashboardPageContent>
<Switch>
@@ -140,9 +162,9 @@ function ManualJournalsTable({
path={[
'/dashboard/accounting/manual-journals/:custom_view_id/custom_view',
'/dashboard/accounting/manual-journals',
]}>
<ManualJournalsViewTabs
onViewChanged={handleViewChanged} />
]}
>
<ManualJournalsViewTabs onViewChanged={handleViewChanged} />
</Route>
</Switch>
@@ -151,11 +173,12 @@ function ManualJournalsTable({
onFetchData={handleFetchData}
onEditJournal={handleEditJournal}
onPublishJournal={handlePublishJournal}
onSelectedRowsChange={handleSelectedRowsChange} />
onSelectedRowsChange={handleSelectedRowsChange}
/>
<Alert
cancelButtonText='Cancel'
confirmButtonText='Move to Trash'
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'move_to_trash'} />}
icon='trash'
intent={Intent.DANGER}
isOpen={deleteManualJournal}
@@ -169,8 +192,8 @@ function ManualJournalsTable({
</Alert>
<Alert
cancelButtonText='Cancel'
confirmButtonText='Move to Trash'
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'move_to_trash'} />}
icon='trash'
intent={Intent.DANGER}
isOpen={bulkDelete}
@@ -190,5 +213,5 @@ function ManualJournalsTable({
export default compose(
withDashboardActions,
withManualJournalsActions,
withViewsActions,
withViewsActions
)(ManualJournalsTable);

15
client/src/containers/Accounts/AccountsActionsBar.js
View File

@@ -27,6 +27,7 @@ import withAccountsTableActions from 'containers/Accounts/withAccountsTableActio
import withAccounts from 'containers/Accounts/withAccounts';
import {compose} from 'utils';
import { FormattedMessage as T, useIntl } from 'react-intl';
function AccountsActionsBar({
@@ -86,7 +87,7 @@ function AccountsActionsBar({
<Button
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon='table' />}
text='Table Views'
text={<T id={'table_views'}/>}
rightIcon={'caret-down'}
/>
</Popover>
@@ -96,7 +97,7 @@ function AccountsActionsBar({
<Button
className={Classes.MINIMAL}
icon={<Icon icon='plus' />}
text='New Account'
text={<T id={'new_account'}/>}
onClick={onClickNewAccount}
/>
<Popover
@@ -107,7 +108,7 @@ function AccountsActionsBar({
<Button
className={classNames(Classes.MINIMAL, 'button--filter')}
text={filterCount <= 0 ? 'Filter' : `${filterCount} filters applied`}
text={filterCount <= 0 ? <T id={'filter'}/> : `${filterCount} filters applied`}
icon={ <Icon icon="filter" /> }/>
</Popover>
@@ -115,13 +116,13 @@ function AccountsActionsBar({
<Button
className={Classes.MINIMAL}
icon={<Icon icon='archive' iconSize={15} />}
text='Archive'
text={<T id={'archive'}/>}
onClick={handleBulkArchive}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='trash' iconSize={15} />}
text='Delete'
text={<T id={'delete'}/>}
intent={Intent.DANGER}
onClick={handleBulkDelete}
/>
@@ -130,12 +131,12 @@ function AccountsActionsBar({
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-import' />}
text='Import'
text={<T id={'import'}/>}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
text='Export'
text={<T id={'export'}/>}
/>
</NavbarGroup>
</DashboardActionsBar>

9
client/src/containers/Accounts/AccountsChart.js
View File

@@ -23,6 +23,7 @@ import withAccounts from 'containers/Accounts/withAccounts';
import { compose } from 'utils';
import { FormattedMessage as T, useIntl } from 'react-intl';
function AccountsChart({
@@ -225,8 +226,8 @@ function AccountsChart({
</Alert>
<Alert
cancelButtonText="Cancel"
confirmButtonText="Inactivate"
cancelButtonText={<T id={'cancel'}/>}
confirmButtonText={<T id={'inactivate'}/>}
icon="trash"
intent={Intent.WARNING}
isOpen={inactiveAccount}
@@ -239,8 +240,8 @@ function AccountsChart({
</Alert>
<Alert
cancelButtonText="Cancel"
confirmButtonText="Delete"
cancelButtonText={<T id={'cancel'}/>}
confirmButtonText={<T id={'delete'}/>}
icon="trash"
intent={Intent.DANGER}
isOpen={bulkDelete}

22
client/src/containers/Accounts/AccountsDataTable.js
View File

@@ -23,6 +23,8 @@ import withAccounts from 'containers/Accounts/withAccounts';
import {If} from 'components';
import { FormattedMessage as T, useIntl } from 'react-intl';
function AccountsDataTable({
// # withAccounts
accounts,
@@ -39,7 +41,7 @@ function AccountsDataTable({
onInactiveAccount,
}) {
const [initialMount, setInitialMount] = useState(false);
const {formatMessage} = useIntl();
useUpdateEffect(() => {
if (!accountsLoading) {
setInitialMount(true);
@@ -59,17 +61,17 @@ function AccountsDataTable({
<MenuItem text='View Details' />
<MenuDivider />
<MenuItem
text='Edit Account'
text={<T id={'edit_account'}/>}
onClick={handleEditAccount(account)} />
<MenuItem
text='New Account'
text={<T id={'new_account'}/>}
onClick={() => handleNewParentAccount(account)} />
<MenuDivider />
<MenuItem
text='Inactivate Account'
text={<T id={'inactivate_account'}/>}
onClick={() => onInactiveAccount(account)} />
<MenuItem
text='Delete Account'
text={<T id={'delete_account'}/>}
onClick={() => onDeleteAccount(account)} />
</Menu>
), [handleEditAccount, onDeleteAccount, onInactiveAccount]);
@@ -77,7 +79,7 @@ function AccountsDataTable({
const columns = useMemo(() => [
{
id: 'name',
Header: 'Account Name',
Header:formatMessage({id:'account_name'}),
accessor: row => {
return (row.description) ?
(<Tooltip
@@ -93,21 +95,21 @@ function AccountsDataTable({
},
{
id: 'code',
Header: 'Code',
Header:formatMessage({id:'code'}),
accessor: 'code',
className: 'code',
width: 100,
},
{
id: 'type',
Header: 'Type',
Header:formatMessage({id:'type'}),
accessor: 'type.name',
className: 'type',
width: 120,
},
{
id: 'normal',
Header: 'Normal',
Header: formatMessage({id:'normal'}),
Cell: ({ cell }) => {
const account = cell.row.original;
const type = account.type ? account.type.normal : '';
@@ -120,7 +122,7 @@ function AccountsDataTable({
},
{
id: 'balance',
Header: 'Balance',
Header: formatMessage({id:'balance'}),
Cell: ({ cell }) => {
const account = cell.row.original;
const {balance = null} = account;

2
client/src/containers/Accounts/withAccounts.js
View File

@@ -16,4 +16,4 @@ const mapStateToProps = (state, props) => ({
accountErrors: state.accounts.errors,
});
export default connect(mapStateToProps);
export default connect(mapStateToProps);

174
client/src/containers/Authentication/InviteAccept.js
View File

@@ -1,7 +1,7 @@
import React, { useCallback, useMemo, useState } from 'react';
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { useIntl } from 'react-intl';
import { FormattedMessage as T, useIntl } from 'react-intl';
import ErrorMessage from 'components/ErrorMessage';
import AppToaster from 'components/AppToaster';
import { compose } from 'utils';
@@ -15,27 +15,29 @@ import {
Position,
Spinner,
} from '@blueprintjs/core';
import Icon from 'components/Icon';
import { Row, Col } from 'react-grid-system';
import AuthInsider from 'containers/Authentication/AuthInsider';
import { Link, useHistory } from 'react-router-dom';
import useAsync from 'hooks/async';
import { If } from 'components';
function Invite({
requestInviteAccept,
requestInviteMetaByToken,
}) {
const intl = useIntl();
function Invite({ requestInviteAccept, requestInviteMetaByToken }) {
const { formatMessage } = useIntl();
const { token } = useParams();
const history = useHistory();
const [shown, setShown] = useState(false);
const passwordRevealer = useCallback(() => { setShown(!shown); }, [shown]);
const passwordRevealer = useCallback(() => {
setShown(!shown);
}, [shown]);
const ValidationSchema = Yup.object().shape({
first_name: Yup.string().required(),
last_name: Yup.string().required(),
phone_number: Yup.string().matches().required(),
first_name: Yup.string().required(formatMessage({ id: 'required' })),
last_name: Yup.string().required(formatMessage({ id: 'required' })),
phone_number: Yup.string()
.matches()
.required(formatMessage({ id: 'required' })),
password: Yup.string()
.min(4, 'Password has to be longer than 4 characters!')
.required('Password is required!'),
@@ -49,11 +51,10 @@ function Invite({
const inviteValue = {
organization_name: '',
invited_email: '',
...inviteMeta.value ?
inviteMeta.value.data.data : {},
...(inviteMeta.value ? inviteMeta.value.data.data : {}),
};
if (inviteErrors.find(e => e.type === 'INVITE.TOKEN.NOT.FOUND')) {
if (inviteErrors.find((e) => e.type === 'INVITE.TOKEN.NOT.FOUND')) {
AppToaster.show({
message: 'An unexpected error occurred',
intent: Intent.DANGER,
@@ -62,12 +63,15 @@ function Invite({
history.push('/auth/login');
}
const initialValues = useMemo(() => ({
first_name: '',
last_name: '',
phone_number: '',
password: '',
}), []);
const initialValues = useMemo(
() => ({
first_name: '',
last_name: '',
phone_number: '',
password: '',
}),
[]
);
const {
values,
@@ -95,15 +99,15 @@ function Invite({
.catch((errors) => {
if (errors.find((e) => e.type === 'INVITE.TOKEN.NOT.FOUND')) {
AppToaster.show({
message: 'An unexpected error occurred',
message: formatMessage({ id: 'an_unexpected_error_occurred' }),
intent: Intent.DANGER,
position: Position.BOTTOM,
});
history.push('/auth/login');
}
if (errors.find(e => e.type === 'PHONE_MUMNER.ALREADY.EXISTS')){
if (errors.find((e) => e.type === 'PHONE_MUMNER.ALREADY.EXISTS')) {
setErrors({
phone_number: 'This phone number is used in another account.'
phone_number: 'This phone number is used in another account.',
});
}
setSubmitting(false);
@@ -111,23 +115,40 @@ function Invite({
},
});
const passwordRevealerTmp = useMemo(() => (
<span class="password-revealer" onClick={() => passwordRevealer()}>
{(shown) ? (
<><Icon icon='eye-slash' /> <span class="text">Hide</span></>
) : (
<><Icon icon='eye' /> <span class="text">Show</span></>
)}
</span>), [shown, passwordRevealer]);
const passwordRevealerTmp = useMemo(
() => (
<span class='password-revealer' onClick={() => passwordRevealer()}>
<If condition={shown}>
<>
<Icon icon='eye-slash' />{' '}
<span class='text'>
<T id={'hide'} />
</span>
</>
</If>
<If condition={!shown}>
<>
<Icon icon='eye' />{' '}
<span class='text'>
<T id={'show'} />
</span>
</>
</If>
</span>
),
[shown, passwordRevealer]
);
return (
<AuthInsider>
<div className={'invite-form'}>
<div className={'authentication-page__label-section'}>
<h3>Welcome to Bigcapital</h3>
<h3>
<T id={'welcome_to_bigcapital'} />
</h3>
<p>
Enter your personal information <b>{ inviteValue.organization_name }</b>{' '}
Organization.
<T id={'enter_your_personal_information'} />
<b>{inviteValue.organization_name}</b> Organization.
</p>
</div>
@@ -135,30 +156,37 @@ function Invite({
<Row>
<Col md={6}>
<FormGroup
label={'First Name'}
label={<T id={'First Name'} />}
className={'form-group--first_name'}
intent={(errors.first_name && touched.first_name) && Intent.DANGER}
helperText={<ErrorMessage name={'first_name'} {...{errors, touched}} />}
intent={
errors.first_name && touched.first_name && Intent.DANGER
}
helperText={
<ErrorMessage name={'first_name'} {...{ errors, touched }} />
}
>
<InputGroup
intent={(errors.first_name && touched.first_name) &&
Intent.DANGER
intent={
errors.first_name && touched.first_name && Intent.DANGER
}
{...getFieldProps('first_name')} />
{...getFieldProps('first_name')}
/>
</FormGroup>
</Col>
<Col md={6}>
<FormGroup
label={'Last Name'}
label={<T id={'Last Name'} />}
className={'form-group--last_name'}
intent={(errors.last_name && touched.last_name) &&
Intent.DANGER
intent={errors.last_name && touched.last_name && Intent.DANGER}
helperText={
<ErrorMessage name={'last_name'} {...{ errors, touched }} />
}
helperText={<ErrorMessage name={'last_name'} {...{errors, touched}} />}
>
<InputGroup
intent={(errors.last_name && touched.last_name) && Intent.DANGER}
intent={
errors.last_name && touched.last_name && Intent.DANGER
}
{...getFieldProps('last_name')}
/>
</FormGroup>
@@ -166,57 +194,73 @@ function Invite({
</Row>
<FormGroup
label={'Phone Number'}
label={<T id={'Phone Number'} />}
className={'form-group--phone_number'}
intent={(errors.phone_number && touched.phone_number) && Intent.DANGER}
helperText={<ErrorMessage name={'phone_number'} {...{errors, touched}} />}
intent={
errors.phone_number && touched.phone_number && Intent.DANGER
}
helperText={
<ErrorMessage name={'phone_number'} {...{ errors, touched }} />
}
>
<InputGroup
intent={(errors.phone_number && touched.phone_number) && Intent.DANGER}
intent={
errors.phone_number && touched.phone_number && Intent.DANGER
}
{...getFieldProps('phone_number')}
/>
</FormGroup>
<FormGroup
label={'Password'}
label={<T id={'password'} />}
labelInfo={passwordRevealerTmp}
className={'form-group--password has-password-revealer'}
intent={(errors.password && touched.password) && Intent.DANGER}
helperText={<ErrorMessage name={'password'} {...{errors, touched}} />}
intent={errors.password && touched.password && Intent.DANGER}
helperText={
<ErrorMessage name={'password'} {...{ errors, touched }} />
}
>
<InputGroup
lang={true}
type={shown ? 'text' : 'password'}
intent={(errors.password && touched.password) && Intent.DANGER}
intent={errors.password && touched.password && Intent.DANGER}
{...getFieldProps('password')}
/>
</FormGroup>
<div className={'invite-form__statement-section'}>
<p>
You email address is <b>{ inviteValue.invited_email },</b> <br />
You will use this address to sign in to Bigcapital.
<T id={'You email address is'} />{' '}
<b>{inviteValue.invited_email},</b> <br />
<T id={'you_will_use_this_address_to_sign_in_to_bigcapital'} />
</p>
<p>
By signing in or creating an account, you agree with our <br />
<Link>Terms & Conditions</Link> and <Link> Privacy Statement</Link>
<T id={'signing_in_or_creating'} /> <br />
<Link>
<T id={'terms_conditions'} />
</Link>{' '}
<T id={'and'} />
<Link>
{' '}
<T id={'privacy_statement'} />
</Link>
</p>
</div>
<div className={'authentication-page__submit-button-wrap'}>
<Button
intent={Intent.PRIMARY}
type='submit'
fill={true}
loading={isSubmitting}
loading={isSubmitting}
>
Create Account
<T id={'create_account'} />
</Button>
</div>
</form>
{ inviteMeta.pending && (
<div class="authentication-page__loading-overlay">
{inviteMeta.pending && (
<div class='authentication-page__loading-overlay'>
<Spinner size={40} />
</div>
)}
@@ -225,6 +269,4 @@ function Invite({
);
}
export default compose(
withAuthenticationActions,
)(Invite);
export default compose(withAuthenticationActions)(Invite);

4
client/src/containers/Authentication/Login.js
View File

@@ -69,7 +69,7 @@ function Login({
const toastBuilders = [];
if (errors.find((e) => e.type === ERRORS_TYPES.INVALID_DETAILS)) {
toastBuilders.push({
message: formatMessage('email_and_password_entered_did_not_match'),
message: formatMessage({id:'email_and_password_entered_did_not_match'}),
intent: Intent.DANGER,
});
}
@@ -102,7 +102,7 @@ function Login({
<div className='login-form'>
<div className={'authentication-page__label-section'}>
<h3><T id={'log_in'} /></h3>
<T id={'need_bigcapital_account?'} />
<T id={'need_bigcapital_account'} />
<Link to='/auth/register'> <T id={'create_an_account'} /></Link>
</div>

207
client/src/containers/Authentication/Register.js
View File

@@ -1,13 +1,14 @@
import React, { useMemo, useState, useCallback } from 'react';
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { useIntl } from 'react-intl';
import { FormattedMessage as T, useIntl } from 'react-intl';
import {
Button,
InputGroup,
Intent,
FormGroup,
Spinner
Spinner,
} from '@blueprintjs/core';
import { Row, Col } from 'react-grid-system';
import { Link, useHistory } from 'react-router-dom';
@@ -19,35 +20,40 @@ import { compose } from 'utils';
import Icon from 'components/Icon';
import { If } from 'components';
function Register({
requestRegister,
}) {
const intl = useIntl();
function Register({ requestRegister }) {
const { formatMessage } = useIntl();
const history = useHistory();
const [shown, setShown] = useState(false);
const passwordRevealer = useCallback(() => { setShown(!shown); }, [shown]);
const passwordRevealer = useCallback(() => {
setShown(!shown);
}, [shown]);
const ValidationSchema = Yup.object().shape({
organization_name: Yup.string().required(),
first_name: Yup.string().required(),
last_name: Yup.string().required(),
email: Yup.string().email().required(),
organization_name: Yup.string().required(formatMessage({ id: 'required' })),
first_name: Yup.string().required(formatMessage({ id: 'required' })),
last_name: Yup.string().required(formatMessage({ id: 'required' })),
email: Yup.string()
.email()
.required(formatMessage({ id: 'required' })),
phone_number: Yup.string()
.matches()
.required(intl.formatMessage({ id: 'required' })),
.required(formatMessage({ id: 'required' })),
password: Yup.string()
.min(4, 'Password has to be longer than 8 characters!')
.required('Password is required!'),
});
const initialValues = useMemo(() => ({
organization_name: '',
first_name: '',
last_name: '',
email: '',
phone_number: '',
password: '',
}), []);
const initialValues = useMemo(
() => ({
organization_name: '',
first_name: '',
last_name: '',
email: '',
phone_number: '',
password: '',
}),
[]
);
const {
errors,
@@ -62,26 +68,27 @@ function Register({
validationSchema: ValidationSchema,
initialValues: {
...initialValues,
country: 'libya'
country: 'libya',
},
onSubmit: (values, { setSubmitting, setErrors }) => {
requestRegister(values)
.then((response) => {
AppToaster.show({
message: 'success',
message: formatMessage({ id: 'success' }),
});
setSubmitting(false);
history.push('/auth/login');
})
.catch((errors) => {
if (errors.some(e => e.type === 'PHONE_NUMBER_EXISTS')) {
if (errors.some((e) => e.type === 'PHONE_NUMBER_EXISTS')) {
setErrors({
phone_number: 'The phone number is already used in another account.'
phone_number:
'The phone number is already used in another account.',
});
}
if (errors.some(e => e.type === 'EMAIL_EXISTS')) {
if (errors.some((e) => e.type === 'EMAIL_EXISTS')) {
setErrors({
email: 'The email is already used in another account.'
email: 'The email is already used in another account.',
});
}
setSubmitting(false);
@@ -89,34 +96,66 @@ function Register({
},
});
const passwordRevealerTmp = useMemo(() => (
<span class="password-revealer" onClick={() => passwordRevealer()}>
{(shown) ? (
<><Icon icon='eye-slash' /> <span class="text">Hide</span></>
) : (
<><Icon icon='eye' /> <span class="text">Show</span></>
)}
</span>), [shown, passwordRevealer]);
const passwordRevealerTmp = useMemo(
() => (
<span class='password-revealer' onClick={() => passwordRevealer()}>
<If condition={shown}>
<>
<Icon icon='eye-slash' />{' '}
<span class='text'>
<T id={'hide'} />
</span>
</>
</If>
<If condition={!shown}>
<>
<Icon icon='eye' />{' '}
<span class='text'>
<T id={'show'} />
</span>
</>
</If>
</span>
),
[shown, passwordRevealer]
);
return (
<AuthInsider>
<div className={'register-form'}>
<div className={'authentication-page__label-section'}>
<h3>
Register a New <br />Organization.
<T id={'register_a_new_organization'} />
</h3>
You have a bigcapital account ?<Link to='/auth/login'> Login</Link>
<T id={'you_have_a_bigcapital_account'} />
<Link to='/auth/login'>
{' '}
<T id={'login'} />
</Link>
</div>
<form onSubmit={handleSubmit} className={'authentication-page__form'}>
<FormGroup
label={'Organization Name'}
label={<T id={'organization_name'} />}
className={'form-group--name'}
intent={(errors.organization_name && touched.organization_name) && Intent.DANGER}
helperText={<ErrorMessage {...{errors, touched}} name={'organization_name'} />}
intent={
errors.organization_name &&
touched.organization_name &&
Intent.DANGER
}
helperText={
<ErrorMessage
{...{ errors, touched }}
name={'organization_name'}
/>
}
>
<InputGroup
intent={(errors.organization_name && touched.organization_name) && Intent.DANGER}
intent={
errors.organization_name &&
touched.organization_name &&
Intent.DANGER
}
{...getFieldProps('organization_name')}
/>
</FormGroup>
@@ -124,13 +163,19 @@ function Register({
<Row className={'name-section'}>
<Col md={6}>
<FormGroup
label={'First Name'}
intent={(errors.first_name && touched.first_name) && Intent.DANGER}
helperText={<ErrorMessage name={'first_name'} {...{errors, touched}} />}
label={<T id={'first_name'} />}
intent={
errors.first_name && touched.first_name && Intent.DANGER
}
helperText={
<ErrorMessage name={'first_name'} {...{ errors, touched }} />
}
className={'form-group--first-name'}
>
<InputGroup
intent={(errors.first_name && touched.first_name) && Intent.DANGER}
intent={
errors.first_name && touched.first_name && Intent.DANGER
}
{...getFieldProps('first_name')}
/>
</FormGroup>
@@ -138,65 +183,83 @@ function Register({
<Col md={6}>
<FormGroup
label={'Last Name'}
intent={(errors.last_name && touched.last_name) && Intent.DANGER}
helperText={<ErrorMessage name={'last_name'} {...{errors, touched}} />}
label={<T id={'last_name'} />}
intent={errors.last_name && touched.last_name && Intent.DANGER}
helperText={
<ErrorMessage name={'last_name'} {...{ errors, touched }} />
}
className={'form-group--last-name'}
>
<InputGroup
intent={(errors.last_name && touched.last_name) && Intent.DANGER}
intent={
errors.last_name && touched.last_name && Intent.DANGER
}
{...getFieldProps('last_name')}
/>
</FormGroup>
</Col>
</Row>
<FormGroup
label={'Phone Number'}
intent={(errors.phone_number && touched.phone_number) && Intent.DANGER}
helperText={<ErrorMessage name={'phone_number'} {...{errors, touched}} />}
label={<T id={'phone_number'} />}
intent={
errors.phone_number && touched.phone_number && Intent.DANGER
}
helperText={
<ErrorMessage name={'phone_number'} {...{ errors, touched }} />
}
className={'form-group--phone-number'}
>
<InputGroup
intent={
(errors.phone_number && touched.phone_number) &&
Intent.DANGER
errors.phone_number && touched.phone_number && Intent.DANGER
}
{...getFieldProps('phone_number')}
/>
</FormGroup>
<FormGroup
label={'Email'}
intent={(errors.email && touched.email) && Intent.DANGER}
helperText={<ErrorMessage name={'email'} {...{errors, touched}} />}
label={<T id={'email'} />}
intent={errors.email && touched.email && Intent.DANGER}
helperText={
<ErrorMessage name={'email'} {...{ errors, touched }} />
}
className={'form-group--email'}
>
<InputGroup
intent={(errors.email && touched.email) && Intent.DANGER}
intent={errors.email && touched.email && Intent.DANGER}
{...getFieldProps('email')}
/>
</FormGroup>
<FormGroup
label={'Password'}
label={<T id={'password'} />}
labelInfo={passwordRevealerTmp}
intent={(errors.password && touched.password) && Intent.DANGER}
helperText={<ErrorMessage name={'password'} {...{errors, touched}} />}
intent={errors.password && touched.password && Intent.DANGER}
helperText={
<ErrorMessage name={'password'} {...{ errors, touched }} />
}
className={'form-group--password has-password-revealer'}
>
<InputGroup
lang={true}
type={shown ? 'text' : 'password'}
intent={(errors.password && touched.password) && Intent.DANGER}
intent={errors.password && touched.password && Intent.DANGER}
{...getFieldProps('password')}
/>
</FormGroup>
<div className={'register-form__agreement-section'}>
<p>
By signing in or creating an account, you agree with our <br />
<Link>Terms & Conditions</Link> and <Link> Privacy Statement</Link>
<p>
<T id={'signing_in_or_creating'} /> <br />
<Link>
<T id={'terms_conditions'} />
</Link>{' '}
<T id={'and'} />
<Link>
{' '}
<T id={'privacy_statement'} />
</Link>
</p>
</div>
@@ -208,13 +271,13 @@ function Register({
fill={true}
loading={isSubmitting}
>
Register
<T id={'register'} />
</Button>
</div>
</form>
<If condition={isSubmitting}>
<div class="authentication-page__loading-overlay">
<div class='authentication-page__loading-overlay'>
<Spinner size={50} />
</div>
</If>
@@ -223,6 +286,4 @@ function Register({
);
}
export default compose(
withAuthenticationActions,
)(Register);
export default compose(withAuthenticationActions)(Register);

78
client/src/containers/Authentication/ResetPassword.js
View File

@@ -1,7 +1,7 @@
import React, { useEffect, useMemo } from 'react';
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { useIntl } from 'react-intl';
import {
Button,
InputGroup,
@@ -15,12 +15,10 @@ import AppToaster from 'components/AppToaster';
import { compose } from 'utils';
import withAuthenticationActions from './withAuthenticationActions';
import AuthInsider from 'containers/Authentication/AuthInsider';
import { FormattedMessage as T, useIntl } from 'react-intl';
function ResetPassword({
requestResetPassword,
}) {
const intl = useIntl();
function ResetPassword({ requestResetPassword }) {
const { formatMessage } = useIntl();
const { token } = useParams();
const history = useHistory();
@@ -33,10 +31,13 @@ function ResetPassword({
.required('Confirm Password is required'),
});
const initialValues = useMemo(() => ({
password: '',
confirm_password: '',
}), []);
const initialValues = useMemo(
() => ({
password: '',
confirm_password: '',
}),
[]
);
const {
touched,
@@ -56,7 +57,7 @@ function ResetPassword({
requestResetPassword(values, token)
.then((response) => {
AppToaster.show({
message: 'The password for your account was successfully updated.',
message: formatMessage('password_successfully_updated'),
intent: Intent.DANGER,
position: Position.BOTTOM,
});
@@ -64,9 +65,9 @@ function ResetPassword({
setSubmitting(false);
})
.catch((errors) => {
if (errors.find(e => e.type === 'TOKEN_INVALID')) {
if (errors.find((e) => e.type === 'TOKEN_INVALID')) {
AppToaster.show({
message: 'An unexpected error occurred',
message: formatMessage('an_unexpected_error_occurred'),
intent: Intent.DANGER,
position: Position.BOTTOM,
});
@@ -79,17 +80,24 @@ function ResetPassword({
return (
<AuthInsider>
<div className={'submit-np-form'}>
<div className={'submit-np-form'}>
<div className={'authentication-page__label-section'}>
<h3>Choose a new password</h3>
You remembered your password ? <Link to='/auth/login'>Login</Link>
<h3>
<T id={'choose_a_new_password'} />
</h3>
<T id={'you_remembered_your_password'} />{' '}
<Link to='/auth/login'>
<T id={'login'} />
</Link>
</div>
<form onSubmit={handleSubmit}>
<FormGroup
label={'Password'}
intent={(errors.password && touched.password) && Intent.DANGER}
helperText={<ErrorMessage name={'password'} {...{errors, touched}} />}
label={<T id={'password'} />}
intent={errors.password && touched.password && Intent.DANGER}
helperText={
<ErrorMessage name={'password'} {...{ errors, touched }} />
}
className={'form-group--password'}
>
<InputGroup
@@ -99,18 +107,31 @@ function ResetPassword({
{...getFieldProps('password')}
/>
</FormGroup>
<FormGroup
label={'New Password'}
label={<T id={'new_password'} />}
labelInfo={'(again):'}
intent={(errors.confirm_password && touched.confirm_password) && Intent.DANGER}
helperText={<ErrorMessage name={'confirm_password'} {...{errors, touched}} />}
intent={
errors.confirm_password &&
touched.confirm_password &&
Intent.DANGER
}
helperText={
<ErrorMessage
name={'confirm_password'}
{...{ errors, touched }}
/>
}
className={'form-group--confirm-password'}
>
<InputGroup
lang={true}
type={'password'}
intent={(errors.confirm_password && touched.confirm_password) && Intent.DANGER}
intent={
errors.confirm_password &&
touched.confirm_password &&
Intent.DANGER
}
{...getFieldProps('confirm_password')}
/>
</FormGroup>
@@ -121,8 +142,9 @@ function ResetPassword({
className={'btn-new'}
intent={Intent.PRIMARY}
type='submit'
loading={isSubmitting}>
Submit new password
loading={isSubmitting}
>
<T id={'submit_new_password'} />
</Button>
</div>
</form>
@@ -131,6 +153,4 @@ function ResetPassword({
);
}
export default compose(
withAuthenticationActions,
)(ResetPassword);
export default compose(withAuthenticationActions)(ResetPassword);

54
client/src/containers/Authentication/SendResetPassword.js
View File

@@ -1,7 +1,7 @@
import React, { useMemo } from 'react';
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { useIntl } from 'react-intl';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { Link, useHistory } from 'react-router-dom';
import { Button, InputGroup, Intent, FormGroup } from '@blueprintjs/core';
import { FormattedMessage } from 'react-intl';
@@ -15,23 +15,23 @@ import AuthInsider from 'containers/Authentication/AuthInsider';
import withAuthenticationActions from './withAuthenticationActions';
function SendResetPassword({
requestSendResetPassword,
}) {
const intl = useIntl();
function SendResetPassword({ requestSendResetPassword }) {
const { formatMessage } = useIntl();
const history = useHistory();
// Validation schema.
const ValidationSchema = Yup.object().shape({
crediential: Yup.string('')
.required(intl.formatMessage({ id: 'required' }))
.email(intl.formatMessage({ id: 'invalid_email_or_phone_numner' })),
.required(formatMessage({ id: 'required' }))
.email(formatMessage({ id: 'invalid_email_or_phone_numner' })),
});
const initialValues = useMemo(() => ({
crediential: '',
}), []);
const initialValues = useMemo(
() => ({
crediential: '',
}),
[]
);
// Formik validation
const {
@@ -60,9 +60,9 @@ function SendResetPassword({
setSubmitting(false);
})
.catch((errors) => {
if (errors.find(e => e.type === 'EMAIL.NOT.REGISTERED')){
if (errors.find((e) => e.type === 'EMAIL.NOT.REGISTERED')) {
AppToaster.show({
message: 'We couldn\'t find your account with that email',
message: "We couldn't find your account with that email",
intent: Intent.DANGER,
});
}
@@ -73,21 +73,29 @@ function SendResetPassword({
return (
<AuthInsider>
<div class='reset-form'>
<div class='reset-form'>
<div className={'authentication-page__label-section'}>
<h3>Reset Your Password</h3>
<p>Enter your email address and we’ll send you a link to reset your password.</p>
<h3>
<T id={'reset_your_password'} />
</h3>
<p>
<T id={'we_ll_send_you_a_link_to_reset_your_password'} />
</p>
</div>
<form onSubmit={handleSubmit} className={'send-reset-password'}>
<FormGroup
label={'Email or Phone Number'}
intent={(errors.crediential && touched.crediential) && Intent.DANGER}
helperText={<ErrorMessage name={'crediential'} {...{errors, touched}} />}
intent={errors.crediential && touched.crediential && Intent.DANGER}
helperText={
<ErrorMessage name={'crediential'} {...{ errors, touched }} />
}
className={'form-group--crediential'}
>
<InputGroup
intent={(errors.crediential && touched.crediential) && Intent.DANGER}
intent={
errors.crediential && touched.crediential && Intent.DANGER
}
large={true}
{...getFieldProps('crediential')}
/>
@@ -100,14 +108,14 @@ function SendResetPassword({
fill={true}
loading={isSubmitting}
>
{intl.formatMessage({ id: 'Send password reset link' })}
<T id={'send_password_reset_link'} />
</Button>
</div>
</form>
<div class='authentication-page__footer-links'>
<Link to='/auth/login'>
<FormattedMessage id='Return to log in' />
<T id={'return_to_log_in'} />
</Link>
</div>
</div>
@@ -115,6 +123,4 @@ function SendResetPassword({
);
}
export default compose(
withAuthenticationActions,
)(SendResetPassword);
export default compose(withAuthenticationActions)(SendResetPassword);

250
client/src/containers/Dialogs/AccountFormDialog.js
View File

@@ -8,12 +8,13 @@ import {
TextArea,
MenuItem,
Checkbox,
Position
Position,
} from '@blueprintjs/core';
import { Select } from '@blueprintjs/select';
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { useIntl } from 'react-intl';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { omit } from 'lodash';
import { useQuery, queryCache } from 'react-query';
@@ -27,7 +28,6 @@ import Icon from 'components/Icon';
import ErrorMessage from 'components/ErrorMessage';
import { fetchAccountTypes } from 'store/accounts/accounts.actions';
function AccountFormDialog({
name,
payload,
@@ -57,25 +57,29 @@ function AccountFormDialog({
account_type_id: Yup.string()
.nullable()
.required(intl.formatMessage({ id: 'required' })),
description: Yup.string().trim()
description: Yup.string().trim(),
});
const initialValues = useMemo(() => ({
account_type_id: null,
name: '',
description: '',
}), []);
const initialValues = useMemo(
() => ({
account_type_id: null,
name: '',
description: '',
}),
[]
);
const [selectedAccountType, setSelectedAccountType] = useState(null);
const [selectedSubaccount, setSelectedSubaccount] = useState(
payload.action === 'new_child' ?
accounts.find(a => a.id === payload.id) : null,
payload.action === 'new_child'
? accounts.find((a) => a.id === payload.id)
: null
);
const transformApiErrors = (errors) => {
const fields = {};
if (errors.find(e => e.type === 'NOT_UNIQUE_CODE')) {
fields.code = 'Account code is not unqiue.'
if (errors.find((e) => e.type === 'NOT_UNIQUE_CODE')) {
fields.code = 'Account code is not unqiue.';
}
return fields;
};
@@ -84,7 +88,7 @@ function AccountFormDialog({
const formik = useFormik({
enableReinitialize: true,
initialValues: {
...(payload.action === 'edit' && account) ? account : initialValues,
...(payload.action === 'edit' && account ? account : initialValues),
},
validationSchema: accountFormValidationSchema,
onSubmit: (values, { setSubmitting, setErrors }) => {
@@ -93,43 +97,48 @@ function AccountFormDialog({
if (payload.action === 'edit') {
requestEditAccount({
payload: payload.id,
form: { ...omit(values, [...exclude, 'account_type_id']) }
}).then((response) => {
closeDialog(name);
AppToaster.show({
message: 'the_account_has_been_edited',
intent: Intent.SUCCESS,
form: { ...omit(values, [...exclude, 'account_type_id']) },
})
.then((response) => {
closeDialog(name);
AppToaster.show({
message: 'the_account_has_been_edited',
intent: Intent.SUCCESS,
});
setSubmitting(false);
queryCache.refetchQueries('accounts-table', { force: true });
})
.catch((errors) => {
setSubmitting(false);
setErrors(transformApiErrors(errors));
});
setSubmitting(false);
queryCache.refetchQueries('accounts-table', { force: true });
}).catch((errors) => {
setSubmitting(false);
setErrors(transformApiErrors(errors));
});
} else {
requestSubmitAccount({ form: { ...omit(values, exclude) } }).then((response) => {
closeDialog(name);
AppToaster.show({
message: 'the_account_has_been_submit',
intent: Intent.SUCCESS,
position: Position.BOTTOM,
requestSubmitAccount({ form: { ...omit(values, exclude) } })
.then((response) => {
closeDialog(name);
AppToaster.show({
message: 'the_account_has_been_submit',
intent: Intent.SUCCESS,
position: Position.BOTTOM,
});
setSubmitting(false);
queryCache.refetchQueries('accounts-table', { force: true });
})
.catch((errors) => {
setSubmitting(false);
setErrors(transformApiErrors(errors));
});
setSubmitting(false);
queryCache.refetchQueries('accounts-table', { force: true });
}).catch((errors) => {
setSubmitting(false);
setErrors(transformApiErrors(errors));
});
}
}
},
});
const { errors, values, touched } = useMemo(() => (formik), [formik]);
const { errors, values, touched } = useMemo(() => formik, [formik]);
// Set default account type.
useEffect(() => {
if (account && account.account_type_id) {
const defaultType = accountsTypes.find((t) =>
t.id === account.account_type_id);
const defaultType = accountsTypes.find(
(t) => t.id === account.account_type_id
);
defaultType && setSelectedAccountType(defaultType);
}
@@ -155,44 +164,64 @@ function AccountFormDialog({
// Account item of select accounts field.
const accountItem = (item, { handleClick, modifiers, query }) => {
return (
<MenuItem text={item.name} label={item.code} key={item.id} onClick={handleClick} />
<MenuItem
text={item.name}
label={item.code}
key={item.id}
onClick={handleClick}
/>
);
};
// Filters accounts items.
const filterAccountsPredicater = useCallback((query, account, _index, exactMatch) => {
const normalizedTitle = account.name.toLowerCase();
const normalizedQuery = query.toLowerCase();
const filterAccountsPredicater = useCallback(
(query, account, _index, exactMatch) => {
const normalizedTitle = account.name.toLowerCase();
const normalizedQuery = query.toLowerCase();
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
}
}, []);
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return (
`${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0
);
}
},
[]
);
// Handles dialog close.
const handleClose = useCallback(() => { closeDialog(name); }, [closeDialog, name]);
const handleClose = useCallback(() => {
closeDialog(name);
}, [closeDialog, name]);
// Fetches accounts list.
const fetchAccountsList = useQuery('accounts-list',
() => requestFetchAccounts(), { manual: true });
const fetchAccountsList = useQuery(
'accounts-list',
() => requestFetchAccounts(),
{ manual: true }
);
// Fetches accounts types.
const fetchAccountsTypes = useQuery('accounts-types-list', async () => {
await requestFetchAccountTypes();
}, { manual: true });
const fetchAccountsTypes = useQuery(
'accounts-types-list',
async () => {
await requestFetchAccountTypes();
},
{ manual: true }
);
// Fetch the given account id on edit mode.
const fetchAccount = useQuery(
payload.action === 'edit' && ['account', payload.id],
(key, id) => requestFetchAccount(id),
{ manual: true });
{ manual: true }
);
const isFetching = (
fetchAccountsList.isFetching ||
fetchAccountTypes.isFetching ||
fetchAccount.isFetching);
const isFetching =
fetchAccountsList.isFetching ||
fetchAccountTypes.isFetching ||
fetchAccount.isFetching;
// Fetch requests on dialog opening.
const onDialogOpening = useCallback(() => {
@@ -201,16 +230,22 @@ function AccountFormDialog({
fetchAccount.refetch();
}, []);
const onChangeAccountType = useCallback((accountType) => {
setSelectedAccountType(accountType);
formik.setFieldValue('account_type_id', accountType.id);
}, [setSelectedAccountType, formik]);
const onChangeAccountType = useCallback(
(accountType) => {
setSelectedAccountType(accountType);
formik.setFieldValue('account_type_id', accountType.id);
},
[setSelectedAccountType, formik]
);
// Handles change sub-account.
const onChangeSubaccount = useCallback((account) => {
setSelectedSubaccount(account);
formik.setFieldValue('parent_account_id', account.id);
}, [setSelectedSubaccount, formik]);
const onChangeSubaccount = useCallback(
(account) => {
setSelectedSubaccount(account);
formik.setFieldValue('parent_account_id', account.id);
},
[setSelectedSubaccount, formik]
);
const onDialogClosed = useCallback(() => {
formik.resetForm();
@@ -218,21 +253,25 @@ function AccountFormDialog({
setSelectedAccountType(null);
}, [formik]);
const infoIcon = useMemo(() => (<Icon icon="info-circle" iconSize={12} />), []);
const infoIcon = useMemo(() => <Icon icon='info-circle' iconSize={12} />, []);
const subAccountLabel = useMemo(() => {
return (<span>{'Sub account?'} <Icon icon="info-circle" iconSize={12} /></span>);
return (
<span>
<T id={'sub_account'}/> <Icon icon='info-circle' iconSize={12} />
</span>
);
}, []);
const requiredSpan = useMemo(() => (<span class="required">*</span>), []);
const requiredSpan = useMemo(() => <span class='required'>*</span>, []);
return (
<Dialog
name={name}
title={payload.action === 'edit' ? 'Edit Account' : 'New Account'}
title={payload.action === 'edit' ? <T id={'edit_account'}/> : <T id={'new_account'}/>}
className={{
'dialog--loading': isFetching,
'dialog--account-form': true
'dialog--account-form': true,
}}
autoFocus={true}
canEscapeKeyClose={true}
@@ -245,15 +284,18 @@ function AccountFormDialog({
<form onSubmit={formik.handleSubmit}>
<div className={Classes.DIALOG_BODY}>
<FormGroup
label={'Account Type'}
label={<T id={'account_type'}/>}
labelInfo={requiredSpan}
className={classNames(
'form-group--account-type',
'form-group--select-list',
Classes.FILL)}
Classes.FILL
)}
inline={true}
helperText={<ErrorMessage name="account_type_id" {...formik} />}
intent={(errors.account_type_id && touched.account_type_id) && Intent.DANGER}
helperText={<ErrorMessage name='account_type_id' {...formik} />}
intent={
errors.account_type_id && touched.account_type_id && Intent.DANGER
}
>
<Select
items={accountsTypes}
@@ -265,39 +307,42 @@ function AccountFormDialog({
>
<Button
rightIcon='caret-down'
text={selectedAccountType ?
selectedAccountType.name : 'Select account type'}
text={
selectedAccountType
? selectedAccountType.name
: 'Select account type'
}
disabled={payload.action === 'edit'}
/>
</Select>
</FormGroup>
<FormGroup
label={'Account Name'}
label={<T id={'account_name'}/>}
labelInfo={requiredSpan}
className={'form-group--account-name'}
intent={(errors.name && touched.name) && Intent.DANGER}
helperText={<ErrorMessage name="name" {...formik} />}
intent={errors.name && touched.name && Intent.DANGER}
helperText={<ErrorMessage name='name' {...formik} />}
inline={true}
>
<InputGroup
medium={true}
intent={(errors.name && touched.name) && Intent.DANGER}
intent={errors.name && touched.name && Intent.DANGER}
{...formik.getFieldProps('name')}
/>
</FormGroup>
<FormGroup
label={'Account Code'}
label={<T id={'account_code'}/>}
className={'form-group--account-code'}
intent={(errors.code && touched.code) && Intent.DANGER}
helperText={<ErrorMessage name="code" {...formik} />}
intent={errors.code && touched.code && Intent.DANGER}
helperText={<ErrorMessage name='code' {...formik} />}
inline={true}
labelInfo={infoIcon}
>
<InputGroup
medium={true}
intent={(errors.code && touched.code) && Intent.DANGER}
intent={errors.code && touched.code && Intent.DANGER}
{...formik.getFieldProps('code')}
/>
</FormGroup>
@@ -316,11 +361,12 @@ function AccountFormDialog({
{values.subaccount && (
<FormGroup
label={'Parent Account'}
label={<T id={'parent_account'}/>}
className={classNames(
'form-group--parent-account',
'form-group--select-list',
Classes.FILL)}
Classes.FILL
)}
inline={true}
>
<Select
@@ -335,7 +381,9 @@ function AccountFormDialog({
<Button
rightIcon='caret-down'
text={
selectedSubaccount ? selectedSubaccount.name : 'Select Parent Account'
selectedSubaccount
? selectedSubaccount.name
: 'Select Parent Account'
}
/>
</Select>
@@ -343,7 +391,7 @@ function AccountFormDialog({
)}
<FormGroup
label={'Description'}
label={<T id={'description'}/>}
className={'form-group--description'}
intent={formik.errors.description && Intent.DANGER}
helperText={formik.errors.description && formik.errors.credential}
@@ -359,9 +407,13 @@ function AccountFormDialog({
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleClose}>Close</Button>
<Button intent={Intent.PRIMARY} disabled={formik.isSubmitting} type='submit'>
{payload.action === 'edit' ? 'Edit' : 'Submit'}
<Button onClick={handleClose}><T id={'close'}/></Button>
<Button
intent={Intent.PRIMARY}
disabled={formik.isSubmitting}
type='submit'
>
{payload.action === 'edit' ? <T id={'edit'}/> : <T id={'submit'}/>}
</Button>
</div>
</div>
@@ -370,6 +422,4 @@ function AccountFormDialog({
);
}
export default AccountFormDialogContainer(
AccountFormDialog,
);
export default AccountFormDialogContainer(AccountFormDialog);

18
client/src/containers/Dialogs/CurrencyDialog.js
View File

@@ -7,7 +7,7 @@ import {
Intent,
} from '@blueprintjs/core';
import * as Yup from 'yup';
import { useIntl } from 'react-intl';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { useFormik } from 'formik';
import { compose } from 'utils';
import Dialog from 'components/Dialog';
@@ -30,15 +30,15 @@ function CurrencyDialog({
requestEditCurrency,
editCurrency,
}) {
const intl = useIntl();
const {formatMessage} = useIntl();
const ValidationSchema = Yup.object().shape({
currency_name: Yup.string().required(
intl.formatMessage({ id: 'required' })
formatMessage({ id: 'required' })
),
currency_code: Yup.string()
.max(4)
.required(intl.formatMessage({ id: 'required' })),
.required(formatMessage({ id: 'required' })),
});
const initialValues = useMemo(
() => ({
@@ -110,7 +110,7 @@ function CurrencyDialog({
return (
<Dialog
name={name}
title={payload.action === 'edit' ? 'Edit Currency' : ' New Currency'}
title={payload.action === 'edit' ? <T id={'edit_currency'}/> : <T id={'new_currency'}/>}
className={classNames(
{
'dialog--loading': fetchHook.pending,
@@ -126,7 +126,7 @@ function CurrencyDialog({
<form onSubmit={formik.handleSubmit}>
<div className={Classes.DIALOG_BODY}>
<FormGroup
label={'Currency Name'}
label={<T id={'currency_name'}/>}
labelInfo={requiredSpan}
className={'form-group--currency-name'}
intent={
@@ -144,7 +144,7 @@ function CurrencyDialog({
/>
</FormGroup>
<FormGroup
label={'Currency Code'}
label={<T id={'currency_code'}/>}
labelInfo={requiredSpan}
className={'form-group--currency-code'}
intent={
@@ -164,9 +164,9 @@ function CurrencyDialog({
</div>
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleClose}>Close</Button>
<Button onClick={handleClose}><T id={'close'}/></Button>
<Button intent={Intent.PRIMARY} type='submit'>
{payload.action === 'edit' ? 'Edit' : 'Submit'}
{payload.action === 'edit' ? <T id={'edit'}/> : <T id={'submit'}/>}
</Button>
</div>
</div>

282
client/src/containers/Dialogs/ExchangeRateDialog.js Normal file
View File

@@ -0,0 +1,282 @@
import React, { useState, useMemo, useCallback, useEffect } from 'react';
import {
Button,
Classes,
FormGroup,
InputGroup,
Intent,
Position,
MenuItem,
} from '@blueprintjs/core';
import { pick } from 'lodash';
import * as Yup from 'yup';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { useFormik } from 'formik';
import Dialog from 'components/Dialog';
import { useQuery, queryCache } from 'react-query';
import AppToaster from 'components/AppToaster';
import ErrorMessage from 'components/ErrorMessage';
import classNames from 'classnames';
import { Select } from '@blueprintjs/select';
import moment from 'moment';
import { DateInput } from '@blueprintjs/datetime';
import { momentFormatter } from 'utils';
import ExchangeRatesDialogConnect from 'connectors/ExchangeRatesFromDialog.connect';
function ExchangeRateDialog({
name,
payload,
isOpen,
openDialog,
closeDialog,
currencies,
requestSubmitExchangeRate,
requestFetchExchangeRates,
requestEditExchangeRate,
requestFetchCurrencies,
editExchangeRate,
addExchangeRatesTableQueries,
}) {
const {formatMessage} = useIntl();
const [selectedItems, setSelectedItems] = useState({});
const validationSchema = Yup.object().shape({
exchange_rate: Yup.number().required(
formatMessage({ id: 'required' })
),
currency_code: Yup.string()
.max(3)
.required(formatMessage({ id: 'required' })),
date: Yup.date().required(formatMessage({ id: 'required' })),
});
const initialValues = useMemo(
() => ({
exchange_rate: '',
currency_code: '',
date: moment(new Date()).format('YYYY-MM-DD'),
}),
[]
);
const formik = useFormik({
enableReinitialize: true,
validationSchema,
initialValues: {
...(payload.action === 'edit' &&
pick(editExchangeRate, Object.keys(initialValues))),
},
onSubmit: (values, { setSubmitting }) => {
if (payload.action === 'edit') {
requestEditExchangeRate(payload.id, values)
.then((response) => {
closeDialog(name);
AppToaster.show({
message: 'the_exchange_rate_has_been_edited',
});
setSubmitting(false);
})
.catch((error) => {
setSubmitting(false);
});
} else {
requestSubmitExchangeRate(values)
.then((response) => {
closeDialog(name);
AppToaster.show({
message: 'the_exchangeRate_has_been_submit',
});
setSubmitting(false);
})
.catch((error) => {
setSubmitting(false);
});
}
},
});
const { values, errors, touched } = useMemo(() => formik, [formik]);
const requiredSpan = useMemo(() => <span class='required'>*</span>, []);
const handleClose = useCallback(() => {
closeDialog(name);
}, [name, closeDialog]);
const fetchHook = useQuery('exchange-rates-dialog', () => {
return Promise.all([requestFetchExchangeRates(), requestFetchCurrencies()]);
});
const onDialogClosed = useCallback(() => {
formik.resetForm();
closeDialog(name);
}, [formik, closeDialog, name]);
const onDialogOpening = useCallback(() => {
fetchHook.refetch();
}, [fetchHook]);
const handleDateChange = useCallback(
(date) => {
const formatted = moment(date).format('YYYY-MM-DD');
formik.setFieldValue('date', formatted);
},
[formik.setFieldValue]
);
const onItemsSelect = useCallback(
(filedName) => {
return (filed) => {
setSelectedItems({
...selectedItems,
[filedName]: filed,
});
formik.setFieldValue(filedName, filed.currency_code);
};
},
[formik.setFieldValue, selectedItems]
);
const filterCurrencyCode = (query, currency_code, _index, exactMatch) => {
const normalizedTitle = currency_code.currency_code.toLowerCase();
const normalizedQuery = query.toLowerCase();
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return (
`${currency_code.currency_code} ${normalizedTitle}`.indexOf(
normalizedQuery
) >= 0
);
}
};
const currencyCodeRenderer = useCallback((CurrencyCode, { handleClick }) => {
return (
<MenuItem
className={'exchangeRate-menu'}
key={CurrencyCode.id}
text={CurrencyCode.currency_code}
onClick={handleClick}
/>
);
}, []);
const getSelectedItemLabel = useCallback(
(fieldName, defaultLabel) => {
return typeof selectedItems[fieldName] !== 'undefined'
? selectedItems[fieldName].currency_code
: defaultLabel;
},
[selectedItems]
);
return (
<Dialog
name={name}
title={
payload.action === 'edit' ? <T id={'edit_exchange_rate'}/> : <T id={'new_exchange_rate'}/>
}
className={classNames(
{
'dialog--loading': fetchHook.pending,
},
'dialog--exchangeRate-form'
)}
isOpen={isOpen}
onClosed={onDialogClosed}
onOpening={onDialogOpening}
isLoading={fetchHook.pending}
onClose={handleClose}
>
<form onSubmit={formik.handleSubmit}>
<div className={Classes.DIALOG_BODY}>
<FormGroup
label={<T id={'date'}/>}
inline={true}
labelInfo={requiredSpan}
intent={errors.date && touched.date && Intent.DANGER}
helperText={<ErrorMessage name='date' {...formik} />}
>
<DateInput
fill={true}
{...momentFormatter('YYYY-MM-DD')}
defaultValue={new Date()}
onChange={handleDateChange}
popoverProps={{ position: Position.BOTTOM }}
// disabled={payload.action === 'edit'}
/>
</FormGroup>
<FormGroup
label={<T id={'exchange_rate'}/>}
labelInfo={requiredSpan}
intent={
errors.exchange_rate && touched.exchange_rate && Intent.DANGER
}
helperText={<ErrorMessage name='exchange_rate' {...formik} />}
inline={true}
>
<InputGroup
medium={true}
intent={
errors.exchange_rate && touched.exchange_rate && Intent.DANGER
}
{...formik.getFieldProps('exchange_rate')}
/>
</FormGroup>
<FormGroup
label={<T id={'currency_code'}/>}
labelInfo={requiredSpan}
className={classNames(
'form-group--select-list',
Classes.FILL
)}
inline={true}
intent={
errors.currency_code && touched.currency_code && Intent.DANGER
}
helperText={<ErrorMessage name='currency_code' {...formik} />}
>
<Select
items={Object.values(currencies)}
noResults={<MenuItem disabled={true} text='No results.' />}
itemRenderer={currencyCodeRenderer}
itemPredicate={filterCurrencyCode}
popoverProps={{ minimal: true }}
onItemSelect={onItemsSelect('currency_code')}
>
<Button
rightIcon='caret-down'
fill={true}
text={getSelectedItemLabel(
'currency_code',
'select Currency Code'
)}
// disabled={payload.action === 'edit'}
/>
</Select>
</FormGroup>
</div>
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleClose}><T id={'close'}/></Button>
<Button intent={Intent.PRIMARY} type='submit'>
{payload.action === 'edit' ? <T id={'edit'}/> : <T id={'submit'}/>}
</Button>
</div>
</div>
</form>
</Dialog>
);
}
export default ExchangeRatesDialogConnect(ExchangeRateDialog);

26
client/src/containers/Dialogs/InviteUserDialog.js
View File

@@ -1,5 +1,5 @@
import React, { useMemo, useCallback } from 'react';
import { useIntl } from 'react-intl';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import {
@@ -28,7 +28,7 @@ function InviteUserDialog({
requestFetchUser,
requestEditUser,
}) {
const intl = useIntl();
const { formatMessage } = useIntl();
const fetchHook = useAsync(async () => {
await Promise.all([
@@ -37,12 +37,12 @@ function InviteUserDialog({
}, false);
const validationSchema = Yup.object().shape({
first_name: Yup.string().required(intl.formatMessage({ id: 'required' })),
last_name: Yup.string().required(intl.formatMessage({ id: 'required' })),
first_name: Yup.string().required(formatMessage({ id: 'required' })),
last_name: Yup.string().required(formatMessage({ id: 'required' })),
email: Yup.string()
.email()
.required(intl.formatMessage({ id: 'required' })),
phone_number: Yup.number().required(intl.formatMessage({ id: 'required' })),
.required(formatMessage({ id: 'required' })),
phone_number: Yup.number().required(formatMessage({ id: 'required' })),
});
const initialValues = useMemo(
@@ -101,7 +101,7 @@ function InviteUserDialog({
return (
<Dialog
name={name}
title={payload.action === 'edit' ? 'Edit invite' : ''}
title={payload.action === 'edit' ? <T id={'edit_invite'} /> : ''}
className={classNames({
'dialog--loading': fetchHook.pending,
'dialog--invite-user': true,
@@ -116,7 +116,7 @@ function InviteUserDialog({
<form onSubmit={formik.handleSubmit}>
<div className={Classes.DIALOG_BODY}>
<FormGroup
label={'First Name'}
label={<T id={'first_name'} />}
className={'form-group--first-name'}
intent={errors.first_name && touched.first_name && Intent.DANGER}
helperText={<ErrorMessage name='first_name' {...formik} />}
@@ -129,7 +129,7 @@ function InviteUserDialog({
</FormGroup>
<FormGroup
label={'Last Name'}
label={<T id={'last_name'} />}
className={'form-group--last-name'}
intent={errors.last_name && touched.last_name && Intent.DANGER}
helperText={<ErrorMessage name='last_name' {...formik} />}
@@ -142,7 +142,7 @@ function InviteUserDialog({
</FormGroup>
<FormGroup
label={'Email'}
label={<T id={'email'} />}
className={'form-group--email'}
intent={errors.email && touched.email && Intent.DANGER}
helperText={<ErrorMessage name='email' {...formik} />}
@@ -156,7 +156,7 @@ function InviteUserDialog({
</FormGroup>
<FormGroup
label={'Phone Number'}
label={<T id={'phone_number'} />}
className={'form-group--phone-number'}
intent={
errors.phone_number && touched.phone_number && Intent.DANGER
@@ -175,9 +175,9 @@ function InviteUserDialog({
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleClose}>Close</Button>
<Button onClick={handleClose}><T id={'close'}/></Button>
<Button intent={Intent.PRIMARY} type='submit'>
{payload.action === 'edit' ? 'Edit' : ''}
{payload.action === 'edit' ? <T id={'edit'}/> : ''}
</Button>
</div>
</div>

18
client/src/containers/Dialogs/ItemCategoryDialog.js
View File

@@ -11,7 +11,7 @@ import {
import { Select } from '@blueprintjs/select';
import { pick } from 'lodash';
import * as Yup from 'yup';
import { useIntl } from 'react-intl';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { useFormik } from 'formik';
import { compose } from 'utils';
import { useQuery } from 'react-query';
@@ -55,13 +55,13 @@ function ItemCategoryDialog({
requestEditItemCategory,
}) {
const [selectedParentCategory, setParentCategory] = useState(null);
const intl = useIntl();
const {formatMessage} = useIntl();
const fetchList = useQuery(['items-categories-list'],
() => requestFetchItemCategories());
const ValidationSchema = Yup.object().shape({
name: Yup.string().required(intl.formatMessage({ id: 'required' })),
name: Yup.string().required(formatMessage({ id: 'required' })),
parent_category_id: Yup.string().nullable(),
description: Yup.string().trim()
});
@@ -149,7 +149,7 @@ function ItemCategoryDialog({
return (
<Dialog
name={name}
title={payload.action === 'edit' ? 'Edit Category' : ' New Category'}
title={payload.action === 'edit' ? <T id={'edit_category'}/> : <T id={'new_category'}/>}
className={classNames({
'dialog--loading': fetchList.isFetching,
},
@@ -164,7 +164,7 @@ function ItemCategoryDialog({
<form onSubmit={formik.handleSubmit}>
<div className={Classes.DIALOG_BODY}>
<FormGroup
label={'Category Name'}
label={<T id={'category_name'}/>}
labelInfo={requiredSpan}
className={'form-group--category-name'}
intent={(errors.name && touched.name) && Intent.DANGER}
@@ -179,7 +179,7 @@ function ItemCategoryDialog({
</FormGroup>
<FormGroup
label={'Parent Category'}
label={<T id={'parent_category'}/>}
labelInfo={infoIcon}
className={classNames(
'form-group--select-list',
@@ -207,7 +207,7 @@ function ItemCategoryDialog({
</FormGroup>
<FormGroup
label={'Description'}
label={<T id={'description'}/>}
className={'form-group--description'}
intent={(errors.description && touched.description) && Intent.DANGER}
helperText={(<ErrorMessage name="description" {...formik} />)}
@@ -222,9 +222,9 @@ function ItemCategoryDialog({
</div>
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleClose}>Close</Button>
<Button onClick={handleClose}><T id={'close'}/></Button>
<Button intent={Intent.PRIMARY} type='submit'>
{payload.action === 'edit' ? 'Edit' : 'Submit'}
{payload.action === 'edit' ? <T id={'edit'}/> : <T id={'submit'}/>}
</Button>
</div>
</div>

42
client/src/containers/Dialogs/ItemFromDialog.js
View File

@@ -5,10 +5,10 @@ import {
FormGroup,
InputGroup,
Intent,
TextArea
TextArea,
} from '@blueprintjs/core';
import * as Yup from 'yup';
import { useIntl } from 'react-intl';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { useFormik } from 'formik';
import { compose } from 'utils';
import Dialog from 'components/Dialog';
@@ -25,30 +25,30 @@ function ItemFromDialog({
submitItemCategory,
fetchCategory,
openDialog,
closeDialog
closeDialog,
}) {
const [state, setState] = useState({});
const intl = useIntl();
const { formatMessage } = useIntl();
const ValidationSchema = Yup.object().shape({
name: Yup.string().required(intl.formatMessage({ id: 'required' })),
description: Yup.string().trim()
name: Yup.string().required(formatMessage({ id: 'required' })),
description: Yup.string().trim(),
});
const formik = useFormik({
enableReinitialize: true,
initialValues: {},
validationSchema: ValidationSchema,
onSubmit: values => {
onSubmit: (values) => {
submitItemCategory({ values })
.then(response => {
.then((response) => {
AppToaster.show({
message: 'the_category_has_been_submit'
message: 'the_category_has_been_submit',
});
})
.catch(error => {
.catch((error) => {
alert(error.message);
});
}
},
});
const fetchHook = useAsync(async () => {
@@ -71,10 +71,12 @@ function ItemFromDialog({
return (
<Dialog
name={name}
title={payload.action === 'new' ? 'New' : ' New Category'}
title={
payload.action === 'new' ? <T id={'new'} /> : <T id={'new_category'} />
}
className={{
'dialog--loading': state.isLoading,
'dialog--item-form': true
'dialog--item-form': true,
}}
isOpen={isOpen}
onClosed={onDialogClosed}
@@ -84,7 +86,7 @@ function ItemFromDialog({
<form onSubmit={formik.handleSubmit}>
<div className={Classes.DIALOG_BODY}>
<FormGroup
label={'Category Name'}
label={<T id={'category_name'} />}
className={'form-group--category-name'}
intent={formik.errors.name && Intent.DANGER}
helperText={formik.errors.name && formik.errors.name}
@@ -97,7 +99,7 @@ function ItemFromDialog({
/>
</FormGroup>
<FormGroup
label={'Description'}
label={<T id={'description'} />}
className={'form-group--description'}
intent={formik.errors.description && Intent.DANGER}
helperText={formik.errors.description && formik.errors.credential}
@@ -112,9 +114,15 @@ function ItemFromDialog({
</div>
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleClose}>Close</Button>
<Button onClick={handleClose}>
<T id={'close'} />
</Button>
<Button intent={Intent.PRIMARY} type='submit'>
{payload.action === 'new' ? 'New' : 'Submit'}
{payload.action === 'new' ? (
<T id={'new'} />
) : (
<T id={'submit'} />
)}
</Button>
</div>
</div>

36
client/src/containers/Dialogs/UserFormDialog.js
View File

@@ -1,5 +1,5 @@
import React, { useMemo, useCallback } from 'react';
import { useIntl } from 'react-intl';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import {
@@ -37,7 +37,9 @@ function UserFormDialog({
}, false);
const validationSchema = Yup.object().shape({
email: Yup.string().email().required(intl.formatMessage({id:'required'})),
email: Yup.string()
.email()
.required(intl.formatMessage({ id: 'required' })),
});
const initialValues = {
@@ -96,7 +98,13 @@ function UserFormDialog({
return (
<Dialog
name={name}
title={payload.action === 'edit' ? 'Edit invite' : 'invite User'}
title={
payload.action === 'edit' ? (
<T id={'edit_invite'} />
) : (
<T id={'invite_user'} />
)
}
className={classNames({
'dialog--loading': fetchHook.pending,
'dialog--invite-form': true,
@@ -110,18 +118,20 @@ function UserFormDialog({
>
<form onSubmit={handleSubmit}>
<div className={Classes.DIALOG_BODY}>
<p class="mb2">Your teammate will get an email that gives them access to your team.</p>
<p class='mb2'>
<T id={'your_access_to_your_team'} />
</p>
<FormGroup
label={'Email'}
label={<T id={'email'} />}
className={classNames('form-group--email', Classes.FILL)}
intent={(errors.email && touched.email) && Intent.DANGER}
helperText={<ErrorMessage name='email' {...{errors, touched}} />}
intent={errors.email && touched.email && Intent.DANGER}
helperText={<ErrorMessage name='email' {...{ errors, touched }} />}
inline={true}
>
<InputGroup
medium={true}
intent={(errors.email && touched.email) && Intent.DANGER}
intent={errors.email && touched.email && Intent.DANGER}
{...getFieldProps('email')}
/>
</FormGroup>
@@ -129,9 +139,15 @@ function UserFormDialog({
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleClose}>Close</Button>
<Button onClick={handleClose}>
<T id={'close'} />
</Button>
<Button intent={Intent.PRIMARY} type='submit'>
{payload.action === 'edit' ? 'Edit' : 'invite'}
{payload.action === 'edit' ? (
<T id={'edit'} />
) : (
<T id={'invite'} />
)}
</Button>
</div>
</div>

5
client/src/containers/Expenses/ExpensesList.js
View File

@@ -8,6 +8,7 @@ import ExpensesViewsTabs from 'components/Expenses/ExpensesViewsTabs';
import ExpensesTable from 'components/Expenses/ExpensesTable';
import connector from 'connectors/ExpensesList.connector';
import AppToaster from 'components/AppToaster';
import { FormattedMessage as T, useIntl } from 'react-intl';
function ExpensesList({
fetchExpenses,
@@ -59,8 +60,8 @@ function ExpensesList({
</DashboardPageContent>
<Alert
cancelButtonText='Cancel'
confirmButtonText='Move to Trash'
cancelButtonText={<T id={'cancel'}/>}
confirmButtonText={<T id={'move_to_trash'}/>}
icon='trash'
intent={Intent.DANGER}
isOpen={deleteExpenseState}

122
client/src/containers/FinancialStatements/ExchangeRates/ExchangeRate.js Normal file
View File

@@ -0,0 +1,122 @@
import React, { useEffect, useState, useCallback } from 'react';
import { useQuery } from 'react-query';
import { useParams } from 'react-router-dom';
import { Alert, Intent } from '@blueprintjs/core';
import AppToaster from 'components/AppToaster';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import ExchangeRateTable from './ExchangeRateTable';
import ExchangeRateActionsBar from './ExchangeRateActionsBar';
import withDashboardActions from 'containers/Dashboard/withDashboard';
import withResourceActions from 'containers/Resources/withResourcesActions';
import withExchangeRatesActions from 'containers/FinancialStatements/ExchangeRates/withExchangeRatesActions';
import { compose } from 'utils';
import { FormattedMessage as T, useIntl } from 'react-intl';
function ExchangeRate({
views,
changePageTitle,
requestFetchResourceFields,
requestFetchExchangeRates,
requestDeleteExchangeRate,
addExchangeRatesTableQueries,
}) {
const { id } = useParams();
const [deleteExchangeRate, setDeleteExchangeRate] = useState(false);
const [selectedRows, setSelectedRows] = useState([]);
const fetchHook = useQuery('exchange-rates', () => {
return Promise.all([requestFetchExchangeRates()]);
});
useEffect(() => {
id
? changePageTitle('Exchange Rate Details')
: changePageTitle('Exchange Rate List');
}, [id, changePageTitle]);
const handelDeleteExchangeRate = useCallback(
(exchange_rate) => {
setDeleteExchangeRate(exchange_rate);
},
[setDeleteExchangeRate]
);
const handelEditExchangeRate = (exchange_rate) => {};
const handelCancelExchangeRateDelete = useCallback(() => {
setDeleteExchangeRate(false);
}, [setDeleteExchangeRate]);
const handelConfirmExchangeRateDelete = useCallback(() => {
requestDeleteExchangeRate(deleteExchangeRate.id).then(() => {
setDeleteExchangeRate(false);
AppToaster.show({
message: 'the_exchange_rate_has_been_delete',
});
});
}, [deleteExchangeRate, requestDeleteExchangeRate]);
// Handle fetch data of Exchange_rates datatable.
const handleFetchData = useCallback(
({ pageIndex, pageSize, sortBy }) => {
addExchangeRatesTableQueries({
...(sortBy.length > 0
? {
column_sort_by: sortBy[0].id,
sort_order: sortBy[0].desc ? 'desc' : 'asc',
}
: {}),
});
},
[addExchangeRatesTableQueries]
);
const handleSelectedRowsChange = useCallback(
(exchange_rates) => {
setSelectedRows(exchange_rates);
},
[setSelectedRows]
);
return (
<DashboardInsider loading={fetchHook.pending}>
<ExchangeRateActionsBar
views={views}
onDeleteExchangeRate={handelDeleteExchangeRate}
selectedRows={selectedRows}
/>
<DashboardPageContent>
<ExchangeRateTable
onDeleteExchangeRate={handelDeleteExchangeRate}
onEditExchangeRate={handelEditExchangeRate}
onFetchData={handleFetchData}
onSelectedRowsChange={handleSelectedRowsChange}
/>
<Alert
cancelButtonText={<T id={'cancel'}/>}
confirmButtonText={<T id={'move_to_trash'}/>}
icon='trash'
intent={Intent.DANGER}
isOpen={deleteExchangeRate}
onCancel={handelCancelExchangeRateDelete}
onConfirm={handelConfirmExchangeRateDelete}
>
<p>
Are you sure you want to move <b>filename</b> to Trash? You will be
able to restore it later, but it will become private to you.
</p>
</Alert>
</DashboardPageContent>
</DashboardInsider>
);
}
export default compose(
withExchangeRatesActions,
withDashboardActions
)(ExchangeRate);

112
client/src/containers/FinancialStatements/ExchangeRates/ExchangeRateActionsBar.js Normal file
View File

@@ -0,0 +1,112 @@
import React, { useCallback, useState, useMemo } from 'react';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import { compose } from 'utils';
import {
NavbarGroup,
Button,
Classes,
Intent,
Popover,
Position,
PopoverInteractionKind,
} from '@blueprintjs/core';
import { connect } from 'react-redux';
import classNames from 'classnames';
import Icon from 'components/Icon';
import DashboardConnect from 'connectors/Dashboard.connector';
import FilterDropdown from 'components/FilterDropdown';
import ExchangeRatesDialogConnect from 'connectors/ExchangeRatesFromDialog.connect';
import withResourceDetail from 'containers/Resources/withResourceDetails';
import { FormattedMessage as T, useIntl } from 'react-intl';
function ExchangeRateActionsBar({
openDialog,
onDeleteExchangeRate,
onFilterChanged,
resourceFields,
selectedRows = [],
}) {
const onClickNewExchangeRate = useCallback(() => {
openDialog('exchangeRate-form', {});
}, [openDialog]);
const handelDeleteExchangeRate = useCallback(
(exchangeRate) => {
onDeleteExchangeRate(exchangeRate);
},
[selectedRows, onDeleteExchangeRate]
);
const [filterCount, setFilterCount] = useState(0);
const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
selectedRows,
]);
const filterDropdown = FilterDropdown({
fields: resourceFields,
onFilterChange: (filterConditions) => {
setFilterCount(filterConditions.length || 0);
onFilterChanged && onFilterChanged(filterConditions);
},
});
return (
<DashboardActionsBar>
<NavbarGroup>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='plus' />}
text={<T id={'new_exchange_rate'}/>}
onClick={onClickNewExchangeRate}
/>
<Popover
minimal={true}
content={filterDropdown}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
className={classNames(Classes.MINIMAL, 'button--filter')}
text={
filterCount <= 0 ? <T id={'filter'}/> : `${filterCount} filters applied`
}
icon={<Icon icon='filter' />}
/>
</Popover>
{hasSelectedRows && (
<Button
className={Classes.MINIMAL}
icon={<Icon icon='trash' iconSize={15} />}
text={<T id={'delete'}/>}
intent={Intent.DANGER}
onClick={handelDeleteExchangeRate}
/>
)}
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-import' />}
text={<T id={'import'}/>}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
text={<T id={'export'}/>}
/>
</NavbarGroup>
</DashboardActionsBar>
);
}
const mapStateToProps = (state, props) => ({
resourceName: 'exchange_rates',
});
const withExchangeRateActionBar = connect(mapStateToProps);
export default compose(
withExchangeRateActionBar,
DashboardConnect,
ExchangeRatesDialogConnect,
withResourceDetail
)(ExchangeRateActionsBar);

143
client/src/containers/FinancialStatements/ExchangeRates/ExchangeRateTable.js Normal file
View File

@@ -0,0 +1,143 @@
import React, { useCallback, useMemo } from 'react';
import Icon from 'components/Icon';
import DialogConnect from 'connectors/Dialog.connector';
import LoadingIndicator from 'components/LoadingIndicator';
import DataTable from 'components/DataTable';
import { Button, Popover, Menu, MenuItem, Position } from '@blueprintjs/core';
import withExchangeRates from 'containers/FinancialStatements/ExchangeRates/withExchangeRates';
import withExchangeRatesActions from 'containers/FinancialStatements/ExchangeRates/withExchangeRatesActions';
import { compose } from 'utils';
import { FormattedMessage as T, useIntl } from 'react-intl';
function ExchangeRateTable({
exchangeRatesList,
onFetchData,
openDialog,
onDeleteExchangeRate,
onEditExchangeRate,
onSelectedRowsChange,
}) {
const {formatMessage} = useIntl();
const handelEditExchangeRate = (exchange_rate) => () => {
openDialog('exchangeRate-form', { action: 'edit', id: exchange_rate.id });
onEditExchangeRate(exchange_rate.id);
};
// const handelEditExchangeRate = useCallback(
// (exchange_rate) => () => {
// openDialog('exchangeRate-form', { action: 'edit', id: exchange_rate.id });
// onEditExchangeRate(exchange_rate.id);
// },
// [openDialog]
// );
const handleDeleteExchangeRate = (exchange_rate) => () => {
onDeleteExchangeRate(exchange_rate);
};
const actionMenuList = useCallback(
(ExchangeRate) => (
<Menu>
<MenuItem
text={<T id={'edit_exchange_rate'}/>}
onClick={handelEditExchangeRate(ExchangeRate)}
/>
<MenuItem
text={<T id={'delete_exchange_rate'}/>}
onClick={handleDeleteExchangeRate(ExchangeRate)}
/>
</Menu>
),
[]
);
const columns = useMemo(
() => [
{
id: 'date',
Header: formatMessage({id:'date'}),
// accessor: 'date',
width: 150,
},
{
id: 'currency_code',
Header: formatMessage({id:'currency_code'}),
accessor: 'currency_code',
className: 'currency_code',
width: 150,
},
{
id: 'exchange_rate',
Header: formatMessage({id:'exchange_rate'}),
accessor: 'exchange_rate',
className: 'exchange_rate',
width: 150,
},
{
id: 'actions',
Header: '',
Cell: ({ cell }) => (
<Popover
content={actionMenuList(cell.row.original)}
position={Position.RIGHT_BOTTOM}
>
<Button icon={<Icon icon='ellipsis-h' />} />
</Popover>
),
className: 'actions',
width: 50,
disableResizing: false,
},
],
[actionMenuList]
);
const selectionColumn = useMemo(
() => ({
minWidth: 42,
width: 42,
maxWidth: 42,
}),
[]
);
const handelFetchData = useCallback(
(...params) => {
onFetchData && onFetchData(...params);
},
[onFetchData]
);
const handelSelectedRowsChange = useCallback(
(selectRows) => {
onSelectedRowsChange &&
onSelectedRowsChange(selectRows.map((c) => c.original));
},
[onSelectedRowsChange]
);
return (
<DataTable
columns={columns}
data={exchangeRatesList}
onFetchData={handelFetchData}
manualSortBy={true}
selectionColumn={selectionColumn}
expandable={true}
treeGraph={true}
onSelectedRowsChange={handelSelectedRowsChange}
spinnerProps={{ size: 30 }}
/>
);
}
export default compose(
DialogConnect,
withExchangeRatesActions,
withExchangeRates
)(ExchangeRateTable);

8
client/src/containers/FinancialStatements/ExchangeRates/withExchangeRates.js Normal file
View File

@@ -0,0 +1,8 @@
import { connect } from 'react-redux';
import { getResourceViews } from 'store/customViews/customViews.selectors';
const mapStateToProps = (state, props) => ({
exchangeRatesList: Object.values(state.exchangeRates.exchangeRates),
});
export default connect(mapStateToProps);

21
client/src/containers/FinancialStatements/ExchangeRates/withExchangeRatesActions.js Normal file
View File

@@ -0,0 +1,21 @@
import { connect } from 'react-redux';
import {
submitExchangeRate,
fetchExchangeRates,
deleteExchangeRate,
editExchangeRate,
} from 'store/ExchangeRate/exchange.actions';
export const mapActionsToProps = (dispatch) => ({
requestSubmitExchangeRate: (form) => dispatch(submitExchangeRate({ form })),
requestFetchExchangeRates: () => dispatch(fetchExchangeRates()),
requestDeleteExchangeRate: (id) => dispatch(deleteExchangeRate(id)),
requestEditExchangeRate: (id, form) => dispatch(editExchangeRate(id, form)),
addExchangeRatesTableQueries: (queries) =>
dispatch({
type: 'ExchangeRates_TABLE_QUERIES_ADD',
queries,
}),
});
export default connect(null, mapActionsToProps);

13
client/src/containers/Items/ItemCategoriesTable.js
View File

@@ -12,6 +12,7 @@ import {
MenuItem,
Position,
} from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
const ItemsCategoryList = ({
categories,
@@ -22,6 +23,8 @@ const ItemsCategoryList = ({
count,
onSelectedRowsChange,
}) => {
const {formatMessage} = useIntl();
const handelEditCategory = (category) => () => {
openDialog('item-form', { action: 'edit', id: category.id });
onEditCategory(category.id);
@@ -33,9 +36,9 @@ const ItemsCategoryList = ({
const actionMenuList = (category) => (
<Menu>
<MenuItem text='Edit Category' onClick={handelEditCategory(category)} />
<MenuItem text={<T id={'edit_category'} />} onClick={handelEditCategory(category)} />
<MenuItem
text='Delete Category'
text={<T id={'delete_category'}/>}
onClick={handleDeleteCategory(category)}
/>
</Menu>
@@ -44,20 +47,20 @@ const ItemsCategoryList = ({
const columns = useMemo(() => [
{
id: 'name',
Header: 'Category Name',
Header: formatMessage({id:'category_name'}),
accessor: 'name',
width: 150,
},
{
id: 'description',
Header: 'Description',
Header: formatMessage({id:'description'}),
accessor: 'description',
className: 'description',
width: 150,
},
{
id: 'count',
Header: 'Count',
Header: formatMessage({id:'count'}),
accessor: (r) => r.count || '',
className: 'count',
width: 50,

346
client/src/containers/Items/ItemForm.js
View File

@@ -16,20 +16,21 @@ import { Select } from '@blueprintjs/select';
import AppToaster from 'components/AppToaster';
import AccountsConnect from 'connectors/Accounts.connector';
import ItemsConnect from 'connectors/Items.connect';
import {compose} from 'utils';
import { compose } from 'utils';
import ErrorMessage from 'components/ErrorMessage';
import classNames from 'classnames';
import Icon from 'components/Icon';
import ItemCategoryConnect from 'connectors/ItemsCategory.connect';
import MoneyInputGroup from 'components/MoneyInputGroup';
import {useHistory} from 'react-router-dom';
import { useHistory } from 'react-router-dom';
import Dragzone from 'components/Dragzone';
import MediaConnect from 'connectors/Media.connect';
import useMedia from 'hooks/useMedia';
import { FormattedMessage as T, useIntl } from 'react-intl';
const ItemForm = ({
requestSubmitItem,
accounts,
categories,
@@ -49,14 +50,17 @@ const ItemForm = ({
} = useMedia({
saveCallback: requestSubmitMedia,
deleteCallback: requestDeleteMedia,
})
});
const ItemTypeDisplay = useMemo(() => ([
{ value: null, label: 'Select Item Type' },
{ value: 'service', label: 'Service' },
{ value: 'inventory', label: 'Inventory' },
{ value: 'non-inventory', label: 'Non-Inventory' }
]), []);
const ItemTypeDisplay = useMemo(
() => [
{ value: null, label: 'Select Item Type' },
{ value: 'service', label: 'Service' },
{ value: 'inventory', label: 'Inventory' },
{ value: 'non-inventory', label: 'Non-Inventory' },
],
[]
);
const validationSchema = Yup.object().shape({
active: Yup.boolean(),
@@ -73,22 +77,25 @@ const ItemForm = ({
otherwise: Yup.number().nullable(),
}),
category_id: Yup.number().nullable(),
stock: Yup.string() || Yup.boolean()
stock: Yup.string() || Yup.boolean(),
});
const initialValues = useMemo(() => ({
active: true,
name: '',
type: '',
sku: '',
cost_price: 0,
sell_price: 0,
cost_account_id: null,
sell_account_id: null,
inventory_account_id: null,
category_id: null,
note: '',
}), []);
const initialValues = useMemo(
() => ({
active: true,
name: '',
type: '',
sku: '',
cost_price: 0,
sell_price: 0,
cost_account_id: null,
sell_account_id: null,
inventory_account_id: null,
category_id: null,
note: '',
}),
[]
);
const {
getFieldProps,
@@ -107,31 +114,39 @@ const ItemForm = ({
const saveItem = (mediaIds) => {
const formValues = { ...values, media_ids: mediaIds };
return requestSubmitItem(formValues).then((response) => {
AppToaster.show({
message: 'The_Items_has_been_submit'
return requestSubmitItem(formValues)
.then((response) => {
AppToaster.show({
message: 'The_Items_has_been_submit',
});
setSubmitting(false);
history.push('/dashboard/items');
})
.catch((error) => {
setSubmitting(false);
});
setSubmitting(false);
history.push('/dashboard/items');
})
.catch((error) => {
setSubmitting(false);
});
};
Promise.all([
saveMedia(),
deleteMedia(),
]).then(([savedMediaResponses]) => {
const mediaIds = savedMediaResponses.map(res => res.data.media.id);
return saveItem(mediaIds);
});
}
Promise.all([saveMedia(), deleteMedia()]).then(
([savedMediaResponses]) => {
const mediaIds = savedMediaResponses.map((res) => res.data.media.id);
return saveItem(mediaIds);
}
);
},
});
const accountItem = useCallback((item, { handleClick }) => (
<MenuItem key={item.id} text={item.name} label={item.code} onClick={handleClick} />
), []);
const accountItem = useCallback(
(item, { handleClick }) => (
<MenuItem
key={item.id}
text={item.name}
label={item.code}
onClick={handleClick}
/>
),
[]
);
// Filter Account Items
const filterAccounts = (query, account, _index, exactMatch) => {
@@ -144,27 +159,37 @@ const ItemForm = ({
}
};
const onItemAccountSelect = useCallback((filedName) => {
return (account) => {
setSelectedAccounts({
...selectedAccounts,
[filedName]: account
});
setFieldValue(filedName, account.id);
};
}, [setFieldValue, selectedAccounts]);
const onItemAccountSelect = useCallback(
(filedName) => {
return (account) => {
setSelectedAccounts({
...selectedAccounts,
[filedName]: account,
});
setFieldValue(filedName, account.id);
};
},
[setFieldValue, selectedAccounts]
);
const categoryItem = useCallback((item, { handleClick }) => (
<MenuItem text={item.name} onClick={handleClick} />
), []);
const categoryItem = useCallback(
(item, { handleClick }) => (
<MenuItem text={item.name} onClick={handleClick} />
),
[]
);
const getSelectedAccountLabel = useCallback((fieldName, defaultLabel) => {
return typeof selectedAccounts[fieldName] !== 'undefined'
? selectedAccounts[fieldName].name : defaultLabel;
}, [selectedAccounts]);
const getSelectedAccountLabel = useCallback(
(fieldName, defaultLabel) => {
return typeof selectedAccounts[fieldName] !== 'undefined'
? selectedAccounts[fieldName].name
: defaultLabel;
},
[selectedAccounts]
);
const requiredSpan = useMemo(() => (<span class="required">*</span>), []);
const infoIcon = useMemo(() => (<Icon icon="info-circle" iconSize={12} />), []);
const requiredSpan = useMemo(() => <span class='required'>*</span>, []);
const infoIcon = useMemo(() => <Icon icon='info-circle' iconSize={12} />, []);
const handleMoneyInputChange = (fieldKey) => (e, value) => {
setFieldValue(fieldKey, value);
@@ -178,31 +203,36 @@ const ItemForm = ({
setFiles(_files.filter((file) => file.uploaded === false));
}, []);
const handleDeleteFile = useCallback((_deletedFiles) => {
_deletedFiles.forEach((deletedFile) => {
if (deletedFile.uploaded && deletedFile.metadata.id) {
setDeletedFiles([
...deletedFiles, deletedFile.metadata.id,
]);
}
});
}, [setDeletedFiles, deletedFiles]);
const handleDeleteFile = useCallback(
(_deletedFiles) => {
_deletedFiles.forEach((deletedFile) => {
if (deletedFile.uploaded && deletedFile.metadata.id) {
setDeletedFiles([...deletedFiles, deletedFile.metadata.id]);
}
});
},
[setDeletedFiles, deletedFiles]
);
const handleCancelClickBtn = () => { history.goBack(); };
const handleCancelClickBtn = () => {
history.goBack();
};
return (
<div class='item-form'>
<form onSubmit={handleSubmit}>
<div class="item-form__primary-section">
<div class='item-form__primary-section'>
<Row>
<Col xs={7}>
<FormGroup
medium={true}
label={'Item Type'}
label={<T id={'item_type'} />}
labelInfo={requiredSpan}
className={'form-group--item-type'}
intent={(errors.type && touched.type) && Intent.DANGER}
helperText={<ErrorMessage {...{errors, touched}} name="type" />}
intent={errors.type && touched.type && Intent.DANGER}
helperText={
<ErrorMessage {...{ errors, touched }} name='type' />
}
inline={true}
>
<HTMLSelect
@@ -213,45 +243,53 @@ const ItemForm = ({
</FormGroup>
<FormGroup
label={'Item Name'}
label={<T id={'item_name'} />}
labelInfo={requiredSpan}
className={'form-group--item-name'}
intent={(errors.name && touched.name) && Intent.DANGER}
helperText={<ErrorMessage {...{errors, touched}} name="name" />}
intent={errors.name && touched.name && Intent.DANGER}
helperText={
<ErrorMessage {...{ errors, touched }} name='name' />
}
inline={true}
>
<InputGroup
medium={true}
intent={(errors.name && touched.name) && Intent.DANGER}
intent={errors.name && touched.name && Intent.DANGER}
{...getFieldProps('name')}
/>
</FormGroup>
<FormGroup
label={'SKU'}
label={<T id={'sku'} />}
labelInfo={infoIcon}
className={'form-group--item-sku'}
intent={(errors.sku && touched.sku) && Intent.DANGER}
helperText={<ErrorMessage {...{errors, touched}} name="sku" />}
intent={errors.sku && touched.sku && Intent.DANGER}
helperText={
<ErrorMessage {...{ errors, touched }} name='sku' />
}
inline={true}
>
<InputGroup
medium={true}
intent={(errors.sku && touched.sku) && Intent.DANGER}
intent={errors.sku && touched.sku && Intent.DANGER}
{...getFieldProps('sku')}
/>
</FormGroup>
<FormGroup
label={'Category'}
label={<T id={'category'} />}
labelInfo={infoIcon}
inline={true}
intent={(errors.category_id && touched.category_id) && Intent.DANGER}
helperText={<ErrorMessage {...{errors, touched}} name="category" />}
intent={
errors.category_id && touched.category_id && Intent.DANGER
}
helperText={
<ErrorMessage {...{ errors, touched }} name='category' />
}
className={classNames(
'form-group--select-list',
'form-group--category',
Classes.FILL,
Classes.FILL
)}
>
<Select
@@ -264,7 +302,10 @@ const ItemForm = ({
<Button
fill={true}
rightIcon='caret-down'
text={getSelectedAccountLabel('category_id', 'Select category')}
text={getSelectedAccountLabel(
'category_id',
'Select category'
)}
/>
</Select>
</FormGroup>
@@ -276,7 +317,7 @@ const ItemForm = ({
>
<Checkbox
inline={true}
label={'Active'}
label={<T id={'active'}/>}
defaultChecked={values.active}
{...getFieldProps('active')}
/>
@@ -289,20 +330,25 @@ const ItemForm = ({
onDrop={handleDropFiles}
onDeleteFile={handleDeleteFile}
hint={'Attachments: Maxiumum size: 20MB'}
className={'mt2'} />
className={'mt2'}
/>
</Col>
</Row>
</div>
<Row gutterWidth={16} className={'item-form__accounts-section'}>
<Col width={404}>
<h4>Purchase Information</h4>
<h4><T id={'purchase_information'}/></h4>
<FormGroup
label={'Selling Price'}
label={<T id={'selling_price'}/>}
className={'form-group--item-selling-price'}
intent={(errors.selling_price && touched.selling_price) && Intent.DANGER}
helperText={<ErrorMessage {...{errors, touched}} name="selling_price" />}
intent={
errors.selling_price && touched.selling_price && Intent.DANGER
}
helperText={
<ErrorMessage {...{ errors, touched }} name='selling_price' />
}
inline={true}
>
<MoneyInputGroup
@@ -311,19 +357,31 @@ const ItemForm = ({
onChange={handleMoneyInputChange('selling_price')}
inputGroupProps={{
medium: true,
intent: (errors.selling_price && touched.selling_price) && Intent.DANGER,
}} />
intent:
errors.selling_price &&
touched.selling_price &&
Intent.DANGER,
}}
/>
</FormGroup>
<FormGroup
label={'Account'}
label={<T id={'account'} />}
labelInfo={infoIcon}
inline={true}
intent={(errors.sell_account_id && touched.sell_account_id) && Intent.DANGER}
helperText={<ErrorMessage {...{errors, touched}} name="sell_account_id" />}
intent={
errors.sell_account_id &&
touched.sell_account_id &&
Intent.DANGER
}
helperText={
<ErrorMessage {...{ errors, touched }} name='sell_account_id' />
}
className={classNames(
'form-group--sell-account', 'form-group--select-list',
Classes.FILL)}
'form-group--sell-account',
'form-group--select-list',
Classes.FILL
)}
>
<Select
items={accounts}
@@ -335,7 +393,10 @@ const ItemForm = ({
<Button
fill={true}
rightIcon='caret-down'
text={getSelectedAccountLabel('sell_account_id', 'Select account')}
text={getSelectedAccountLabel(
'sell_account_id',
'Select account'
)}
/>
</Select>
</FormGroup>
@@ -343,14 +404,16 @@ const ItemForm = ({
<Col width={404}>
<h4>
Sales Information
<T id={'sales_information'} />
</h4>
<FormGroup
label={'Cost Price'}
label={<T id={'cost_price'} />}
className={'form-group--item-cost-price'}
intent={(errors.cost_price && touched.cost_price) && Intent.DANGER}
helperText={<ErrorMessage {...{errors, touched}} name="cost_price" />}
intent={errors.cost_price && touched.cost_price && Intent.DANGER}
helperText={
<ErrorMessage {...{ errors, touched }} name='cost_price' />
}
inline={true}
>
<MoneyInputGroup
@@ -359,21 +422,30 @@ const ItemForm = ({
onChange={handleMoneyInputChange('cost_price')}
inputGroupProps={{
medium: true,
intent: (errors.cost_price && touched.cost_price) && Intent.DANGER,
}} />
intent:
errors.cost_price && touched.cost_price && Intent.DANGER,
}}
/>
</FormGroup>
<FormGroup
label={'Account'}
label={<T id={'account'} />}
labelInfo={infoIcon}
inline={true}
intent={(errors.cost_account_id && touched.cost_account_id) && Intent.DANGER}
helperText={<ErrorMessage {...{errors, touched}} name="cost_account_id" />}
intent={
errors.cost_account_id &&
touched.cost_account_id &&
Intent.DANGER
}
helperText={
<ErrorMessage {...{ errors, touched }} name='cost_account_id' />
}
className={classNames(
'form-group--cost-account',
'form-group--select-list',
Classes.FILL)}
>
Classes.FILL
)}
>
<Select
items={accounts}
itemRenderer={accountItem}
@@ -384,7 +456,10 @@ const ItemForm = ({
<Button
fill={true}
rightIcon='caret-down'
text={getSelectedAccountLabel('cost_account_id', 'Select account')}
text={getSelectedAccountLabel(
'cost_account_id',
'Select account'
)}
/>
</Select>
</FormGroup>
@@ -394,19 +469,29 @@ const ItemForm = ({
<Row className={'item-form__accounts-section mt2'}>
<Col width={404}>
<h4>
Inventory Information
<T id={'inventory_information'} />
</h4>
<FormGroup
label={'Inventory Account'}
label={<T id={'inventory_account'}/>}
inline={true}
intent={(errors.inventory_account_id && touched.inventory_account_id) && Intent.DANGER}
helperText={<ErrorMessage {...{errors, touched}} name="inventory_account_id" />}
intent={
errors.inventory_account_id &&
touched.inventory_account_id &&
Intent.DANGER
}
helperText={
<ErrorMessage
{...{ errors, touched }}
name='inventory_account_id'
/>
}
className={classNames(
'form-group--item-inventory_account',
'form-group--select-list',
Classes.FILL)}
>
Classes.FILL
)}
>
<Select
items={accounts}
itemRenderer={accountItem}
@@ -417,13 +502,16 @@ const ItemForm = ({
<Button
fill={true}
rightIcon='caret-down'
text={getSelectedAccountLabel('inventory_account_id','Select account')}
text={getSelectedAccountLabel(
'inventory_account_id',
'Select account'
)}
/>
</Select>
</FormGroup>
<FormGroup
label={'Opening Stock'}
label={<T id={'opening_stock'}/>}
className={'form-group--item-stock'}
// intent={errors.cost_price && Intent.DANGER}
// helperText={formik.errors.stock && formik.errors.stock}
@@ -440,11 +528,13 @@ const ItemForm = ({
<div class='form__floating-footer'>
<Button intent={Intent.PRIMARY} type='submit'>
Save
<T id={'save'}/>
</Button>
<Button className={'ml1'}>Save as Draft</Button>
<Button className={'ml1'} onClick={handleCancelClickBtn}>Close</Button>
<Button className={'ml1'}><T id={'save_as_draft'}/></Button>
<Button className={'ml1'} onClick={handleCancelClickBtn}>
<T id={'close'}/>
</Button>
</div>
</form>
</div>
@@ -455,5 +545,5 @@ export default compose(
AccountsConnect,
ItemsConnect,
ItemCategoryConnect,
MediaConnect,
)(ItemForm);
MediaConnect
)(ItemForm);

15
client/src/containers/Items/ItemsActionsBar.js
View File

@@ -21,6 +21,7 @@ import DialogConnect from 'connectors/Dialog.connector';
import withResourceDetail from 'containers/Resources/withResourceDetails';
import withItems from 'containers/Items/withItems';
import { If } from 'components';
import { FormattedMessage as T, useIntl } from 'react-intl';
const ItemsActionsBar = ({
openDialog,
@@ -69,7 +70,7 @@ const ItemsActionsBar = ({
<Button
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon='table' />}
text='Table Views'
text={<T id={'table_views'}/>}
rightIcon={'caret-down'}
/>
</Popover>
@@ -79,14 +80,14 @@ const ItemsActionsBar = ({
<Button
className={Classes.MINIMAL}
icon={<Icon icon='plus' />}
text='New Item'
text={<T id={'new_item'}/>}
onClick={onClickNewItem}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='plus' />}
text='New Category'
text={<T id={'new_category'}/>}
onClick={onClickNewCategory}
/>
@@ -97,7 +98,7 @@ const ItemsActionsBar = ({
>
<Button
className={classNames(Classes.MINIMAL, 'button--filter')}
text={filterCount <= 0 ? 'Filter' : `${filterCount} filters applied`}
text={filterCount <= 0 ? <T id={'filter'}/> : `${filterCount} filters applied`}
icon={<Icon icon='filter' />}
/>
</Popover>
@@ -107,19 +108,19 @@ const ItemsActionsBar = ({
className={Classes.MINIMAL}
intent={Intent.DANGER}
icon={<Icon icon='trash' />}
text='Delete'
text={<T id={'delete'}/>}
/>
</If>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-import' />}
text='Import'
text={<T id={'import'}/>}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
text='Export'
text={<T id={'export'}/>}
/>
</NavbarGroup>
</DashboardActionsBar>

11
client/src/containers/Items/ItemsCategoryActionsBar.js
View File

@@ -21,6 +21,7 @@ import FilterDropdown from 'components/FilterDropdown';
import withResourceDetail from 'containers/Resources/withResourceDetails';
import withDashboard from 'containers/Dashboard/withDashboard';
import { FormattedMessage as T, useIntl } from 'react-intl';
const ItemsCategoryActionsBar = ({
resourceName = 'item_category',
@@ -53,7 +54,7 @@ const ItemsCategoryActionsBar = ({
<Button
className={Classes.MINIMAL}
icon={<Icon icon='plus' />}
text='New Category'
text={<T id={'new_category'}/>}
onClick={onClickNewCategory}
/>
<Popover
@@ -64,7 +65,7 @@ const ItemsCategoryActionsBar = ({
>
<Button
className={classNames(Classes.MINIMAL, 'button--filter')}
text='Filter'
text={<T id={'filter'}/>}
icon={<Icon icon='filter' />}
/>
</Popover>
@@ -73,7 +74,7 @@ const ItemsCategoryActionsBar = ({
<Button
className={Classes.MINIMAL}
icon={<Icon icon='trash' iconSize={15} />}
text='Delete'
text={<T id={'delete'}/>}
intent={Intent.DANGER}
onClick={handleDeleteCategory}
/>
@@ -82,12 +83,12 @@ const ItemsCategoryActionsBar = ({
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-import' />}
text='Import'
text={<T id={'import'}/>}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
text='Export'
text={<T id={'export'}/>}
/>
</NavbarGroup>
</DashboardActionsBar>

21
client/src/containers/Items/ItemsDataTable.js
View File

@@ -15,6 +15,9 @@ import Money from 'components/Money';
import withItems from 'containers/Items/withItems';
import LoadingIndicator from 'components/LoadingIndicator';
import { FormattedMessage as T, useIntl } from 'react-intl';
const ItemsDataTable = ({
loading,
@@ -27,6 +30,8 @@ const ItemsDataTable = ({
onFetchData,
onSelectedRowsChange,
}) => {
const {formatMessage} = useIntl();
const [initialMount, setInitialMount] = useState(false);
useEffect(() => {
@@ -40,35 +45,35 @@ const ItemsDataTable = ({
const actionMenuList = useCallback((item) =>
(<Menu>
<MenuItem text="View Details" />
<MenuItem text={<T id={'view_details'}/>} />
<MenuDivider />
<MenuItem text="Edit Item" onClick={handleEditItem(item)} />
<MenuItem text="Delete Item" onClick={handleDeleteItem(item)} />
<MenuItem text={<T id={'edit_item'}/>} onClick={handleEditItem(item)} />
<MenuItem text={<T id={'delete_item'}/>} onClick={handleDeleteItem(item)} />
</Menu>), [handleEditItem, handleDeleteItem]);
const columns = useMemo(() => [
{
Header: 'Item Name',
Header: formatMessage({id:'item_name'}),
accessor: 'name',
className: "actions",
},
{
Header: 'SKU',
Header: formatMessage({id:'sku'}),
accessor: 'sku',
className: "sku",
},
{
Header: 'Category',
Header: formatMessage({id:'category'}),
accessor: 'category.name',
className: 'category',
},
{
Header: 'Sell Price',
Header: formatMessage({id:'sell_price'}),
accessor: row => (<Money amount={row.sell_price} currency={'USD'} />),
className: 'sell-price',
},
{
Header: 'Cost Price',
Header: formatMessage({id:'cost_price'}),
accessor: row => (<Money amount={row.cost_price} currency={'USD'} />),
className: 'cost-price',
},

5
client/src/containers/Items/ItemsList.js
View File

@@ -23,6 +23,7 @@ import withDashboardActions from 'containers/Dashboard/withDashboard';
import withItemsActions from 'containers/Items/withItemsActions';
import withViewsActions from 'containers/Views/withViewsActions';
import { FormattedMessage as T, useIntl } from 'react-intl';
function ItemsList({
// #withDashboard
@@ -144,8 +145,8 @@ function ItemsList({
onSelectedRowsChange={handleSelectedRowsChange} />
<Alert
cancelButtonText="Cancel"
confirmButtonText="Move to Trash"
cancelButtonText={<T id={'cancel'}/>}
confirmButtonText={<T id={'move_to_trash'}/>}
icon="trash"
intent={Intent.DANGER}
isOpen={deleteItem}

7
client/src/containers/Views/ViewFormPage.js
View File

@@ -11,6 +11,7 @@ import withDashboard from 'containers/Dashboard/withDashboard';
import AppToaster from 'components/AppToaster';
import {compose} from 'utils';
import { If } from 'components';
import { FormattedMessage as T, useIntl } from 'react-intl';
// @flow
function ViewFormPage({
@@ -83,8 +84,8 @@ function ViewFormPage({
onDelete={handleDeleteView} />
<Alert
cancelButtonText="Cancel"
confirmButtonText="Move to Trash"
cancelButtonText={<T id={'cancel'}/>}
confirmButtonText={<T id={'move_to_trash'}/>}
icon="trash"
intent={Intent.DANGER}
isOpen={stateDeleteView}
@@ -98,7 +99,7 @@ function ViewFormPage({
</If>
<If condition={fetchHook.error}>
<h4>Something wrong</h4>
<h4><T id={'something_wrong'}/></h4>
</If>
</DashboardPageContent>
</DashboardInsider>

212
client/src/lang/en/index.js
View File

@@ -1,30 +1,184 @@
export default {
'hello_world': 'Hello World',
'email_or_phone_number': 'Email or phone number',
'password': 'Password',
'login': 'Login',
'invalid_email_or_phone_numner': 'Invalid email or phone number.',
'required': 'Required',
'reset_password': 'Reset Password',
'the_user_has_been_suspended_from_admin': 'The user has been suspended from the administrator.',
'email_and_password_entered_did_not_match': 'The email and password you entered did not match our records.',
'field_name_must_be_number': 'field_name_must_be_number',
'name': 'Name',
"search": "Search",
'reference': 'Reference',
'date': 'Date',
'description': 'Description',
'from_date': 'From date',
'to_date': 'To date',
'accounting_basis': 'Accounting basis',
'report_date_range': 'Report date range',
'log_in': 'Log in',
'forget_my_password': 'Forget my password',
'keep_me_logged_in': 'Keep me logged in',
'create_an_account': 'Create an account',
'need_bigcapital_account?': 'Need a Bigcapital account ?',
'show': 'Show',
'hide': 'Hide',
};
hello_world: 'Hello World',
email_or_phone_number: 'Email or phone number',
password: 'Password',
login: 'Login',
invalid_email_or_phone_numner: 'Invalid email or phone number.',
required: 'Required',
reset_password: 'Reset Password',
the_user_has_been_suspended_from_admin:
'The user has been suspended from the administrator.',
email_and_password_entered_did_not_match:
'The email and password you entered did not match our records.',
field_name_must_be_number: 'field_name_must_be_number',
name: 'Name',
search: 'Search',
reference: 'Reference',
date: 'Date',
description: 'Description',
from_date: 'From date',
to_date: 'To date',
accounting_basis: 'Accounting basis',
report_date_range: 'Report date range',
log_in: 'Log in',
forget_my_password: 'Forget my password',
keep_me_logged_in: 'Keep me logged in',
create_an_account: 'Create an account',
need_bigcapital_account: 'Need a Bigcapital account ?',
show: 'Show',
hide: 'Hide',
an_unexpected_error_occurred: 'An unexpected error occurred',
welcome_to_bigcapital: 'Welcome to Bigcapital',
enter_your_personal_information: ' Enter your personal information',
first_name: 'First Name',
last_name: 'Last Name',
phone_number: 'Phone Number',
you_email_address_is: 'You email address is',
you_will_use_this_address_to_sign_in_to_bigcapital:
'You will use this address to sign in to Bigcapital.',
signing_in_or_creating:
'By signing in or creating an account, you agree with our',
terms_conditions: 'Terms & Conditions',
and: 'and',
privacy_statement: 'Privacy Statement',
create_account: 'Create Account',
success: 'Success',
register_a_new_organization: 'Register a New Organization.',
you_have_a_bigcapital_account: 'You have a bigcapital account ?',
organization_name:'Organization Name',
email:'Email',
register:'Register',
password_successfully_updated:'The Password for your account was successfully updated.',
choose_a_new_password:'Choose a new password',
you_remembered_your_password:'You remembered your password ?',
new_password:'New Password',
submit_new_password:'Submit new password',
reset_your_password:'Reset Your Password',
we_ll_send_you_a_link_to_reset_your_password:'Enter your email address and we’ll send you a link to reset your password.',
send_password_reset_link:'Send password reset link',
return_to_log_in:'Return to log in',
sub_account:'Sub account?',
account_type:'Account Type',
account_name:'Account Name',
account_code:'Account Code',
parent_account:'Parent Account',
edit:'Edit',
submit:'Submit',
close:'Close',
edit_account:'Edit Account',
new_account:'New Account',
edit_currency:'Edit Currency',
new_currency:'New Currency',
currency_name:'Currency Name',
currency_code:'Currency Code',
edit_exchange_rate:'Edit Exchange Rate',
new_exchange_rate:'New Exchange Rate',
delete_exchange_rate:'Delete Exchange Rate',
exchange_rate:'Exchange Rate',
currency_code:'Currency Code',
edit_invite:'Edit invite',
edit_category:'Edit Category',
delete_category:'Delete Category',
new_category:'New Category',
category_name:'Category Name',
parent_category:'Parent Category',
new:'New',
new_category:'New Category',
invite_user:'invite User',
your_access_to_your_team:'Your teammate will get an email that gives them access to your team.',
invite:'invite',
count:'Count',
item_type:'Item Type',
item_name:'Item Name',
sku:'SKU',
category:'Category',
account:'Account',
sales_information:'Sales Information',
purchase_information:'Purchase Information',
selling_price:'Selling Price',
cost_price:'Cost Price',
inventory_information:'Inventory Information',
inventory_account:'Inventory Account',
opening_stock:'Opening Stock',
save:'Save',
save_as_draft:'Save as Draft',
active:'Active',
new_item:'New Item',
table_views:'Table Views',
delete:'Delete',
import:'Import',
export:'Export',
filter:'Filter',
view_details:'View Details',
edit_item:'Edit Item',
delete_item:'Delete Item',
sell_price:'Sell Price',
cancel:'Cancel',
move_to_trash:'Move to Trash',
save_new:'Save & New',
journal_number:'Journal number',
credit_usd:'Credit (USD)',
debit_usd:'Debit (USD)',
note:'Note',
new_lines:'New lines',
clear_all_lines:'Clear all lines',
new_journal:'New Journal',
publish_journal:'Publish Journal',
edit_journal:'Edit Journal',
delete_journal:'Delete Journal',
amount:'Amount',
journal_no:'Journal No.',
status:'Status',
transaction_type:'Transaction type',
created_at:'Created At',
archive:'Archive',
inactivate:'Inactivate',
inactivate_account:'Inactivate Account',
delete_account:'Delete Account',
code:'Code',
type:'Type',
normal:'Normal',
balance:'Balance',
something_wrong:'Something wrong',
filters:'Filters',
add_order:'Add order',
expense_account:'Expense Account',
payment_account:'Payment Account',
new_expense:'New Expense',
bulk_update:'Bulk Update',
all_accounts:'All accounts',
go_to_bigcapital_com:'← Go to bigcapital.com',
currency:'Currency',
new_conditional:'+ New Conditional'
};

73
client/src/routes/dashboard.js
View File

@@ -7,7 +7,7 @@ export default [
{
path: `${BASE_URL}/homepage`,
component: LazyLoader({
loader: () => import('containers/Homepage/Homepage')
loader: () => import('containers/Homepage/Homepage'),
}),
},
@@ -15,79 +15,76 @@ export default [
{
path: `${BASE_URL}/accounts`,
component: LazyLoader({
loader: () => import('containers/Accounts/AccountsChart')
})
loader: () => import('containers/Accounts/AccountsChart'),
}),
},
// Custom views.
{
path: `${BASE_URL}/custom_views/:resource_slug/new`,
component: LazyLoader({
loader: () => import('containers/Views/ViewFormPage')
})
loader: () => import('containers/Views/ViewFormPage'),
}),
},
{
path: `${BASE_URL}/custom_views/:view_id/edit`,
component: LazyLoader({
loader: () => import('containers/Views/ViewFormPage')
})
loader: () => import('containers/Views/ViewFormPage'),
}),
},
// Expenses.
{
path: `${BASE_URL}/expenses/new`,
component: LazyLoader({
loader: () => import('containers/Expenses/ExpenseForm')
loader: () => import('containers/Expenses/ExpenseForm'),
}),
},
{
path: `${BASE_URL}/expenses`,
component: LazyLoader({
loader: () => import('containers/Expenses/ExpensesList')
})
loader: () => import('containers/Expenses/ExpensesList'),
}),
},
// Accounting
{
path: `${BASE_URL}/accounting/make-journal-entry`,
component: LazyLoader({
loader: () =>
import('containers/Accounting/MakeJournalEntriesPage')
loader: () => import('containers/Accounting/MakeJournalEntriesPage'),
}),
},
{
path: `${BASE_URL}/accounting/manual-journals/:id/edit`,
component: LazyLoader({
loader: () =>
import('containers/Accounting/MakeJournalEntriesPage')
loader: () => import('containers/Accounting/MakeJournalEntriesPage'),
}),
},
{
path: `${BASE_URL}/accounting/manual-journals`,
component: LazyLoader({
loader: () =>
import('containers/Accounting/ManualJournalsList')
loader: () => import('containers/Accounting/ManualJournalsList'),
}),
},
{
path: `${BASE_URL}/items/categories`,
component: LazyLoader({
loader: () => import('containers/Items/ItemCategoriesList')
})
},
loader: () => import('containers/Items/ItemCategoriesList'),
}),
},
{
path: `${BASE_URL}/items/new`,
component: LazyLoader({
loader: () => import('containers/Items/ItemFormPage')
})
loader: () => import('containers/Items/ItemFormPage'),
}),
},
// Items
{
path: `${BASE_URL}/items`,
component: LazyLoader({
loader: () => import('containers/Items/ItemsList')
})
loader: () => import('containers/Items/ItemsList'),
}),
},
// Financial Reports.
@@ -95,19 +92,15 @@ export default [
path: `${BASE_URL}/accounting/general-ledger`,
component: LazyLoader({
loader: () =>
import(
'containers/FinancialStatements/GeneralLedger/GeneralLedger'
)
})
import('containers/FinancialStatements/GeneralLedger/GeneralLedger'),
}),
},
{
path: `${BASE_URL}/accounting/balance-sheet`,
component: LazyLoader({
loader: () =>
import(
'containers/FinancialStatements/BalanceSheet/BalanceSheet'
)
})
import('containers/FinancialStatements/BalanceSheet/BalanceSheet'),
}),
},
{
path: `${BASE_URL}/accounting/trial-balance-sheet`,
@@ -115,8 +108,8 @@ export default [
loader: () =>
import(
'containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet'
)
})
),
}),
},
{
path: `${BASE_URL}/accounting/profit-loss-sheet`,
@@ -124,14 +117,20 @@ export default [
loader: () =>
import(
'containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet'
)
})
),
}),
},
{
path: `${BASE_URL}/accounting/journal-sheet`,
component: LazyLoader({
loader: () => import('containers/FinancialStatements/Journal/Journal'),
}),
},
{
path: `${BASE_URL}/ExchangeRates`,
component: LazyLoader({
loader: () =>
import('containers/FinancialStatements/Journal/Journal')
})
import('containers/FinancialStatements/ExchangeRates/ExchangeRate'),
}),
},
];

57
client/src/store/ExchangeRate/exchange.actions.js Normal file
View File

@@ -0,0 +1,57 @@
import ApiService from 'services/ApiService';
import t from 'store/types';
export const fetchExchangeRates = () => {
return (dispatch) =>
new Promise((resolve, reject) => {
dispatch({
type: t.SET_DASHBOARD_REQUEST_LOADING,
});
ApiService.get('exchange_rates')
.then((response) => {
dispatch({
type: t.EXCHANGE_RATE_LIST_SET,
exchange_rates: response.data.exchange_rates.results,
});
dispatch({
type: t.SET_DASHBOARD_REQUEST_COMPLETED,
});
resolve(response);
})
.catch((error) => {
reject(error);
});
});
};
export const submitExchangeRate = ({ form }) => {
return (dispatch) => {
return ApiService.post('exchange_rates', form);
};
};
export const deleteExchangeRate = (id) => {
return (dispatch) => ApiService.delete(`exchange_rates/${id}`);
};
export const editExchangeRate = (id, form) => {
return (dispatch) =>
new Promise((resolve, reject) => {
ApiService.post(`exchange_rates/${id}`, form)
.then((response) => {
dispatch({ type: t.CLEAR_EXCHANGE_RATE_FORM_ERRORS });
resolve(response);
})
.catch((error) => {
const { response } = error;
const { data } = response;
const { errors } = data;
dispatch({ type: t.CLEAR_EXCHANGE_RATE_FORM_ERRORS });
if (errors) {
dispatch({ type: t.CLEAR_EXCHANGE_RATE_FORM_ERRORS, errors });
}
reject(error);
});
});
};

20
client/src/store/ExchangeRate/exchange.reducer.js Normal file
View File

@@ -0,0 +1,20 @@
import { createReducer } from '@reduxjs/toolkit';
import t from 'store/types';
const initialState = {
exchangeRates: {},
};
export default createReducer(initialState, {
[t.EXCHANGE_RATE_LIST_SET]: (state, action) => {
const _exchangeRates = {};
action.exchange_rates.forEach((exchange_rate) => {
_exchangeRates[exchange_rate.id] = exchange_rate;
});
state.exchangeRates = {
...state.exchangeRates,
..._exchangeRates,
};
},
});

7
client/src/store/ExchangeRate/exchange.type.js Normal file
View File

@@ -0,0 +1,7 @@
export default {
EXCHANGE_RATE_DATA_TABLE: 'EXCHANGE_RATE_DATA_TABLE',
EXCHANGE_RATE_DELETE: 'EXCHANGE_RATE_DELETE',
EXCHANGE_RATE_LIST_SET: 'EXCHANGE_RATE_LIST_SET',
CLEAR_EXCHANGE_RATE_FORM_ERRORS: 'CLEAR_EXCHANGE_RATE_FORM_ERRORS',
ExchangeRates_TABLE_QUERIES_ADD: 'ExchangeRates_TABLE_QUERIES_ADD',
};

3
client/src/store/reducers.js
View File

@@ -15,6 +15,7 @@ import itemCategories from './itemCategories/itemsCategory.reducer';
import settings from './settings/settings.reducer';
import manualJournals from './manualJournals/manualJournals.reducers';
import globalSearch from './search/search.reducer';
import exchangeRates from './ExchangeRate/exchange.reducer'
export default combineReducers({
authentication,
@@ -32,4 +33,6 @@ export default combineReducers({
itemCategories,
settings,
globalSearch,
exchangeRates
});

3
client/src/store/types.js
View File

@@ -15,6 +15,7 @@ import itemCategories from './itemCategories/itemsCategory.type';
import settings from './settings/settings.type';
import search from './search/search.type';
import register from './registers/register.type';
import exchangeRate from './ExchangeRate/exchange.type';
export default {
...authentication,
@@ -34,4 +35,6 @@ export default {
...accounting,
...search,
...register,
...exchangeRate,
};

1
client/src/style/App.scss
View File

@@ -49,6 +49,7 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
@import 'pages/invite-form.scss';
@import "pages/currency";
@import "pages/invite-user.scss";
@import 'pages/exchange-rate.scss';
// Views
@import 'views/filter-dropdown';

23
client/src/style/pages/exchange-rate.scss Normal file
View File

@@ -0,0 +1,23 @@
.exchangeRate{
&-menu {
width: 240px;
}
}
.dialog--exchangeRate-form {
.bp3-dialog-body {
.bp3-form-group.bp3-inline {
.bp3-label {
min-width: 140px;
}
.bp3-form-content {
width: 250px;
}
}
}
}

1
server/src/models/ExchangeRate.js
View File

@@ -2,7 +2,6 @@ import bcrypt from 'bcryptjs';
import { Model } from 'objection';
import TenantModel from '@/models/TenantModel';
export default class ExchangeRate extends TenantModel {
/**
* Table name.