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

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>