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

refactoring: expenses landing list.

Browse Source 
refactoring: customers landing list.
refactoring: vendors landing list.
refactoring: manual journals landing list.
This commit is contained in:
a.bouhuolia
2021-02-10 18:35:19 +02:00
parent 6e10ed0721
commit c68b4ca9ba
170 changed files with 2835 additions and 4430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/common/classes.js
View File

@@ -33,7 +33,7 @@ const CLASSES = {
PAGE_FORM_PAYMENT_MADE: 'page-form--payment-made',
PAGE_FORM_PAYMENT_RECEIVE: 'page-form--payment-receive',
PAGE_FORM_CUSTOMER: 'page-form--customer',
PAGE_FORM_VENDOR: 'page-form--customer',
PAGE_FORM_VENDOR: 'page-form--vendor',
PAGE_FORM_ITEM: 'page-form--item',
PAGE_FORM_MAKE_JOURNAL: 'page-form--make-journal-entries',
PAGE_FORM_EXPENSE: 'page-form--expense',

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

@@ -19,7 +19,7 @@ import PaymentViaVoucherDialog from 'containers/Dialogs/PaymentViaVoucherDialog'
export default function DialogsContainer() {
return (
<div>
<AccountFormDialog dialogName={'account-form'} />
{/* <AccountFormDialog dialogName={'account-form'} /> */}
<JournalNumberDialog dialogName={'journal-number-form'} />
<PaymentReceiveNumberDialog dialogName={'payment-receive-number-form'} />
<EstimateNumberDialog dialogName={'estimate-number-form'} />

32
client/src/containers/Accounting/ManualJournalActionsBar.js → client/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js
View File

@@ -13,18 +13,14 @@ import {
import classNames from 'classnames';
import { useHistory } from 'react-router-dom';
import { FormattedMessage as T } from 'react-intl';
import { connect } from 'react-redux';
import { useManualJournalsContext } from 'containers/Accounting/ManualJournalsListProvider';
import { useManualJournalsContext } from './ManualJournalsListProvider';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { If, DashboardActionViewsList } from 'components';
import withResourceDetail from 'containers/Resources/withResourceDetails';
import withManualJournals from 'containers/Accounting/withManualJournals';
import withManualJournalsActions from 'containers/Accounting/withManualJournalsActions';
import withManualJournalsActions from './withManualJournalsActions';
import { compose } from 'utils';
/**
@@ -32,9 +28,12 @@ import { compose } from 'utils';
*/
function ManualJournalActionsBar({
// #withManualJournalsActions
addManualJournalsTableQueries,
setManualJournalsTableState,
}) {
// History context.
const history = useHistory();
// Manual journals context.
const { journalsViews } = useManualJournalsContext();
// Handle click a new manual journal.
@@ -44,13 +43,13 @@ function ManualJournalActionsBar({
// Handle delete button click.
const handleBulkDelete = () => {
};
// Handle tab change.
const handleTabChange = (viewId) => {
addManualJournalsTableQueries({
custom_view_id: viewId.id || null,
setManualJournalsTableState({
customViewid: viewId.id || null,
});
};
@@ -115,20 +114,7 @@ function ManualJournalActionsBar({
);
}
const mapStateToProps = (state, props) => ({
resourceName: 'manual_journals',
});
const withManualJournalsActionsBar = connect(mapStateToProps);
export default compose(
withManualJournalsActionsBar,
withDialogActions,
withResourceDetail(({ resourceFields }) => ({
resourceFields,
})),
withManualJournals(({ manualJournalsViews }) => ({
manualJournalsViews,
})),
withManualJournalsActions,
)(ManualJournalActionsBar);

0
client/src/containers/Accounting/ManualJournalsAlerts.js → client/src/containers/Accounting/JournalsLanding/ManualJournalsAlerts.js
View File

118
client/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js Normal file
View File

@@ -0,0 +1,118 @@
import React from 'react';
import classNames from 'classnames';
import { DataTable, Choose } from 'components';
import { CLASSES } from 'common/classes';
import ManualJournalsEmptyStatus from './ManualJournalsEmptyStatus';
import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
import withManualJournalsActions from './withManualJournalsActions';
import withAlertsActions from 'containers/Alert/withAlertActions';
import { useManualJournalsContext } from './ManualJournalsListProvider';
import { useManualJournalsColumns } from './utils';
import { ActionsMenu } from './components';
import { compose } from 'utils';
/**
* Manual journals data-table.
*/
function ManualJournalsDataTable({
// #withManualJournalsActions
setManualJournalsTableState,
// #withAlertsActions
openAlert,
// #ownProps
onSelectedRowsChange,
}) {
// Manual journals context.
const {
manualJournals,
pagination,
isManualJournalsLoading,
isManualJournalsFetching,
isEmptyStatus
} = useManualJournalsContext();
// Manual journals columns.
const columns = useManualJournalsColumns();
// Handles the journal publish action.
const handlePublishJournal = ({ id }) => {
openAlert('journal-publish', { manualJournalId: id })
};
// Handle the journal edit action.
const handleEditJournal = ({ id }) => {
};
// Handle the journal delete action.
const handleDeleteJournal = ({ id }) => {
openAlert('journal-delete', { manualJournalId: id });
};
// Handle fetch data once the page index, size or sort by of the table change.
const handleFetchData = React.useCallback(
({ pageSize, pageIndex, sortBy }) => {
setManualJournalsTableState({
pageIndex,
pageSize,
sortBy,
});
},
[setManualJournalsTableState],
);
return (
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
<Choose>
<Choose.When condition={isEmptyStatus}>
<ManualJournalsEmptyStatus />
</Choose.When>
<Choose.Otherwise>
<DataTable
noInitialFetch={true}
columns={columns}
data={manualJournals}
manualSortBy={true}
selectionColumn={true}
expandable={true}
sticky={true}
loading={isManualJournalsLoading}
headerLoading={isManualJournalsLoading}
progressBarLoading={isManualJournalsFetching}
pagesCount={pagination.pagesCount}
pagination={true}
autoResetSortBy={false}
autoResetPage={false}
TableLoadingRenderer={TableSkeletonRows}
TableHeaderSkeletonRenderer={TableSkeletonHeader}
ContextMenu={ActionsMenu}
onFetchData={handleFetchData}
payload={{
onDelete: handleDeleteJournal,
onPublish: handlePublishJournal
}}
/>
</Choose.Otherwise>
</Choose>
</div>
);
}
export default compose(
withManualJournalsActions,
withAlertsActions
)(ManualJournalsDataTable);

0
client/src/containers/Accounting/ManualJournalsEmptyStatus.js → client/src/containers/Accounting/JournalsLanding/ManualJournalsEmptyStatus.js
View File

56
client/src/containers/Accounting/JournalsLanding/ManualJournalsList.js Normal file
View File

@@ -0,0 +1,56 @@
import React, { useEffect } from 'react';
import { useIntl } from 'react-intl';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import { ManualJournalsListProvider } from './ManualJournalsListProvider';
import ManualJournalsAlerts from './ManualJournalsAlerts';
import ManualJournalsViewTabs from './ManualJournalsViewTabs';
import ManualJournalsDataTable from './ManualJournalsDataTable';
import ManualJournalsActionsBar from './ManualJournalActionsBar';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withManualJournals from './withManualJournals';
import { transformTableStateToQuery, compose } from 'utils';
import 'style/pages/ManualJournal/List.scss';
/**
* Manual journals table.
*/
function ManualJournalsTable({
// #withDashboardActions
changePageTitle,
// #withManualJournals
journalsTableState,
}) {
const { formatMessage } = useIntl();
// Handle update the page title.
useEffect(() => {
changePageTitle(formatMessage({ id: 'manual_journals' }));
}, [changePageTitle, formatMessage]);
return (
<ManualJournalsListProvider
query={transformTableStateToQuery(journalsTableState)}
>
<ManualJournalsActionsBar />
<DashboardPageContent>
<ManualJournalsViewTabs />
<ManualJournalsDataTable />
<ManualJournalsAlerts />
</DashboardPageContent>
</ManualJournalsListProvider>
);
}
export default compose(
withDashboardActions,
withManualJournals(({ manualJournalsTableState }) => ({
journalsTableState: manualJournalsTableState,
})),
)(ManualJournalsTable);

19
client/src/containers/Accounting/ManualJournalsListProvider.js → client/src/containers/Accounting/JournalsLanding/ManualJournalsListProvider.js
View File

@@ -1,28 +1,39 @@
import React, { createContext } from 'react';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import { useResourceViews, useJournals } from 'hooks/query';
import { isTableEmptyStatus } from 'utils';
const ManualJournalsContext = createContext();
function ManualJournalsListProvider({ query, ...props }) {
// Fetches accounts resource views and fields.
const { data: journalsViews, isFetching: isViewsLoading } = useResourceViews(
const { data: journalsViews, isLoading: isViewsLoading } = useResourceViews(
'manual_journals',
);
// Fetches the manual journals transactions with pagination meta.
const {
data: { manualJournals },
isFetching: isManualJournalsLoading,
} = useJournals(query);
data: { manualJournals, pagination, filterMeta },
isLoading: isManualJournalsLoading,
isFetching: isManualJournalsFetching
} = useJournals(query, { keepPreviousData: true });
// Detarmines the datatable empty status.
const isEmptyStatus = isTableEmptyStatus({
data: manualJournals, pagination, filterMeta,
}) && !isManualJournalsFetching;
// Global state.
const state = {
manualJournals,
pagination,
journalsViews,
isManualJournalsLoading,
isManualJournalsFetching,
isViewsLoading,
isEmptyStatus
};
return (

20
client/src/containers/Accounting/ManualJournalsViewTabs.js → client/src/containers/Accounting/JournalsLanding/ManualJournalsViewTabs.js
View File

@@ -8,17 +8,21 @@ import { DashboardViewsTabs } from 'components';
import { useManualJournalsContext } from './ManualJournalsListProvider';
import withManualJournalsActions from './withManualJournalsActions';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withManualJournals from './withManualJournals';
import { compose, saveInvoke } from 'utils';
import { compose } from 'utils';
/**
* Manual journal views tabs.
*/
function ManualJournalsViewTabs({
// #withManualJournalsActions
addManualJournalsTableQueries,
setManualJournalsTableState,
// #withManualJournals
journalsTableState
}) {
const { custom_view_id: customViewId } = useParams();
// Manual journals context.
const { journalsViews } = useManualJournalsContext();
const tabs = journalsViews.map((view) => ({
@@ -27,9 +31,10 @@ function ManualJournalsViewTabs({
const handleClickNewView = () => {};
// Handles the tab change.
const handleTabChange = (viewId) => {
addManualJournalsTableQueries({
custom_view_id: viewId || null,
setManualJournalsTableState({
customViewId: viewId || null,
});
};
@@ -38,7 +43,7 @@ function ManualJournalsViewTabs({
<NavbarGroup align={Alignment.LEFT}>
<DashboardViewsTabs
resourceName={'manual-journals'}
initialViewId={customViewId}
customViewId={journalsTableState.customViewId}
tabs={tabs}
onChange={handleTabChange}
onNewViewTabClick={handleClickNewView}
@@ -51,4 +56,7 @@ function ManualJournalsViewTabs({
export default compose(
withManualJournalsActions,
withDashboardActions,
withManualJournals(({ manualJournalsTableState }) => ({
journalsTableState: manualJournalsTableState,
})),
)(ManualJournalsViewTabs);

146
client/src/containers/Accounting/components.js → client/src/containers/Accounting/JournalsLanding/components.js
View File

@@ -6,16 +6,20 @@ import {
Position,
Tag,
Button,
MenuItem,
Menu,
MenuDivider,
Popover,
} from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
import moment from 'moment';
import { Choose, Money, If, Icon, Hint } from 'components';
import { Choose, Money, If, Icon } from 'components';
import { safeCallback } from 'utils';
import { formatMessage } from 'services/intl';
import withAccountDetails from 'containers/Accounts/withAccountDetail';
import { compose } from 'utils';
// Amount accessor.
/**
* Amount accessor.
*/
export const AmountAccessor = (r) => (
<Tooltip
content={<AmountPopoverContent journalEntries={r.entries} />}
@@ -26,15 +30,13 @@ export const AmountAccessor = (r) => (
</Tooltip>
);
const AmountPopoverContentLineRender = ({
journalEntry,
accountId,
// #withAccountDetail
account,
}) => {
/**
* Amount popover content line.
*/
export const AmountPopoverContentLine = ({ journalEntry }) => {
const isCredit = !!journalEntry.credit;
const isDebit = !!journalEntry.debit;
const { account } = journalEntry;
return (
<Choose>
@@ -55,10 +57,9 @@ const AmountPopoverContentLineRender = ({
);
};
const AmountPopoverContentLine = compose(withAccountDetails)(
AmountPopoverContentLineRender,
);
/**
* Amount popover content.
*/
export function AmountPopoverContent({ journalEntries }) {
const journalLinesProps = journalEntries.map((journalEntry) => ({
journalEntry,
@@ -78,7 +79,7 @@ export function AmountPopoverContent({ journalEntries }) {
}
/**
* publish column accessor.
* Publish column accessor.
*/
export const StatusAccessor = (row) => {
return (
@@ -123,79 +124,52 @@ export function NoteAccessor(row) {
);
}
// Contact header cell.
export function ContactHeaderCell() {
/**
* Table actions cell.
*/
export const ActionsCell = (props) => {
return (
<>
<T id={'contact'} />
<Hint
content={<T id={'contact_column_hint'} />}
position={Position.LEFT_BOTTOM}
/>
</>
<Popover
content={<ActionsMenu {...props} />}
position={Position.RIGHT_BOTTOM}
>
<Button icon={<Icon icon="more-h-16" iconSize={16} />} />
</Popover>
);
}
};
// Actions cell renderer.
export const ActionsCellRenderer = ({
row: { index },
column: { id },
cell: { value: initialValue },
data,
payload,
/**
* Actions menu of the table.
*/
export const ActionsMenu = ({
payload: { onPublish, onEdit, onDelete },
row: { original },
}) => {
if (data.length <= index + 1) {
return '';
}
const onClickRemoveRole = () => {
payload.removeRow(index);
};
return (
<Tooltip content={<T id={'remove_the_line'} />} position={Position.LEFT}>
<Button
icon={<Icon icon="times-circle" iconSize={14} />}
iconSize={14}
className="ml2"
minimal={true}
intent={Intent.DANGER}
onClick={onClickRemoveRole}
<Menu>
<MenuItem
icon={<Icon icon="reader-18" />}
text={formatMessage({ id: 'view_details' })}
/>
</Tooltip>
<MenuDivider />
<If condition={!original.is_published}>
<MenuItem
icon={<Icon icon="arrow-to-top" />}
text={formatMessage({ id: 'publish_journal' })}
onClick={safeCallback(onPublish, original)}
/>
</If>
<MenuItem
icon={<Icon icon="pen-18" />}
text={formatMessage({ id: 'edit_journal' })}
onClick={safeCallback(onEdit, original)}
/>
<MenuItem
text={formatMessage({ id: 'delete_journal' })}
icon={<Icon icon="trash-16" iconSize={16} />}
intent={Intent.DANGER}
onClick={safeCallback(onDelete, original)}
/>
</Menu>
);
};
// Total text cell renderer.
export const TotalAccountCellRenderer = (chainedComponent) => (props) => {
if (props.data.length === props.row.index + 1) {
return <span>{'Total USD'}</span>;
}
return chainedComponent(props);
};
// Total credit/debit cell renderer.
export const TotalCreditDebitCellRenderer = (chainedComponent, type) => (
props,
) => {
if (props.data.length === props.row.index + 1) {
const total = props.data.reduce((total, entry) => {
const amount = parseInt(entry[type], 10);
const computed = amount ? total + amount : total;
return computed;
}, 0);
return (
<span>
<Money amount={total} currency={'USD'} />
</span>
);
}
return chainedComponent(props);
};
export const NoteCellRenderer = (chainedComponent) => (props) => {
if (props.data.length === props.row.index + 1) {
return '';
}
return chainedComponent(props);
};

79
client/src/containers/Accounting/JournalsLanding/utils.js Normal file
View File

@@ -0,0 +1,79 @@
import React from 'react';
import { formatMessage } from 'services/intl';
import moment from 'moment';
import {
NoteAccessor,
StatusAccessor,
DateAccessor,
AmountAccessor,
ActionsCell,
} from './components';
/**
* Retrieve the manual journals columns.
*/
export const useManualJournalsColumns = () => {
return React.useMemo(
() => [
{
id: 'date',
Header: formatMessage({ id: 'date' }),
accessor: DateAccessor,
width: 115,
className: 'date',
},
{
id: 'amount',
Header: formatMessage({ id: 'amount' }),
accessor: AmountAccessor,
className: 'amount',
width: 115,
},
{
id: 'journal_number',
Header: formatMessage({ id: 'journal_no' }),
accessor: (row) => `#${row.journal_number}`,
className: 'journal_number',
width: 100,
},
{
id: 'journal_type',
Header: formatMessage({ id: 'journal_type' }),
accessor: 'journal_type',
width: 110,
className: 'journal_type',
},
{
id: 'publish',
Header: formatMessage({ id: 'publish' }),
accessor: (row) => StatusAccessor(row),
width: 95,
className: 'publish',
},
{
id: 'note',
Header: formatMessage({ id: 'note' }),
accessor: NoteAccessor,
disableSorting: true,
width: 85,
className: 'note',
},
{
id: 'created_at',
Header: formatMessage({ id: 'created_at' }),
accessor: (r) => moment(r.created_at).format('YYYY MMM DD'),
width: 125,
className: 'created_at',
},
{
id: 'actions',
Header: '',
Cell: ActionsCell,
className: 'actions',
width: 50,
disableResizing: true,
},
],
[],
);
};

16
client/src/containers/Accounting/JournalsLanding/withManualJournals.js Normal file
View File

@@ -0,0 +1,16 @@
import { connect } from 'react-redux';
import {
getManualJournalsTableStateFactory
} from 'store/manualJournals/manualJournals.selectors';
export default (mapState) => {
const getJournalsTableQuery = getManualJournalsTableStateFactory();
const mapStateToProps = (state, props) => {
const mapped = {
manualJournalsTableState: getJournalsTableQuery(state, props),
};
return mapState ? mapState(mapped, state, props) : mapped;
};
return connect(mapStateToProps);
};

11
client/src/containers/Accounting/JournalsLanding/withManualJournalsActions.js Normal file
View File

@@ -0,0 +1,11 @@
import { connect } from 'react-redux';
import {
setManualJournalsTableState,
} from 'store/manualJournals/manualJournals.actions';
const mapActionsToProps = (dispatch) => ({
setManualJournalsTableState: (queries) =>
dispatch(setManualJournalsTableState(queries)),
});
export default connect(null, mapActionsToProps);

0
client/src/containers/Accounting/MakeJournalEntries.schema.js → client/src/containers/Accounting/MakeJournal/MakeJournalEntries.schema.js
View File

0
client/src/containers/Accounting/MakeJournalEntriesField.js → client/src/containers/Accounting/MakeJournal/MakeJournalEntriesField.js
View File

0
client/src/containers/Accounting/MakeJournalEntriesFooter.js → client/src/containers/Accounting/MakeJournal/MakeJournalEntriesFooter.js
View File

0
client/src/containers/Accounting/MakeJournalEntriesForm.js → client/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.js
View File

0
client/src/containers/Accounting/MakeJournalEntriesHeader.js → client/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.js
View File

5
client/src/containers/Accounting/MakeJournalEntriesHeaderFields.js → client/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.js
View File

@@ -1,4 +1,4 @@
import React, { useCallback } from 'react';
import React from 'react';
import {
InputGroup,
FormGroup,
@@ -26,6 +26,9 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose, inputIntent, handleDateChange } from 'utils';
/**
* Make journal entries header.
*/
function MakeJournalEntriesHeader({
// #ownProps
onJournalNumberChanged,

0
client/src/containers/Accounting/MakeJournalEntriesPage.js → client/src/containers/Accounting/MakeJournal/MakeJournalEntriesPage.js
View File

0
client/src/containers/Accounting/MakeJournalEntriesTable.js → client/src/containers/Accounting/MakeJournal/MakeJournalEntriesTable.js
View File

0
client/src/containers/Accounting/MakeJournalFormFloatingActions.js → client/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.js
View File

0
client/src/containers/Accounting/MakeJournalFormFooter.js → client/src/containers/Accounting/MakeJournal/MakeJournalFormFooter.js
View File

0
client/src/containers/Accounting/MakeJournalNumberWatcher.js → client/src/containers/Accounting/MakeJournal/MakeJournalNumberWatcher.js
View File

0
client/src/containers/Accounting/MakeJournalProvider.js → client/src/containers/Accounting/MakeJournal/MakeJournalProvider.js
View File

91
client/src/containers/Accounting/MakeJournal/components.js Normal file
View File

@@ -0,0 +1,91 @@
import React from 'react';
import { Position } from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
import { Money, Hint } from 'components';
/**
* Contact header cell.
*/
export function ContactHeaderCell() {
return (
<>
<T id={'contact'} />
<Hint
content={<T id={'contact_column_hint'} />}
position={Position.LEFT_BOTTOM}
/>
</>
);
}
/**
* Total text cell renderer.
*/
export const TotalAccountCellRenderer = (chainedComponent) => (props) => {
if (props.data.length === props.row.index + 1) {
return <span>{'Total USD'}</span>;
}
return chainedComponent(props);
};
/**
* Total credit/debit cell renderer.
*/
export const TotalCreditDebitCellRenderer = (chainedComponent, type) => (
props,
) => {
if (props.data.length === props.row.index + 1) {
const total = props.data.reduce((total, entry) => {
const amount = parseInt(entry[type], 10);
const computed = amount ? total + amount : total;
return computed;
}, 0);
return (
<span>
<Money amount={total} currency={'USD'} />
</span>
);
}
return chainedComponent(props);
};
export const NoteCellRenderer = (chainedComponent) => (props) => {
if (props.data.length === props.row.index + 1) {
return '';
}
return chainedComponent(props);
};
/**
* Actions cell renderer.
*/
export const ActionsCellRenderer = ({
row: { index },
column: { id },
cell: { value: initialValue },
data,
payload,
}) => {
if (data.length <= index + 1) {
return '';
}
const onClickRemoveRole = () => {
payload.removeRow(index);
};
return (
<Tooltip content={<T id={'remove_the_line'} />} position={Position.LEFT}>
<Button
icon={<Icon icon="times-circle" iconSize={14} />}
iconSize={14}
className="ml2"
minimal={true}
intent={Intent.DANGER}
onClick={onClickRemoveRole}
/>
</Tooltip>
);
};

15
client/src/containers/Accounting/utils.js → client/src/containers/Accounting/MakeJournal/utils.js
View File

@@ -1,9 +1,10 @@
import React from 'react';
import { Intent } from '@blueprintjs/core';
import { get, sumBy, setWith, toSafeInteger } from 'lodash';
import { sumBy, setWith, toSafeInteger, get } from 'lodash';
import { transformUpdatedRows } from 'utils';
import { AppToaster } from 'components';
import { formatMessage } from 'services/intl';
import { transformUpdatedRows } from 'utils';
const ERROR = {
JOURNAL_NUMBER_ALREADY_EXISTS: 'JOURNAL.NUMBER.ALREADY.EXISTS',
@@ -16,15 +17,17 @@ const ERROR = {
ENTRIES_SHOULD_ASSIGN_WITH_CONTACT: 'ENTRIES_SHOULD_ASSIGN_WITH_CONTACT',
};
/**
* Entries adjustment.
*/
function adjustmentEntries(entries) {
const credit = sumBy(entries, e => toSafeInteger(e.credit));
const debit = sumBy(entries, e => toSafeInteger(e.debit));
const credit = sumBy(entries, (e) => toSafeInteger(e.credit));
const debit = sumBy(entries, (e) => toSafeInteger(e.debit));
return {
debit: Math.max(credit - debit, 0),
credit: Math.max(debit - credit, 0),
}
};
}
export const updateDataReducer = (rows, rowIndex, columnId, value) => {

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

@@ -1,249 +0,0 @@
import React, { useCallback, useMemo } from 'react';
import {
Intent,
Button,
Popover,
Menu,
MenuItem,
MenuDivider,
Position,
} from '@blueprintjs/core';
import { useIntl } from 'react-intl';
import moment from 'moment';
import classNames from 'classnames';
import {
DataTable,
If,
Choose,
Icon,
} from 'components';
import { CLASSES } from 'common/classes';
import ManualJournalsEmptyStatus from './ManualJournalsEmptyStatus';
import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
import {
NoteAccessor,
StatusAccessor,
DateAccessor,
AmountAccessor
} from './components';
import withManualJournalsActions from 'containers/Accounting/withManualJournalsActions';
import { compose, saveInvoke } from 'utils';
import { useManualJournalsContext } from './ManualJournalsListProvider';
/**
* Manual journals data-table.
*/
function ManualJournalsDataTable({
// #withManualJournalsActions
addManualJournalsTableQueries,
// #ownProps
onSelectedRowsChange,
}) {
const { formatMessage } = useIntl();
const { manualJournals, isManualJournalsLoading } = useManualJournalsContext();
const handlePublishJournal = useCallback(
(journal) => () => {
},
[],
);
const handleEditJournal = useCallback(
(journal) => () => {
},
[],
);
const handleDeleteJournal = useCallback(
(journal) => () => {
},
[],
);
const actionMenuList = useCallback(
(journal) => (
<Menu>
<MenuItem
icon={<Icon icon="reader-18" />}
text={formatMessage({ id: 'view_details' })}
/>
<MenuDivider />
<If condition={!journal.is_published}>
<MenuItem
icon={<Icon icon="arrow-to-top" />}
text={formatMessage({ id: 'publish_journal' })}
onClick={handlePublishJournal(journal)}
/>
</If>
<MenuItem
icon={<Icon icon="pen-18" />}
text={formatMessage({ id: 'edit_journal' })}
onClick={handleEditJournal(journal)}
/>
<MenuItem
text={formatMessage({ id: 'delete_journal' })}
icon={<Icon icon="trash-16" iconSize={16} />}
intent={Intent.DANGER}
onClick={handleDeleteJournal(journal)}
/>
</Menu>
),
[
handleEditJournal,
handleDeleteJournal,
handlePublishJournal,
formatMessage,
],
);
const onRowContextMenu = useCallback(
(cell) => actionMenuList(cell.row.original),
[actionMenuList],
);
const columns = useMemo(
() => [
{
id: 'date',
Header: formatMessage({ id: 'date' }),
accessor: DateAccessor,
width: 115,
className: 'date',
},
{
id: 'amount',
Header: formatMessage({ id: 'amount' }),
accessor: AmountAccessor,
className: 'amount',
width: 115,
},
{
id: 'journal_number',
Header: formatMessage({ id: 'journal_no' }),
accessor: (row) => `#${row.journal_number}`,
className: 'journal_number',
width: 100,
},
{
id: 'journal_type',
Header: formatMessage({ id: 'journal_type' }),
accessor: 'journal_type',
width: 110,
className: 'journal_type',
},
{
id: 'publish',
Header: formatMessage({ id: 'publish' }),
accessor: (row) => StatusAccessor(row),
width: 95,
className: 'publish',
},
{
id: 'note',
Header: formatMessage({ id: 'note' }),
accessor: NoteAccessor,
disableSorting: true,
width: 85,
className: 'note',
},
{
id: 'created_at',
Header: formatMessage({ id: 'created_at' }),
accessor: (r) => moment(r.created_at).format('YYYY MMM DD'),
width: 125,
className: 'created_at',
},
{
id: 'actions',
Header: '',
Cell: ({ cell }) => (
<Popover
content={actionMenuList(cell.row.original)}
position={Position.RIGHT_BOTTOM}
>
<Button icon={<Icon icon="more-h-16" iconSize={16} />} />
</Popover>
),
className: 'actions',
width: 50,
disableResizing: true,
},
],
[actionMenuList, formatMessage],
);
const handleDataTableFetchData = useCallback(
({ pageIndex, pageSize, sortBy }) => {
addManualJournalsTableQueries({
...(sortBy.length > 0
? {
column_sort_by: sortBy[0].id,
sort_order: sortBy[0].desc ? 'desc' : 'asc',
}
: {}),
page_size: pageSize,
page: pageIndex + 1,
});
},
[addManualJournalsTableQueries],
);
const handleSelectedRowsChange = useCallback(
(selectedRows) => {
saveInvoke(
onSelectedRowsChange,
selectedRows.map((s) => s.original),
);
},
[onSelectedRowsChange],
);
return (
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
<Choose>
<Choose.When condition={false}>
<ManualJournalsEmptyStatus />
</Choose.When>
<Choose.Otherwise>
<DataTable
noInitialFetch={true}
columns={columns}
data={manualJournals}
onFetchData={handleDataTableFetchData}
manualSortBy={true}
selectionColumn={true}
expandable={true}
sticky={true}
loading={isManualJournalsLoading}
onSelectedRowsChange={handleSelectedRowsChange}
rowContextMenu={onRowContextMenu}
// pagesCount={manualJournalsPagination.pagesCount}
pagination={true}
// initialPageSize={manualJournalsTableQuery.page_size}
// initialPageIndex={manualJournalsTableQuery.page - 1}
autoResetSortBy={false}
autoResetPage={false}
TableLoadingRenderer={TableSkeletonRows}
TableHeaderSkeletonRenderer={TableSkeletonHeader}
/>
</Choose.Otherwise>
</Choose>
</div>
);
}
export default compose(
withManualJournalsActions,
)(ManualJournalsDataTable);

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

@@ -1,80 +0,0 @@
import React, { useEffect, useCallback } from 'react';
import { Route, Switch, useHistory } from 'react-router-dom';
import {
FormattedMessage as T,
useIntl,
} from 'react-intl';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import { ManualJournalsListProvider } from './ManualJournalsListProvider';
import ManualJournalsAlerts from './ManualJournalsAlerts';
import ManualJournalsViewTabs from './ManualJournalsViewTabs';
import ManualJournalsDataTable from './ManualJournalsDataTable';
import ManualJournalsActionsBar from './ManualJournalActionsBar';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withManualJournals from 'containers/Accounting/withManualJournals';
import { compose } from 'utils';
import 'style/pages/ManualJournal/List.scss';
/**
* Manual journals table.
*/
function ManualJournalsTable({
// #withDashboardActions
changePageTitle,
// #withManualJournals
manualJournalsTableQuery,
}) {
const history = useHistory();
const { formatMessage } = useIntl();
// Handle update the page title.
useEffect(() => {
changePageTitle(formatMessage({ id: 'manual_journals' }));
}, [changePageTitle, formatMessage]);
const handleEditJournal = useCallback(
(journal) => {
history.push(`/manual-journals/${journal.id}/edit`);
},
[history],
);
// Handle filter change to re-fetch data-table.
const handleFilterChanged = useCallback(() => {}, []);
return (
<ManualJournalsListProvider query={manualJournalsTableQuery}>
<ManualJournalsActionsBar />
<DashboardPageContent>
<Switch>
<Route
exact={true}
path={[
'/manual-journals/:custom_view_id/custom_view',
'/manual-journals',
]}
>
<ManualJournalsViewTabs />
<ManualJournalsDataTable />
<ManualJournalsAlerts />
</Route>
</Switch>
</DashboardPageContent>
</ManualJournalsListProvider>
);
}
export default compose(
withDashboardActions,
withManualJournals(({ manualJournalsTableQuery }) => ({
manualJournalsTableQuery,
})),
)(ManualJournalsTable);

10
client/src/containers/Accounting/withJournalDetail.js
View File

@@ -1,10 +0,0 @@
import {connect} from 'react-redux';
import {
getManualJournal,
} from 'store/manualJournals/manualJournals.reducers';
export const mapStateToProps = (state, props) => ({
manualJournal: getManualJournal(state, props.manualJournalId),
});
export default connect(mapStateToProps);

14
client/src/containers/Accounting/withJournalsActions.js
View File

@@ -1,14 +0,0 @@
import {connect} from 'react-redux';
import {
makeJournalEntries,
fetchManualJournal,
editManualJournal,
} from 'store/manualJournals/manualJournals.actions';
export const mapDispatchToProps = (dispatch) => ({
requestMakeJournalEntries: (form) => dispatch(makeJournalEntries({ form })),
requestFetchManualJournal: (id) => dispatch(fetchManualJournal({ id })),
requestEditManualJournal: (id, form) => dispatch(editManualJournal({ id, form }))
});
export default connect(null, mapDispatchToProps);

11
client/src/containers/Accounting/withManualJournalDetail.js
View File

@@ -1,11 +0,0 @@
import { connect } from 'react-redux';
import { getManualJournalByIdFactory } from 'store/manualJournals/manualJournals.selectors';
export default () => {
const getManualJournalById = getManualJournalByIdFactory();
const mapStateToProps = (state, props) => ({
manualJournal: getManualJournalById(state, props),
});
return connect(mapStateToProps);
};

33
client/src/containers/Accounting/withManualJournals.js
View File

@@ -1,33 +0,0 @@
import { connect } from 'react-redux';
import { getResourceViews } from 'store/customViews/customViews.selectors';
import {
getManualJournalsItems,
getManualJournalsPagination,
getManualJournalsTableQuery,
getManualJournalsCurrentViewIdFactory
} from 'store/manualJournals/manualJournals.selectors';
export default (mapState) => {
const getManualJournalsCurrentViewId = getManualJournalsCurrentViewIdFactory();
const mapStateToProps = (state, props) => {
const query = getManualJournalsTableQuery(state, props);
const mapped = {
manualJournalsCurrentPage: getManualJournalsItems(state, props, query),
manualJournalsTableQuery: query,
manualJournalsViews: getResourceViews(state, props, 'manual_journals'),
manualJournalsItems: state.manualJournals.items,
manualJournalsPagination: getManualJournalsPagination(state, props, query),
manualJournalsLoading: state.manualJournals.loading,
journalNumberChanged: state.manualJournals.journalNumberChanged,
manualJournalsCurrentViewId: getManualJournalsCurrentViewId(state, props),
};
return mapState ? mapState(mapped, state, props) : mapped;
};
return connect(mapStateToProps);
};

33
client/src/containers/Accounting/withManualJournalsActions.js
View File

@@ -1,33 +0,0 @@
import { connect } from 'react-redux';
import t from 'store/types';
import {
deleteManualJournal,
fetchManualJournalsTable,
publishManualJournal,
deleteBulkManualJournals,
fetchManualJournal,
} from 'store/manualJournals/manualJournals.actions';
const mapActionsToProps = (dispatch) => ({
requestDeleteManualJournal: (id) => dispatch(deleteManualJournal({ id })),
requestFetchManualJournalsTable: (query = {}) => dispatch(fetchManualJournalsTable({ query })),
requestFetchManualJournal: (id) => dispatch(fetchManualJournal({ id })),
requestPublishManualJournal: (id) => dispatch(publishManualJournal({ id })),
requestDeleteBulkManualJournals: (ids) => dispatch(deleteBulkManualJournals({ ids })),
changeManualJournalCurrentView: (id) => dispatch({
type: t.MANUAL_JOURNALS_SET_CURRENT_VIEW,
payload: {
currentViewId: parseInt(id, 10),
}
}),
addManualJournalsTableQueries: (queries) => dispatch({
type: t.MANUAL_JOURNALS_TABLE_QUERIES_ADD,
payload: { queries },
}),
setJournalNumberChanged: (isChanged) => dispatch({
type: t.MANUAL_JOURNAL_NUMBER_CHANGED,
payload: { isChanged },
}),
});
export default connect(null, mapActionsToProps);

30
client/src/containers/Accounts/AccountActionsMenu.js
View File

@@ -1,30 +0,0 @@
import React from 'react';
import { Menu, MenuItem, MenuDivider, Intent } from '@blueprintjs/core';
import { Icon, If } from 'components';
import { useIntl } from 'react-intl';
import withDialogs from 'containers/Dialog/withDialogActions';
import withAlertsActions from 'containers/Alert/withAlertActions';
import { compose } from 'utils';
import { formatMessage } from 'services/intl';
/**
* Account actions menu list.
*/
export default function AccountActionsMenuList({
account,
// #withAlert
openAlert,
openDialog,
}) {
const { formatMessage } = useIntl();
return (
);
}
// export default compose(withDialogs, withAlertsActions)(AccountActionsMenuList);

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

@@ -1,5 +1,6 @@
import React from 'react';
import Icon from 'components/Icon';
import { isEmpty } from 'lodash';
import {
Button,
NavbarGroup,
@@ -21,6 +22,7 @@ import { useAccountsChartContext } from 'containers/Accounts/AccountsChartProvid
import withDialogActions from 'containers/Dialog/withDialogActions';
import withAccounts from 'containers/Accounts/withAccounts';
import withAlertActions from 'containers/Alert/withAlertActions';
import withAccountsTableActions from './withAccountsTableActions';
import { compose } from 'utils';
@@ -37,6 +39,9 @@ function AccountsActionsBar({
// #withAlertActions
openAlert,
// #withAccountsTableActions
setAccountsTableState,
// #ownProps
onFilterChanged,
}) {
@@ -46,7 +51,7 @@ function AccountsActionsBar({
openDialog('account-form', {});
};
// handle bulk accounts delete.
// Handle bulk accounts delete.
const handleBulkDelete = () => {
openAlert('accounts-bulk-delete', { accountsIds: accountsSelectedRows });
};
@@ -63,12 +68,18 @@ function AccountsActionsBar({
});
};
// Handle tab changing.
const handleTabChange = (viewId) => {
setAccountsTableState({ customViewId: viewId.id || null });
};
return (
<DashboardActionsBar>
<NavbarGroup>
<DashboardActionViewsList
resourceName={'accounts'}
views={resourceViews}
onChange={handleTabChange}
/>
<NavbarDivider />
@@ -100,7 +111,7 @@ function AccountsActionsBar({
/>
</Popover>
<If condition={accountsSelectedRows.length}>
<If condition={!isEmpty(accountsSelectedRows)}>
<Button
className={Classes.MINIMAL}
icon={<Icon icon="play-16" iconSize={16} />}
@@ -144,8 +155,9 @@ function AccountsActionsBar({
export default compose(
withDialogActions,
withAlertActions,
withAccounts(({ accountsSelectedRows }) => ({
accountsSelectedRows,
})),
withAlertActions,
withAccountsTableActions
)(AccountsActionsBar);

10
client/src/containers/Accounts/AccountsAlerts.js
View File

@@ -2,9 +2,9 @@ import React from 'react';
import AccountDeleteAlert from 'containers/Alerts/AccountDeleteAlert';
import AccountInactivateAlert from 'containers/Alerts/AccountInactivateAlert';
import AccountActivateAlert from 'containers/Alerts/AccountActivateAlert';
import AccountBulkDeleteAlert from 'containers/Alerts/AccountBulkDeleteAlert';
import AccountBulkInactivateAlert from 'containers/Alerts/AccountBulkInactivateAlert';
import AccountBulkActivateAlert from 'containers/Alerts/AccountBulkActivateAlert';
// import AccountBulkDeleteAlert from 'containers/Alerts/AccountBulkDeleteAlert';
// import AccountBulkInactivateAlert from 'containers/Alerts/AccountBulkInactivateAlert';
// import AccountBulkActivateAlert from 'containers/Alerts/AccountBulkActivateAlert';
/**
* Accounts alert.
@@ -18,9 +18,9 @@ export default function AccountsAlerts({
<AccountInactivateAlert name={'account-inactivate'} />
<AccountActivateAlert name={'account-activate'} />
<AccountBulkDeleteAlert name={'accounts-bulk-delete'} />
{/* <AccountBulkDeleteAlert name={'accounts-bulk-delete'} />
<AccountBulkInactivateAlert name={'accounts-bulk-inactivate'} />
<AccountBulkActivateAlert name={'accounts-bulk-activate'} />
<AccountBulkActivateAlert name={'accounts-bulk-activate'} /> */}
</div>
)
}

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

@@ -4,15 +4,17 @@ import { useIntl } from 'react-intl';
import 'style/pages/Accounts/List.scss';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import { AccountsChartProvider } from 'containers/Accounts/AccountsChartProvider';
import AccountsViewPage from 'containers/Accounts/AccountsViewPage';
import { AccountsChartProvider } from './AccountsChartProvider';
import AccountsViewsTabs from 'containers/Accounts/AccountsViewsTabs';
import AccountsActionsBar from 'containers/Accounts/AccountsActionsBar';
import AccountsAlerts from './AccountsAlerts';
import AccountsDataTable from './AccountsDataTable';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withAccounts from 'containers/Accounts/withAccounts';
import { compose } from 'utils';
import { transformTableStateToQuery, compose } from 'utils';
/**
* Accounts chart list.
@@ -22,7 +24,7 @@ function AccountsChart({
changePageTitle,
// #withAccounts
accountsTableQuery
accountsTableState,
}) {
const { formatMessage } = useIntl();
@@ -31,11 +33,14 @@ function AccountsChart({
}, [changePageTitle, formatMessage]);
return (
<AccountsChartProvider query={accountsTableQuery}>
<AccountsChartProvider
query={transformTableStateToQuery(accountsTableState)}
>
<AccountsActionsBar />
<DashboardPageContent>
<AccountsViewPage />
<AccountsViewsTabs />
<AccountsDataTable />
</DashboardPageContent>
<AccountsAlerts />
@@ -45,7 +50,5 @@ function AccountsChart({
export default compose(
withDashboardActions,
withAccounts(({ accountsTableQuery }) => ({
accountsTableQuery,
})),
withAccounts(({ accountsTableState }) => ({ accountsTableState })),
)(AccountsChart);

11
client/src/containers/Accounts/AccountsChartProvider.js
View File

@@ -9,18 +9,22 @@ const AccountsChartContext = createContext();
*/
function AccountsChartProvider({ query, ...props }) {
// Fetch accounts resource views and fields.
const { data: resourceViews, isFetching: isViewsLoading } = useResourceViews(
const { data: resourceViews, isLoading: isViewsLoading } = useResourceViews(
'accounts',
);
// Fetch the accounts resource fields.
const {
data: resourceFields,
isFetching: isFieldsLoading,
isLoading: isFieldsLoading,
} = useResourceFields('accounts');
// Fetch accounts list according to the given custom view id.
const { data: accounts, isFetching: isAccountsLoading } = useAccounts(
const {
data: accounts,
isFetching: isAccountsFetching,
isLoading: isAccountsLoading
} = useAccounts(
query,
{ keepPreviousData: true }
);
@@ -32,6 +36,7 @@ function AccountsChartProvider({ query, ...props }) {
resourceViews,
isAccountsLoading,
isAccountsFetching,
isFieldsLoading,
isViewsLoading,
};

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

@@ -1,127 +1,75 @@
import React, { useCallback, useMemo } from 'react';
import { Button, Popover, Position } from '@blueprintjs/core';
import { useIntl } from 'react-intl';
import React from 'react';
import classNames from 'classnames';
import { Icon, DataTable } from 'components';
import { saveInvoke } from 'utils';
import { TableFastCell, DataTable } from 'components';
import { compose } from 'utils';
import { CLASSES } from 'common/classes';
import { NormalCell, BalanceCell, AccountActionsMenu } from './components';
import { TableFastCell } from 'components';
import { useAccountsTableColumns, rowClassNames } from './utils';
import { ActionsMenu } from './components';
import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
import { useAccountsChartContext } from './AccountsChartProvider';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDialogActions from 'containers/Dialog/withDialogActions';
/**
* Accounts data-table.
*/
export default function AccountsDataTable({
// #ownProps
accounts,
loading,
onFetchData,
onSelectedRowsChange,
// onDeleteAccount,
// onInactivateAccount,
// onActivateAccount,
// onEditAccount,
// onNewChildAccount,
function AccountsDataTable({
// #withAlertsDialog
openAlert,
// #withDial
openDialog,
}) {
const { formatMessage } = useIntl();
const {
isAccountsLoading,
isAccountsFetching,
accounts,
} = useAccountsChartContext();
const ActionsCell = useMemo(
() => ({ row }) => (
<Popover
content={<AccountActionsMenu row={row} />}
position={Position.RIGHT_TOP}
>
<Button icon={<Icon icon="more-h-16" iconSize={16} />} />
</Popover>
),
[],
);
// Retrieve accounts table columns.
const columns = useAccountsTableColumns();
const RowContextMenu = useMemo(
() => ({ row }) => <AccountActionsMenu row={row} />,
[],
);
// Handle delete action account.
const handleDeleteAccount = (account) => {
openAlert('account-delete', { accountId: account.id });
};
const columns = useMemo(
() => [
{
id: 'name',
Header: formatMessage({ id: 'account_name' }),
accessor: 'name',
className: 'account_name',
width: 200,
},
{
id: 'code',
Header: formatMessage({ id: 'code' }),
accessor: 'code',
className: 'code',
width: 80,
},
{
id: 'type',
Header: formatMessage({ id: 'type' }),
accessor: 'account_type_label',
className: 'type',
width: 140,
},
{
id: 'normal',
Header: formatMessage({ id: 'normal' }),
Cell: NormalCell,
accessor: 'account_normal',
className: 'normal',
width: 80,
},
{
id: 'currency',
Header: formatMessage({ id: 'currency' }),
accessor: (row) => 'USD',
width: 75,
},
{
id: 'balance',
Header: formatMessage({ id: 'balance' }),
accessor: 'amount',
Cell: BalanceCell,
width: 150,
},
{
id: 'actions',
Header: '',
Cell: ActionsCell,
className: 'actions',
width: 50,
skeletonWidthMin: 100,
},
],
[ActionsCell, formatMessage],
);
// Handle activate action account.
const handleActivateAccount = (account) => {
openAlert('account-activate', { accountId: account.id });
};
const handleDatatableFetchData = useCallback(
(...params) => {
saveInvoke(onFetchData, params);
},
[onFetchData],
);
// Handle inactivate action account.
const handleInactivateAccount = (account) => {
openAlert('account-inactivate', { accountId: account.id });
};
const handleSelectedRowsChange = useCallback(
(selectedRows) => {
saveInvoke(onSelectedRowsChange, selectedRows);
},
[onSelectedRowsChange],
);
// Handle select accounts datatable rows.
// const handleSelectedRowsChange = (selectedRows) => {
// const selectedRowsIds = selectedRows.map((r) => r.id);
// setSelectedRowsAccounts(selectedRowsIds);
// };
const rowClassNames = (row) => ({
inactive: !row.original.active,
});
// Handle edit account action.
const handleEditAccount = (account) => {
openDialog('account-form', { action: 'edit', id: account.id });
};
// Handle new child button click.
const handleNewChildAccount = (account) => {
openDialog('account-form', {
action: 'new_child',
parentAccountId: account.id,
accountType: account.account_type,
});
};
return (
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
@@ -129,29 +77,44 @@ export default function AccountsDataTable({
noInitialFetch={true}
columns={columns}
data={accounts}
onFetchData={handleDatatableFetchData}
selectionColumn={true}
expandable={true}
sticky={true}
onSelectedRowsChange={handleSelectedRowsChange}
loading={loading}
headerLoading={loading}
rowContextMenu={RowContextMenu}
loading={isAccountsLoading}
headerLoading={isAccountsLoading}
progressBarLoading={isAccountsFetching}
rowClassNames={rowClassNames}
autoResetExpanded={false}
autoResetSortBy={false}
autoResetSelectedRows={false}
expandColumnSpace={1}
expandToggleColumn={2}
selectionColumnWidth={50}
TableCellRenderer={TableFastCell}
TableRowsRenderer={TableVirtualizedListRows}
TableLoadingRenderer={TableSkeletonRows}
TableHeaderSkeletonRenderer={TableSkeletonHeader}
ContextMenu={ActionsMenu}
// #TableVirtualizedListRows props.
vListrowHeight={42}
vListOverscanRowCount={10}
payload={{
onEdit: handleEditAccount,
onDelete: handleDeleteAccount,
onActivate: handleActivateAccount,
onInactivate: handleInactivateAccount,
newChild: handleNewChildAccount
}}
/>
</div>
);
}
export default compose(withAlertsActions, withDialogActions)(AccountsDataTable);

90
client/src/containers/Accounts/AccountsViewPage.js
View File

@@ -1,90 +0,0 @@
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import AccountsViewsTabs from 'containers/Accounts/AccountsViewsTabs';
import AccountsDataTable from 'containers/Accounts/AccountsDataTable';
import { useAccountsChartContext } from 'containers/Accounts/AccountsChartProvider';
import withAccountsTableActions from 'containers/Accounts/withAccountsTableActions';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
/**
* Accounts view page.
*/
function AccountsViewPage({
// #withAlertActions
openAlert,
// #withDialog.
openDialog,
// #withAccountsTableActions
setSelectedRowsAccounts,
}) {
const { isAccountsLoading, accounts } = useAccountsChartContext();
// Handle delete action account.
const handleDeleteAccount = (account) => {
// openAlert('account-delete', { accountId: account.id });
};
// Handle activate action account.
const handleActivateAccount = (account) => {
// openAlert('account-activate', { accountId: account.id });
};
// Handle inactivate action account.
const handleInactivateAccount = (account) => {
// openAlert('account-inactivate', { accountId: account.id });
};
// Handle select accounts datatable rows.
// const handleSelectedRowsChange = (selectedRows) => {
// const selectedRowsIds = selectedRows.map((r) => r.id);
// setSelectedRowsAccounts(selectedRowsIds);
// };
// Handle edit account action.
const handleEditAccount = (account) => {
// openDialog('account-form', { action: 'edit', id: account.id });
};
// Handle new child button click.
const handleNewChildAccount = (account) => {
// openDialog('account-form', {
// action: 'new_child',
// parentAccountId: account.id,
// accountType: account.account_type,
// });
};
return (
<Switch>
<Route
exact={true}
path={['/accounts/:custom_view_id/custom_view', '/accounts']}
>
<AccountsViewsTabs />
<AccountsDataTable
loading={isAccountsLoading}
accounts={accounts}
// onDeleteAccount={handleDeleteAccount}
// onInactivateAccount={handleInactivateAccount}
// onActivateAccount={handleActivateAccount}
// onSelectedRowsChange={handleSelectedRowsChange}
// onEditAccount={handleEditAccount}
// onNewChildAccount={handleNewChildAccount}
/>
</Route>
</Switch>
);
}
export default compose(
withAlertsActions,
withAccountsTableActions,
withDialogActions,
)(AccountsViewPage);

27
client/src/containers/Accounts/AccountsViewsTabs.js
View File

@@ -1,12 +1,12 @@
import React, { useMemo, useCallback } from 'react';
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
import { useParams } from 'react-router-dom';
import { pick } from 'lodash';
import { DashboardViewsTabs } from 'components';
import { useAccountsChartContext } from 'containers/Accounts/AccountsChartProvider';
import withAccountsTableActions from 'containers/Accounts/withAccountsTableActions';
import withAccountsTableActions from './withAccountsTableActions';
import withAccounts from './withAccounts';
import { compose } from 'utils';
@@ -15,18 +15,22 @@ import { compose } from 'utils';
*/
function AccountsViewsTabs({
// #withAccountsTableActions
addAccountsTableQuery,
}) {
const { resourceViews } = useAccountsChartContext();
const { custom_view_id: customViewId = null } = useParams();
setAccountsTableState,
// #withAccounts
accountsCustomViewId
}) {
// Accounts chart context.
const { resourceViews } = useAccountsChartContext();
// Handles the tab change.
const handleTabChange = useCallback(
(viewId) => {
addAccountsTableQuery({
custom_view_id: viewId || null,
setAccountsTableState({
customViewId: viewId || null,
});
},
[addAccountsTableQuery],
[setAccountsTableState],
);
const tabs = useMemo(
@@ -42,7 +46,7 @@ function AccountsViewsTabs({
<NavbarGroup align={Alignment.LEFT}>
<DashboardViewsTabs
defaultTabText={'All Accounts'}
initialViewId={customViewId}
currentViewId={accountsCustomViewId}
resourceName={'accounts'}
onChange={handleTabChange}
tabs={tabs}
@@ -54,4 +58,7 @@ function AccountsViewsTabs({
export default compose(
withAccountsTableActions,
withAccounts(({ accountsTableState }) => ({
accountsCustomViewId: accountsTableState.customViewId
}))
)(AccountsViewsTabs);

77
client/src/containers/Accounts/components.js
View File

@@ -6,65 +6,97 @@ import {
MenuItem,
Menu,
MenuDivider,
Intent
Intent,
Popover,
Button,
} from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import classNames from 'classnames';
import { useIntl } from 'react-intl';
import { Icon, Money, If } from 'components';
import { saveInvoke } from 'utils';
import { formatMessage } from 'services/intl';
import { safeCallback } from 'utils';
export function AccountActionsMenu({ row: { original } }) {
/**
* Accounts table actions menu.
*/
export function ActionsMenu({
row: { original },
payload: {
onEdit,
onViewDetails,
onDelete,
onNewChild,
onActivate,
onInactivate,
},
}) {
return (
<Menu>
<MenuItem
icon={<Icon icon="reader-18" />}
text={formatMessage({ id: 'view_details' })}
onClick={safeCallback(onViewDetails, original)}
/>
<MenuDivider />
<MenuItem
icon={<Icon icon="pen-18" />}
text={formatMessage({ id: 'edit_account' })}
// onClick={handleEditAccount}
onClick={safeCallback(onEdit, original)}
/>
<MenuItem
icon={<Icon icon="plus" />}
text={formatMessage({ id: 'new_child_account' })}
// onClick={handleNewChildAccount}
onClick={safeCallback(onNewChild, original)}
/>
<MenuDivider />
<If condition={original.active}>
<MenuItem
text={formatMessage({ id: 'inactivate_account' })}
icon={<Icon icon="pause-16" iconSize={16} />}
// onClick={handleInactivateAccount}
onClick={safeCallback(onInactivate, original)}
/>
</If>
<If condition={!original.active}>
<MenuItem
text={formatMessage({ id: 'activate_account' })}
icon={<Icon icon="play-16" iconSize={16} />}
// onClick={handleActivateAccount}
onClick={safeCallback(onActivate, original)}
/>
</If>
<MenuItem
text={formatMessage({ id: 'delete_account' })}
icon={<Icon icon="trash-16" iconSize={16} />}
intent={Intent.DANGER}
// onClick={handleDeleteA ccount}
onClick={safeCallback(onDelete, original)}
/>
</Menu>
);
}
/**
* Actions cell.
*/
export const ActionsCell = (props) => {
return (
<Popover
position={Position.RIGHT_BOTTOM}
content={<ActionsMenu {...props} />}
>
<Button icon={<Icon icon="more-h-16" iconSize={16} />} />
</Popover>
);
};
/**
* Normal cell.
*/
export function NormalCell({ cell: { value } }) {
const { formatMessage } = useIntl();
const arrowDirection = value === 'credit' ? 'down' : 'up';
// if (value !== 'credit' || value !== 'debit') {
// return '';
// }
// Can't continue if the value is not `credit` or `debit`.
if (['credit', 'debit'].indexOf(value) === -1) {
return '';
}
return (
<Tooltip
className={Classes.TOOLTIP_INDICATOR}
@@ -77,6 +109,9 @@ export function NormalCell({ cell: { value } }) {
);
}
/**
* Balance cell.
*/
export function BalanceCell({ cell }) {
const account = cell.row.original;
@@ -88,19 +123,3 @@ export function BalanceCell({ cell }) {
<span class="placeholder">—</span>
);
}
export function InactiveSemafro() {
return (
<Tooltip
content={<T id="inactive" />}
className={classNames(
Classes.TOOLTIP_INDICATOR,
'bp3-popover-wrapper--inactive-semafro',
)}
position={Position.TOP}
hoverOpenDelay={250}
>
<div className="inactive-semafro"></div>
</Tooltip>
);
}

75
client/src/containers/Accounts/utils.js
View File

@@ -2,7 +2,11 @@ import React from 'react';
import { Intent } from '@blueprintjs/core';
import { If, AppToaster } from 'components';
import { formatMessage } from 'services/intl';
import { NormalCell, BalanceCell, ActionsCell } from './components';
/**
* Account name accessor.
*/
export const accountNameAccessor = (account) => {
return (
<span>
@@ -14,7 +18,9 @@ export const accountNameAccessor = (account) => {
);
};
// Handle delete errors in bulk and singular.
/**
* Handle delete errors in bulk and singular.
*/
export const handleDeleteErrors = (errors) => {
if (errors.find((e) => e.type === 'ACCOUNT.PREDEFINED')) {
AppToaster.show({
@@ -32,4 +38,69 @@ export const handleDeleteErrors = (errors) => {
intent: Intent.DANGER,
});
}
};
};
/**
* Accounts table columns.
*/
export const useAccountsTableColumns = () => {
return React.useMemo(
() => [
{
id: 'name',
Header: formatMessage({ id: 'account_name' }),
accessor: 'name',
className: 'account_name',
width: 200,
},
{
id: 'code',
Header: formatMessage({ id: 'code' }),
accessor: 'code',
className: 'code',
width: 80,
},
{
id: 'type',
Header: formatMessage({ id: 'type' }),
accessor: 'account_type_label',
className: 'type',
width: 140,
},
{
id: 'normal',
Header: formatMessage({ id: 'normal' }),
Cell: NormalCell,
accessor: 'account_normal',
className: 'normal',
width: 80,
},
{
id: 'currency',
Header: formatMessage({ id: 'currency' }),
accessor: (row) => 'USD',
width: 75,
},
{
id: 'balance',
Header: formatMessage({ id: 'balance' }),
accessor: 'amount',
Cell: BalanceCell,
width: 150,
},
{
id: 'actions',
Header: '',
Cell: ActionsCell,
className: 'actions',
width: 50,
skeletonWidthMin: 100,
},
],
[],
)
}
export const rowClassNames = (row) => ({
inactive: !row.original.active,
});

8
client/src/containers/Accounts/withAccountDetail.js
View File

@@ -1,8 +0,0 @@
import { connect } from 'react-redux';
import { getAccountById } from 'store/accounts/accounts.selectors';
const mapStateToProps = (state, props) => ({
account: getAccountById(state, props),
});
export default connect(mapStateToProps);

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

@@ -1,24 +1,15 @@
import { connect } from 'react-redux';
import {
getAccountsItems,
getAccountsListFactory,
getAccountsTableQuery,
getAccountsTableStateFactory,
} from 'store/accounts/accounts.selectors';
import { getResourceViews } from 'store/customViews/customViews.selectors';
export default (mapState) => {
const getAccountsList = getAccountsListFactory();
const getAccountsTableState = getAccountsTableStateFactory();
const mapStateToProps = (state, props) => {
const mapped = {
accountsViews: getResourceViews(state, props, 'accounts'),
accountsTable: getAccountsItems(state, props),
accountsList: getAccountsList(state, props),
accountsTypes: state.accounts.accountsTypes,
accountsTableQuery: state.accounts.tableQuery,
accountsLoading: state.accounts.loading,
accountErrors: state.accounts.errors,
accountsSelectedRows: state.accounts.selectedRows,
accountsTableState: getAccountsTableState(state, props),
accountsSelectedRows: null,
};
return mapState ? mapState(mapped, state, props) : mapped;
};

30
client/src/containers/Accounts/withAccountsActions.js
View File

@@ -1,30 +0,0 @@
import { connect } from 'react-redux';
import {
fetchAccountTypes,
fetchAccountsList,
deleteAccount,
inactiveAccount,
activateAccount,
submitAccount,
fetchAccount,
deleteBulkAccounts,
bulkActivateAccounts,
bulkInactiveAccounts,
editAccount,
} from 'store/accounts/accounts.actions';
const mapActionsToProps = (dispatch) => ({
requestFetchAccounts: (query) => dispatch(fetchAccountsList({ query })),
requestFetchAccountTypes: () => dispatch(fetchAccountTypes()),
requestSubmitAccount: ({ form }) => dispatch(submitAccount({ form })),
requestDeleteAccount: (id) => dispatch(deleteAccount({ id })),
requestInactiveAccount: (id) => dispatch(inactiveAccount({ id })),
requestActivateAccount: (id) => dispatch(activateAccount({ id })),
requestFetchAccount: (id) => dispatch(fetchAccount({ id })),
requestDeleteBulkAccounts: (ids) => dispatch(deleteBulkAccounts({ ids })),
requestBulkActivateAccounts: (ids) => dispatch(bulkActivateAccounts({ ids })),
requestBulkInactiveAccounts: (ids) => dispatch(bulkInactiveAccounts({ ids })),
requestEditAccount: (id, form) => dispatch(editAccount(id, form)),
});
export default connect(null, mapActionsToProps);

28
client/src/containers/Accounts/withAccountsTableActions.js
View File

@@ -1,32 +1,8 @@
import { connect } from 'react-redux';
import t from 'store/types';
import { fetchAccountsTable, setBulkAction } from 'store/accounts/accounts.actions';
import { setAccountsTableState } from 'store/accounts/accounts.actions';
const mapActionsToProps = (dispatch) => ({
requestFetchAccountsTable: (query = {}) =>
dispatch(fetchAccountsTable({ query: { ...query } })),
changeAccountsCurrentView: (id) =>
dispatch({
type: t.ACCOUNTS_SET_CURRENT_VIEW,
currentViewId: parseInt(id, 10),
}),
setAccountsTableQuery: (key, value) =>
dispatch({
type: t.ACCOUNTS_TABLE_QUERY_SET,
key,
value,
}),
addAccountsTableQuery: (queries) =>
dispatch({
type: t.ACCOUNTS_TABLE_QUERIES_ADD,
payload: { queries },
}),
setSelectedRowsAccounts: (selectedRows) =>
dispatch({
type: t.ACCOUNTS_SELECTED_ROWS_SET,
payload: { selectedRows },
}),
setAccountsBulkAction: (actionName) => setBulkAction(actionName),
setAccountsTableState: (queries) => dispatch(setAccountsTableState(queries)),
});
export default connect(null, mapActionsToProps);

33
client/src/containers/Alerts/AccountDeleteAlert.js
View File

@@ -30,10 +30,7 @@ function AccountDeleteAlert({
closeAlert,
}) {
const { formatMessage } = useIntl();
const {
isLoading,
mutateAsync: deleteAccount,
} = useDeleteAccount();
const { isLoading, mutateAsync: deleteAccount } = useDeleteAccount();
// handle cancel delete account alert.
const handleCancelAccountDelete = () => {
@@ -41,17 +38,25 @@ function AccountDeleteAlert({
};
// Handle confirm account delete.
const handleConfirmAccountDelete = () => {
deleteAccount(accountId).then(() => {
AppToaster.show({
message: formatMessage({
id: 'the_account_has_been_successfully_deleted',
}),
intent: Intent.SUCCESS,
deleteAccount(accountId)
.then(() => {
AppToaster.show({
message: formatMessage({
id: 'the_account_has_been_successfully_deleted',
}),
intent: Intent.SUCCESS,
});
closeAlert(name);
})
.catch((error) => {
const {
response: {
data: { errors },
},
} = error;
handleDeleteErrors(errors);
closeAlert(name);
});
closeAlert(name);
}).catch(errors => {
handleDeleteErrors(errors);
});
};
return (

4
client/src/containers/Alerts/Customers/CustomerBulkDeleteAlert.js
View File

@@ -6,7 +6,6 @@ import { transformErrors } from 'containers/Customers/utils';
import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
import withAlertActions from 'containers/Alert/withAlertActions';
import withCustomersActions from 'containers/Customers/withCustomersActions';
import { compose } from 'utils';
@@ -19,8 +18,6 @@ function CustomerBulkDeleteAlert({
// #withAlertStoreConnect
isOpen,
payload: { customersIds },
// #withCustomersActions
requestDeleteBulkCustomers,
// #withAlertActions
closeAlert,
@@ -77,5 +74,4 @@ function CustomerBulkDeleteAlert({
export default compose(
withAlertStoreConnect(),
withAlertActions,
withCustomersActions,
)(CustomerBulkDeleteAlert);

10
client/src/containers/Alerts/Customers/CustomerDeleteAlert.js
View File

@@ -1,17 +1,15 @@
import React, { useCallback, useState } from 'react';
import React, { useCallback } from 'react';
import {
FormattedMessage as T,
FormattedHTMLMessage,
useIntl,
} from 'react-intl';
import { Intent, Alert } from '@blueprintjs/core';
import { queryCache } from 'react-query';
import { AppToaster } from 'components';
import { transformErrors } from 'containers/Customers/utils';
import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
import withAlertActions from 'containers/Alert/withAlertActions';
import withCustomersActions from 'containers/Customers/withCustomersActions';
import { useDeleteCustomer } from 'hooks/query';
import { compose } from 'utils';
@@ -26,8 +24,6 @@ function CustomerDeleteAlert({
// #withAlertStoreConnect
isOpen,
payload: { customerId },
// #withCustomersActions
requestDeleteCustomer,
// #withAlertActions
closeAlert,
@@ -53,9 +49,8 @@ function CustomerDeleteAlert({
}),
intent: Intent.SUCCESS,
});
queryCache.invalidateQueries('customers-table');
})
.catch((errors) => {
.catch(({ response: { data: { errors } } }) => {
transformErrors(errors);
})
.finally(() => {
@@ -86,5 +81,4 @@ function CustomerDeleteAlert({
export default compose(
withAlertStoreConnect(),
withAlertActions,
withCustomersActions,
)(CustomerDeleteAlert);

1
client/src/containers/Alerts/Expenses/ExpenseDeleteAlert.js
View File

@@ -24,7 +24,6 @@ function ExpenseDeleteAlert({
const {
mutateAsync: deleteExpenseMutate,
isLoading,
deleteExpense
} = useDeleteExpense();
// Handle cancel expense journal.

7
client/src/containers/Alerts/Expenses/ExpensePublishAlert.js
View File

@@ -37,8 +37,11 @@ function ExpensePublishAlert({
}),
intent: Intent.SUCCESS,
});
closeAlert(name)
})
.catch((error) => {});
.catch((error) => {
closeAlert(name)
});
};
return (
@@ -61,4 +64,4 @@ function ExpensePublishAlert({
export default compose(
withAlertStoreConnect(),
withAlertActions,
)(ExpensePublishAlert);
)(ExpensePublishAlert);

25
client/src/containers/Alerts/ManualJournals/JournalDeleteAlert.js
View File

@@ -24,7 +24,7 @@ function JournalDeleteAlert({
closeAlert,
}) {
const { formatMessage } = useIntl();
const { mutate: deleteJournalMutate } = useDeleteJournal();
const { mutateAsync: deleteJournalMutate, isLoading } = useDeleteJournal();
// Handle cancel delete manual journal.
const handleCancelAlert = () => {
@@ -33,16 +33,20 @@ function JournalDeleteAlert({
// Handle confirm delete manual journal.
const handleConfirmManualJournalDelete = () => {
deleteJournalMutate(manualJournalId).then(() => {
AppToaster.show({
message: formatMessage(
{ id: 'the_journal_has_been_deleted_successfully' },
{ number: journalNumber },
),
intent: Intent.SUCCESS,
deleteJournalMutate(manualJournalId)
.then(() => {
AppToaster.show({
message: formatMessage(
{ id: 'the_journal_has_been_deleted_successfully' },
{ number: journalNumber },
),
intent: Intent.SUCCESS,
});
closeAlert(name);
})
.catch(() => {
closeAlert(name);
});
});
};
return (
@@ -54,6 +58,7 @@ function JournalDeleteAlert({
isOpen={isOpen}
onCancel={handleCancelAlert}
onConfirm={handleConfirmManualJournalDelete}
loading={isLoading}
>
<p>
<T id={'once_delete_this_journal_you_will_able_to_restore_it'} />

2
client/src/containers/Alerts/ManualJournals/JournalPublishAlert.js
View File

@@ -24,7 +24,7 @@ function JournalPublishAlert({
closeAlert,
}) {
const { formatMessage } = useIntl();
const { mutate: publishJournalMutate, isLoading } = usePublishJournal();
const { mutateAsync: publishJournalMutate, isLoading } = usePublishJournal();
// Handle cancel manual journal alert.
const handleCancel = () => {

9
client/src/containers/Alerts/Vendors/VendorDeleteAlert.js
View File

@@ -1,4 +1,4 @@
import React, { useCallback, useState } from 'react';
import React, { useCallback } from 'react';
import {
FormattedMessage as T,
FormattedHTMLMessage,
@@ -7,12 +7,12 @@ import {
import { Intent, Alert } from '@blueprintjs/core';
import { AppToaster } from 'components';
import { transformErrors } from 'containers/Customers/utils';
import { useDeleteVendor } from 'hooks/query';
import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
import withAlertActions from 'containers/Alert/withAlertActions';
import { compose } from 'utils';
import {
useDeleteVendor
} from 'hooks/query';
/**
* Vendor delete alert.
@@ -78,5 +78,6 @@ function VendorDeleteAlert({
}
export default compose(
withAlertStoreConnect(),
withAlertActions,
)(VendorDeleteAlert);

0
client/src/containers/Customers/CustomerAddressTabs.js → client/src/containers/Customers/CustomerForm/CustomerAddressTabs.js
View File

0
client/src/containers/Customers/CustomerAttachmentTabs.js → client/src/containers/Customers/CustomerForm/CustomerAttachmentTabs.js
View File

0
client/src/containers/Customers/CustomerFinancialPanel.js → client/src/containers/Customers/CustomerForm/CustomerFinancialPanel.js
View File

8
client/src/containers/Customers/CustomerFloatingActions.js → client/src/containers/Customers/CustomerForm/CustomerFloatingActions.js
View File

@@ -11,8 +11,10 @@ import {
} from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import { useHistory } from 'react-router-dom';
import { useFormikContext } from 'formik';
import { CLASSES } from 'common/classes';
import { Icon } from 'components';
import { useCustomerFormContext } from './CustomerFormProvider';
@@ -20,6 +22,8 @@ import { useCustomerFormContext } from './CustomerFormProvider';
* Customer floating actions bar.
*/
export default function CustomerFloatingActions() {
const history = useHistory();
// Customer form context.
const { customerId, setSubmitPayload } = useCustomerFormContext();
@@ -33,7 +37,7 @@ export default function CustomerFloatingActions() {
// Handle cancel button click.
const handleCancelBtnClick = (event) => {
history.goBack();
};
// handle clear button clicl.

49
client/src/containers/Customers/CustomerForm.js → client/src/containers/Customers/CustomerForm/CustomerForm.js
View File

@@ -1,5 +1,4 @@
import React, { useMemo, useEffect } from 'react';
import * as Yup from 'yup';
import { Formik, Form } from 'formik';
import moment from 'moment';
import { Intent } from '@blueprintjs/core';
@@ -12,7 +11,7 @@ import AppToaster from 'components/AppToaster';
import CustomerFormPrimarySection from './CustomerFormPrimarySection';
import CustomerFormAfterPrimarySection from './CustomerFormAfterPrimarySection';
import CustomersTabs from 'containers/Customers/CustomersTabs';
import CustomersTabs from './CustomersTabs';
import CustomerFloatingActions from './CustomerFloatingActions';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -20,6 +19,7 @@ import withSettings from 'containers/Settings/withSettings';
import { compose, transformToForm } from 'utils';
import { useCustomerFormContext } from './CustomerFormProvider';
import { CreateCustomerForm, EditCustomerForm } from './CustomerForm.schema';
const defaultInitialValues = {
customer_type: 'business',
@@ -79,49 +79,6 @@ function CustomerForm({
const history = useHistory();
const { formatMessage } = useIntl();
const validationSchema = Yup.object().shape({
customer_type: Yup.string()
.required()
.trim()
.label(formatMessage({ id: 'customer_type_' })),
salutation: Yup.string().trim(),
first_name: Yup.string().trim(),
last_name: Yup.string().trim(),
company_name: Yup.string().trim(),
display_name: Yup.string()
.trim()
.required()
.label(formatMessage({ id: 'display_name_' })),
email: Yup.string().email().nullable(),
work_phone: Yup.number(),
personal_phone: Yup.number(),
website: Yup.string().url().nullable(),
active: Yup.boolean(),
note: Yup.string().trim(),
billing_address_country: Yup.string().trim(),
billing_address_1: Yup.string().trim(),
billing_address_2: Yup.string().trim(),
billing_address_city: Yup.string().trim(),
billing_address_state: Yup.string().trim(),
billing_address_postcode: Yup.number().nullable(),
billing_address_phone: Yup.number(),
shipping_address_country: Yup.string().trim(),
shipping_address_1: Yup.string().trim(),
shipping_address_2: Yup.string().trim(),
shipping_address_city: Yup.string().trim(),
shipping_address_state: Yup.string().trim(),
shipping_address_postcode: Yup.number().nullable(),
shipping_address_phone: Yup.number(),
opening_balance: Yup.number().nullable(),
currency_code: Yup.string(),
opening_balance_at: Yup.date(),
});
/**
* Initial values in create and edit mode.
*/
@@ -180,7 +137,7 @@ function CustomerForm({
return (
<div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_CUSTOMER)}>
<Formik
validationSchema={validationSchema}
validationSchema={isNewMode ? CreateCustomerForm : EditCustomerForm}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>

49
client/src/containers/Customers/CustomerForm/CustomerForm.schema.js Normal file
View File

@@ -0,0 +1,49 @@
import * as Yup from 'yup';
import { formatMessage } from 'services/intl';
const Schema = Yup.object().shape({
customer_type: Yup.string()
.required()
.trim()
.label(formatMessage({ id: 'customer_type_' })),
salutation: Yup.string().trim(),
first_name: Yup.string().trim(),
last_name: Yup.string().trim(),
company_name: Yup.string().trim(),
display_name: Yup.string()
.trim()
.required()
.label(formatMessage({ id: 'display_name_' })),
email: Yup.string().email().nullable(),
work_phone: Yup.number(),
personal_phone: Yup.number(),
website: Yup.string().url().nullable(),
active: Yup.boolean(),
note: Yup.string().trim(),
billing_address_country: Yup.string().trim(),
billing_address_1: Yup.string().trim(),
billing_address_2: Yup.string().trim(),
billing_address_city: Yup.string().trim(),
billing_address_state: Yup.string().trim(),
billing_address_postcode: Yup.number().nullable(),
billing_address_phone: Yup.number(),
shipping_address_country: Yup.string().trim(),
shipping_address_1: Yup.string().trim(),
shipping_address_2: Yup.string().trim(),
shipping_address_city: Yup.string().trim(),
shipping_address_state: Yup.string().trim(),
shipping_address_postcode: Yup.number().nullable(),
shipping_address_phone: Yup.number(),
opening_balance: Yup.number().nullable(),
currency_code: Yup.string(),
opening_balance_at: Yup.date(),
});
export const CreateCustomerForm = Schema;
export const EditCustomerForm = Schema;

0
client/src/containers/Customers/CustomerFormAfterPrimarySection.js → client/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.js
View File

14
client/src/containers/Customers/CustomerFormPage.js → client/src/containers/Customers/CustomerForm/CustomerFormPage.js
View File

@@ -5,14 +5,9 @@ import { DashboardCard } from 'components';
import CustomerForm from './CustomerForm';
import { CustomerFormProvider } from './CustomerFormProvider';
import withCustomersActions from './withCustomersActions';
import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
import { compose } from 'utils';
import 'style/pages/Customers/PageForm.scss';
function CustomerFormPage() {
export default function CustomerFormPage() {
const { id } = useParams();
return (
@@ -22,9 +17,4 @@ function CustomerFormPage() {
</DashboardCard>
</CustomerFormProvider>
);
}
export default compose(
withCustomersActions,
withCurrenciesActions,
)(CustomerFormPage);
}

2
client/src/containers/Customers/CustomerFormPrimarySection.js → client/src/containers/Customers/CustomerForm/CustomerFormPrimarySection.js
View File

@@ -9,7 +9,7 @@ import {
SalutationList,
DisplayNameList,
} from 'components';
import CustomerTypeRadioField from 'containers/Customers/CustomerTypeRadioField';
import CustomerTypeRadioField from './CustomerTypeRadioField';
import { CLASSES } from 'common/classes';
import { inputIntent } from 'utils';
import { useAutofocus } from 'hooks';

0
client/src/containers/Customers/CustomerFormProvider.js → client/src/containers/Customers/CustomerForm/CustomerFormProvider.js
View File

0
client/src/containers/Customers/CustomerNotePanel.js → client/src/containers/Customers/CustomerForm/CustomerNotePanel.js
View File

0
client/src/containers/Customers/CustomerTypeRadioField.js → client/src/containers/Customers/CustomerForm/CustomerTypeRadioField.js
View File

5
client/src/containers/Customers/CustomersTabs.js → client/src/containers/Customers/CustomerForm/CustomersTabs.js
View File

@@ -1,6 +1,7 @@
import React, { useState, useCallback } from 'react';
import React from 'react';
import { Tabs, Tab } from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { useIntl } from 'react-intl';
import CustomerAddressTabs from './CustomerAddressTabs';
import CustomerAttachmentTabs from './CustomerAttachmentTabs';
import CustomerFinancialPanel from './CustomerFinancialPanel';

247
client/src/containers/Customers/CustomerTable.js
View File

@@ -1,247 +0,0 @@
import React, { useCallback, useMemo } from 'react';
import {
Button,
Popover,
Menu,
MenuItem,
MenuDivider,
Position,
Intent,
} from '@blueprintjs/core';
import { useIntl } from 'react-intl';
import classNames from 'classnames';
import CustomersEmptyStatus from './CustomersEmptyStatus';
import { DataTable, Icon, Money, Choose } from 'components';
import { CLASSES } from 'common/classes';
import withCustomers from './withCustomers';
import withCustomersActions from './withCustomersActions';
import { compose, firstLettersArgs, saveInvoke } from 'utils';
const AvatarCell = (row) => {
return <span className="avatar">{firstLettersArgs(row.display_name)}</span>;
};
const PhoneNumberAccessor = (row) => (
<div>
<div className={'work_phone'}>{row.work_phone}</div>
<div className={'personal_phone'}>{row.personal_phone}</div>
</div>
);
const BalanceAccessor = (row) => {
return (<Money amount={row.closing_balance} currency={row.currency_code} />);
};
function CustomerTable({
//#withCustomers
customers,
customersLoading,
customerPagination,
customersTableQuery,
customersCurrentViewId,
// #withCustomersActions
addCustomersTableQueries,
//#OwnProps
loading,
onEditCustomer,
onDeleteCustomer,
onFetchData,
onSelectedRowsChange,
}) {
const { formatMessage } = useIntl();
// Customers actions list.
const renderContextMenu = useMemo(
() => ({ customer, onEditCustomer, onDeleteCustomer }) => {
const handleEditCustomer = () => {
saveInvoke(onEditCustomer, customer);
};
const handleDeleteCustomer = () => {
saveInvoke(onDeleteCustomer, customer);
};
return (
<Menu>
<MenuItem
icon={<Icon icon="reader-18" />}
text={formatMessage({ id: 'view_details' })}
/>
<MenuDivider />
<MenuItem
icon={<Icon icon="pen-18" />}
text={formatMessage({ id: 'edit_customer' })}
onClick={handleEditCustomer}
/>
<MenuItem
icon={<Icon icon="trash-16" iconSize={16} />}
text={formatMessage({ id: 'delete_customer' })}
intent={Intent.DANGER}
onClick={handleDeleteCustomer}
/>
</Menu>
);
},
[formatMessage],
);
// Renders actions table cell.
const renderActionsCell = useMemo(
() => ({ cell }) => (
<Popover
content={renderContextMenu({
customer: cell.row.original,
onEditCustomer,
onDeleteCustomer,
})}
position={Position.RIGHT_BOTTOM}
>
<Button icon={<Icon icon="more-h-16" iconSize={16} />} />
</Popover>
),
[onDeleteCustomer, onEditCustomer, renderContextMenu],
);
// Table columns.
const columns = useMemo(
() => [
{
id: 'avatar',
Header: '',
accessor: AvatarCell,
className: 'avatar',
width: 50,
disableResizing: true,
disableSortBy: true,
},
{
id: 'display_name',
Header: formatMessage({ id: 'display_name' }),
accessor: 'display_name',
className: 'display_name',
width: 150,
},
{
id: 'company_name',
Header: formatMessage({ id: 'company_name' }),
accessor: 'company_name',
className: 'company_name',
width: 150,
},
{
id: 'phone_number',
Header: formatMessage({ id: 'phone_number' }),
accessor: PhoneNumberAccessor,
className: 'phone_number',
width: 100,
},
{
id: 'receivable_balance',
Header: formatMessage({ id: 'receivable_balance' }),
accessor: BalanceAccessor,
className: 'receivable_balance',
width: 100,
},
{
id: 'actions',
Cell: renderActionsCell,
className: 'actions',
width: 70,
disableResizing: true,
disableSortBy: true,
},
],
[formatMessage, renderActionsCell],
);
// Handle fetch data table.
const handleFetchData = useCallback(
({ pageIndex, pageSize, sortBy }) => {
addCustomersTableQueries({
page: pageIndex + 1,
page_size: pageSize,
...(sortBy.length > 0
? {
column_sort_order: sortBy[0].id,
sort_order: sortBy[0].desc ? 'desc' : 'asc',
}
: {}),
});
},
[addCustomersTableQueries],
);
const handleSelectedRowsChange = useCallback(
(selectedRows) => {
onSelectedRowsChange &&
onSelectedRowsChange(selectedRows.map((s) => s.original));
},
[onSelectedRowsChange],
);
const rowContextMenu = (cell) =>
renderContextMenu({
customer: cell.row.original,
onEditCustomer,
onDeleteCustomer,
});
const showEmptyStatus = [
customersCurrentViewId === -1,
customers.length === 0,
].every((condition) => condition === true);
return (
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
<Choose>
<Choose.When condition={showEmptyStatus}>
<CustomersEmptyStatus />
</Choose.When>
<Choose.Otherwise>
<DataTable
noInitialFetch={true}
columns={columns}
data={customers}
onFetchData={handleFetchData}
selectionColumn={true}
expandable={false}
sticky={true}
onSelectedRowsChange={handleSelectedRowsChange}
spinnerProps={{ size: 30 }}
rowContextMenu={rowContextMenu}
pagination={true}
manualSortBy={true}
pagesCount={customerPagination.pagesCount}
autoResetSortBy={false}
autoResetPage={false}
initialPageSize={customersTableQuery.page_size}
initialPageIndex={customersTableQuery.page - 1}
/>
</Choose.Otherwise>
</Choose>
</div>
);
};
export default compose(
withCustomers(
({
customers,
customersLoading,
customerPagination,
customersTableQuery,
customersCurrentViewId,
}) => ({
customers,
customersLoading,
customerPagination,
customersTableQuery,
customersCurrentViewId,
}),
),
withCustomersActions,
)(CustomerTable);

4
client/src/containers/Customers/CustomersAlerts.js
View File

@@ -1,6 +1,6 @@
import React from 'react';
import CustomerDeleteAlert from 'containers/Alerts/Customers/CustomerDeleteAlert';
import CustomerBulkDeleteAlert from 'containers/Alerts/Customers/CustomerBulkDeleteAlert';
// import CustomerBulkDeleteAlert from 'containers/Alerts/Customers/CustomerBulkDeleteAlert';
/**
* Customers alert.
@@ -9,7 +9,7 @@ export default function ItemsAlerts() {
return (
<div>
<CustomerDeleteAlert name={'customer-delete'} />
<CustomerBulkDeleteAlert name={'customers-bulk-delete'} />
{/* <CustomerBulkDeleteAlert name={'customers-bulk-delete'} /> */}
</div>
);
}

23
client/src/containers/Customers/CustomerActionsBar.js → client/src/containers/Customers/CustomersLanding/CustomersActionsBar.js
View File

@@ -18,8 +18,8 @@ import { If, Icon, DashboardActionViewsList } from 'components';
import { useCustomersListContext } from './CustomersListProvider';
import withCustomers from 'containers/Customers/withCustomers';
import withCustomersActions from 'containers/Customers/withCustomersActions';
import withCustomers from './withCustomers';
import withCustomersActions from './withCustomersActions';
import withAlertActions from 'containers/Alert/withAlertActions';
import { compose } from 'utils';
@@ -29,21 +29,26 @@ import { compose } from 'utils';
*/
function CustomerActionsBar({
// #withCustomers
customersSelectedRows,
customersSelectedRows = [],
//#withCustomersActions
addCustomersTableQueries,
// #withCustomersActions
setCustomersTableState,
// #withAlertActions
openAlert,
}) {
// History context.
const history = useHistory();
// React intl
const { formatMessage } = useIntl();
// Customers list context.
const { customersViews } = useCustomersListContext();
const onClickNewCustomer = useCallback(() => {
const onClickNewCustomer = () => {
history.push('/customers/new');
}, [history]);
};
// Handle Customers bulk delete button click.,
const handleBulkDelete = () => {
@@ -51,8 +56,8 @@ function CustomerActionsBar({
};
const handleTabChange = (viewId) => {
addCustomersTableQueries({
custom_view_id: viewId.id || null,
setCustomersTableState({
customViewId: viewId.id || null,
});
};

0
client/src/containers/Customers/CustomersEmptyStatus.js → client/src/containers/Customers/CustomersLanding/CustomersEmptyStatus.js
View File

28
client/src/containers/Customers/CustomersList.js → client/src/containers/Customers/CustomersLanding/CustomersList.js
View File

@@ -1,19 +1,20 @@
import React, { useEffect } from 'react';
import { useIntl } from 'react-intl';
import 'style/pages/Customers/List.scss';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import CustomerActionsBar from 'containers/Customers/CustomerActionsBar';
import CustomersActionsBar from './CustomersActionsBar';
import CustomersViewsTabs from './CustomersViewsTabs';
import CustomersTable from './CustomersTable';
import CustomersAlerts from 'containers/Customers/CustomersAlerts';
import CustomersViewPage from 'containers/Customers/CustomersViewPage';
import { CustomersListProvider } from './CustomersListProvider';
import withCustomers from 'containers/Customers/withCustomers';
import withCustomers from './withCustomers';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import { compose } from 'utils';
import 'style/pages/Customers/List.scss';
import { transformTableStateToQuery, compose } from 'utils';
/**
* Customers list.
@@ -23,21 +24,24 @@ function CustomersList({
changePageTitle,
// #withCustomers
customersTableQuery,
customersTableState,
}) {
const { formatMessage } = useIntl();
// Changes the dashboard page title once the page mount.
useEffect(() => {
changePageTitle(formatMessage({ id: 'customers_list' }));
}, [changePageTitle, formatMessage]);
return (
<CustomersListProvider query={customersTableQuery}>
<CustomerActionsBar />
<CustomersListProvider
query={transformTableStateToQuery(customersTableState)}
>
<CustomersActionsBar />
<DashboardPageContent>
<CustomersViewPage />
<CustomersViewsTabs />
<CustomersTable />
</DashboardPageContent>
<CustomersAlerts />
</CustomersListProvider>
@@ -46,5 +50,5 @@ function CustomersList({
export default compose(
withDashboardActions,
withCustomers(({ customersTableQuery }) => ({ customersTableQuery })),
withCustomers(({ customersTableState }) => ({ customersTableState })),
)(CustomersList);

18
client/src/containers/Customers/CustomersListProvider.js → client/src/containers/Customers/CustomersLanding/CustomersListProvider.js
View File

@@ -2,6 +2,7 @@ import React, { createContext } from 'react';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import { useResourceViews, useCustomers } from 'hooks/query';
import { isTableEmptyStatus } from 'utils';
const CustomersListContext = createContext();
@@ -9,14 +10,20 @@ function CustomersListProvider({ query, ...props }) {
// Fetch customers resource views and fields.
const {
data: customersViews,
isFetching: isCustomersViewsLoading,
isLoading: isCustomersViewsLoading,
} = useResourceViews('customers');
// Fetches customers data with pagination meta.
const {
data: { customers, pagination },
isFetching: isCustomersLoading,
} = useCustomers(query);
data: { customers, pagination, filterMeta },
isLoading: isCustomersLoading,
isFetching: isCustomersFetching,
} = useCustomers(query, { keepPreviousData: true });
// Detarmines the datatable empty status.
const isEmptyStatus = isTableEmptyStatus({
data: customers, pagination, filterMeta,
}) && !isCustomersFetching;
const state = {
customersViews,
@@ -25,8 +32,9 @@ function CustomersListProvider({ query, ...props }) {
isCustomersViewsLoading,
isCustomersLoading,
isCustomersFetching,
isEmptyStatus: false,
isEmptyStatus,
};
return (

118
client/src/containers/Customers/CustomersLanding/CustomersTable.js Normal file
View File

@@ -0,0 +1,118 @@
import React from 'react';
import classNames from 'classnames';
import { useHistory } from 'react-router-dom';
import CustomersEmptyStatus from './CustomersEmptyStatus';
import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
import { DataTable, Choose } from 'components';
import { CLASSES } from 'common/classes';
import withCustomersActions from './withCustomersActions';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { useCustomersListContext } from './CustomersListProvider';
import { ActionsMenu, useCustomersTableColumns } from './components';
import { compose } from 'utils';
/**
* Customers table.
*/
function CustomersTable({
// #withCustomersActions
setCustomersTableState,
// #withAlerts
openAlert
}) {
const history = useHistory();
// Customers table columns.
const columns = useCustomersTableColumns();
// Customers list context.
const {
isEmptyStatus,
customers,
pagination,
isCustomersLoading,
isCustomersFetching,
} = useCustomersListContext();
// Handle fetch data once the page index, size or sort by of the table change.
const handleFetchData = React.useCallback(
({ pageSize, pageIndex, sortBy }) => {
setCustomersTableState({
pageIndex,
pageSize,
sortBy,
});
},
[setCustomersTableState],
);
// Handles the customer delete action.
const handleCustomerDelete = (customer) => {
openAlert('customer-delete', { customerId: customer.id })
};
// Handle the customer edit action.
const handleCustomerEdit = (customer) => {
history.push(`/customers/${customer.id}/edit`);
};
return (
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
<Choose>
<Choose.When condition={isEmptyStatus}>
<CustomersEmptyStatus />
</Choose.When>
<Choose.Otherwise>
<DataTable
noInitialFetch={true}
columns={columns}
data={customers}
loading={isCustomersLoading}
headerLoading={isCustomersLoading}
progressBarLoading={isCustomersFetching}
onFetchData={handleFetchData}
selectionColumn={true}
expandable={false}
sticky={true}
spinnerProps={{ size: 30 }}
pagination={true}
manualSortBy={true}
manualPagination={true}
pagesCount={pagination.pagesCount}
autoResetSortBy={false}
autoResetPage={false}
TableLoadingRenderer={TableSkeletonRows}
TableHeaderSkeletonRenderer={TableSkeletonHeader}
payload={{
onDelete: handleCustomerDelete,
onEdit: handleCustomerEdit,
}}
ContextMenu={ActionsMenu}
/>
</Choose.Otherwise>
</Choose>
</div>
);
};
export default compose(
withAlertsActions,
withDialogActions,
withCustomersActions,
)(CustomersTable);

38
client/src/containers/Customers/CustomersViewsTabs.js → client/src/containers/Customers/CustomersLanding/CustomersViewsTabs.js
View File

@@ -1,38 +1,41 @@
import React, { useMemo } from 'react';
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
import { compose } from 'redux';
import { useParams } from 'react-router-dom';
import { pick } from 'lodash';
import { DashboardViewsTabs } from 'components';
import withCustomersActions from 'containers/Customers/withCustomersActions';
import withCustomers from './withCustomers';
import withCustomersActions from './withCustomersActions';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import { pick } from 'lodash';
import { useCustomersListContext } from './CustomersListProvider';
import { compose } from 'utils';
/**
* Customers views tabs.
*/
function CustomersViewsTabs({
// #withCustomersActions
addCustomersTableQueries,
setCustomersTableState,
// #withCustomers
customersTableState,
}) {
const { custom_view_id: customViewId = null } = useParams();
// Customers list context.
const { customersViews } = useCustomersListContext();
const tabs = useMemo(() =>
customersViews.map(
(view) => ({
...pick(view, ['name', 'id']),
}),
[customersViews],
),
[customersViews]
const tabs = useMemo(
() =>
customersViews.map((view) => pick(view, ['name', 'id']), [
customersViews,
]),
[customersViews],
);
// Handle tabs change.
const handleTabsChange = (viewId) => {
addCustomersTableQueries({
custom_view_id: viewId || null,
setCustomersTableState({
customViewId: viewId || null,
});
};
@@ -40,7 +43,7 @@ function CustomersViewsTabs({
<Navbar className="navbar--dashboard-views">
<NavbarGroup align={Alignment.LEFT}>
<DashboardViewsTabs
initialViewId={customViewId}
customViewId={customersTableState.customViewId}
resourceName={'customers'}
tabs={tabs}
onChange={handleTabsChange}
@@ -53,4 +56,5 @@ function CustomersViewsTabs({
export default compose(
withDashboardActions,
withCustomersActions,
withCustomers(({ customersTableState }) => ({ customersTableState })),
)(CustomersViewsTabs);

143
client/src/containers/Customers/CustomersLanding/components.js Normal file
View File

@@ -0,0 +1,143 @@
import React, { useMemo } from 'react';
import {
Button,
Popover,
Menu,
MenuItem,
MenuDivider,
Position,
Intent,
} from '@blueprintjs/core';
import { Icon, Money } from 'components';
import { safeCallback } from 'utils';
import { firstLettersArgs } from 'utils';
import { useIntl } from 'react-intl';
/**
* Actions menu.
*/
export function ActionsMenu({
row: { original },
payload: { onEdit, onDelete },
}) {
const { formatMessage } = useIntl();
return (
<Menu>
<MenuItem
icon={<Icon icon="reader-18" />}
text={formatMessage({ id: 'view_details' })}
/>
<MenuDivider />
<MenuItem
icon={<Icon icon="pen-18" />}
text={formatMessage({ id: 'edit_customer' })}
onClick={safeCallback(onEdit, original)}
/>
<MenuItem
icon={<Icon icon="trash-16" iconSize={16} />}
text={formatMessage({ id: 'delete_customer' })}
intent={Intent.DANGER}
onClick={safeCallback(onDelete, original)}
/>
</Menu>
);
}
/**
* Actions cell.
*/
export function ActionsCell(props) {
return (
<Popover
content={<ActionsMenu {...props} />}
position={Position.RIGHT_BOTTOM}
>
<Button icon={<Icon icon="more-h-16" iconSize={16} />} />
</Popover>
);
}
/**
* Avatar cell.
*/
export function AvatarCell(row) {
return <span className="avatar">{firstLettersArgs(row.display_name)}</span>;
}
/**
* Phone number accessor.
*/
export function PhoneNumberAccessor(row) {
return (
<div>
<div className={'work_phone'}>{row.work_phone}</div>
<div className={'personal_phone'}>{row.personal_phone}</div>
</div>
);
}
/**
* Balance accessor.
*/
export function BalanceAccessor(row) {
return <Money amount={row.closing_balance} currency={'USD'} />;
}
/**
* Retrieve customers table columns.
*/
export function useCustomersTableColumns() {
const { formatMessage } = useIntl();
return useMemo(
() => [
{
id: 'avatar',
Header: '',
accessor: AvatarCell,
className: 'avatar',
width: 50,
disableResizing: true,
disableSortBy: true,
},
{
id: 'display_name',
Header: formatMessage({ id: 'display_name' }),
accessor: 'display_name',
className: 'display_name',
width: 150,
},
{
id: 'company_name',
Header: formatMessage({ id: 'company_name' }),
accessor: 'company_name',
className: 'company_name',
width: 150,
},
{
id: 'phone_number',
Header: formatMessage({ id: 'phone_number' }),
accessor: PhoneNumberAccessor,
className: 'phone_number',
width: 100,
},
{
id: 'receivable_balance',
Header: formatMessage({ id: 'receivable_balance' }),
accessor: BalanceAccessor,
className: 'receivable_balance',
width: 100,
},
{
id: 'actions',
Cell: ActionsCell,
className: 'actions',
width: 70,
disableResizing: true,
disableSortBy: true,
},
],
[formatMessage],
);
}

14
client/src/containers/Customers/CustomersLanding/withCustomers.js Normal file
View File

@@ -0,0 +1,14 @@
import { connect } from 'react-redux';
import { getCustomersTableStateFactory } from 'store/customers/customers.selectors';
export default (mapState) => {
const getCustomersTableState = getCustomersTableStateFactory();
const mapStateToProps = (state, props) => {
const mapped = {
customersTableState: getCustomersTableState(state, props),
};
return mapState ? mapState(mapped, state, props) : mapped;
};
return connect(mapStateToProps);
};

10
client/src/containers/Customers/CustomersLanding/withCustomersActions.js Normal file
View File

@@ -0,0 +1,10 @@
import { connect } from 'react-redux';
import {
setCustomersTableState
} from 'store/customers/customers.actions';
export const mapDispatchToProps = (dispatch) => ({
setCustomersTableState: (state) => dispatch(setCustomersTableState(state)),
});
export default connect(null, mapDispatchToProps);

61
client/src/containers/Customers/CustomersViewPage.js
View File

@@ -1,61 +0,0 @@
import React, { useCallback } from 'react';
import { Route, Switch, useHistory } from 'react-router-dom';
import CustomersViewsTabs from 'containers/Customers/CustomersViewsTabs';
import CustomersTable from 'containers/Customers/CustomerTable';
import withCustomersActions from 'containers/Customers/withCustomersActions';
import withAlertsActions from 'containers/Alert/withAlertActions';
import { compose } from 'utils';
function CustomersViewPage({
// #withAlertsActions.
openAlert,
// #withCustomersActions
setSelectedRowsCustomers,
}) {
const history = useHistory();
// Handle click delete customer.
const handleDeleteCustomer = useCallback(
({ id }) => {
openAlert('customer-delete', { customerId: id });
},
[openAlert],
);
// Handle select customer rows.
const handleSelectedRowsChange = (selectedRows) => {
const selectedRowsIds = selectedRows.map((r) => r.id);
setSelectedRowsCustomers(selectedRowsIds);
};
const handleEditCustomer = useCallback(
(customer) => {
history.push(`/customers/${customer.id}/edit`);
},
[history],
);
return (
<Switch>
<Route
exact={true}
path={['/customers/:custom_view_id/custom_view', '/customers']}
>
<CustomersViewsTabs />
<CustomersTable
// onDeleteCustomer={handleDeleteCustomer}
// onEditCustomer={handleEditCustomer}
// onSelectedRowsChange={handleSelectedRowsChange}
/>
</Route>
</Switch>
);
}
export default compose(
withAlertsActions,
withCustomersActions,
)(CustomersViewPage);

32
client/src/containers/Customers/withCustomers.js
View File

@@ -1,32 +0,0 @@
import { connect } from 'react-redux';
import { getResourceViews } from 'store/customViews/customViews.selectors';
import {
getCustomerCurrentPageFactory,
getCustomerPaginationMetaFactory,
getCustomerTableQueryFactory,
getCustomersCurrentViewIdFactory,
} from 'store/customers/customers.selectors';
export default (mapState) => {
const getCustomersList = getCustomerCurrentPageFactory();
const getCustomerPaginationMeta = getCustomerPaginationMetaFactory();
const getCustomersCurrentViewId = getCustomersCurrentViewIdFactory();
const getCustomerTableQuery = getCustomerTableQueryFactory();
const mapStateToProps = (state, props) => {
const query = getCustomerTableQuery(state, props);
const mapped = {
customers: getCustomersList(state, props, query),
customersViews: getResourceViews(state, props, 'customers'),
customersTableQuery: query,
customerPagination: getCustomerPaginationMeta(state, props, query),
customersLoading: state.customers.loading,
customersItems: state.customers.items,
customersCurrentViewId: getCustomersCurrentViewId(state, props),
customersSelectedRows: state.customers.selectedRows,
};
return mapState ? mapState(mapped, state, props) : mapped;
};
return connect(mapStateToProps);
};

37
client/src/containers/Customers/withCustomersActions.js
View File

@@ -1,37 +0,0 @@
import { connect } from 'react-redux';
import {
fetchCustomers,
fetchCustomer,
submitCustomer,
editCustomer,
deleteCustomer,
deleteBulkCustomers,
} from 'store/customers/customers.actions';
import t from 'store/types';
export const mapDispatchToProps = (dispatch) => ({
requestFetchCustomers: (query) => dispatch(fetchCustomers({ query })),
requestDeleteCustomer: (id) => dispatch(deleteCustomer({ id })),
requestDeleteBulkCustomers: (ids) => dispatch(deleteBulkCustomers({ ids })),
requestSubmitCustomer: (form) => dispatch(submitCustomer({ form })),
requestEditCustomer: (id, form) => dispatch(editCustomer({ id, form })),
requestFetchCustomer: (id) => dispatch(fetchCustomer({ id })),
addCustomersTableQueries: (queries) =>
dispatch({
type: t.CUSTOMERS_TABLE_QUERIES_ADD,
payload: { queries },
}),
changeCustomerView: (id) => {
dispatch({
type: t.CUSTOMERS_SET_CURRENT_VIEW,
currentViewId: parseInt(id, 10),
});
},
setSelectedRowsCustomers: (selectedRows) =>
dispatch({
type: t.CUSTOMER_SELECTED_ROWS_SET,
payload: { selectedRows },
}),
});
export default connect(null, mapDispatchToProps);

10
client/src/containers/Dialogs/AccountFormDialog/AccountFormDialogContent.js
View File

@@ -105,10 +105,12 @@ function AccountFormDialogContent({
});
};
// Handle request error.
const handleError = (errors) => {
// const errorsTransformed = transformApiErrors(errors);
// setErrors({ ...errorsTransformed });
// setSubmitting(false);
const handleError = (error) => {
const { response: { data: { errors } } } = error;
const errorsTransformed = transformApiErrors(errors);
setErrors({ ...errorsTransformed });
setSubmitting(false);
};
if (accountId) {
editAccountMutate(accountId, form)

8
client/src/containers/Dialogs/JournalNumberDialog/JournalNumberDialogContent.js
View File

@@ -7,7 +7,7 @@ import ReferenceNumberForm from 'containers/JournalNumber/ReferenceNumberForm';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withSettingsActions from 'containers/Settings/withSettingsActions';
import withSettings from 'containers/Settings/withSettings';
import withManualJournalsActions from 'containers/Accounting/withManualJournalsActions';
// import withManualJournalsActions from 'containers/Accounting/withManualJournalsActions';
import { compose, optionsMapToArray } from 'utils';
@@ -28,8 +28,6 @@ function JournalNumberDialogContent({
// #withDialogActions
closeDialog,
// #withManualJournalsActions
setJournalNumberChanged,
}) {
const fetchSettings = useQuery(
['settings'],
@@ -47,7 +45,7 @@ function JournalNumberDialogContent({
setTimeout(() => {
queryCache.invalidateQueries('settings');
setJournalNumberChanged(true);
// setJournalNumberChanged(true);
}, 250);
}).catch(() => {
setSubmitting(false);
@@ -77,5 +75,5 @@ export default compose(
nextNumber: manualJournalsSettings?.nextNumber,
numberPrefix: manualJournalsSettings?.numberPrefix,
})),
withManualJournalsActions,
// withManualJournalsActions,
)(JournalNumberDialogContent);

285
client/src/containers/Expenses/ExpenseDataTable.js
View File

@@ -1,285 +0,0 @@
import React, { useCallback, useMemo } from 'react';
import {
Intent,
Button,
Classes,
Popover,
Tooltip,
Menu,
MenuItem,
MenuDivider,
Position,
Tag,
} from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import moment from 'moment';
import classNames from 'classnames';
import Icon from 'components/Icon';
import { compose, saveInvoke } from 'utils';
import { useExpensesListContext } from './ExpensesListProvider';
import { If, Money, Choose } from 'components';
import { CLASSES } from 'common/classes';
import DataTable from 'components/DataTable';
import ExpensesEmptyStatus from './ExpensesEmptyStatus';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withExpensesActions from 'containers/Expenses/withExpensesActions';
import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
/**
* Expenses datatable.
*/
function ExpensesDataTable({
// #withExpensesActions
addExpensesTableQueries,
// #ownProps
onEditExpense,
onDeleteExpense,
onPublishExpense,
onSelectedRowsChange,
}) {
const { formatMessage } = useIntl();
const { expenses, isExpensesLoading } = useExpensesListContext();
// Handle fetch data of manual jouranls datatable.
const handleFetchData = useCallback(
({ pageIndex, pageSize, sortBy }) => {
addExpensesTableQueries({
...(sortBy.length > 0
? {
column_sort_by: sortBy[0].id,
sort_order: sortBy[0].desc ? 'desc' : 'asc',
}
: {}),
page_size: pageSize,
page: pageIndex + 1,
});
},
[addExpensesTableQueries],
);
const handlePublishExpense = useCallback(
(expense) => () => {
saveInvoke(onPublishExpense, expense);
},
[onPublishExpense],
);
const handleEditExpense = useCallback(
(expense) => () => {
saveInvoke(onEditExpense, expense);
},
[onEditExpense],
);
const handleDeleteExpense = useCallback(
(expense) => () => {
saveInvoke(onDeleteExpense, expense);
},
[onDeleteExpense],
);
const actionMenuList = useCallback(
(expense) => (
<Menu>
<MenuItem
icon={<Icon icon="reader-18" />}
text={formatMessage({ id: 'view_details' })}
/>
<MenuDivider />
<If condition={!expense.is_published}>
<MenuItem
icon={<Icon icon={'arrow-to-top'} size={16} />}
text={formatMessage({ id: 'publish_expense' })}
onClick={handlePublishExpense(expense)}
/>
</If>
<MenuItem
icon={<Icon icon="pen-18" />}
text={formatMessage({ id: 'edit_expense' })}
onClick={handleEditExpense(expense)}
/>
<MenuItem
icon={<Icon icon="trash-16" iconSize={16} />}
text={formatMessage({ id: 'delete_expense' })}
intent={Intent.DANGER}
onClick={handleDeleteExpense(expense)}
/>
</Menu>
),
[
handleEditExpense,
handleDeleteExpense,
handlePublishExpense,
formatMessage,
],
);
const onRowContextMenu = useCallback(
(cell) => {
return actionMenuList(cell.row.original);
},
[actionMenuList],
);
const expenseAccountAccessor = (_expense) => {
if (_expense.categories.length === 1) {
return _expense.categories[0].expense_account.name;
} else if (_expense.categories.length > 1) {
const mutliCategories = _expense.categories.map((category) => (
<div>
- {category.expense_account.name} ${category.amount}
</div>
));
return (
<Tooltip content={mutliCategories}>{'- Multi Categories -'}</Tooltip>
);
}
};
const columns = useMemo(
() => [
{
id: 'payment_date',
Header: formatMessage({ id: 'payment_date' }),
accessor: (r) => moment(r.payment_date).format('YYYY MMM DD'),
width: 140,
className: 'payment_date',
},
{
id: 'total_amount',
Header: formatMessage({ id: 'full_amount' }),
accessor: (r) => (
<Money amount={r.total_amount} currency={r.currency_code} />
),
className: 'total_amount',
width: 150,
},
{
id: 'payment_account_id',
Header: formatMessage({ id: 'payment_account' }),
accessor: 'payment_account.name',
className: 'payment_account',
width: 150,
},
{
id: 'expense_account_id',
Header: formatMessage({ id: 'expense_account' }),
accessor: expenseAccountAccessor,
width: 160,
className: 'expense_account',
},
{
id: 'publish',
Header: formatMessage({ id: 'publish' }),
accessor: (r) => {
return r.is_published ? (
<Tag minimal={true}>
<T id={'published'} />
</Tag>
) : (
<Tag minimal={true} intent={Intent.WARNING}>
<T id={'draft'} />
</Tag>
);
},
width: 100,
className: 'publish',
},
{
id: 'description',
Header: formatMessage({ id: 'description' }),
accessor: (row) => (
<If condition={row.description}>
<Tooltip
className={Classes.TOOLTIP_INDICATOR}
content={row.description}
position={Position.TOP}
hoverOpenDelay={250}
>
<Icon icon={'file-alt'} iconSize={16} />
</Tooltip>
</If>
),
disableSorting: true,
width: 150,
className: 'description',
},
{
id: 'actions',
Header: '',
Cell: ({ cell }) => (
<Popover
content={actionMenuList(cell.row.original)}
position={Position.RIGHT_BOTTOM}
>
<Button icon={<Icon icon="more-h-16" iconSize={16} />} />
</Popover>
),
className: 'actions',
width: 50,
disableResizing: true,
},
],
[actionMenuList, formatMessage],
);
const handleSelectedRowsChange = useCallback(
(selectedRows) => {
saveInvoke(
onSelectedRowsChange,
selectedRows.map((s) => s.original),
);
},
[onSelectedRowsChange],
);
return (
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
<Choose>
<Choose.When condition={false}>
<ExpensesEmptyStatus />
</Choose.When>
<Choose.Otherwise>
<DataTable
columns={columns}
data={expenses}
loading={isExpensesLoading}
manualSortBy={true}
selectionColumn={true}
noInitialFetch={true}
sticky={true}
onSelectedRowsChange={handleSelectedRowsChange}
onFetchData={handleFetchData}
rowContextMenu={onRowContextMenu}
TableLoadingRenderer={TableSkeletonRows}
pagination={true}
// pagesCount={expensesPagination.pagesCount}
autoResetSortBy={false}
autoResetPage={false}
// initialPageSize={expensesTableQuery.page_size}
// initialPageIndex={expensesTableQuery.page - 1}
/>
</Choose.Otherwise>
</Choose>
</div>
);
}
export default compose(
withDialogActions,
withDashboardActions,
withExpensesActions,
)(ExpensesDataTable);

0
client/src/containers/Expenses/ExpenseFloatingActions.js → client/src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.js
View File

7
client/src/containers/Expenses/ExpenseForm.js → client/src/containers/Expenses/ExpenseForm/ExpenseForm.js
View File

@@ -20,7 +20,6 @@ import withMediaActions from 'containers/Media/withMediaActions';
import withSettings from 'containers/Settings/withSettings';
import AppToaster from 'components/AppToaster';
import Dragzone from 'components/Dragzone';
import {
CreateExpenseFormSchema,
EditExpenseFormSchema,
@@ -52,10 +51,6 @@ const defaultInitialValues = {
* Expense form.
*/
function ExpenseForm({
// #withMedia
requestSubmitMedia,
requestDeleteMedia,
// #withDashboard
changePageTitle,
@@ -210,7 +205,7 @@ function ExpenseForm({
);
}
export default compose(
export default compose(
withDashboardActions,
withMediaActions,
withSettings(({ organizationSettings, expenseSettings }) => ({

0
client/src/containers/Expenses/ExpenseForm.schema.js → client/src/containers/Expenses/ExpenseForm/ExpenseForm.schema.js
View File

0
client/src/containers/Expenses/ExpenseFormBody.js → client/src/containers/Expenses/ExpenseForm/ExpenseFormBody.js
View File

120
client/src/containers/Expenses/ExpenseFormEntries.js → client/src/containers/Expenses/ExpenseForm/ExpenseFormEntries.js
View File

@@ -16,76 +16,8 @@ import {
InputGroupCell,
} from 'components/DataTableCells';
import { useExpenseFormContext } from './ExpenseFormPageProvider';
import { useExpenseFormTableColumns } from './components';
const ExpenseCategoryHeaderCell = () => {
return (
<>
<T id={'expense_category'} />
<Hint />
</>
);
};
// Actions cell renderer.
const ActionsCellRenderer = ({
row: { index },
column: { id },
cell: { value: initialValue },
data,
payload,
}) => {
if (data.length <= index + 1) {
return '';
}
const onClickRemoveRole = () => {
payload.removeRow(index);
};
return (
<Tooltip content={<T id={'remove_the_line'} />} position={Position.LEFT}>
<Button
icon={<Icon icon="times-circle" iconSize={14} />}
iconSize={14}
className="ml2"
minimal={true}
intent={Intent.DANGER}
onClick={onClickRemoveRole}
/>
</Tooltip>
);
};
// Total text cell renderer.
const TotalExpenseCellRenderer = (chainedComponent) => (props) => {
if (props.data.length <= props.row.index + 1) {
return (
<span>
<T id={'total_currency'} values={{ currency: 'USD' }} />
</span>
);
}
return chainedComponent(props);
};
const NoteCellRenderer = (chainedComponent) => (props) => {
if (props.data.length === props.row.index + 1) {
return '';
}
return chainedComponent(props);
};
const TotalAmountCellRenderer = (chainedComponent, type) => (props) => {
if (props.data.length === props.row.index + 1) {
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 chainedComponent(props);
};
export default function ExpenseTable({
// #ownPorps
@@ -110,55 +42,7 @@ export default function ExpenseTable({
const tableRows = useMemo(() => [...rows, { rowType: 'total' }], [rows]);
// 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: ExpenseCategoryHeaderCell,
id: 'expense_account_id',
accessor: 'expense_account_id',
Cell: TotalExpenseCellRenderer(AccountsListFieldCell),
className: 'expense_account_id',
disableSortBy: true,
width: 40,
filterAccountsByRootType: ['expense'],
},
{
Header: formatMessage({ id: 'amount_currency' }, { currency: 'USD' }),
accessor: 'amount',
Cell: TotalAmountCellRenderer(MoneyFieldCell, 'amount'),
disableSortBy: true,
width: 40,
className: 'amount',
},
{
Header: formatMessage({ id: 'description' }),
accessor: 'description',
Cell: NoteCellRenderer(InputGroupCell),
disableSortBy: true,
className: 'description',
width: 100,
},
{
Header: '',
accessor: 'action',
Cell: ActionsCellRenderer,
className: 'actions',
disableSortBy: true,
disableResizing: true,
width: 45,
},
],
[formatMessage],
);
const columns = useExpenseFormTableColumns();
// Handles update datatable data.
const handleUpdateData = useCallback(

0
client/src/containers/Expenses/ExpenseFormEntriesField.js → client/src/containers/Expenses/ExpenseForm/ExpenseFormEntriesField.js
View File

0
client/src/containers/Expenses/ExpenseFormFooter.js → client/src/containers/Expenses/ExpenseForm/ExpenseFormFooter.js
View File

0
client/src/containers/Expenses/ExpenseFormHeader.js → client/src/containers/Expenses/ExpenseForm/ExpenseFormHeader.js
View File

0
client/src/containers/Expenses/ExpenseFormHeaderFields.js → client/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.js
View File

17
client/src/containers/Expenses/ExpenseFormPage.js → client/src/containers/Expenses/ExpenseForm/ExpenseFormPage.js
View File

@@ -36,24 +36,9 @@ function ExpenseFormPage({
};
}, [resetSidebarPreviousExpand, setSidebarShrink, setDashboardBackLink]);
const handleFormSubmit = useCallback(
(payload) => {
payload.redirect && history.push('/expenses-list');
},
[history],
);
const handleCancel = useCallback(() => {
history.goBack();
}, [history]);
return (
<ExpenseFormPageProvider expenseId={id}>
<ExpenseForm
onFormSubmit={handleFormSubmit}
expenseId={id}
onCancelForm={handleCancel}
/>
<ExpenseForm />
</ExpenseFormPageProvider>
);
}

0
client/src/containers/Expenses/ExpenseFormPageProvider.js → client/src/containers/Expenses/ExpenseForm/ExpenseFormPageProvider.js
View File

132
client/src/containers/Expenses/ExpenseForm/components.js Normal file
View File

@@ -0,0 +1,132 @@
const ExpenseCategoryHeaderCell = () => {
return (
<>
<T id={'expense_category'} />
<Hint />
</>
);
};
// Actions cell renderer.
const ActionsCellRenderer = ({
row: { index },
column: { id },
cell: { value: initialValue },
data,
payload,
}) => {
if (data.length <= index + 1) {
return '';
}
const onClickRemoveRole = () => {
payload.removeRow(index);
};
return (
<Tooltip content={<T id={'remove_the_line'} />} position={Position.LEFT}>
<Button
icon={<Icon icon="times-circle" iconSize={14} />}
iconSize={14}
className="ml2"
minimal={true}
intent={Intent.DANGER}
onClick={onClickRemoveRole}
/>
</Tooltip>
);
};
// Total text cell renderer.
const TotalExpenseCellRenderer = (chainedComponent) => (props) => {
if (props.data.length <= props.row.index + 1) {
return (
<span>
<T id={'total_currency'} values={{ currency: 'USD' }} />
</span>
);
}
return chainedComponent(props);
};
/**
* Note cell renderer.
*/
const NoteCellRenderer = (chainedComponent) => (props) => {
if (props.data.length === props.row.index + 1) {
return '';
}
return chainedComponent(props);
};
/**
* Total amount cell renderer.
*/
const TotalAmountCellRenderer = (chainedComponent, type) => (props) => {
if (props.data.length === props.row.index + 1) {
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 chainedComponent(props);
};
export function useExpenseFormTableColumns() {
return React.useMemo(
() => [
{
Header: '#',
accessor: 'index',
Cell: ({ row: { index } }) => <span>{index + 1}</span>,
className: 'index',
width: 40,
disableResizing: true,
disableSortBy: true,
},
{
Header: ExpenseCategoryHeaderCell,
id: 'expense_account_id',
accessor: 'expense_account_id',
Cell: TotalExpenseCellRenderer(AccountsListFieldCell),
className: 'expense_account_id',
disableSortBy: true,
width: 40,
filterAccountsByRootType: ['expense'],
},
{
Header: formatMessage({ id: 'amount_currency' }, { currency: 'USD' }),
accessor: 'amount',
Cell: TotalAmountCellRenderer(MoneyFieldCell, 'amount'),
disableSortBy: true,
width: 40,
className: 'amount',
},
{
Header: formatMessage({ id: 'description' }),
accessor: 'description',
Cell: NoteCellRenderer(InputGroupCell),
disableSortBy: true,
className: 'description',
width: 100,
},
{
Header: '',
accessor: 'action',
Cell: ActionsCellRenderer,
className: 'actions',
disableSortBy: true,
disableResizing: true,
width: 45,
},
],
[formatMessage],
)
}

0
client/src/containers/Expenses/utils.js → client/src/containers/Expenses/ExpenseForm/utils.js
View File

12
client/src/containers/Expenses/ExpensesAlerts.js
View File

@@ -1,17 +1,15 @@
import React from 'react';
import ExpenseDeleteAlert from 'alerts/expenses/ExpenseDeleteAlert';
import ExpensePublishAlert from 'alerts/expenses/ExpensePublishAlert';
import ExpenseDeleteAlert from 'containers/Alerts/Expenses/ExpenseDeleteAlert';
import ExpensePublishAlert from 'containers/Alerts/Expenses/ExpensePublishAlert';
/**
* Accounts alert.
*/
export default function ExpensesAlerts({
}) {
export default function ExpensesAlerts({}) {
return (
<div class="expenses-alerts">
<ExpenseDeleteAlert name={'expense-delete'} />
<ExpensePublishAlert name={'expense-publish'} />
</div>
)
}
);
}

Some files were not shown because too many files have changed in this diff Show More