diff --git a/client/package.json b/client/package.json index f6fc8bad4..c0b3f4f2c 100644 --- a/client/package.json +++ b/client/package.json @@ -16,6 +16,7 @@ "@testing-library/user-event": "^7.2.1", "@typescript-eslint/eslint-plugin": "^2.10.0", "@typescript-eslint/parser": "^2.10.0", + "accounting": "^0.4.1", "axios": "^0.19.2", "babel-eslint": "10.0.3", "babel-jest": "^24.9.0", @@ -45,6 +46,7 @@ "jest-environment-jsdom-fourteen": "1.0.1", "jest-resolve": "24.9.0", "jest-watch-typeahead": "0.4.2", + "js-money": "^0.6.3", "lodash": "^4.17.15", "mini-css-extract-plugin": "0.9.0", "moment": "^2.24.0", diff --git a/client/src/components/Accounts/AccountsDataTable.js b/client/src/components/Accounts/AccountsDataTable.js index ed5742024..9b7ff3a07 100644 --- a/client/src/components/Accounts/AccountsDataTable.js +++ b/client/src/components/Accounts/AccountsDataTable.js @@ -131,7 +131,8 @@ function AccountsDataTable({ columns={columns} data={accounts} onFetchData={handleDatatableFetchData} - manualSortBy={true} /> + manualSortBy={true} + selectionColumn={true} /> ); } diff --git a/client/src/components/DataTable.js b/client/src/components/DataTable.js index b7e2f6f04..2b4fd928a 100644 --- a/client/src/components/DataTable.js +++ b/client/src/components/DataTable.js @@ -12,7 +12,6 @@ import { import {Checkbox} from '@blueprintjs/core'; import classnames from 'classnames'; import Icon from 'components/Icon'; -// import { FixedSizeList } from 'react-window' const IndeterminateCheckbox = React.forwardRef( ({ indeterminate, ...rest }, ref) => { @@ -23,9 +22,7 @@ const IndeterminateCheckbox = React.forwardRef( resolvedRef.current.indeterminate = indeterminate }, [resolvedRef, indeterminate]) - return ( - - ); + return (); } ); @@ -35,7 +32,9 @@ export default function DataTable({ loading, onFetchData, onSelectedRowsChange, - manualSortBy = 'false' + manualSortBy = 'false', + selectionColumn = false, + className }) { const { getTableProps, @@ -51,8 +50,8 @@ export default function DataTable({ nextPage, previousPage, setPageSize, - selectedFlatRows, + // Get the state from the instance state: { pageIndex, pageSize, sortBy, selectedRowIds }, } = useTable( @@ -77,7 +76,7 @@ export default function DataTable({ hooks => { hooks.visibleColumns.push(columns => [ // Let's make a column for selection - { + ...(selectionColumn) ? [{ id: 'selection', disableResizing: true, minWidth: 35, @@ -97,23 +96,19 @@ export default function DataTable({ ), - }, + }] : [], ...columns, ]) } ); - // Debounce our onFetchData call for 100ms - const onFetchDataDebounced = useAsyncDebounce(onFetchData, 100); - const onSelectRowsDebounced = useAsyncDebounce(onSelectedRowsChange, 250); - // When these table states change, fetch new data! useEffect(() => { - onFetchDataDebounced({ pageIndex, pageSize, sortBy }) - }, []); + onFetchData && onFetchData({ pageIndex, pageSize, sortBy }) + }, [pageIndex, pageSize, sortBy]); return ( -
+
{headerGroups.map(headerGroup => ( @@ -157,8 +152,7 @@ export default function DataTable({ className: classnames(cell.column.className || '', 'td'), })}>{ cell.render('Cell') }
})} -
- ) +
) })}
diff --git a/client/src/components/FinancialSheet.js b/client/src/components/FinancialSheet.js index 7dc4a93e0..7fd89cb74 100644 --- a/client/src/components/FinancialSheet.js +++ b/client/src/components/FinancialSheet.js @@ -1,26 +1,35 @@ import React, { Children } from 'react'; - +import moment from 'moment'; +import classnames from 'classnames'; +import LoadingIndicator from 'components/LoadingIndicator'; export default function FinancialSheet({ companyTitle, sheetType, date, children, - accountingBasis + accountingBasis, + name, + loading, }) { + const formattedDate = moment(date).format('DD MMMM YYYY') + const nameModifer = name ? `financial-sheet--${name}` : ''; + return ( -
-

{ companyTitle }

-
{ sheetType }
- { date } +
+ +

{ companyTitle }

+
{ sheetType }
+
As of { formattedDate }
-
- { children } -
+
+ { children } +
-
- { accountingBasis } -
+
+ { accountingBasis } +
+
); } \ No newline at end of file diff --git a/client/src/components/LoadingIndicator.js b/client/src/components/LoadingIndicator.js index 668658230..19f1db616 100644 --- a/client/src/components/LoadingIndicator.js +++ b/client/src/components/LoadingIndicator.js @@ -4,9 +4,10 @@ import { Spinner } from '@blueprintjs/core'; export default function LoadingIndicator({ loading, spinnerSize = 40, - children + children, + mount = true, }) { - const [rendered, setRendered] = useState(false); + const [rendered, setRendered] = useState(mount); useEffect(() => { if (!loading) { setRendered(true); } diff --git a/client/src/components/Money.js b/client/src/components/Money.js new file mode 100644 index 000000000..0acd8d993 --- /dev/null +++ b/client/src/components/Money.js @@ -0,0 +1,16 @@ +import React from 'react'; +import Currency from 'js-money/lib/currency'; +import accounting from 'accounting'; + +function formattedAmount(cents, currency) { + const { symbol, decimal_digits: precision } = Currency[currency]; + const amount = cents / Math.pow(10, precision); + + return accounting.formatMoney(amount, { symbol, precision }); +} + +export default function Money({ amount, currency }) { + return ( + { formattedAmount(amount, currency) } + ); +} \ No newline at end of file diff --git a/client/src/connectors/TrialBalanceSheet.connect.js b/client/src/connectors/TrialBalanceSheet.connect.js index 493bc4003..5755b4869 100644 --- a/client/src/connectors/TrialBalanceSheet.connect.js +++ b/client/src/connectors/TrialBalanceSheet.connect.js @@ -6,12 +6,15 @@ import { getTrialBalanceSheetIndex, getTrialBalanceAccounts, getTrialBalanceQuery, + getFinancialSheetIndexByQuery, } from 'store/financialStatement/financialStatements.selectors'; export const mapStateToProps = (state, props) => ({ - getTrialBalanceSheetIndex: (query) => getTrialBalanceSheetIndex(state.financialStatements.trialBalanceSheets, query), - getTrialBalanceAccounts: (sheetIndex) => getTrialBalanceAccounts(state.financialStatements.trialBalanceSheets, sheetIndex), - getTrialBalanceQuery: (sheetIndex) => getTrialBalanceQuery(state.financialStatements.trialBalanceSheets, sheetIndex), + getTrialBalanceSheetIndex: (query) => getFinancialSheetIndexByQuery(state.financialStatements.trialBalance.sheets, query), + getTrialBalanceAccounts: (sheetIndex) => getTrialBalanceAccounts(state.financialStatements.trialBalance.sheets, sheetIndex), + getTrialBalanceQuery: (sheetIndex) => getTrialBalanceQuery(state.financialStatements.trialBalance.sheets, sheetIndex), + + trialBalanceSheetLoading: state.financialStatements.trialBalance.loading, }); export const mapDispatchToProps = (dispatch) => ({ diff --git a/client/src/containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheet.js b/client/src/containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheet.js index 970d8c235..01a408935 100644 --- a/client/src/containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheet.js +++ b/client/src/containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheet.js @@ -1,4 +1,4 @@ -import React, {useEffect, useMemo, useState} from 'react'; +import React, {useEffect, useMemo, useCallback, useState} from 'react'; import DashboardConnect from 'connectors/Dashboard.connector'; import {compose} from 'utils'; import useAsync from 'hooks/async'; @@ -30,39 +30,41 @@ function BalanceSheet({ const fetchHook = useAsync(async () => { await Promise.all([ - fetchBalanceSheet(filter), + fetchBalanceSheet({ + ...filter, + display_columns_type: 'total', + }), ]); setReload(false); }); - useEffect(() => { - if (!reload) { return; } - fetchHook.execute(); - }, [reload]); + // Handle fetch the data of balance sheet. + const handleFetchData = useCallback(() => { fetchHook.execute(); }, [fetchHook]); useEffect(() => { changePageTitle('Balance Sheet'); }, []); // Retrieve balance sheet index by the given filter query. - const balanceSheetIndex = useMemo(() => { - return getBalanceSheetIndexByQuery(filter); - }, [filter, balanceSheets]); + const balanceSheetIndex = useMemo(() => + getBalanceSheetIndexByQuery(filter), + [filter, getBalanceSheetIndexByQuery]); // Retreive balance sheet by the given sheet index. - const balanceSheet = useMemo(() => { - return getBalanceSheetByIndex(balanceSheetIndex); - }, [balanceSheetIndex, balanceSheets]); + const balanceSheet = useMemo(() => + getBalanceSheetByIndex(balanceSheetIndex), + [balanceSheetIndex, getBalanceSheetByIndex]); // Handle re-fetch balance sheet after filter change. - const handleFilterSubmit = (filter) => { + const handleFilterSubmit = useCallback((filter) => { setFilter({ ...filter, from_date: moment(filter.from_date).format('YYYY-MM-DD'), to_date: moment(filter.to_date).format('YYYY-MM-DD'), }); setReload(true); - }; + }, [setFilter]); + return (
+ balanceSheetIndex={balanceSheetIndex} + onFetchData={handleFetchData} + asDate={new Date()} />
diff --git a/client/src/containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheetHeader.js b/client/src/containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheetHeader.js index 595655f31..5f39a5aee 100644 --- a/client/src/containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheetHeader.js +++ b/client/src/containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheetHeader.js @@ -11,6 +11,7 @@ import { HTMLSelect, Intent, Popover, + Classes, } from "@blueprintjs/core"; import {Select} from '@blueprintjs/select'; import {DateInput} from '@blueprintjs/datetime'; @@ -21,6 +22,7 @@ import { parseDateRangeQuery, } from 'utils'; import moment from 'moment'; +import Icon from 'components/Icon'; export default function BalanceSheetHeader({ onSubmitFilter, @@ -111,12 +113,16 @@ export default function BalanceSheetHeader({ ); + + const infoIcon = useMemo(() => (), []); + return ( @@ -131,6 +137,7 @@ export default function BalanceSheetHeader({ @@ -146,6 +153,7 @@ export default function BalanceSheetHeader({ @@ -163,7 +171,8 @@ export default function BalanceSheetHeader({