feat: Optimize SCSS architecture.

This commit is contained in:
a.bouhuolia
2021-01-17 12:17:15 +02:00
parent a747750d88
commit 09db5df686
154 changed files with 2814 additions and 2772 deletions

View File

@@ -19,6 +19,8 @@ import withARAgingSummary from './withARAgingSummary';
import { compose } from 'utils';
import { transfromFilterFormToQuery } from './common';
import 'style/pages/FinancialStatements/ARAgingSummary.scss';
/**
* AR aging summary report.
*/

View File

@@ -5,7 +5,7 @@ import FinancialSheet from 'components/FinancialSheet';
import withARAgingSummary from './withARAgingSummary';
import { compose } from 'utils';
import { compose, getColumnWidth } from 'utils';
/**
* AR aging summary table sheet.
@@ -37,28 +37,34 @@ function ReceivableAgingSummaryTable({
accessor: 'name',
className: 'customer_name',
sticky: 'left',
width: 200,
width: 240,
},
{
Header: <T id={'current'} />,
accessor: 'current',
className: 'current',
width: 120,
width: getColumnWidth(receivableAgingRows, `current`, {
minWidth: 120,
}),
},
...agingColumns.map((agingColumn, index) => ({
Header: agingColumn,
accessor: `aging-${index }`,
width: 120,
width: getColumnWidth(receivableAgingRows, `aging-${index }`, {
minWidth: 120,
}),
})),
{
Header: (<T id={'total'} />),
id: 'total',
accessor: 'total',
className: 'total',
width: 140,
width: getColumnWidth(receivableAgingRows, 'total', {
minWidth: 120,
}),
},
],
[agingColumns],
[receivableAgingRows, agingColumns],
);
const rowClassNames = (row) => [`row-type--${row.original.rowType}`];

View File

@@ -21,6 +21,8 @@ import withBalanceSheetDetail from './withBalanceSheetDetail';
import { transformFilterFormToQuery } from 'containers/FinancialStatements/common';
import 'style/pages/FinancialStatements/BalanceSheet.scss';
function BalanceSheet({
// #withDashboardActions
changePageTitle,

View File

@@ -1,4 +1,4 @@
import React, { useEffect } from 'react';
import React from 'react';
import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import moment from 'moment';

View File

@@ -9,6 +9,8 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import { compose } from 'utils';
import 'style/pages/FinancialStatements/FinancialSheets.scss';
function FinancialReportsItem({ title, desc, link }) {
return (
<div class="financial-reports__item">

View File

@@ -1,6 +1,7 @@
import React, { useEffect, useState } from 'react';
import classNames from 'classnames';
import { Position, Drawer } from '@blueprintjs/core';
import 'style/containers/FinancialStatements/DrawerHeader.scss';
export default function FinancialStatementHeader({
children,

View File

@@ -21,6 +21,8 @@ import { compose } from 'utils';
import { transformFilterFormToQuery } from 'containers/FinancialStatements/common';
import withGeneralLedger from './withGeneralLedger';
import 'style/pages/FinancialStatements/GeneralLedger.scss';
/**
* General Ledger (GL) sheet.
*/

View File

@@ -19,6 +19,8 @@ import withJournal from './withJournal';
import { transformFilterFormToQuery } from 'containers/FinancialStatements/common';
import 'style/pages/FinancialStatements/Journal.scss';
function Journal({
// #withJournalActions
requestFetchJournalSheet,

View File

@@ -45,7 +45,7 @@ function JournalSheetTable({
Header: formatMessage({ id: 'transaction_type' }),
accessor: (r) =>
rowTypeFilter(r.rowType, r.transaction_type, ['first_entry']),
className: 'transaction_type',
className: 'reference_type_formatted',
width: 145,
},
{

View File

@@ -19,6 +19,11 @@ import withSettings from 'containers/Settings/withSettings';
import { transformFilterFormToQuery } from 'containers/FinancialStatements/common';
import 'style/pages/FinancialStatements/ProfitLossSheet.scss';
/**
* Profit/Loss financial statement sheet.
*/
function ProfitLossSheet({
// #withDashboardActions
changePageTitle,

View File

@@ -18,6 +18,8 @@ import withTrialBalanceActions from './withTrialBalanceActions';
import withSettings from 'containers/Settings/withSettings';
import withTrialBalance from './withTrialBalance';
import 'style/pages/FinancialStatements/TrialBalanceSheet.scss';
/**
* Trial balance sheet.
*/

View File

@@ -7,11 +7,11 @@ import Money from 'components/Money';
import withTrialBalance from './withTrialBalance';
import { compose } from 'utils';
import { compose, getColumnWidth } from 'utils';
function TrialBalanceSheetTable({
// #withTrialBalanceDetail
trialBalance,
trialBalanceTableRows,
trialBalanceSheetLoading,
// #withTrialBalanceTable
@@ -27,44 +27,57 @@ function TrialBalanceSheetTable({
Header: formatMessage({ id: 'account_name' }),
accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name),
className: 'name',
minWidth: 150,
maxWidth: 150,
width: 150,
width: 160,
},
{
Header: formatMessage({ id: 'credit' }),
accessor: 'credit',
Cell: ({ cell }) => {
const { currency_code, credit } = cell.row.original;
return (<Money amount={credit} currency={currency_code} />);
return <Money amount={credit} currency={currency_code} />;
},
className: 'credit',
width: 95,
width: getColumnWidth(trialBalanceTableRows, `credit`, {
minWidth: 95,
}),
},
{
Header: formatMessage({ id: 'debit' }),
accessor: 'debit',
Cell: ({ cell }) => {
const { currency_code, debit } = cell.row.original;
return (<Money amount={debit} currency={currency_code} />);
return <Money amount={debit} currency={currency_code} />;
},
className: 'debit',
width: 95,
width: getColumnWidth(trialBalanceTableRows, `debit`, { minWidth: 95 }),
},
{
Header: formatMessage({ id: 'balance' }),
accessor: 'balance',
Cell: ({ cell }) => {
const { currency_code, balance } = cell.row.original;
return (<Money amount={balance} currency={currency_code} />);
return <Money amount={balance} currency={currency_code} />;
},
className: 'balance',
width: 95,
width: getColumnWidth(trialBalanceTableRows, `balance`, {
minWidth: 95,
}),
},
],
[formatMessage],
[trialBalanceTableRows, formatMessage],
);
const rowClassNames = (row) => {
const { original } = row;
const rowTypes = Array.isArray(original.rowTypes) ? original.rowTypes : [];
return {
...rowTypes.reduce((acc, rowType) => {
acc[`row_type--${rowType}`] = rowType;
return acc;
}, {}),
};
};
return (
<FinancialSheet
companyName={companyName}
@@ -78,24 +91,27 @@ function TrialBalanceSheetTable({
<DataTable
className="bigcapital-datatable--financial-report"
columns={columns}
data={trialBalance.data}
data={trialBalanceTableRows}
expandable={true}
expandToggleColumn={1}
expandColumnSpace={1}
sticky={true}
rowClassNames={rowClassNames}
/>
</FinancialSheet>
);
}
export default compose(
withTrialBalance(({
trialBalance,
trialBalanceSheetLoading,
trialBalanceQuery
}) => ({
trialBalance,
trialBalanceSheetLoading,
trialBalanceQuery
})),
withTrialBalance(
({
trialBalanceTableRows,
trialBalanceSheetLoading,
trialBalanceQuery,
}) => ({
trialBalanceTableRows,
trialBalanceSheetLoading,
trialBalanceQuery,
}),
),
)(TrialBalanceSheetTable);

View File

@@ -2,16 +2,19 @@ import {connect} from 'react-redux';
import {
getFinancialSheetFactory,
getFinancialSheetQueryFactory,
getFinancialSheetTableRowsFactory,
} from 'store/financialStatement/financialStatements.selectors';
export default (mapState) => {
const mapStateToProps = (state, props) => {
const getTrialBalance = getFinancialSheetFactory('trialBalance');
const getBalanceSheetQuery = getFinancialSheetQueryFactory('trialBalance');
const getTrialBalanceRows = getFinancialSheetTableRowsFactory('trialBalance');
const mapped = {
trialBalance: getTrialBalance(state, props),
trialBalanceQuery: getBalanceSheetQuery(state, props),
trialBalanceTableRows: getTrialBalanceRows(state, props),
trialBalanceSheetLoading: state.financialStatements.trialBalance.loading,
trialBalanceSheetFilter: state.financialStatements.trialBalance.filter,
trialBalanceSheetRefresh: state.financialStatements.trialBalance.refresh,