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

feat(FinancialReports): add loading progress bar.

Browse Source 
fix(preformance): Optimize preformance of virtualized list.
fix(preformance): Optimize financial reports preformance.
This commit is contained in:
a.bouhuolia
2021-03-16 17:27:27 +02:00
parent f1cf02c9df
commit 42230fe64b
73 changed files with 969 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,7 +19,7 @@ function App({ locale }) {
const queryConfig = {
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
refetchOnWindowFocus: true,
staleTime: 30000,
},
},

21
client/src/components/Dashboard/Dashboard.js
View File

@@ -4,8 +4,6 @@ import { useQuery } from 'react-query';
import 'style/pages/Dashboard/Dashboard.scss';
import DashboardLoadingIndicator from './DashboardLoadingIndicator';
import Sidebar from 'components/Sidebar/Sidebar';
import DashboardContent from 'components/Dashboard/DashboardContent';
import DialogsContainer from 'components/DialogsContainer';
@@ -13,22 +11,15 @@ import PreferencesPage from 'components/Preferences/PreferencesPage';
import Search from 'containers/GeneralSearch/Search';
import DashboardSplitPane from 'components/Dashboard/DashboardSplitePane';
import GlobalHotkeys from './GlobalHotkeys';
import withSettingsActions from 'containers/Settings/withSettingsActions';
import DashboardProvider from './DashboardProvider';
import DrawersContainer from 'components/DrawersContainer';
import { compose } from 'utils';
/**
* Dashboard page.
*/
function Dashboard({
// #withSettings
requestFetchOptions,
}) {
const fetchOptions = useQuery(['options'], () => requestFetchOptions());
export default function Dashboard() {
return (
<DashboardLoadingIndicator isLoading={fetchOptions.isFetching}>
<DashboardProvider>
<Switch>
<Route path="/preferences">
<DashboardSplitPane>
@@ -49,8 +40,6 @@ function Dashboard({
<DialogsContainer />
<GlobalHotkeys />
<DrawersContainer />
</DashboardLoadingIndicator>
</DashboardProvider>
);
}
export default compose(withSettingsActions)(Dashboard);
}

2
client/src/components/Dashboard/DashboardLoadingIndicator.js
View File

@@ -10,7 +10,7 @@ export default function DashboardLoadingIndicator({
className,
children,
}) {
return (
return (
<Choose>
<Choose.When condition={isLoading}>
<BigcapitalLoading />

16
client/src/components/Dashboard/DashboardProvider.js Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react';
import DashboardLoadingIndicator from './DashboardLoadingIndicator';
import { useSettings } from 'hooks/query';
/**
* Dashboard provider.
*/
export default function DashboardProvider({ children }) {
const { isLoading } = useSettings();
return (
<DashboardLoadingIndicator isLoading={isLoading}>
{ children }
</DashboardLoadingIndicator>
)
}

40
client/src/components/Dashboard/PrivatePages.js
View File

@@ -1,46 +1,21 @@
import React from 'react';
import { Switch, Route } from 'react-router';
import { useQuery } from 'react-query';
import Dashboard from 'components/Dashboard/Dashboard';
import SetupWizardPage from 'containers/Setup/WizardSetupPage';
import DashboardLoadingIndicator from 'components/Dashboard/DashboardLoadingIndicator';
import withOrganizationActions from 'containers/Organization/withOrganizationActions';
import withSubscriptionsActions from 'containers/Subscriptions/withSubscriptionsActions';
import EnsureOrganizationIsReady from 'components/Guards/EnsureOrganizationIsReady';
import EnsureOrganizationIsNotReady from 'components/Guards/EnsureOrganizationIsNotReady';
import { compose } from 'utils';
import { PrivatePagesProvider } from './PrivatePagesProvider';
import 'style/pages/Dashboard/Dashboard.scss';
/**
* Dashboard inner private pages.
*/
function DashboardPrivatePages({
// #withOrganizationActions
requestAllOrganizations,
// #withSubscriptionsActions
requestFetchSubscriptions,
}) {
// Fetches all user's organizatins.
const fetchOrganizations = useQuery(
['organizations'], () => requestAllOrganizations(),
);
// Fetches organization subscriptions.
const fetchSuscriptions = useQuery(
['susbcriptions'], () => requestFetchSubscriptions(),
)
export default function DashboardPrivatePages() {
return (
<DashboardLoadingIndicator isLoading={
fetchOrganizations.isFetching ||
fetchSuscriptions.isFetching
}>
<PrivatePagesProvider>
<Switch>
<Route path={'/setup'}>
<EnsureOrganizationIsNotReady>
@@ -54,11 +29,6 @@ function DashboardPrivatePages({
</EnsureOrganizationIsReady>
</Route>
</Switch>
</DashboardLoadingIndicator>
</PrivatePagesProvider>
);
}
export default compose(
withOrganizationActions,
withSubscriptionsActions,
)(DashboardPrivatePages);
}

17
client/src/components/Dashboard/PrivatePagesProvider.js Normal file
View File

@@ -0,0 +1,17 @@
import React from 'react';
import DashboardLoadingIndicator from 'components/Dashboard/DashboardLoadingIndicator';
import { useCurrentOrganization } from '../../hooks/query/organization';
/**
* Private pages provider.
*/
export function PrivatePagesProvider({ children }) {
// Fetches the current user's organization.
const { isLoading } = useCurrentOrganization();
return (
<DashboardLoadingIndicator isLoading={isLoading}>
{children}
</DashboardLoadingIndicator>
)
}

2
client/src/components/Datatable/TableCell.js
View File

@@ -62,7 +62,7 @@ export default function TableCell({
'cell-inner',
)}
style={{
'padding-left':
paddingLeft:
isExpandColumn && expandable
? `${depth * expandColumnSpace}rem`
: '',

6
client/src/components/Datatable/TableHeader.js
View File

@@ -66,7 +66,7 @@ function TableHeaderGroup({ headerGroup }) {
return (
<div {...headerGroup.getHeaderGroupProps()} className="tr">
{headerGroup.headers.map((column, index) => (
<TableHeaderCell column={column} index={index} />
<TableHeaderCell key={index} column={column} index={index} />
))}
</div>
);
@@ -87,8 +87,8 @@ export default function TableHeader() {
return (
<ScrollSyncPane>
<div className="thead">
{headerGroups.map((headerGroup) => (
<TableHeaderGroup headerGroup={headerGroup} />
{headerGroups.map((headerGroup, index) => (
<TableHeaderGroup key={index} headerGroup={headerGroup} />
))}
<If condition={progressBarLoading}>
<MaterialProgressBar />

86
client/src/components/Datatable/TableRow.js
View File

@@ -1,23 +1,18 @@
import React, { useContext } from 'react';
import React, { useCallback, useContext } from 'react';
import { ContextMenu } from 'components';
import classNames from 'classnames';
import useContextMenu from 'react-use-context-menu';
import TableContext from './TableContext';
import { saveInvoke } from 'utils';
import { ContextMenu } from 'components';
import { saveInvoke, ConditionalWrapper } from 'utils';
/**
* Table row.
* Table row context wrapper.
*/
export default function TableRow({ row, className, style }) {
function TableRowContextMenu({ children, row }) {
// Table context.
const {
props: {
TableCellRenderer,
rowContextMenu,
rowClassNames,
ContextMenu: ContextMenuContent,
},
props: { ContextMenu: ContextMenuContent },
table,
} = useContext(TableContext);
@@ -32,33 +27,64 @@ export default function TableRow({ row, className, style }) {
collect: () => 'Title',
});
const handleClose = useCallback(() => {
setVisible(false);
}, [setVisible]);
return (
<div
{...row.getRowProps({
className: classNames(
'tr',
{
'is-expanded': row.isExpanded && row.canExpand,
},
saveInvoke(rowClassNames, row),
className,
),
style,
})}
{...bindTrigger}
>
{row.cells.map((cell, index) => (
<TableCellRenderer cell={cell} row={row} index={index + 1} />
))}
<div class="tr-context" {...bindTrigger}>
{children}
<ContextMenu
bindMenu={bindMenu}
isOpen={isVisible}
coords={coords}
onClosed={() => setVisible(false)}
onClosed={handleClose}
>
<ContextMenuContent {...table} row={row} />
</ContextMenu>
</div>
);
}
/**
* Table row.
*/
export default function TableRow({ row, className, style }) {
const {
props: {
TableCellRenderer,
rowClassNames,
ContextMenu: ContextMenuContent,
},
} = useContext(TableContext);
return (
<div
{...row.getRowProps({
className: classNames(
'tr',
{ 'is-expanded': row.isExpanded && row.canExpand },
saveInvoke(rowClassNames, row),
className,
),
style,
})}
>
<ConditionalWrapper
condition={ContextMenuContent}
wrapper={TableRowContextMenu}
row={row}
>
{row.cells.map((cell, index) => (
<TableCellRenderer
key={index}
cell={cell}
row={row}
index={index + 1}
/>
))}
</ConditionalWrapper>
</div>
);
}

4
client/src/components/Datatable/TableRows.js
View File

@@ -10,8 +10,8 @@ export default function TableRows() {
props: { TableRowRenderer, TableCellRenderer },
} = useContext(TableContext);
return page.map((row) => {
return page.map((row, index) => {
prepareRow(row);
return <TableRowRenderer row={row} TableCellRenderer={TableCellRenderer} />;
return <TableRowRenderer key={index} row={row} TableCellRenderer={TableCellRenderer} />;
});
}

59
client/src/components/Datatable/TableVirtualizedRows.js
View File

@@ -3,11 +3,13 @@ import { WindowScroller, AutoSizer, List } from 'react-virtualized';
import { CLASSES } from 'common/classes';
import TableContext from './TableContext';
/**
* Table virtualized list row.
*/
function TableVirtualizedListRow({
index,
isScrolling,
isVisible,
key,
style,
}) {
const {
@@ -18,7 +20,7 @@ function TableVirtualizedListRow({
const row = page[index];
prepareRow(row);
return <TableRowRenderer row={row} style={style} />;
return (<TableRowRenderer row={row} style={style} />);
}
/**
@@ -27,39 +29,38 @@ function TableVirtualizedListRow({
export default function TableVirtualizedListRows() {
const {
table: { page },
props: { vListrowHeight, vListOverscanRowCount }
props: { vListrowHeight, vListOverscanRowCount },
} = useContext(TableContext);
// Dashboard content pane.
const dashboardContentPane = document.querySelector(
const dashboardContentPane = React.useMemo(()=> document.querySelector(
`.${CLASSES.DASHBOARD_CONTENT_PANE}`,
);
), []);
const rowRenderer = React.useCallback(({ key, ...args }) => (
<TableVirtualizedListRow {...args} key={key} />
), []);
return (
<WindowScroller scrollElement={dashboardContentPane}>
{({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (
<div className={'WindowScrollerWrapper'}>
<AutoSizer disableHeight>
{({ width }) => (
<div ref={registerChild}>
<List
autoHeight={true}
className={'List'}
height={height}
isScrolling={isScrolling}
onScroll={onChildScroll}
overscanRowCount={vListOverscanRowCount}
rowCount={page.length}
rowHeight={vListrowHeight}
rowRenderer={({ ...args }) => {
return <TableVirtualizedListRow {...args} />;
}}
scrollTop={scrollTop}
width={width}
/>
</div>
)}
</AutoSizer>
</div>
{({ height, isScrolling, onChildScroll, scrollTop }) => (
<AutoSizer disableHeight>
{({ width }) => (
<List
autoHeight={true}
className={'List'}
height={height}
isScrolling={isScrolling}
onScroll={onChildScroll}
overscanRowCount={vListOverscanRowCount}
rowCount={page.length}
rowHeight={vListrowHeight}
rowRenderer={rowRenderer}
scrollTop={scrollTop}
width={width}
/>
)}
</AutoSizer>
)}
</WindowScroller>
);

77
client/src/components/FinancialSheet.js
View File

@@ -7,7 +7,6 @@ import 'style/pages/FinancialStatements/FinancialSheet.scss';
import { If, LoadingIndicator, MODIFIER } from 'components';
export default function FinancialSheet({
companyName,
sheetType,
@@ -57,49 +56,47 @@ export default function FinancialSheet({
'is-full-width': fullWidth,
})}
>
<LoadingIndicator loading={loading} spinnerSize={34} />
<div
className={classnames('financial-sheet__inner', {
'is-loading': loading,
})}
>
<If condition={!!companyName}>
<h1 class="financial-sheet__title">{companyName}</h1>
</If>
<If condition={!!sheetType}>
<h6 class="financial-sheet__sheet-type">{sheetType}</h6>
</If>
<div class="financial-sheet__date">
<If condition={asDate}>
<T id={'as'} /> {formattedAsDate}
{loading ? (
<LoadingIndicator loading={loading} spinnerSize={34} />
) : (
<div className={classnames('financial-sheet__inner')}>
<If condition={!!companyName}>
<h1 class="financial-sheet__title">{companyName}</h1>
</If>
<If condition={fromDate && toDate}>
<T id={'from'} /> {formattedFromDate} | <T id={'to'} />{' '}
{formattedToDate}
<If condition={!!sheetType}>
<h6 class="financial-sheet__sheet-type">{sheetType}</h6>
</If>
<div class="financial-sheet__date">
<If condition={asDate}>
<T id={'as'} /> {formattedAsDate}
</If>
<If condition={fromDate && toDate}>
<T id={'from'} /> {formattedFromDate} | <T id={'to'} />{' '}
{formattedToDate}
</If>
</div>
<div class="financial-sheet__table">{children}</div>
<div class="financial-sheet__accounting-basis">{accountingBasis}</div>
<div class="financial-sheet__footer">
<If condition={basisLabel}>
<span class="financial-sheet__basis">
<T id={'accounting_basis'} /> {basisLabel}
</span>
</If>
<If condition={currentDate}>
<span class="financial-sheet__current-date">
{moment().format('YYYY MMM DD HH:MM')}
</span>
</If>
</div>
</div>
<div class="financial-sheet__table">{children}</div>
<div class="financial-sheet__accounting-basis">{accountingBasis}</div>
<div class="financial-sheet__footer">
<If condition={basisLabel}>
<span class="financial-sheet__basis">
<T id={'accounting_basis'} /> {basisLabel}
</span>
</If>
<If condition={currentDate}>
<span class="financial-sheet__current-date">
{moment().format('YYYY MMM DD HH:MM')}
</span>
</If>
</div>
</div>
)}
</div>
);
}

3
client/src/components/Guards/EnsureOrganizationIsNotReady.js
View File

@@ -5,6 +5,9 @@ import { compose } from 'utils';
import withAuthentication from 'containers/Authentication/withAuthentication';
import withOrganization from 'containers/Organization/withOrganization';
/**
* Ensures organization is not ready.
*/
function EnsureOrganizationIsNotReady({
children,

6
client/src/components/Guards/PrivateRoute.js
View File

@@ -11,11 +11,7 @@ export default function PrivateRoute({ component: Component, ...rest }) {
{isAuthenticated ? (
<Component />
) : (
<Redirect
to={{
pathname: '/auth/login',
}}
/>
<Redirect to={{ pathname: '/auth/login' }} />
)}
</BodyClassName>
);

2
client/src/components/Utils/If.js
View File

@@ -5,7 +5,7 @@ const If = props => props.condition
? (props.render ? props.render() : props.children) : null;
If.propTypes = {
condition: PropTypes.bool.isRequired,
// condition: PropTypes.bool.isRequired,
children: PropTypes.node,
render: PropTypes.func
};

4
client/src/components/index.js
View File

@@ -53,6 +53,7 @@ import Drawer from './Drawer/Drawer';
import DrawerSuspense from './Drawer/DrawerSuspense';
import Postbox from './Postbox';
import AccountsSuggestField from './AccountsSuggestField';
import MaterialProgressBar from './MaterialProgressBar';
const Hint = FieldHint;
@@ -112,5 +113,6 @@ export {
Drawer,
DrawerSuspense,
Postbox,
AccountsSuggestField
AccountsSuggestField,
MaterialProgressBar
};

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

@@ -99,7 +99,7 @@ function AccountsDataTable({
// #TableVirtualizedListRows props.
vListrowHeight={42}
vListOverscanRowCount={10}
vListOverscanRowCount={0}
payload={{
onEdit: handleEditAccount,

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

@@ -1,4 +1,4 @@
import React from 'react';
import React, { memo } from 'react';
import {
Position,
Classes,
@@ -75,7 +75,7 @@ export function ActionsMenu({
/**
* Actions cell.
*/
export const ActionsCell = (props) => {
export function ActionsCell(props) {
return (
<Popover
position={Position.RIGHT_BOTTOM}
@@ -84,7 +84,7 @@ export const ActionsCell = (props) => {
<Button icon={<Icon icon="more-h-16" iconSize={16} />} />
</Popover>
);
};
}
/**
* Normal cell.

3
client/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.js
View File

@@ -10,6 +10,7 @@ import APAgingSummaryActionsBar from './APAgingSummaryActionsBar';
import APAgingSummaryTable from './APAgingSummaryTable';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import { APAgingSummaryProvider } from './APAgingSummaryProvider';
import { APAgingSummarySheetLoadingBar } from './components';
import withSettings from 'containers/Settings/withSettings';
import withAPAgingSummaryActions from './withAPAgingSummaryActions'
@@ -59,6 +60,8 @@ function APAgingSummary({
numberFormat={filter.numberFormat}
onNumberFormatSubmit={handleNumberFormatSubmit}
/>
<APAgingSummarySheetLoadingBar />
<DashboardPageContent>
<FinancialStatement>
<APAgingSummaryHeader

12
client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryProvider.js
View File

@@ -1,6 +1,6 @@
import React, { useMemo, createContext, useContext } from 'react';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import { useAPAgingSummaryReport,useARAgingSummaryReport , useVendors } from 'hooks/query';
import FinancialReportPage from '../FinancialReportPage';
import { useAPAgingSummaryReport, useVendors } from 'hooks/query';
import { transformFilterFormToQuery } from '../common';
const APAgingSummaryContext = createContext();
@@ -17,7 +17,7 @@ function APAgingSummaryProvider({ filter, ...props }) {
isLoading: isAPAgingLoading,
isFetching: isAPAgingFetching,
refetch,
} = useAPAgingSummaryReport(query);
} = useAPAgingSummaryReport(query, { keepPreviousData: true });
// Retrieve the vendors list.
const {
@@ -36,14 +36,12 @@ function APAgingSummaryProvider({ filter, ...props }) {
};
return (
<DashboardInsider name={'AP-Aging-Summary'}>
<FinancialReportPage name={'AP-Aging-Summary'}>
<APAgingSummaryContext.Provider value={provider} {...props} />
</DashboardInsider>
</FinancialReportPage>
);
}
const useAPAgingSummaryContext = () => useContext(APAgingSummaryContext);
export { APAgingSummaryProvider, useAPAgingSummaryContext };

4
client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js
View File

@@ -18,7 +18,7 @@ export default function APAgingSummaryTable({
// AP aging summary report content.
const {
APAgingSummary: { tableRows },
isAPAgingFetching,
isAPAgingLoading,
} = useAPAgingSummaryContext();
// AP aging summary columns.
@@ -32,7 +32,7 @@ export default function APAgingSummaryTable({
name={'payable-aging-summary'}
sheetType={formatMessage({ id: 'payable_aging_summary' })}
asDate={new Date()}
loading={isAPAgingFetching}
loading={isAPAgingLoading}
>
<DataTable
className={'bigcapital-datatable--financial-report'}

17
client/src/containers/FinancialStatements/APAgingSummary/components.js
View File

@@ -2,6 +2,8 @@ import React, { useMemo } from 'react';
import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
import { getColumnWidth } from 'utils';
import { FormattedMessage as T } from 'react-intl';
import { If } from 'components';
import FinancialLoadingBar from '../FinancialLoadingBar';
/**
* Retrieve AP aging summary columns.
@@ -54,3 +56,18 @@ export const useAPAgingSummaryColumns = () => {
[tableRows, agingColumns],
);
};
/**
* A/P aging summary sheet loading bar.
*/
export function APAgingSummarySheetLoadingBar() {
const {
isAPAgingFetching
} = useAPAgingSummaryContext();
return (
<If condition={isAPAgingFetching}>
<FinancialLoadingBar />
</If>
)
}

3
client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js
View File

@@ -10,6 +10,7 @@ import ARAgingSummaryActionsBar from './ARAgingSummaryActionsBar';
import ARAgingSummaryTable from './ARAgingSummaryTable';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import { ARAgingSummaryProvider } from './ARAgingSummaryProvider';
import { ARAgingSummarySheetLoadingBar } from './components';
import withARAgingSummaryActions from './withARAgingSummaryActions'
import withSettings from 'containers/Settings/withSettings';
@@ -57,6 +58,8 @@ function ReceivableAgingSummarySheet({
numberFormat={filter.numberFormat}
onNumberFormatSubmit={handleNumberFormatSubmit}
/>
<ARAgingSummarySheetLoadingBar />
<DashboardPageContent>
<FinancialStatement>
<ARAgingSummaryHeader

9
client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryProvider.js
View File

@@ -1,5 +1,5 @@
import React, { useMemo, createContext, useContext } from 'react';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import FinancialReportPage from '../FinancialReportPage';
import { useARAgingSummaryReport, useCustomers } from 'hooks/query';
import { transformFilterFormToQuery } from '../common';
@@ -12,12 +12,13 @@ function ARAgingSummaryProvider({ filter, ...props }) {
// Transformes the filter from to the Url query.
const query = useMemo(() => transformFilterFormToQuery(filter), [filter]);
// A/R aging summary sheet context.
const {
data: ARAgingSummary,
isLoading: isARAgingLoading,
isFetching: isARAgingFetching,
refetch,
} = useARAgingSummaryReport(query);
} = useARAgingSummaryReport(query, { keepPreviousData: true });
// Retrieve the customers list.
const {
@@ -36,9 +37,9 @@ function ARAgingSummaryProvider({ filter, ...props }) {
};
return (
<DashboardInsider name={'AR-Aging-Summary'}>
<FinancialReportPage name={'AR-Aging-Summary'}>
<ARAgingSummaryContext.Provider value={provider} {...props} />
</DashboardInsider>
</FinancialReportPage>
);
}

4
client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js
View File

@@ -16,7 +16,7 @@ export default function ReceivableAgingSummaryTable({
const { formatMessage } = useIntl();
// AR aging summary report context.
const { ARAgingSummary, isARAgingFetching } = useARAgingSummaryContext();
const { ARAgingSummary, isARAgingLoading } = useARAgingSummaryContext();
// AR aging summary columns.
const columns = useARAgingSummaryColumns();
@@ -33,7 +33,7 @@ export default function ReceivableAgingSummaryTable({
name={'receivable-aging-summary'}
sheetType={formatMessage({ id: 'receivable_aging_summary' })}
asDate={new Date()}
loading={isARAgingFetching}
loading={isARAgingLoading}
>
<DataTable
className="bigcapital-datatable--financial-report"

17
client/src/containers/FinancialStatements/ARAgingSummary/components.js
View File

@@ -2,6 +2,8 @@ import React from 'react';
import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
import { getColumnWidth } from 'utils';
import { FormattedMessage as T } from 'react-intl';
import { If } from 'components';
import FinancialLoadingBar from '../FinancialLoadingBar';
/**
* Retrieve AR aging summary columns.
@@ -56,3 +58,18 @@ export const useARAgingSummaryColumns = () => {
[tableRows, agingColumns],
);
};
/**
* A/R aging summary sheet loading bar.
*/
export function ARAgingSummarySheetLoadingBar() {
const {
isARAgingFetching,
} = useARAgingSummaryContext();
return (
<If condition={isARAgingFetching}>
<FinancialLoadingBar />
</If>
)
}

4
client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
View File

@@ -1,13 +1,12 @@
import React, { useEffect, useState } from 'react';
import moment from 'moment';
import 'style/pages/FinancialStatements/BalanceSheet.scss';
import BalanceSheetHeader from './BalanceSheetHeader';
import BalanceSheetTable from './BalanceSheetTable';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import BalanceSheetActionsBar from './BalanceSheetActionsBar';
import { BalanceSheetAlerts } from './components';
import { BalanceSheetAlerts, BalanceSheetLoadingBar } from './components';
import { FinancialStatement } from 'components';
import withBalanceSheetActions from './withBalanceSheetActions';
@@ -63,6 +62,7 @@ function BalanceSheet({
numberFormat={filter.numberFormat}
onNumberFormatSubmit={handleNumberFormatSubmit}
/>
<BalanceSheetLoadingBar />
<BalanceSheetAlerts />
<DashboardPageContent>

14
client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetProvider.js
View File

@@ -12,20 +12,24 @@ function BalanceSheetProvider({ filter, ...props }) {
]);
// Fetches the balance sheet report.
const { data: balanceSheet, isFetching, refetch } = useBalanceSheet(query);
const {
data: balanceSheet,
isFetching,
isLoading,
refetch,
} = useBalanceSheet(query, { keepPreviousData: true });
const provider = {
balanceSheet,
isLoading: isFetching,
isFetching,
isLoading,
refetchBalanceSheet: refetch,
query,
filter,
};
return (
<FinancialReportPage
name={'balance-sheet'}
>
<FinancialReportPage name={'balance-sheet'}>
<BalanceSheetContext.Provider value={provider} {...props} />
</FinancialReportPage>
);

18
client/src/containers/FinancialStatements/BalanceSheet/components.js
View File

@@ -2,6 +2,7 @@ import React from 'react';
import { Button } from '@blueprintjs/core';
import { Icon, If } from 'components';
import { useBalanceSheetContext } from './BalanceSheetProvider';
import FinancialLoadingBar from '../FinancialLoadingBar';
/**
* Balance sheet alerts.
@@ -13,7 +14,7 @@ export function BalanceSheetAlerts() {
balanceSheet,
} = useBalanceSheetContext();
// Handle recalculate the report button.
// Handle refetch the report sheet.
const handleRecalcReport = () => {
refetchBalanceSheet();
};
@@ -34,3 +35,18 @@ export function BalanceSheetAlerts() {
</If>
);
}
/**
* Balance sheet loading bar.
*/
export function BalanceSheetLoadingBar() {
const {
isFetching
} = useBalanceSheetContext();
return (
<If condition={isFetching}>
<FinancialLoadingBar />
</If>
)
}

13
client/src/containers/FinancialStatements/FinancialLoadingBar.js Normal file
View File

@@ -0,0 +1,13 @@
import React from 'react';
import { MaterialProgressBar } from 'components';
/**
* Financnail progress bar.
*/
export default function FinancialLoadingBar() {
return (
<div className={'financial-progressbar'}>
<MaterialProgressBar />
</div>
)
}

9
client/src/containers/FinancialStatements/FinancialReports.js
View File

@@ -1,13 +1,9 @@
import React, { useEffect } from 'react';
import { useIntl } from 'react-intl';
import React from 'react';
import { Link } from 'react-router-dom';
import { For } from 'components';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import financialReportMenus from 'config/financialReportsMenu';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import { compose } from 'utils';
import 'style/pages/FinancialStatements/FinancialSheets.scss';
@@ -34,6 +30,9 @@ function FinancialReportsSection({ sectionTitle, reports }) {
);
}
/**
* Financial reports.
*/
export default function FinancialReports() {
return (
<DashboardInsider name={'financial-reports'}>

6
client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js
View File

@@ -9,6 +9,10 @@ import GeneralLedgerHeader from './GeneralLedgerHeader';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import GeneralLedgerActionsBar from './GeneralLedgerActionsBar';
import { GeneralLedgerProvider } from './GeneralLedgerProvider';
import {
GeneralLedgerSheetAlerts,
GeneralLedgerSheetLoadingBar,
} from './components';
import withGeneralLedgerActions from './withGeneralLedgerActions';
import withSettings from 'containers/Settings/withSettings';
@@ -64,6 +68,8 @@ function GeneralLedger({
pageFilter={filter}
onSubmitFilter={handleFilterSubmit}
/>
<GeneralLedgerSheetLoadingBar />
<GeneralLedgerSheetAlerts />
<div class="financial-statement__body">
<GeneralLedgerTable

18
client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerProvider.js
View File

@@ -1,5 +1,5 @@
import React, { createContext, useContext } from 'react';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import FinancialReportPage from '../FinancialReportPage';
import { useGeneralLedgerSheet, useAccounts } from 'hooks/query';
const GeneralLedgerContext = createContext();
@@ -8,7 +8,14 @@ const GeneralLedgerContext = createContext();
* General ledger provider.
*/
function GeneralLedgerProvider({ query, ...props }) {
const { data: generalLedger, isFetching, refetch } = useGeneralLedgerSheet(query);
const {
data: generalLedger,
isFetching,
isLoading,
refetch,
} = useGeneralLedgerSheet(query, {
keepPreviousData: true,
});
// Accounts list.
const { data: accounts, isFetching: isAccountsLoading } = useAccounts();
@@ -17,13 +24,14 @@ function GeneralLedgerProvider({ query, ...props }) {
generalLedger,
accounts,
sheetRefresh: refetch,
isSheetLoading: isFetching,
isFetching,
isLoading,
isAccountsLoading,
};
return (
<DashboardInsider name={'general-ledger-sheet'}>
<FinancialReportPage name={'general-ledger-sheet'}>
<GeneralLedgerContext.Provider value={provider} {...props} />
</DashboardInsider>
</FinancialReportPage>
);
}

26
client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js
View File

@@ -5,6 +5,8 @@ import { useIntl } from 'react-intl';
import FinancialSheet from 'components/FinancialSheet';
import DataTable from 'components/DataTable';
import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
import TableFastCell from 'components/Datatable/TableFastCell';
import { useGeneralLedgerContext } from './GeneralLedgerProvider';
import { useGeneralLedgerTableColumns } from './components';
@@ -12,25 +14,22 @@ import { useGeneralLedgerTableColumns } from './components';
/**
* General ledger table.
*/
export default function GeneralLedgerTable({
companyName,
}) {
export default function GeneralLedgerTable({ companyName }) {
const { formatMessage } = useIntl();
// General ledger context.
const {
generalLedger: { tableRows, query },
isSheetLoading
isLoading,
} = useGeneralLedgerContext();
// General ledger table columns.
const columns = useGeneralLedgerTableColumns();
// Default expanded rows of general ledger table.
const expandedRows = useMemo(
() => defaultExpanderReducer(tableRows, 1),
[tableRows],
);
const expandedRows = useMemo(() => defaultExpanderReducer(tableRows, 1), [
tableRows,
]);
const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
@@ -41,11 +40,11 @@ export default function GeneralLedgerTable({
fromDate={query.from_date}
toDate={query.to_date}
name="general-ledger"
loading={isSheetLoading}
loading={isLoading}
fullWidth={true}
>
<DataTable
className="bigcapital-datatable--financial-report"
className="bigcapital-datatable--financial-report"
noResults={formatMessage({
id: 'this_report_does_not_contain_any_data_between_date_period',
})}
@@ -59,7 +58,12 @@ export default function GeneralLedgerTable({
expandable={true}
expandToggleColumn={1}
sticky={true}
TableRowsRenderer={TableVirtualizedListRows}
// #TableVirtualizedListRows props.
vListrowHeight={28}
vListOverscanRowCount={0}
TableCellRenderer={TableFastCell}
/>
</FinancialSheet>
);
}
}

52
client/src/containers/FinancialStatements/GeneralLedger/components.js
View File

@@ -1,7 +1,10 @@
import React from 'react';
import { useIntl } from 'react-intl';
import { Button } from '@blueprintjs/core';
import { Icon, If } from 'components';
import { getForceWidth, getColumnWidth } from 'utils';
import { useGeneralLedgerContext } from './GeneralLedgerProvider';
import FinancialLoadingBar from '../FinancialLoadingBar';
/**
* Retrieve the general ledger table columns.
@@ -46,6 +49,7 @@ export function useGeneralLedgerTableColumns() {
accessor: 'reference_type_formatted',
className: 'transaction_type',
width: 125,
textOverview: true,
},
{
Header: formatMessage({ id: 'transaction_number' }),
@@ -99,3 +103,51 @@ export function useGeneralLedgerTableColumns() {
[formatMessage, tableRows],
);
}
/**
* General ledger sheet alerts.
*/
export function GeneralLedgerSheetAlerts() {
const {
generalLedger,
isLoading,
sheetRefresh
} = useGeneralLedgerContext();
// Handle refetch the report sheet.
const handleRecalcReport = () => {
sheetRefresh();
};
// Can't display any error if the report is loading.
if (isLoading) { return null; }
return (
<If condition={generalLedger.meta.is_cost_compute_running}>
<div class="alert-compute-running">
<Icon icon="info-block" iconSize={12} /> Just a moment! We're
calculating your cost transactions and this doesn't take much time.
Please check after sometime.{' '}
<Button onClick={handleRecalcReport} minimal={true} small={true}>
Refresh
</Button>
</div>
</If>
);
}
/**
* General ledger sheet loading bar.
*/
export function GeneralLedgerSheetLoadingBar() {
const {
isFetching,
} = useGeneralLedgerContext();
return (
<If condition={isFetching}>
<FinancialLoadingBar />
</If>
)
}

14
client/src/containers/FinancialStatements/Journal/Journal.js
View File

@@ -1,20 +1,21 @@
import React, { useState, useCallback, useEffect } from 'react';
import moment from 'moment';
import { useIntl } from 'react-intl';
import { compose } from 'utils';
import 'style/pages/FinancialStatements/Journal.scss';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import JournalTable from './JournalTable';
import JournalHeader from './JournalHeader';
import JournalActionsBar from './JournalActionsBar';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import { JournalSheetProvider } from './JournalProvider';
import { JournalSheetLoadingBar, JournalSheetAlerts } from './components';
import withSettings from 'containers/Settings/withSettings';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withJournalActions from './withJournalActions';
import 'style/pages/FinancialStatements/Journal.scss';
import { compose } from 'utils';
/**
* Journal sheet.
@@ -60,6 +61,9 @@ function Journal({
onSubmitFilter={handleFilterSubmit}
pageFilter={filter}
/>
<JournalSheetLoadingBar />
<JournalSheetAlerts />
<div class="financial-statement__body">
<JournalTable
companyName={organizationName}

23
client/src/containers/FinancialStatements/Journal/JournalProvider.js
View File

@@ -1,5 +1,5 @@
import React, { createContext, useContext } from 'react';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import FinancialReportPage from '../FinancialReportPage';
import { useJournalSheet } from 'hooks/query';
import { transformFilterFormToQuery } from '../common';
@@ -9,20 +9,27 @@ const JournalSheetContext = createContext();
* Journal sheet provider.
*/
function JournalSheetProvider({ query, ...props }) {
const { data: journalSheet, isFetching, refetch } = useJournalSheet({
...transformFilterFormToQuery(query)
});
const {
data: journalSheet,
isFetching,
isLoading,
refetch,
} = useJournalSheet(
{ ...transformFilterFormToQuery(query) },
{ keepPreviousData: true },
);
const provider = {
journalSheet,
isLoading: isFetching,
refetchSheet: refetch
isLoading,
isFetching,
refetchSheet: refetch,
};
return (
<DashboardInsider name={'balance-sheet'}>
<FinancialReportPage name={'journal-sheet'}>
<JournalSheetContext.Provider value={provider} {...props} />
</DashboardInsider>
</FinancialReportPage>
);
}

12
client/src/containers/FinancialStatements/Journal/JournalTable.js
View File

@@ -4,7 +4,8 @@ import { useIntl } from 'react-intl';
import FinancialSheet from 'components/FinancialSheet';
import DataTable from 'components/DataTable';
import { useJournalSheetContext } from './JournalProvider';
import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
import TableFastCell from 'components/Datatable/TableFastCell';
import { defaultExpanderReducer } from 'utils';
import { useJournalTableColumns } from './components';
@@ -41,6 +42,8 @@ export default function JournalSheetTable({
};
}, []);
return (
<FinancialSheet
companyName={companyName}
@@ -62,6 +65,13 @@ export default function JournalSheetTable({
})}
expanded={expandedRows}
sticky={true}
TableRowsRenderer={TableVirtualizedListRows}
// #TableVirtualizedListRows props.
vListrowHeight={28}
vListOverscanRowCount={2}
TableCellRenderer={TableFastCell}
id={'journal'}
/>
</FinancialSheet>
);

51
client/src/containers/FinancialStatements/Journal/components.js
View File

@@ -1,6 +1,10 @@
import React from 'react';
import { useIntl } from 'react-intl';
import moment from 'moment';
import { Button } from '@blueprintjs/core';
import { Icon, If } from 'components';
import { useJournalSheetContext } from './JournalProvider';
import FinancialLoadingBar from '../FinancialLoadingBar';
/**
* Retrieve the journal table columns.
@@ -60,3 +64,50 @@ export const useJournalTableColumns = () => {
[formatMessage],
);
};
/**
* Journal sheet loading bar.
*/
export function JournalSheetLoadingBar() {
const {
isFetching
} = useJournalSheetContext();
return (
<If condition={isFetching}>
<FinancialLoadingBar />
</If>
)
}
/**
* Journal sheet alerts.
*/
export function JournalSheetAlerts() {
const {
isLoading,
refetchSheet,
journalSheet,
} = useJournalSheetContext();
// Handle refetch the report sheet.
const handleRecalcReport = () => {
refetchSheet();
};
// Can't display any error if the report is loading.
if (isLoading) { return null; }
return (
<If condition={journalSheet.meta.is_cost_compute_running}>
<div class="alert-compute-running">
<Icon icon="info-block" iconSize={12} /> Just a moment! We're
calculating your cost transactions and this doesn't take much time.
Please check after sometime.{' '}
<Button onClick={handleRecalcReport} minimal={true} small={true}>
Refresh
</Button>
</div>
</If>
);
}

16
client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossProvider.js
View File

@@ -1,25 +1,31 @@
import React, { createContext, useContext } from 'react';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import FinancialReportPage from '../FinancialReportPage';
import { useProfitLossSheet } from 'hooks/query';
import { transformFilterFormToQuery } from '../common';
const ProfitLossSheetContext = createContext();
function ProfitLossSheetProvider({ query, ...props }) {
const { data: profitLossSheet, isFetching, refetch } = useProfitLossSheet({
const {
data: profitLossSheet,
isFetching,
isLoading,
refetch,
} = useProfitLossSheet({
...transformFilterFormToQuery(query),
});
const provider = {
profitLossSheet,
isLoading: isFetching,
isLoading,
isFetching,
sheetRefetch: refetch,
};
return (
<DashboardInsider>
<FinancialReportPage name={'profit-loss-sheet'}>
<ProfitLossSheetContext.Provider value={provider} {...props} />
</DashboardInsider>
</FinancialReportPage>
);
}

23
client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js
View File

@@ -14,6 +14,10 @@ import withSettings from 'containers/Settings/withSettings';
import 'style/pages/FinancialStatements/ProfitLossSheet.scss';
import { ProfitLossSheetProvider } from './ProfitLossProvider';
import {
ProfitLossSheetLoadingBar,
ProfitLossSheetAlerts
} from './components';
/**
* Profit/Loss financial statement sheet.
@@ -23,7 +27,7 @@ function ProfitLossSheet({
organizationName,
// #withProfitLossActions
toggleProfitLossFilterDrawer: toggleDisplayFilterDrawer
toggleProfitLossFilterDrawer: toggleDisplayFilterDrawer,
}) {
const [filter, setFilter] = useState({
basis: 'cash',
@@ -32,7 +36,7 @@ function ProfitLossSheet({
displayColumnsType: 'total',
accountsFilter: 'all-accounts',
});
// Handle submit filter.
const handleSubmitFilter = (filter) => {
const _filter = {
@@ -52,9 +56,12 @@ function ProfitLossSheet({
};
// Hide the filter drawer once the page unmount.
React.useEffect(() => () => {
toggleDisplayFilterDrawer(false);
}, [toggleDisplayFilterDrawer])
React.useEffect(
() => () => {
toggleDisplayFilterDrawer(false);
},
[toggleDisplayFilterDrawer],
);
return (
<ProfitLossSheetProvider query={filter}>
@@ -62,6 +69,8 @@ function ProfitLossSheet({
numberFormat={filter.numberFormat}
onNumberFormatSubmit={handleNumberFormatSubmit}
/>
<ProfitLossSheetLoadingBar />
<ProfitLossSheetAlerts />
<DashboardPageContent>
<div class="financial-statement">
@@ -71,9 +80,7 @@ function ProfitLossSheet({
/>
<div class="financial-statement__body">
<ProfitLossSheetTable
companyName={organizationName}
/>
<ProfitLossSheetTable companyName={organizationName} />
</div>
</div>
</DashboardPageContent>

51
client/src/containers/FinancialStatements/ProfitLossSheet/components.js Normal file
View File

@@ -0,0 +1,51 @@
import React from 'react';
import { Button } from '@blueprintjs/core';
import { Icon, If } from 'components';
import { useProfitLossSheetContext } from './ProfitLossProvider';
import FinancialLoadingBar from '../FinancialLoadingBar';
/**
* Profit/loss sheet loading bar.
*/
export function ProfitLossSheetLoadingBar() {
const { isFetching } = useProfitLossSheetContext();
return (
<If condition={isFetching}>
<FinancialLoadingBar />
</If>
);
}
/**
* Balance sheet alerts.
*/
export function ProfitLossSheetAlerts() {
const {
isLoading,
sheetRefetch,
profitLossSheet,
} = useProfitLossSheetContext();
// Handle refetch the report sheet.
const handleRecalcReport = () => {
sheetRefetch();
};
// Can't display any error if the report is loading.
if (isLoading) {
return null;
}
return (
<If condition={profitLossSheet.meta.is_cost_compute_running}>
<div class="alert-compute-running">
<Icon icon="info-block" iconSize={12} /> Just a moment! We're
calculating your cost transactions and this doesn't take much time.
Please check after sometime.{' '}
<Button onClick={handleRecalcReport} minimal={true} small={true}>
Refresh
</Button>
</div>
</If>
);
}

19
client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceProvider.js
View File

@@ -1,27 +1,36 @@
import React, { createContext, useContext } from 'react';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import FinancialReportPage from '../FinancialReportPage';
import { useTrialBalanceSheet } from 'hooks/query';
import { transformFilterFormToQuery } from '../common';
const TrialBalanceSheetContext = createContext();
function TrialBalanceSheetProvider({ query, ...props }) {
const { data: trialBalanceSheet, isFetching, refetch } = useTrialBalanceSheet(
const {
data: trialBalanceSheet,
isFetching,
isLoading,
refetch,
} = useTrialBalanceSheet(
{
...transformFilterFormToQuery(query),
},
{
keepPreviousData: true,
},
);
const provider = {
trialBalanceSheet,
isLoading: isFetching,
isLoading,
isFetching,
refetchSheet: refetch,
};
return (
<DashboardInsider name={'trial-balance-sheet'}>
<FinancialReportPage name={'trial-balance-sheet'}>
<TrialBalanceSheetContext.Provider value={provider} {...props} />
</DashboardInsider>
</FinancialReportPage>
);
}

19
client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
View File

@@ -9,6 +9,11 @@ import TrialBalanceSheetHeader from './TrialBalanceSheetHeader';
import TrialBalanceSheetTable from './TrialBalanceSheetTable';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import {
TrialBalanceSheetAlerts,
TrialBalanceSheetLoadingBar,
} from './components';
import withTrialBalanceActions from './withTrialBalanceActions';
import withSettings from 'containers/Settings/withSettings';
@@ -22,7 +27,7 @@ function TrialBalanceSheet({
organizationName,
// #withTrialBalanceSheetActions
toggleTrialBalanceFilterDrawer: toggleFilterDrawer
toggleTrialBalanceFilterDrawer: toggleFilterDrawer,
}) {
const [filter, setFilter] = useState({
fromDate: moment().startOf('year').format('YYYY-MM-DD'),
@@ -53,9 +58,12 @@ function TrialBalanceSheet({
};
// Hide the filter drawer once the page unmount.
useEffect(() => () => {
toggleFilterDrawer(false)
}, [toggleFilterDrawer]);
useEffect(
() => () => {
toggleFilterDrawer(false);
},
[toggleFilterDrawer],
);
return (
<TrialBalanceSheetProvider query={filter}>
@@ -63,6 +71,9 @@ function TrialBalanceSheet({
numberFormat={filter.numberFormat}
onNumberFormatSubmit={handleNumberFormatSubmit}
/>
<TrialBalanceSheetLoadingBar />
<TrialBalanceSheetAlerts />
<DashboardPageContent>
<div class="financial-statement">
<TrialBalanceSheetHeader

51
client/src/containers/FinancialStatements/TrialBalanceSheet/components.js
View File

@@ -1,9 +1,11 @@
import React from 'react';
import { useIntl } from 'react-intl';
import { Button } from '@blueprintjs/core';
import { getColumnWidth } from 'utils';
import { If, Icon } from 'components';
import { CellTextSpan } from 'components/Datatable/Cells';
import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
import FinancialLoadingBar from '../FinancialLoadingBar';
/**
* Retrieve trial balance sheet table columns.
@@ -53,3 +55,50 @@ export const useTrialBalanceTableColumns = () => {
[tableRows, formatMessage],
);
};
/**
* Trial balance sheet progress loading bar.
*/
export function TrialBalanceSheetLoadingBar() {
const {
isFetching
} = useTrialBalanceSheetContext();
return (
<If condition={isFetching}>
<FinancialLoadingBar />
</If>
)
}
/**
* Trial balance sheet alerts.
*/
export function TrialBalanceSheetAlerts() {
const {
trialBalanceSheet: { meta },
isLoading,
refetchSheet
} = useTrialBalanceSheetContext();
// Handle refetch the sheet.
const handleRecalcReport = () => {
refetchSheet();
};
// Can't display any error if the report is loading.
if (isLoading) { return null; }
return (
<If condition={meta.is_cost_compute_running}>
<div class="alert-compute-running">
<Icon icon="info-block" iconSize={12} /> Just a moment! We're
calculating your cost transactions and this doesn't take much time.
Please check after sometime.{' '}
<Button onClick={handleRecalcReport} minimal={true} small={true}>
Refresh
</Button>
</div>
</If>
)
}

4
client/src/containers/Items/ItemsListProvider.js
View File

@@ -17,12 +17,12 @@ function ItemsListProvider({
...props
}) {
// Fetch accounts resource views and fields.
const { data: itemsViews, isFetching: isViewsLoading } = useResourceViews(
const { data: itemsViews, isLoading: isViewsLoading } = useResourceViews(
'items',
);
// Fetch the accounts resource fields.
const { data: itemsFields, isFetching: isFieldsLoading } = useResourceFields(
const { data: itemsFields, isLoading: isFieldsLoading } = useResourceFields(
'items',
);

4
client/src/containers/Purchases/Bills/BillsLanding/BillsListProvider.js
View File

@@ -10,14 +10,14 @@ const BillsListContext = createContext();
*/
function BillsListProvider({ query, ...props }) {
// Fetch accounts resource views and fields.
const { data: billsViews, isFetching: isViewsLoading } = useResourceViews(
const { data: billsViews, isLoading: isViewsLoading } = useResourceViews(
'bills',
);
// Fetch the accounts resource fields.
const {
data: billsFields,
isFetching: isFieldsLoading,
isLoading: isFieldsLoading,
} = useResourceFields('bills');
// Fetch accounts list according to the given custom view id.

12
client/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormProvider.js
View File

@@ -21,7 +21,7 @@ function PaymentMadeFormProvider({ paymentMadeId, ...props }) {
const [paymentVendorId, setPaymentVendorId] = React.useState(null);
// Handle fetch accounts data.
const { data: accounts, isFetching: isAccountsFetching } = useAccounts();
const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
// Handle fetch Items data table or list.
const {
@@ -33,7 +33,7 @@ function PaymentMadeFormProvider({ paymentMadeId, ...props }) {
// Handle fetch venders data table or list.
const {
data: { vendors },
isFetching: isVendorsFetching,
isLoading: isVendorsLoading,
} = useVendors({ page_size: 10000 });
// Handle fetch specific payment made details.
@@ -66,10 +66,10 @@ function PaymentMadeFormProvider({ paymentMadeId, ...props }) {
paymentVendorId,
isNewMode,
isAccountsFetching,
isAccountsLoading,
isItemsFetching,
isItemsLoading,
isVendorsFetching,
isVendorsLoading,
isPaymentFetching,
isPaymentLoading,
@@ -83,9 +83,9 @@ function PaymentMadeFormProvider({ paymentMadeId, ...props }) {
return (
<DashboardInsider
loading={
isVendorsFetching ||
isVendorsLoading ||
isItemsFetching ||
isAccountsFetching ||
isAccountsLoading ||
isPaymentFetching ||
isPaymentLoading
}

4
client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesListProvider.js
View File

@@ -10,14 +10,14 @@ const EstimatesListContext = createContext();
*/
function EstimatesListProvider({ query, ...props }) {
// Fetches estimates resource views and fields.
const { data: estimatesViews, isFetching: isViewsLoading } = useResourceViews(
const { data: estimatesViews, isLoading: isViewsLoading } = useResourceViews(
'sale_estimates',
);
// Fetches the estimates resource fields.
const {
data: estimatesFields,
isFetching: isFieldsLoading,
isLoading: isFieldsLoading,
} = useResourceFields('sale_estimates');
// Fetch estimates list according to the given custom view id.

4
client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesListProvider.js
View File

@@ -10,14 +10,14 @@ const InvoicesListContext = createContext();
*/
function InvoicesListProvider({ query, ...props }) {
// Fetch accounts resource views and fields.
const { data: invoicesViews, isFetching: isViewsLoading } = useResourceViews(
const { data: invoicesViews, isLoading: isViewsLoading } = useResourceViews(
'sale_invoices',
);
// Fetch the accounts resource fields.
const {
data: invoicesFields,
isFetching: isFieldsLoading,
isLoading: isFieldsLoading,
} = useResourceFields('sale_invoices');
// Fetch accounts list according to the given custom view id.

10
client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormProvider.js
View File

@@ -31,7 +31,7 @@ function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
enabled: !!paymentReceiveId,
});
// Handle fetch accounts data.
const { data: accounts, isFetching: isAccountsFetching } = useAccounts();
const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
// Fetch payment made settings.
const fetchSettings = useSettingsPaymentReceives();
@@ -39,7 +39,7 @@ function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
// Fetches customers list.
const {
data: { customers },
isFetching: isCustomersFetching,
isLoading: isCustomersLoading,
} = useCustomers({ page_size: 10000 });
// Detarmines whether the new mode.
@@ -58,9 +58,9 @@ function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
customers,
isPaymentLoading,
isAccountsLoading,
isPaymentFetching,
isAccountsFetching,
isCustomersFetching,
isCustomersLoading,
isNewMode,
submitPayload,
@@ -72,7 +72,7 @@ function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
return (
<DashboardInsider
loading={isPaymentLoading || isAccountsFetching || isCustomersFetching}
loading={isPaymentLoading || isAccountsLoading || isCustomersLoading}
name={'payment-receive-form'}
>
<PaymentReceiveFormContext.Provider value={provider} {...props} />

4
client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsListProvider.js
View File

@@ -1,6 +1,6 @@
import React, { createContext } from 'react';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import { useResourceViews, useResourceFields, useReceipts } from 'hooks/query';
import { useResourceViews, useReceipts } from 'hooks/query';
import { isTableEmptyStatus } from 'utils';
const ReceiptsListContext = createContext();
@@ -8,7 +8,7 @@ const ReceiptsListContext = createContext();
// Receipts list provider.
function ReceiptsListProvider({ query, ...props }) {
// Fetch receipts resource views and fields.
const { data: receiptsViews, isFetching: isViewsLoading } = useResourceViews(
const { data: receiptsViews, isLoading: isViewsLoading } = useResourceViews(
'sale_receipt',
);

2
client/src/hooks/query/items.js
View File

@@ -1,4 +1,4 @@
import { useMutation, useQuery, useQueryClient } from 'react-query';
import { useMutation, useQueryClient } from 'react-query';
import { transformPagination, transformResponse } from 'utils';
import { useQueryTenant } from '../useQueryTenant';
import useApiRequest from '../useRequest';

79
client/src/hooks/query/organization.js
View File

@@ -1,9 +1,13 @@
import t from 'store/types';
import { useMutation } from 'react-query';
import t from './types';
import useApiRequest from '../useRequest';
import { useQueryTenant } from '../useQueryTenant';
import { useEffect } from 'react';
import { useSetOrganizations, useSetSubscriptions } from '../state';
import { omit } from 'lodash';
/**
* Retrieve the contact duplicate.
* Retrieve organizations of the authenticated user.
*/
export function useOrganizations(props) {
const apiRequest = useApiRequest();
@@ -23,3 +27,74 @@ export function useOrganizations(props) {
},
);
}
/**
* Retrieve the current organization metadata.
*/
export function useCurrentOrganization(props) {
const apiRequest = useApiRequest();
const setOrganizations = useSetOrganizations();
const setSubscriptions = useSetSubscriptions();
const query = useQueryTenant(
[t.ORGANIZATION_CURRENT],
() => apiRequest.get(`organization/current`),
{
select: (res) => res.data.organization,
initialDataUpdatedAt: 0,
initialData: {
data: {
organization: {},
},
},
...props,
},
);
useEffect(() => {
if (query.isSuccess) {
const organization = omit(query.data, ['subscriptions']);
// Sets organizations.
setOrganizations([organization]);
// Sets subscriptions.
setSubscriptions(query.data.subscriptions);
}
}, [query.data, query.isSuccess, setOrganizations, setSubscriptions]);
return query;
}
/**
* Builds the current tenant.
*/
export function useBuildTenant(props) {
const apiRequest = useApiRequest();
return useMutation(
(values) => apiRequest.post('organization/build'),
{
onSuccess: (res, values) => {
},
...props,
},
);
};
/**
* Seeds the current tenant
*/
export function useSeedTenant() {
const apiRequest = useApiRequest();
return useMutation(
(values) => apiRequest.post('organization/seed'),
{
onSuccess: (res) => {
},
}
)
};

12
client/src/hooks/query/settings.js
View File

@@ -1,9 +1,9 @@
import { useEffect } from 'react';
import { useMutation, useQueryClient } from 'react-query';
import { useQueryTenant } from '../useQueryTenant';
import { useDispatch } from 'react-redux';
import useApiRequest from '../useRequest';
import t from 'store/types';
import { useSetSettings } from 'hooks/state';
import t from './types';
/**
* Saves the settings.
@@ -21,8 +21,8 @@ export function useSaveSettings(props) {
}
function useSettingsQuery(key, query, props) {
const dispatch = useDispatch();
const apiRequest = useApiRequest();
const setSettings = useSetSettings();
const state = useQueryTenant(
key,
@@ -40,10 +40,10 @@ function useSettingsQuery(key, query, props) {
);
useEffect(() => {
if (typeof state.data !== 'undefined') {
dispatch({ type: t.SETTING_SET, options: state.data });
if (state.isSuccess) {
setSettings(state.data);
}
}, [state.data, dispatch]);
}, [state.data, state.isSuccess, setSettings]);
return state.data;
}

3
client/src/hooks/query/types.js
View File

@@ -90,7 +90,8 @@ const SETTING = {
};
const ORGANIZATIONS = {
ORGANIZATIONS: 'ORGANIZATIONS'
ORGANIZATIONS: 'ORGANIZATIONS',
ORGANIZATION_CURRENT: 'ORGANIZATION_CURRENT'
};
export default {

11
client/src/hooks/state/authentication.js
View File

@@ -2,13 +2,22 @@ import { useDispatch, useSelector } from 'react-redux';
import { useCallback } from 'react';
import { isAuthenticated } from 'store/authentication/authentication.reducer';
import { setLogin, setLogout } from 'store/authentication/authentication.actions';
import { useQueryClient } from 'react-query';
export const useAuthActions = () => {
const dispatch = useDispatch();
const queryClient = useQueryClient();
return {
setLogin: useCallback((login) => dispatch(setLogin(login)), [dispatch]),
setLogout: useCallback(() => dispatch(setLogout()), [dispatch]),
setLogout: useCallback(() => {
// Logout action.
dispatch(setLogout());
// Remove all cached queries.
queryClient.removeQueries();
}, [dispatch, queryClient]),
};
};

5
client/src/hooks/state/index.js
View File

@@ -1,3 +1,6 @@
export * from './dashboard';
export * from './authentication';
export * from './globalErrors';
export * from './globalErrors';
export * from './subscriptions';
export * from './organizations';
export * from './settings';

11
client/src/hooks/state/organizations.js Normal file
View File

@@ -0,0 +1,11 @@
import { useCallback } from "react";
import { useDispatch } from "react-redux";
import { setOrganizations } from 'store/organizations/organizations.actions';
export const useSetOrganizations = () => {
const dispatch = useDispatch();
return useCallback((organizations) => {
dispatch(setOrganizations(organizations))
}, [dispatch]);
};

12
client/src/hooks/state/settings.js Normal file
View File

@@ -0,0 +1,12 @@
import { useCallback } from "react";
import { useDispatch } from "react-redux";
import { setSettings } from 'store/settings/settings.actions';
export const useSetSettings = () => {
const dispatch = useDispatch();
return useCallback((settings) => {
dispatch(setSettings(settings));
}, [dispatch]);
};

14
client/src/hooks/state/subscriptions.js Normal file
View File

@@ -0,0 +1,14 @@
import { useCallback } from "react"
import { useDispatch } from "react-redux";
import { setSubscriptions } from 'store/subscription/subscription.actions';
/**
* Sets subscriptions.
*/
export const useSetSubscriptions = () => {
const dispatch = useDispatch();
return useCallback((subscriptions) => {
dispatch(setSubscriptions(subscriptions));
}, [dispatch]);
}

11
client/src/hooks/useRequest.js
View File

@@ -18,10 +18,11 @@ export default function useApiRequest() {
const organizationId = useAuthOrganizationId();
const http = React.useMemo(() => {
axios.create();
// Axios instance.
const instance = axios.create();
// Request interceptors.
axios.interceptors.request.use(
instance.interceptors.request.use(
(request) => {
const locale = 'en';
@@ -40,9 +41,8 @@ export default function useApiRequest() {
return Promise.reject(error);
},
);
// Response interceptors.
axios.interceptors.response.use(
instance.interceptors.response.use(
(response) => response,
(error) => {
const { status } = error.response;
@@ -57,8 +57,7 @@ export default function useApiRequest() {
return Promise.reject(error);
},
);
return axios;
return instance;
}, [token, organizationId, setGlobalErrors, setLogout]);
return {

2
client/src/store/authentication/authentication.reducer.js
View File

@@ -29,6 +29,8 @@ export default createReducer(initialState, {
state.token = '';
state.user = {};
state.organization = '';
state.organizationId = null;
state.tenant = {};
},
[t.LOGIN_CLEAR_ERRORS]: (state) => {

9
client/src/store/organizations/organizations.actions.js
View File

@@ -1,6 +1,15 @@
import ApiService from 'services/ApiService';
import t from 'store/types';
export const setOrganizations = (organizations) => {
return {
type: t.ORGANIZATIONS_LIST_SET,
payload: {
organizations,
},
};
}
export const fetchOrganizations = () => (dispatch) => new Promise((resolve, reject) => {
ApiService.get('organization/all').then((response) => {
dispatch({

8
client/src/store/settings/settings.actions.js
View File

@@ -29,3 +29,11 @@ export const FetchOptions = ({ form }) => {
});
});
};
export const setSettings = (settings) => {
return {
type: t.SETTING_SET,
options: settings,
};
}

12
client/src/store/subscription/subscription.actions.js
View File

@@ -11,4 +11,14 @@ export const fetchSubscriptions = () => (dispatch) => new Promise((resolve, reje
});
resolve(response);
}).catch((error) => { reject(error); })
});
});
export const setSubscriptions = (subscriptions) => {
return {
type: t.SET_PLAN_SUBSCRIPTIONS_LIST,
payload: {
subscriptions,
},
}
};

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

@@ -100,3 +100,80 @@ body.hide-scrollbar .Pane2{
background-color: rgba(0,10,30, .7);
}
.ReactVirtualized__Collection {
}
.ReactVirtualized__Collection__innerScrollContainer {
}
/* Grid default theme */
.ReactVirtualized__Grid {
}
.ReactVirtualized__Grid__innerScrollContainer {
}
/* Table default theme */
.ReactVirtualized__Table {
}
.ReactVirtualized__Table__Grid {
}
.ReactVirtualized__Table__headerRow {
font-weight: 700;
text-transform: uppercase;
display: flex;
flex-direction: row;
align-items: center;
}
.ReactVirtualized__Table__row {
display: flex;
flex-direction: row;
align-items: center;
}
.ReactVirtualized__Table__headerTruncatedText {
display: inline-block;
max-width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.ReactVirtualized__Table__headerColumn,
.ReactVirtualized__Table__rowColumn {
margin-right: 10px;
min-width: 0px;
}
.ReactVirtualized__Table__rowColumn {
text-overflow: ellipsis;
white-space: nowrap;
}
.ReactVirtualized__Table__headerColumn:first-of-type,
.ReactVirtualized__Table__rowColumn:first-of-type {
margin-left: 10px;
}
.ReactVirtualized__Table__sortableHeaderColumn {
cursor: pointer;
}
.ReactVirtualized__Table__sortableHeaderIconContainer {
display: flex;
align-items: center;
}
.ReactVirtualized__Table__sortableHeaderIcon {
flex: 0 0 24px;
height: 1em;
width: 1em;
fill: currentColor;
}
/* List default theme */
.ReactVirtualized__List {
}

15
client/src/style/components/DataTable/DataTable.scss
View File

@@ -68,6 +68,11 @@
.bp3-context-menu-popover-target{
z-index: 100;
}
.tr-context{
display: flex;
flex: 1 0 auto;
}
}
.th,
@@ -256,6 +261,11 @@
}
}
}
.tr-inner{
display: flex;
width: 100%;
}
}
.no-results {
@@ -314,4 +324,9 @@
overflow-x: hidden;
}
}
.ReactVirtualized__Grid{
will-change: auto !important;
}
}

10
client/src/style/pages/FinancialStatements/FinancialReportPage.scss
View File

@@ -9,7 +9,7 @@
border-radius: 2px;
background-color: #fdecda;
color: #342515;
font-size: 12px;
font-size: 13px;
button{
font-size: 12px;
@@ -29,4 +29,10 @@
fill: #975f19;
}
}
}
.financial-progressbar{
.progress-materializecss{
top: -2px;
}
}
}

4
client/src/style/pages/FinancialStatements/Journal.scss
View File

@@ -36,6 +36,10 @@
font-weight: 600;
}
.tr{
height: 28px;
}
}
}
}

4
client/src/utils.js
View File

@@ -178,8 +178,8 @@ export function formattedExchangeRate(amount, currency) {
return formatter.format(amount);
}
export const ConditionalWrapper = ({ condition, wrapper, children }) =>
condition ? wrapper(children) : children;
export const ConditionalWrapper = ({ condition, wrapper, children, ...rest }) =>
condition ? wrapper({ children, ...rest }) : children;
export const checkRequiredProperties = (obj, properties) => {
return properties.some((prop) => {