From 1b0ffb5574f66425a3ae8a806130d6cf5d3ccf36 Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Sat, 12 Feb 2022 20:31:14 +0200 Subject: [PATCH] refactor(CustomerTransaction). --- .../BalanceSheet/BalanceSheetTable.js | 2 +- .../CustomersTransactionsTable.js | 67 +++++++++-- .../CustomersTransactions/components.js | 6 +- .../VendorsTransactionsTable.js | 53 ++++++++- .../FinancialStatements/ARAgingSummary.scss | 30 ----- .../ContactsTransactions.scss | 108 ------------------ 6 files changed, 114 insertions(+), 152 deletions(-) delete mode 100644 src/style/pages/FinancialStatements/ARAgingSummary.scss delete mode 100644 src/style/pages/FinancialStatements/ContactsTransactions.scss diff --git a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js index 56118a26e..0b335dedc 100644 --- a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js +++ b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js @@ -28,7 +28,7 @@ export default function BalanceSheetTable({ // Retrieve default expanded rows of balance sheet. const expandedRows = React.useMemo( - () => defaultExpanderReducer(table?.rows || [], 3), + () => defaultExpanderReducer(table.rows, 3), [table], ); diff --git a/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js b/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js index 122b921f9..be8143f0f 100644 --- a/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js +++ b/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js @@ -1,12 +1,14 @@ import React, { useMemo } from 'react'; import intl from 'react-intl-universal'; +import styled from 'styled-components'; import { DataTable, FinancialSheet } from 'components'; import { useCustomersTransactionsColumns } from './components'; import { useCustomersTransactionsContext } from './CustomersTransactionsProvider'; -import { defaultExpanderReducer } from 'utils'; +import { defaultExpanderReducer, tableRowTypesToClassnames } from 'utils'; +import { TableStyle } from 'common'; /** * Customers transactions table. @@ -18,7 +20,6 @@ export default function CustomersTransactionsTable({ // Customers transactions context. const { customersTransactions: { tableRows }, - isCustomersTransactionsLoading, query, } = useCustomersTransactionsContext(); @@ -30,30 +31,74 @@ export default function CustomersTransactionsTable({ [tableRows], ); - const rowClassNames = (row) => { - return [`row-type--${row.original.row_types}`]; - }; - return ( - ); } + +const CustomersTransactionsDataTable = styled(DataTable)` + .table { + .tbody { + .tr .td { + padding-top: 0.2rem; + padding-bottom: 0.2rem; + } + .tr:not(.no-results) .td { + border-left: 1px solid #ececec; + } + .tr:last-child .td { + border-bottom: 1px solid #e0e0e0; + } + + .tr.row_type { + &--CUSTOMER { + .td { + &.customer_name { + font-weight: 500; + } + } + &:not(:first-child).is-expanded .td { + border-top: 1px solid #ddd; + } + } + &--OPENING_BALANCE, + &--CLOSING_BALANCE { + font-weight: 500; + } + &--CUSTOMER { + &.is-expanded { + .td.running_balance .cell-inner { + display: none; + } + } + &:not(:first-child).is-expanded .td { + border-top: 1px solid #ddd; + } + } + &--CUSTOMER:last-child { + .td { + border-bottom: 1px solid #ddd; + } + } + } + } + } +`; diff --git a/src/containers/FinancialStatements/CustomersTransactions/components.js b/src/containers/FinancialStatements/CustomersTransactions/components.js index 938e7b019..9b7ec89ee 100644 --- a/src/containers/FinancialStatements/CustomersTransactions/components.js +++ b/src/containers/FinancialStatements/CustomersTransactions/components.js @@ -5,6 +5,8 @@ import { useCustomersTransactionsContext } from './CustomersTransactionsProvider import FinancialLoadingBar from '../FinancialLoadingBar'; import { getForceWidth, getColumnWidth } from 'utils'; +import { Align } from 'common'; + /** * Retrieve customers transactions columns. */ @@ -29,7 +31,6 @@ export const useCustomersTransactionsColumns = () => { ); }, className: 'customer_name', - // textOverview: true, }, { Header: intl.get('account_name'), @@ -59,6 +60,7 @@ export const useCustomersTransactionsColumns = () => { minWidth: 100, magicSpacing: 10, }), + align: Align.Right, }, { Header: intl.get('debit'), @@ -69,6 +71,7 @@ export const useCustomersTransactionsColumns = () => { minWidth: 100, magicSpacing: 10, }), + align: Align.Right, }, { Header: intl.get('running_balance'), @@ -79,6 +82,7 @@ export const useCustomersTransactionsColumns = () => { minWidth: 120, magicSpacing: 10, }), + align: Align.Right, }, ], [tableRows], diff --git a/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js b/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js index 737861626..a05faffb0 100644 --- a/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js +++ b/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js @@ -1,5 +1,6 @@ import React, { useMemo } from 'react'; import intl from 'react-intl-universal'; +import styled from 'styled-components'; import { DataTable, FinancialSheet } from 'components'; @@ -40,8 +41,9 @@ export default function VendorsTransactionsTable({ loading={isVendorsTransactionsLoading} fromDate={query.from_date} toDate={query.to_date} + fullWidth={true} > - ); } + +const VendorsTransactionsDataTable = styled(DataTable)` + .table { + .tbody { + .tr .td { + padding-top: 0.2rem; + padding-bottom: 0.2rem; + } + .tr:not(.no-results) .td { + border-left: 1px solid #ececec; + } + .tr:last-child .td { + border-bottom: 1px solid #e0e0e0; + } + + .tr.row_type { + &--VENDOR { + .td { + &.vendor_name { + font-weight: 500; + } + } + &:not(:first-child).is-expanded .td { + border-top: 1px solid #ddd; + } + } + &--OPENING_BALANCE, + &--CLOSING_BALANCE { + font-weight: 500; + } + &--VENDOR { + &.is-expanded { + .td.running_balance .cell-inner { + display: none; + } + } + &:not(:first-child).is-expanded .td { + border-top: 1px solid #ddd; + } + } + &--VENDOR:last-child { + .td { + border-bottom: 1px solid #ddd; + } + } + } + } + } +`; diff --git a/src/style/pages/FinancialStatements/ARAgingSummary.scss b/src/style/pages/FinancialStatements/ARAgingSummary.scss deleted file mode 100644 index 2199f87b2..000000000 --- a/src/style/pages/FinancialStatements/ARAgingSummary.scss +++ /dev/null @@ -1,30 +0,0 @@ - -.financial-sheet{ - &--receivable-aging-summary{ - - .financial-sheet__table{ - - .bigcapital-datatable{ - .tbody, - .thead{ - .tr .td.customer_name ~ .td, - .tr .th.customer_name ~ .th{ - text-align: right; - } - } - .tbody{ - - } - } - } - } -} - -.financial-statement--AR-aging-summary{ - - .financial-header-drawer{ - .bp3-drawer{ - max-height: 550px; - } - } -} \ No newline at end of file diff --git a/src/style/pages/FinancialStatements/ContactsTransactions.scss b/src/style/pages/FinancialStatements/ContactsTransactions.scss deleted file mode 100644 index 7b9bd32e0..000000000 --- a/src/style/pages/FinancialStatements/ContactsTransactions.scss +++ /dev/null @@ -1,108 +0,0 @@ -.financial-sheet { - - &--customer-transactions, - &--vendor-transactions { - width: 100%; - - .financial-sheet__table { - - .tbody, - .thead { - - .tr .td, - .tr .th { - - &.credit, - &.debit, - &.running_balance { - text-align: right; - } - } - } - - .tbody { - .tr .td { - padding-top: 0.2rem; - padding-bottom: 0.2rem; - border-top-color: transparent; - border-bottom-color: transparent; - - &.customer_name, - &.vendor_name { - >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 #e0e0e0; - } - - .tr.row-type { - - &--CUSTOMER, - &--VENDOR { - .td { - - &.customer_name, - &.vendor_name { - font-weight: 500; - } - - &.name { - // border-left-color: transparent; - } - } - - &:not(:first-child).is-expanded .td { - border-top: 1px solid #ddd; - } - } - - &--OPENING_BALANCE, - // &--TRANSACTION, - &--CLOSING_BALANCE { - font-weight: 500; - } - - &--CUSTOMER, - &--VENDOR { - &.is-expanded { - .td.running_balance .cell-inner { - display: none; - } - } - - &:not(:first-child).is-expanded .td { - border-top: 1px solid #ddd; - } - } - - &--CUSTOMER:last-child, - &--VENDOR:last-child { - .td { - border-bottom: 1px solid #ddd; - } - } - } - } - } - } -} - -.financial-statement--transactions { - .financial-header-drawer { - .bp3-drawer { - max-height: 450px; - } - } -} \ No newline at end of file