From 2f0322b4fc0b2644863e282affaf8d24c5de3fff Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Sat, 12 Feb 2022 13:17:38 +0200 Subject: [PATCH] refactor(GeneralLedger) --- .../GeneralLedger/GeneralLedger.js | 3 - .../GeneralLedger/GeneralLedgerTable.js | 79 +++++++++++++--- .../GeneralLedger/components.js | 20 ++-- .../FinancialStatements/reducers.js | 6 +- .../FinancialStatements/GeneralLedger.scss | 93 ------------------- .../TrialBalanceSheet.scss | 32 ------- 6 files changed, 77 insertions(+), 156 deletions(-) delete mode 100644 src/style/pages/FinancialStatements/GeneralLedger.scss delete mode 100644 src/style/pages/FinancialStatements/TrialBalanceSheet.scss diff --git a/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js b/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js index ee2a9709c..d3cb35169 100644 --- a/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js +++ b/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js @@ -25,9 +25,6 @@ import { getDefaultGeneralLedgerQuery } from './common'; function GeneralLedger({ // #withGeneralLedgerActions toggleGeneralLedgerFilterDrawer, - - // #withSettings - organizationName, }) { const [filter, setFilter] = useState({ ...getDefaultGeneralLedgerQuery(), diff --git a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js index dc6c4b413..4b6eed676 100644 --- a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js +++ b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js @@ -1,10 +1,10 @@ import React, { useMemo } from 'react'; - -import { defaultExpanderReducer } from 'utils'; import intl from 'react-intl-universal'; +import styled from 'styled-components'; -import { FinancialSheet } from 'components'; -import DataTable from 'components/DataTable'; +import { defaultExpanderReducer, tableRowTypesToClassnames } from 'utils'; + +import { FinancialSheet, DataTable } from 'components'; import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows'; import TableFastCell from 'components/Datatable/TableFastCell'; @@ -27,11 +27,10 @@ export default function GeneralLedgerTable({ companyName }) { const columns = useGeneralLedgerTableColumns(); // Default expanded rows of general ledger table. - const expandedRows = useMemo(() => defaultExpanderReducer(tableRows, 1), [ - tableRows, - ]); - - const rowClassNames = (row) => [`row-type--${row.original.rowType}`]; + const expandedRows = useMemo( + () => defaultExpanderReducer(tableRows, 1), + [tableRows], + ); return ( - ); } + +const GeneralLedgerDataTable = styled(DataTable)` + .tbody { + .tr .td { + padding-top: 0.2rem; + padding-bottom: 0.2rem; + } + .tr.is-expanded { + .td:not(.date) .cell-inner { + opacity: 0; + } + } + + .tr:not(.no-results) .td { + border-left: 1px solid #ececec; + } + .tr:last-child .td { + border-bottom: 1px solid #ececec; + } + + .tr.row_type { + &--ACCOUNT_ROW { + .td { + &.date { + font-weight: 500; + } + + &.name { + border-left-color: transparent; + } + } + + &:not(:first-child).is-expanded .td { + border-top: 1px solid #ddd; + } + } + + &--OPENING_BALANCE, + &--CLOSING_BALANCE { + .amount { + font-weight: 500; + } + } + + &--CLOSING_BALANCE { + .name { + font-weight: 500; + } + } + } + } +`; diff --git a/src/containers/FinancialStatements/GeneralLedger/components.js b/src/containers/FinancialStatements/GeneralLedger/components.js index ee60301f0..45f4e6e88 100644 --- a/src/containers/FinancialStatements/GeneralLedger/components.js +++ b/src/containers/FinancialStatements/GeneralLedger/components.js @@ -2,12 +2,14 @@ import React from 'react'; import intl from 'react-intl-universal'; import { Button } from '@blueprintjs/core'; import { Icon, If } from 'components'; -import { FormattedMessage as T } from 'components'; +import { ForceWidth, FormattedMessage as T } from 'components'; -import { getForceWidth, getColumnWidth } from 'utils'; +import { getColumnWidth } from 'utils'; import { useGeneralLedgerContext } from './GeneralLedgerProvider'; import FinancialLoadingBar from '../FinancialLoadingBar'; +import { Align } from 'common'; + /** * Retrieve the general ledger table columns. */ @@ -23,19 +25,11 @@ export function useGeneralLedgerTableColumns() { Header: intl.get('date'), accessor: (row) => { if (row.rowType === 'ACCOUNT_ROW') { - return ( - - {row.date} - - ); + return ; } return row.date; }, className: 'date', - // textOverview: true, width: 120, }, { @@ -73,6 +67,7 @@ export function useGeneralLedgerTableColumns() { magicSpacing: 10, }), textOverview: true, + align: Align.Right, }, { Header: intl.get('debit'), @@ -83,6 +78,7 @@ export function useGeneralLedgerTableColumns() { magicSpacing: 10, }), textOverview: true, + align: Align.Right, }, { Header: intl.get('amount'), @@ -93,6 +89,7 @@ export function useGeneralLedgerTableColumns() { magicSpacing: 10, }), textOverview: true, + align: Align.Right, }, { Header: intl.get('running_balance'), @@ -103,6 +100,7 @@ export function useGeneralLedgerTableColumns() { magicSpacing: 10, }), textOverview: true, + align: Align.Right, }, ], [tableRows], diff --git a/src/containers/FinancialStatements/reducers.js b/src/containers/FinancialStatements/reducers.js index 14a421a37..7196cb8dc 100644 --- a/src/containers/FinancialStatements/reducers.js +++ b/src/containers/FinancialStatements/reducers.js @@ -73,13 +73,13 @@ export const generalLedgerTableRowsReducer = (accounts) => { return { name: '', code: account.code, - rowType: 'ACCOUNT_ROW', + row_types: 'ACCOUNT_ROW', date: account.name, children: [ { ...account.opening_balance, name: , - rowType: 'OPENING_BALANCE', + row_types: 'OPENING_BALANCE', date: moment(account.opening_balance.date).format('DD MMM YYYY'), }, ...account.transactions.map((transaction) => ({ @@ -91,7 +91,7 @@ export const generalLedgerTableRowsReducer = (accounts) => { { ...account.closing_balance, name: , - rowType: 'CLOSING_BALANCE', + row_types: 'CLOSING_BALANCE', date: moment(account.closing_balance.date).format('DD MMM YYYY'), }, ], diff --git a/src/style/pages/FinancialStatements/GeneralLedger.scss b/src/style/pages/FinancialStatements/GeneralLedger.scss deleted file mode 100644 index c5f499aa0..000000000 --- a/src/style/pages/FinancialStatements/GeneralLedger.scss +++ /dev/null @@ -1,93 +0,0 @@ -.financial-sheet { - &--general-ledger { - .financial-sheet__table { - - .tbody, - .thead { - - .tr .td, - .tr .th { - - &.credit, - &.debit, - &.running_balance, - &.amount { - text-align: right; - } - } - } - - .tbody { - .tr .td { - padding-top: 0.2rem; - padding-bottom: 0.2rem; - border-top-color: transparent; - border-bottom-color: transparent; - - &.date { - >div { - display: flex; - } - - span.force-width { - position: relative; - } - } - } - - .tr:not(.no-results) .td { - border-left: 1px solid #ececec; - } - - .tr:last-child .td { - border-bottom: 1px solid #ececec; - } - - .tr { - &.is-expanded { - - .td.amount { - - .cell-inner { - display: none - } - } - } - } - - .tr.row-type { - - - &--ACCOUNT_ROW { - .td { - &.date { - font-weight: 500; - } - - &.name { - border-left-color: transparent; - } - } - - &:not(:first-child).is-expanded .td { - border-top: 1px solid #DDD; - } - } - - &--OPENING_BALANCE, - &--CLOSING_BALANCE { - .amount { - font-weight: 500; - } - } - - &--CLOSING_BALANCE { - .name { - font-weight: 500; - } - } - } - } - } - } -} \ No newline at end of file diff --git a/src/style/pages/FinancialStatements/TrialBalanceSheet.scss b/src/style/pages/FinancialStatements/TrialBalanceSheet.scss deleted file mode 100644 index 2eff7447d..000000000 --- a/src/style/pages/FinancialStatements/TrialBalanceSheet.scss +++ /dev/null @@ -1,32 +0,0 @@ - -.financial-sheet{ - - &--trial-balance{ - min-width: 720px; - - .financial-sheet__table{ - .thead, - .tbody{ - .tr .td:not(:first-child), - .tr .th:not(:first-child) { - text-align: right; - } - } - .tbody{ - .tr .td{ - border-bottom: 0; - padding-top: 0.4rem; - padding-bottom: 0.4rem; - } - .balance.td{ - border-top-color: #000; - } - .tr.row_type--total .td{ - border-top: 1px solid #bbb; - font-weight: 500; - border-bottom: 3px double #000; - } - } - } - } -} \ No newline at end of file