feat(FinancialReports): add alert cost compute transactions is running.

This commit is contained in:
a.bouhuolia
2021-03-14 19:59:31 +02:00
parent e130441088
commit b30af0a255
17 changed files with 162 additions and 18 deletions

View File

@@ -66,6 +66,8 @@ const CLASSES = {
PREFERENCES_PAGE_INSIDE_CONTENT_CURRENCIES: 'preferences-page__inside-content--currencies',
PREFERENCES_PAGE_INSIDE_CONTENT_ACCOUNTANT: 'preferences-page__inside-content--accountant',
FINANCIAL_REPORT_INSIDER: 'dashboard__insider--financial-report',
...Classes,
CARD: 'card',
};

View File

@@ -1,6 +1,6 @@
export default [
{ path: 'invoices/new', name: 'Sale invoice' },
{ path: 'bill//new', name: 'Purchase invoice' },
{ path: 'bills//new', name: 'Purchase invoice' },
{ path: 'make-journal-entry', name: 'Manual journal' },
{ path: 'expenses/new', name: 'Expense' },
{ path: 'customers/new', name: 'Customer' },

View File

@@ -7,13 +7,14 @@ export default function DashboardInsider({
children,
name,
mount = false,
className,
}) {
return (
<div className={classnames({
'dashboard__insider': true,
'dashboard__insider--loading': loading,
[`dashboard__insider--${name}`]: !!name,
})}>
}, className)}>
<LoadingIndicator loading={loading} mount={mount}>
{ children }
</LoadingIndicator>

View File

@@ -162,11 +162,11 @@ export default [
href: '/financial-reports/profit-loss-sheet',
},
{
text: <T id={'receivable_a_r'} />,
text: <T id={'AR_Aging_Summary'} />,
href: '/financial-reports/receivable-aging-summary',
},
{
text: <T id={'payable_a_p'} />,
text: <T id={'AP_Aging_Summary'} />,
href: '/financial-reports/payable-aging-summary',
},
],

View File

@@ -1,7 +1,7 @@
import React, { useState, useCallback, useEffect } from 'react';
import moment from 'moment';
import 'style/pages/FinancialStatements/ARAgingSummary.scss';
import 'style/pages/FinancialStatements/APAgingSummary.scss';
import { FinancialStatement } from 'components';

View File

@@ -7,7 +7,7 @@ import BalanceSheetHeader from './BalanceSheetHeader';
import BalanceSheetTable from './BalanceSheetTable';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import BalanceSheetActionsBar from './BalanceSheetActionsBar';
import { BalanceSheetAlerts } from './components';
import { FinancialStatement } from 'components';
import withBalanceSheetActions from './withBalanceSheetActions';
@@ -63,6 +63,8 @@ function BalanceSheet({
numberFormat={filter.numberFormat}
onNumberFormatSubmit={handleNumberFormatSubmit}
/>
<BalanceSheetAlerts />
<DashboardPageContent>
<FinancialStatement>
<BalanceSheetHeader

View File

@@ -13,6 +13,9 @@ import withBalanceSheetActions from './withBalanceSheetActions';
import { compose } from 'utils';
import BalanceSheetHeaderGeneralPanal from './BalanceSheetHeaderGeneralPanal';
/**
* Balance sheet header.
*/
function BalanceSheetHeader({
// #ownProps
onSubmitFilter,

View File

@@ -1,5 +1,5 @@
import React, { createContext, useContext } from 'react';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import FinancialReportPage from '../FinancialReportPage';
import { useBalanceSheet } from 'hooks/query';
import { transformFilterFormToQuery } from '../common';
@@ -7,7 +7,9 @@ const BalanceSheetContext = createContext();
function BalanceSheetProvider({ filter, ...props }) {
// Transformes the given filter to query.
const query = React.useMemo(() => transformFilterFormToQuery(filter), [filter]);
const query = React.useMemo(() => transformFilterFormToQuery(filter), [
filter,
]);
// Fetches the balance sheet report.
const { data: balanceSheet, isFetching, refetch } = useBalanceSheet(query);
@@ -16,17 +18,19 @@ function BalanceSheetProvider({ filter, ...props }) {
balanceSheet,
isLoading: isFetching,
refetchBalanceSheet: refetch,
query,
filter,
};
return (
<DashboardInsider name={'balance-sheet'}>
<FinancialReportPage
name={'balance-sheet'}
>
<BalanceSheetContext.Provider value={provider} {...props} />
</DashboardInsider>
</FinancialReportPage>
);
}
const useBalanceSheetContext = () => useContext(BalanceSheetContext);
export { BalanceSheetProvider, useBalanceSheetContext };
export { BalanceSheetProvider, useBalanceSheetContext };

View File

@@ -0,0 +1,36 @@
import React from 'react';
import { Button } from '@blueprintjs/core';
import { Icon, If } from 'components';
import { useBalanceSheetContext } from './BalanceSheetProvider';
/**
* Balance sheet alerts.
*/
export function BalanceSheetAlerts() {
const {
isLoading,
refetchBalanceSheet,
balanceSheet,
} = useBalanceSheetContext();
// Handle recalculate the report button.
const handleRecalcReport = () => {
refetchBalanceSheet();
};
// Can't display any error if the report is loading.
if (isLoading) { return null; }
return (
<If condition={balanceSheet.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>
);
}

View File

@@ -15,7 +15,6 @@ import { Col, Row, ListSelect, MODIFIER } from 'components';
import { filterAccountsOptions } from './common';
export default function FinancialAccountsFilter({ ...restProps }) {
const SUBMENU_POPOVER_MODIFIERS = {
flip: { boundariesElement: 'viewport', padding: 20 },

View File

@@ -0,0 +1,18 @@
import React from 'react';
import classNames from 'classnames';
import { DashboardInsider } from 'components';
import { CLASSES } from 'common/classes';
import 'style/pages/FinancialStatements/FinancialReportPage.scss';
/**
* Financial report page.
*/
export default function FinancialReportPage(props) {
return (
<DashboardInsider
{...props}
className={classNames(CLASSES.FINANCIAL_REPORT_INSIDER, props.className)}
/>
);
}

View File

@@ -466,7 +466,8 @@ export default {
name_: 'name',
as: 'As',
receivable_aging_summary: 'Receivable Aging Summary',
receivable_a_r: 'Receivable A/R',
AR_Aging_Summary: 'A/R Aging Summary',
AP_Aging_Summary: 'A/P Aging Summary',
customers: 'Customers',
new_customers: 'New Customers',
customer_type_: 'Customer type',

View File

@@ -337,6 +337,12 @@ export default {
],
viewBox: '0 0 24 24',
},
'info-block': {
path: [
'M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM7 3h2v2H7V3zm3 10H6v-1h1V7H6V6h3v6h1v1z',
],
viewBox: '0 0 16 16',
},
currency: {
path: [
'M10.9571,13.44a6.9356,6.9356,0,0,0,0-9.2751,4.8008,4.8008,0,1,1,0,9.2751Zm-5.156.1632a4.8008,4.8008,0,1,1,4.8008-4.8008A4.8008,4.8008,0,0,1,5.8011,13.603Z',

View File

@@ -60,7 +60,7 @@
font-size: 15px;
&:not([class*="bp3-intent-"]):not(.bp3-minimal) {
color: rgba(255, 255, 255, 0.85);
color: rgba(255, 255, 255, 0.9);
}
&:hover,
&:focus,

View File

@@ -0,0 +1,39 @@
.financial-sheet{
&--payable-aging-summary{
.financial-sheet__table{
.bigcapital-datatable{
.tbody,
.thead{
.tr .td.customer_name ~ .td,
.tr .th.customer_name ~ .th{
text-align: right;
}
}
.tbody{
.tr:not(.no-results) {
.td{
border-bottom: 0;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
&:not(:first-child) .td{
border-top: 1px solid transparent;
}
&.row-type--total{
font-weight: 500;
.td{
border-top: 1px solid #333;
border-bottom: 3px double #333;
}
}
}
}
}
}
}
}

View File

@@ -19,6 +19,9 @@
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
&:not(:first-child) .td{
border-top: 1px solid transparent;
}
&.row-type--total{
font-weight: 500;
@@ -27,9 +30,7 @@
border-bottom: 3px double #333;
}
}
&:not(:first-child) .td{
border-top: 1px solid transparent;
}
}
}
}

View File

@@ -0,0 +1,32 @@
.dashboard__insider--financial-report{
.alert-compute-running{
position: relative;
padding: 8px 20px;
border-radius: 2px;
background-color: #fdecda;
color: #342515;
font-size: 12px;
button{
font-size: 12px;
min-height: 16px;
padding: 0 4px;
&,
&:hover{
color: #824400;
text-decoration: underline;
}
}
svg{
margin-right: 6px;
position: relative;
top: -2px;
fill: #975f19;
}
}
}